The 5 essential Web design aesthetic choices

Layout, color, font, speed, and customization--developing an elegant Web site should be so easy

Often the very first impression a user will have of your service is the actual look of your Web site. With that in mind, I've made a short but essential list of the most important aesthetic decisions in the Web design process.

1. Layout

How a developer lays out all the fundamental pieces of a Web page--text, images, search fields, links, widgets, ads--is probably the single most important decision that goes into Web design. Ease of navigation is what makes or breaks a Web site. If a user can't figure out how to get back to the home page or if the user can't find the search box to search for content or if certain links lead to unexpected places, the user probably won't be returning to your site often.

(Apple's homepage is brilliant in its simplicity. The user can probably find everything at the top navigation bar and, if they can't, there's a search bar.)

The key is to get the user to what they're looking for as efficiently as possible.

For example, a user should never have to scroll to find navigation links, no matter the screen resolution or browser. As another example (and maybe this is just a personal pet peeve of mine), clicking the site logo should always return the user to the home page. These things might be intuitive, but they might not be. Think of navigation as the skeleton of the site.

2. Color

Once you pick a color (maybe two), commit to it. One finds that the most aesthetically pleasing Web sites usually stick to just one color: Facebook is blue, Last.fm is red, Apple is gray-scale, etc. Simplicity is the key. Also, though this might be obvious, always pay extra attention to the color of your text in contrast to the background color. You want users to read the paragraph, not get a headache from it.

3. Font

In general, font should be maintained consistent through an entire site. If two different sections of the same site have different fonts, it must be intentional and must be motivated by something tangible; for example, maybe the two sections are targeted at two distinct audiences.

Typefaces are like people, each has its own particular character and connotations. A Web page advertising a complete cloud computing software solution has no reason to use Comic Sans on any of its Web properties.

4. Speed

This isn't exactly an aesthetic issue, but in some cases it can be. Even though high-speed Internet connections are much more common today than ever before, some users still do use slower connections. Not only that, but more and more users access the Web via mobile devices, like smartphones and tablet computers. As a result, the Web developer should always pay close attention to the speed at which elements on a Web page load.

To do this, keep Flash and and scripts to a minimum. Most programmers should already know this, but cutting out unnecessary code can make a page noticeably more efficient. As for graphics, use GIFs and PNGs for image files with few distinct colors, like black and white photographs or charts, whereas JPGs should be used for most other images, like color photographs.

(To see just how important and involved the issue of page speed can be, check out this post on the Mozilla Blog of Metrics detailing an analysis of load times of three pages: the Firefox landing page vs. the Chrome landing page vs. the Opera landing page. As you can see in the above picture, Firefox still has nothing but a navigation bar displayed at 4.0 seconds, where as the the other landing pages are already asking a user to download their software.)

5. Customization

This final point relates back to all the others (except for the last one). Customization can be a beautiful thing, but sometimes developers let it get too out of hand. For the most part, you need to maintain how the Web site looks because it is ultimately yours, not the user's. MySpace is a pretty good example of customization that has gotten out of control. In a way, it's interesting because everyone's profile page is supposed to be representative of their identity, but on the other hand, nobody likes waiting ten minutes for a hundred flashing .gif animations of pink fairies to load. One could argue that Facebook's limitations on customization is what helped it attract millions of users away from the previous king of social networking.
Last.fm shows that there is a middle ground. Though the site is generally associated with cherry red, users can opt to "Paint it Black," allowing for just enough customization that users feel as though they have some control over their experience on the site.

In some cases, it makes sense to allow complete customization. Gmail, for example, started offering various themes in late 2008 that make the inbox a more personal experience. This is more than okay because the only person seeing the user's inbox is the user.

Expect to see more Web design articles soon.