Sit Pretty

All right, I started off last time by yelling how much I love fonts. So if I yell how much I love color now, it will probably lose it’s effect. Suffice it to say, I am now a font fanatic and a color connoisseur.

As I am starting to see my website develop (still mostly in my mind, mind you), I am getting a good feeling for the messages I want to convey, both directly and indirectly. It’s all about perception. It’s all about mood. It’s all about the grass, people!

Again, as with a few on the font considerations, I am constrained a little by the company’s existing logos and such. Remember the logo:

 

While the corporate site is dominated by business blues, I want to up the green factor on the site. Once again, it is all the selling synthetic grass. The two greens will increase the natural feel, while the blues will lend stability and serenity to the site, where we will be asking client to trust us and our brand. By adjusting the tints, shades, and tones of the color palette, I can emphasis and suggest without overwhelming, especially since the site will be dominated by large photos with plenty of green grass, lush landscaping, blue skies, and green-blue water of Tampa Bay.

While the photos will bring splashes of color to the layout, I am tempted to use a red accent color that is slipping into the national site as the corporate office continues to partner with DuPont for the DuPont ForeverLawn Select Synthetic Grass. The red used sparingly will help to highlight pages and make certain images/sections pop.

Looking at these colors together, I am convinced we will have a very attractive, and user approachable site.

Turn Around

The focus of this post is going to be font choice, specifically what I have in mind for my final project in class. First, I need to get one thing out of my system…

I LOVE FONTS!!!

Thanks. Is that a sickness? I should maybe explore that a little more.

I have some interesting challenges with the fonts on the website I will be creating, but I also have a good amount of creative freedom, within those parameters. I am creating a site for an independent dealer, who’s company is part of a larger national corporate office. The biggest constraint is having a corporate logo that already have a set font within it for the overall company name.

ForeverLawn is the national presence. I will be creating the site for ForeverLawn of Tampa Bay. I do like the font chosen for the logo, I just can’t mess with it and need to find other fonts that compliment it. It is a serif font (close to Microsoft Himalaya, but just not quite) and looks good with a sans serif for subheads, like the corporate slogan.

The body type I can work with, including the corporate slogan, which does not have a set font requirement. Here is how it appears on the corporate site:

I don’t mind this font, but most of the body text fonts are light, thin Verdana. Verdana, while it is a common font for websites, does not have enough character for me when combined with other lower weight, but bigger sized fonts. I would rather use something closer to Georgia with added space between lines. I would like a font that conveys trustworthiness and professionalism, without too much seriousness. I’d like to go for a lighter feel in text, including eliminating wordiness that the owner tends towards.

In addition to thinking about the fonts, as I’m trying to develop a big picture, I already know that I want to use white background to increase contrast for readability, and use a trustworthy blue color with green accents (it is all about the grass, after all), including changes in font colors.

I’m getting more eager to start this final project the more I learn and the more I think about.

Fetch

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?

Come Here

Deconstructing The Home Depot is actually a little ironic as they are the people who build things. But I love the Depot and want to take a closer look at a website that has both sucked me in and frustrated me over the past few years. Here are 15 observations from the current site:

1. Obviously, visitors to this site are most likely looking for a product for their homes, so delivery method is important, but I think it might be better closer to the cart button and it would free up that space at the top for another feature. In combination with the utilities bar at the top and excessive white space, it’s just clutter.

2. The logo and familiar tag line have the extra white space around them to emphasize them, but I think that white space is less of a design function and more of underutilized prime real estate on the site. I’m not talking about cluttering things up, just emphasizing something else a little more.

3. The utility options bar at the top is useful for users and doesn’t scream out, which makes it fit well for it’s intended purpose.

4. I like that The Home Depot includes and personalized and local section for users. It makes the users feel that the company cares for them by focusing on what is most accessible for them.

5. Because users will have a good idea of what they are looking for, the search prominently placed in the center of the top of the page is appropriate and useful. There is no mistaking what the purpose of that bar is, and more savvy users will be able to refine their searches by utilizing the drop-down that as a default says “SEARCH ALL”.

6. I really like the versatility of the dominant photo slideshow. Not only does it feature specific products or product lines, it gives the option of shopping for those specific products right away by clicking a “SHOP NOW” button. (8)

7. In addition to featuring product and giving immediate access to the product pages, the main photo contains an inset that demonstrates what users can do with the products. As a company that prides itself on helping its customers with their projects, this is a great addition. It also increases sales of those featured products by showing them in action and building confidence in users who may not have come to the site looking specifically for paint or other featured items.

9. With so many product available through HomeDepot.com, looking for specific ones is a daunting task — not to mention providing clear options and categories on a website. The many categories are clear and have specific options by rolling over each category. The downside to so many items is each itemized category takes over the entire page.

10. The thumbnails of the slideshow make it easy to jump ahead or go back to each feature. I like this arrangement and am planning on something similar for the page I intend to build this spring. It’s clean, neat, and accessible. I think it might be helped by small descriptions underneath instead of categories. For instance, “Appliance Sale” instead of just “Appliances” and “Getting inspired by stunning colors” instead of “Paint”.

11. Another plug for in-store pick-up is here just at the fold. It’s emphasizes that if a user needs the product immediately, they can buy online and go to the nearest store for pick-up. Might be pretty important for some users.

12. A clickable ad for last-chance sale items balances out a wide divider between featured items above the fold and featured items below the fold. I like this method for the change of pace opportunity. It give a great stopping point for browsers (people, not internet facilitators) and nice delineation for serious shoppers.

13. The “Most Popular Products” section below gives users a chance to see what’s “trending”. I’m not sure if it updates daily or more or less often, but a great feature for Depot junkies like me. The thumbnails make it easy to scan without having to take time to read each individually, and larger font for pricing and starred reviews scale keep it brief, simple, and honest.

14. A line of featured current season products is visually appealing for those shoppers that are still on the homepage at this point and looking for a specific category.

15. Another line of features coming season products serves the same purpose as 14, except for those planners and shoppers that are looking ahead. Deep on the site to show it’s not as important right now, but taking an interest in devoted customers still shopping at the homepage. (I must admit, I’ve probably moved somewhere else in the site, but might make it back and down here after looking elsewhere in the site.)

Watch Me

As we delve into the depths of internet history — okay, maybe it’s not all that deep — it becomes clear exactly how much has changed in such a relatively short time. It’s more than I expected, probably because the changes have been so gradual. My husband has set his homepage to MSN for as long as I can remember, so every time we log onto his computer we get a little bit of everything MSN has to offer. I remember all of the looks below.

November 1999  November 1999

In 1999, the narrow MSN homepage was dominated by underlined links and boxes for everything. At the top of the page, the underlined links were in black as opposed to the customary blue. There was a b&w menu bar across the top above one small ad and below a search box, a categorized links list on the left, and a message center on the right. Overall, it’s useful, but awkward by today’s standards. (On a side note, I particularly love the post titled “Y2K is Coming: Enter to win a cool survival kit”.)

 

January 2004

Obviously the marketplace has grown by 2004 as ad space is larger and more prominent at the top left. The entire page is wider, too. The boxes have softened and color plays a bigger role in delineating sections like News, Entertainment, Sports, etc. Links are no longer underlined, but are previewed by headlines. The menu of links on the left is categorized and grouped, and there are colorful buttons to link to mail and messaging at the top. Basic layout conventions have emerged and more attention is being paid to readability, usability, and appearance. I believe users also had the ability to sign in and customize a few components on the homepage. Limited photos, and those are small.

July 07

There were a number of big changes as the page evolved from 2004 to 2007. Bars of color are gone and replaced with more color photos, one large and several thumbnails. The large photo can be changed by clicking an arrow forward or back. The menu anchoring the left has moved to the top and the cute buttons have been merged into it. The search remains at the very top with expanded search options. For unity, boxes have returned, though they are headed consistently with a washed out color, have the ability to expand for more stories, and are accompanied by a thumbnail. The page looks cleaner, more approachable, and is now two well-organized columns instead of three competing ones. For advertisers, large space has been allotted in the middle of the first column with a small teaser ad banner at the top of the second.

 

July 2011

Here’s where MSN is today, very much in the same place as other media outlets. The page is whiter, cleaner, and more approachable. Search options remain at the top, followed by a simple blue menu bar with slider options for each category. Customizable elements include a brief weather summary at the top and links to personal social media. There is a dominant headline and large photo(s) that is generally part of a slideshow of headlines and photos. Recent news links follow, with indicators of whether it is print or video content. Other sections are separated by thin blue bars. It is interesting to note that the layout is back to three columns that are divided 2-to-1 for the main sections. The smaller far right column is dedicated to more links by interest. Ad space is one large square to the top right of the page.

While this has been a natural evolution shared with most news-related pages with such a long web presence, it has been a necessary one. While maintaining reliability for its loyal users, especially those who have made it their homepages, MSN’s design has increased in strength for all the reasons listed above. It is not overwhelming or intimidating, information is easy to find, and there is a comfortable compromise between volume of information offered and appearance.

*For more comparisons of web sites throughout the years, visit WaybackMachine.org, the source for all images posted here.

Roll Over – Web Design and Me

When I think of “good design” I think of architecture. You know, that first time you see a particular building, an impressive house, or a breath-taking garden and just go, “Whoa. Look at that!” The Biltmore Estate in Asheville, North Carolina, comes to my mind, as well as some of the oceanside homes along both coasts of Florida. I’m not an architecture or landscape architecture expert, not even an amateur, but there’s something about a well-designed structure that blends function, creativity, and beauty in a way that makes even a 40-year-old high school English teacher go, “Whoa.”

It’s the same when I was in layout and graphic design in newspapers, and now I want to accomplish it in web design. I want to make people go, “Whoa”, even if they don’t know — and can’t say — why they are saying it. Sometimes I think there is an artist deep down inside trying to break free with words, photos, color, graphics, and organization, and that artist wants to share it, whether exclusively in the field of freelance design, or in academics, or even just through the family businesses.

At this point, I cannot even begin to list websites that give me inspiration or news for design. I wander and explore a great deal. I appreciate. I consume. I look for the next thing that will make me say, “Whoa.”

Sit, Stay

After 21 years of a little bit of everything, I am heading back into the classroom to update myself to Shannan 5.0. And by classroom I mean my computer, extra monitor, webcam, headphones, microphone, and a closed door that only occasionally keeps out hungry Powell males and two curious dogs.

It’s my turn. The teacher is becoming a student again!

I’m heading back to UF to earn my master’s in Web Design and Online Communication, and can’t be more thrilled. As I looked through class materials and participated in the first evening of classes, I knew I was doing the right thing. Though I majored in journalism and love to write, I always enjoyed the Graphic Design part of classes and that part of my job in newspapers and copywriting. This seems like a perfect blend of both worlds for me right now. (But ask me again what I think later when the classwork piles up while I’m trying to grade papers with one hand, make dinner with the other, and walk the dogs with the third arm I’m still trying to grow.)

Stopping just long enough for the hubby to take a photo