As a Web site designer, I’ve spent many years looking at many sites ranging from gorgeous and engaging to annoying and frustrating. Through experience as well as personal trial and error, I’ve developed an intuitive sense of some key elements that can make or break a Web site. Recently, as I was contemplating a couple of business presentations looming, it dawned on me that I should take some of the knowledge I’ve gained over time and apply it to a fictional makeover of a Web site, showing how to go from ugly to beautiful as well as from ineffective to highly functional in a way that benefits the business needs of the client.
In the blogging tradition of writing up design showcases, I will now present an A/B comparison of a fictional company based in the North Bay Area in California called Brighton Stone & Tile. In this imaginary scenario, they’ve been in business for over 20 years and are well respected in the local area. They want to take that respect, experience, and knowledge and translate it to the online world.
The “Before” Critique
I began my experiment by firing up Photoshop and creating what is probably the ugliest home page I’ve ever designed (if you can call it that) in my entire life. I broke every good rule in the book and implemented some elements similar to poorly-done Web sites I’ve seen in real life. Let me now walk you through some of the reasons why this home page looks so awful.
Hover over the image to see the callouts
As you can see, the color scheme chosen here is unattractive, and there is little thought given to a pleasing grid-based layout. The flow of the content is vague and unsettling, and it’s not immediately obvious what a visitor should do next. Here are descriptions of the main areas referenced in the hover-state image above.
Poor Logo Typography
The font used for creating a logo needs to be bold, timeless, and evocative. The font you see here is very flimsy in appearance, and the spacing between the lines is far too small. It also seems to be stretched horizontally. In a setting such as a comic, a font like this might be appropriate, but not for a retail company selling tile. Also, the way the lines of the text are centered gives it an odd top-heavy feel.
Incorrect Header Graphic Placement
Putting a tile graphic in this corner of the screen does very little to provide an eye-catching showcase of tile design. It takes up too much space, and the color of the tile is too similar to the background shade. That criticism also applies to the slogan underneath, which looks bad as the text is not anti-aliased and, again, the choice of font is questionable.
Unclear Navigation
The most essential part of navigation is to direct people to what they’re looking for. The secondary function is to invite people to learn about additional details. In this case, the navigation is far too vague. Our Products — does that mean products that Brighton makes, or products that Brighton sells? What kind of products are they? What categories are available? Can they be searched? In addition, the alignment of the images is off, and the font color for the links is almost the same as the background requiring garish drop shadows to make them stand out.
Page Copy Needs Help
The main text shown on the home page contains common typos and is hard to read. The copy isn’t horrible, but it needs improvement. Two major issues are: what does it mean to be #1? #1 in sales? #1 in influence? #1 in longevity? Also, this is not the right place for contact info. That should be highlighted in its own area.
Latest Special Formatting Way Off
In this area, three main problems are evident: the text wrapping around the product image looks weird, the product image size is too small, and the “Click Here” link doesn’t provide a compelling call to action.
Unnecessary Gimmicks in the Footer
Though this practice is going out of fashion, I still see it a lot. The footer, instead of containing useful and relevant information, contains self-congradulatory info that just looks cheesy. The ranking of Brighton on a site the visitor has likely never heard of is unimportant, as is the page’s hit count and what browsers you like. What’s really important is why someone should stick around and give Brighton’s Web site more of their valuable time.
The “After” Critique
Once I had lost my appetite for simulating ugliness, I turned my attention towards crafting an eye-catching, professional, and genuinely useful home page for Brighton that would do justice to their standing in the local community and attract new customers online.
Hover over the image to see the callouts
To begin with, this packs far more of a visual punch. There’s a well-defined and tasteful color scheme, and the design style features subtle shading and the appropriate use of light and dark hues for contrast. There’s a sense that the layout is based on a grid paradigm, which allows the eye to scan through the content more effectively. There’s more thought given to what each element on the page will be used for and how to display it in a pleasing manner.
Good Typography and Contact Info for the Header
The typeface used for the logo, sporting all-capital letters with serifs, evokes a classic feeling appropriate for a company selling tile, a building material with thousands of years of tradition. The change of font size between “Brighton” and “Stone & Tile” draws the eye’s attention to what matters most. The addition of small tiles placed in a 3D fan to the left of the company name helps reinforce the nature of the business. Also, the header is completed by the address and phone number of the company making it very obvious where their warehouse is located and how to reach them.
More Useful Navigation
What is someone who goes to an online tile retailer looking for? Most likely tile for a specific area of their house or garden. Therefore, several main categories are displayed up front to make navigation through Brighton’s product catalog very clear. A few extra links appear below the main bar, and a search field rounds out the navigation area. Good use of links should not overwhelm or confuse a site visitor, but should engage and invite them to explore further.
Attractive Graphics and Copy Make the Home Page Appealing
Nothing catches the eye more than tasteful, creative use of product photography. So what better way to sell a tile retailer’s products than showcasing how beautiful tile can look when installed? Whether static or animated, the bar going across displaying different styles and places where tile can be used is a great way to keep people on the Brighton site. A bonus would be to link to different areas of an expanded photo gallery when the visitor clicks on the bar.
In the main text area, three guidelines drove the style of the content. First, it had to give a concise history of the company to establish credibility and explain the site’s demographic. Second, it had to appeal to select local audiences (in awareness as well as search engine traffic). Thirdly, it had to feature a catchy headline that made sense. Remember the critique of “#1 tile company” for the Before design? In this case, “Most Respected Tile Supplier” was chosen because respect cannot be measured in numbers but in influence, reputation, quality, and longevity — all factors Brighton wants to convey on its home page.
Attention-grabbing Latest Specials Spotlight
With a larger thumbnail of the product photo, an easy-to-spot price, a better description, and buttons and links to buy the product or find out more, this is a far more effective shopping experience. In a live home page, there would likely be additional specials in that sidebar and possibly in a separate region below the main content.
A Footer That Works and Drives Traffic
In the useful tradition of “fat footers” whereby detailed navigation (in a sitemap-like format) and contact information is presented, this footer will drive traffic to other areas of the Brighton site and help answer visitors’ pressing questions in a way the Before version of the footer never could. As the site evolves and changes, the footer can be easily updated to support new pages and areas of content. In thinking about the footer of an online retailer, an important question must always be: how can the footer enhance the shopping experience for customers?
And there you have it. A fast-paced exposé on some key aspects of effective and attractive Web site design we as designers must always keep in the forefront of our minds. As I work with clients to refine a mockup and polish initial content, I’m constantly trying to remember to ask important questions both from a visual standpoint as well as from the visitor’s perspective so that the final site enhances the service, reputation, and ultimate success of the business or organization.
I hope you found this article helpful, and if you have any questions or suggestions, please let me know in the comments area below. Thank you!
Jared White is Creative Director at Siteshine, a Web design and social media company based in Santa Rosa, CA. Jared is passionate about user experience and making complex technology seem simple. When he’s not wearing his Web designer hat, Jared enjoys composing and listening to music, reading books on spirituality, and spending time at home with his wife and his cat, Tiger.
Something we are wanting to emphasize more and more as we work on growing our business is that in certain cases it really does make sense to “buy local”. The very nature of what we do — design Web sites — is geared towards a global playing field and infrastructure, and we really are happy to work with clients outside our local area (and we do).
