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.
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
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
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.
Topics: Web Design