Designing for the Web: The Web Design Vocabulary

Even if you’re not doing any of the web coding yourself, to create great web sites you need to immerse yourself in the design language of the web. It’s essential to be thinking in the web context when creating your design.

Readers of books expect to find a table of contents and page numbers to help them navigate. Viewers of web sites expect to find headers, footers, and persistent navigation. If you don’t provide it, you significantly increase the chances visitors will get lost, or frustrated, and give up.

This is not to say that it is impossible to break out of the box, as 20 Websites With Unique Layouts shows. But it is far harder to do sucessfully, compared with making creative use of the conventional structures.

Website Headers

It may seem boring to have a horizontal stripe at the top that is the site header, a menu bar, a content area, and then a footer stripe at the bottom. To be sure, there are alternatives that can work. But if you take this tried-and-true approach, you can be assured that nearly everyone will at least understand how to use your site. And there’s plenty of room for creativity in terms of how these areas are styled, and how the content area is handled.

Here’s enough examples of inspiring site headers to keep you thinking for days:

• 30 Creative Website Headers
• Inspiration: 35 Wonderful Website Headers
• 27 Trendy And Unique Website Header Designs

Navigation

Good navigation is key to the usability of web sites. The workhorse is the drop-down menu, which has been the subject of countless designs. Perhaps the majority of those in use today descend from the so-called Suckerfish design, first published in A List Apart back in 2003, when the idea of such a thing implement in CSS was brand-new. Today our favorite is Superfish, which combines Suckerfish-style CSS with a little bit of JavaScript enhancement.

Here’s an assortment of menu designs to feast upon:

• CSS Menus from 13 Styles.
• Navigation Menus: Trends and Examples
• Navigation (74 examples)
• 50+ Gorgeous Navigation Menus

The Lowly Footer

Footers may still be stuck way down at the bottom of the page, but in recent years they have come up in the world quite dramatically. Once the province of nothing more than a copyright notice and a link to the privacy policy, footers have grown into mini tables of contents.

Here’s a footer smorgasboard to sample:

• Footers In Modern Web Design: Creative Examples and Ideas
• Footers (88 examples)
• 25 Creative Website Footers

In the next post in this series, we’ll provide a checklist of things to include in your Photoshop file to make life easier for whoever codes your site—and ensure that you get what you want from the site.