A Blueprint for Web Design

A 2006 study found that viewers made subconscious decisions about the quality and credibility of web pages in just 1/20th of a second. In this blink of an eye, viewers did not have enough time to read text or even recognize photos, but instead were reacting only to the site’s layout. Even when the participants had more time to look at the site, the research found that they only attempted to reinforce this initial conclusion.

This study underscores the importance of making a good first impression. When building a house, it is the framework that defines the style of the home. The same is true for websites. Today’s Web 2.0 style is based on a few basic principles that provide the foundation for a site. Learning these principles will allow you to draw a successful blueprint for your next site.

1. Simplicity
Occam’s Razor is a principle that I use to guide me when creating a new layout. One way of interpreting this principle is: Given any two possible solutions to a problem, the simpler one is better. In web design this means eliminating unnecessary graphics and making your content concise. By getting rid of these distractions, you will be able to focus the visitor’s eye on the content of the page.

Simple Sites:
www.hintcreative.com
www.crushlovely.com

“It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.”
–Antoine de Saint-Exupéry

2. Strong Headlines
Since the dawn of Web 2.0 and the corresponding movement to simplify, designers have taken advantage of the extra space in their layouts by incorporating into them large, bold headlines. When you have more room, you can choose to make more important elements bigger than less important elements. This technique not only creates better hierarchy, but also allows your visitors to browse your content more quickly.

Many designers have taken the strong headline concept further by using strong, all-text headlines to introduce a page. This approach is very effective when used on sales pages to highlight a product’s USP (Unique Selling Proposition), elevator pitch, or main message.

Bold & Beautiful:
www.apple.com/displays
www.verizonwireless.com/b2c/index.html

3. Distinct Top Sections
Of course there is nothing new about this approach. It’s a good idea, and has been used for years, but it’s being used more in recent years and the distinction is often stronger. The top section says, “Here’s the top of the page.” Sounds obvious, but it provides the viewer with a clear understanding of where the page starts and helps them locate the site’s navigation. Another benefit of distinct top sections is that it gives you the chance to make a strong, simple, and bold statement at the start of the viewer’s experience.

Strong Beginnings:
www.campaignmonitor.com
www.hugeinc.com

4. Real Estate Plots
You will notice that many sites visually divide their content into sections of “real estate” or “plots” to create better organization and to make the content more consumable. These plots are most often created by placing the content in a box or by using a different background color behind the content. However, be careful when using strong background colors, as it can take attention away from more important content.

Consumable Content:
www.apple.com
www.comcast.com

5. Icons
Icons first appeared on websites as an aid to navigation, but they are now being used for much more. Icons have the power to communicate a large message quickly in just a few pixels. Many companies are taking advantage of this on their sales pages by using icons to highlight a product’s features. Other sites use them in conjunction with titles to visually break up large sections of content to make it less intimidating to readers. Still other designers choose to use icons to show a site’s features, such as: “Follow us on Twitter”, “Join our Facebook Group”, or “Subscribe to our RSS Feed.”

Creating custom icons is a great way to interject your company culture into the design of your site. Consistency is the key to successful icons. Your icons must not only have a consistent style and use of color, but also must fit with the site’s aesthetic style.

Innovative Icons:
www.takethewalk.net
www.wpremix.com/features

To have a great web design, you must first become a great observer. Taking an objective look at the specific details and techniques implemented in these sample sites and other designs is the key to being current, innovative, and successful with your own designs.