For this post I want to focus on a sketch I did over coffee one morning at Panera in Ft. Lauderdale while my husband attended a conference for ForeverLawn dealers. I decided just minutes before this sketch that I wanted to construct a website for his business as the final product for my classes this semester. First, the sketch:
Not pretty, I know. But later, as I added a little more pen strokes and explained to the hubby what exactly I had in mind, this little sketch worked wonders.
His company sells and installs synthetic grass for a number of purposes. Not only does it help the environment by reducing water, fertilizer, pesticide, and maintenance needs, it is visually appealing all year long. To be honest, this visual appeal is what sells the various product. It just looks nice. That is why my proposed homepage will feature five prominent pictures from area installations. The first photo in the slideshow will include a welcome blurb about the site, and subsequent photos will feature quotes from pleased customers. Like the page deconstructed below, each of the slideshow photos will be featured as thumbnails below the large photo for easy navigation.
At the top of the page will be our company logo, tag line, and search box, for a clean, airy appearance, and to balance out the photo-heavy layout just below.
I thought that I would feature a navigation bar just under the logo, but changed by mind after reading a page (noted on the bottom of the sketch) from Don’t Make Me Think by Steve Krug. I decided to put the navigation categories on the left side of the page near the large photo, with each category’s options clearly listed. I will save the navigation bar with rollover dropdowns for a consistent and unifying navigation feature on all the inside pages. Main categories will include “About Us”, “Our Products”, “Photo Gallery”, “Media”, and “Contact Us”, with varying options from calling our office for estimates to an online form for us to call the customer.
Below the photos but above the fold I will give a utilities menu with option to links that are important, but not as important as everything else above it.
I know the first stage in creating a usable, recognizable, and efficient website is the planning. As I head into the wireframing process, I think that sketching was an important first step. It helped my organize my thoughts and gave me a perfect unassuming forum for discussing my ideas with the owner of the company.
Based on another of Krug’s suggestions, I dated the sketch so that I can track where the page started, where it’s going, and how it evolved throughout the process.
What do you think?