THIS PAGE IS IN PROGRESS

A web page is part of a greater entity. As web typographers, we don’t just design elements to create a whole page; we design a set of pages to create a whole site. Thus, we need to establish systems of voice, grid, and navigation to use across multiple pages. These systems are “rules” for combining elements to form a complex whole, so even if pages differ in the kind or amount of content, the pages still feel like part of the whole site.

Designers and typographers don’t just apply systems because we like them. Systems make designing—and interacting with—web sites an easier, more pleasurable experience.

Five Reasons to Apply Systems

Systems Are Easier on Your Readers

Applying systems across pages creates similarity. As readers move through a site, they learn to recognize the different voices (I am a narrative, I am a list of ingredients, I am a set of instructions, I am a caption, I am a link to another page). They also learn where to find content on the page.

If you don’t apply a consistent system, readers will have to work harder to find what they are looking for (Figure 14.1).

 

Figure 14.1 These two pages are part of the same site, but don’t look like it. If the visual systems change throughout the site, readers have to work harder to find and identify information.

You’ve Already Done the Hard Work. Why Start Over?

You have created chunking and hierarchy to help your readers scan the content. You have established voices so readers can identify the different elements on the page. Font, font size, line height, and div width have been set to promote reading. Headlines, text, navigation, and images have been arranged to create rhythm and tension, while not diverting readers from their quest. Why start over?

Diverse Pages Still Feel Like Parts of a Whole

Websites can contain a variety of information. Some pages may contain primarily text, while others contain primarily images, tables, or a combination of the three. Consistency of voice, grid, and navigation helps readers recognize that diverse content is still part of a single site (Figure 14.2).

 

Figure 14.2 Systems help readers recognize that diverse content is still part of a single site (ThomasLadd.com). Top: An image-based page. Bottom: A text-based page from the same site.

Multiple People Can Work on the Site and Retain Consistency

Websites are rarely designed, built, and maintained by a single person over a long period of time. Systems allow for various people (junior designers, contractors, clients) to expand a site or modify content while retaining consistency.

Data-Driven Sites Create Pages on the Fly

Luckily, HTML and CSS are perfect for creating and applying systems. Using a single CSS file automatically creates a system. Using multiple CSS files based on a system creates a system with appropriate variations. Content pulled into pages from a database will follow the system you’ve established (Figure 14.3).

 

Figure 14.3 The pages for HistoricType.com are dynamically created. Content is stored in a MySQL database. Top: An image-based page. Bottom: A text-based page. Images, text, and search functions were carefully considered when creating this tight system.

Plan for Diverse Pages from the Start

The recipe lesson purposely does not contain radically diverse pages; I wanted you to focus on specific tasks. But even working with relatively similar pages, you’ll find a system works better when you consider more than one page from the start. Subtle differences (length of heading, amount of text) should influence your system as you build it.

In the future, start every project by looking across the breadth of the site. Are some pages text-heavy? Are others image-heavy, or do they contain tabular material? Do any pages combine the three? Even if pages are similar, what are their differences?

In the future, perform the steps you did in Lessons 11 and 12 for a variety of pages simultaneously. With some negotiation, you can create a system of voice, grid, and navigation that works across the pages. Do you need to create a system of variations? If so, how many do you need? Balance variation and consistency—honor content while creating pages that feel like parts of a whole.

Allow for Flexibility

Not all content is the same. If an element doesn’t work in a carefully constructed system, create a variation. In fact, careful variations can add value to a website, by helping a reader recognize when they’ve entered a different section of the site (Figure 14.4), or drawing attention to an important page.

Figure 14.4 Careful variations add to the readers’ experience. Here, a shift in color tells readers they’ve entered a different section of the site. Top: This section has more links, and needs an extra level of navigation under the main navigation across the top. Bottom: This section is simpler—there is no reason to use the extra level of navigation. Don’t force a system that isn’t necessary.

Again, balance variation with consistency—don’t make your readers work harder to find what they are looking for. Above all, systems should help, not hinder.

Quick Tips

Systems are most helpful when…

• Voices and placement are consistent. If you change things around, readers will have to work harder to find and understand content.
• Diverse pages are considered from the start. You can create systems that work for a variety of content.
• Variation is used (when necessary) to honor content and help the reader. Systems should help, not hinder.