Chapter 8
Graphic Design

Sometimes magic is just someone spending more time on something than anyone else might reasonably expect.
—Raymond J. Teller, quoted in Esquire, 2012

Graphic design is the artful arrangement of images and words into planned form. If the form is not carefully planned, it is not design. If the arrangement is not artful, it is not design. If the designer is involved only after all the important decisions are made, then design is mere decoration—the design is there only to make things “nice,” and nice is mediocre.

Using design logic

Design creates visual logic and seeks an optimal balance between visual sensation and graphic information. Without the visual impact of shape, color, and contrast, pages are graphically uninteresting and will not motivate the viewer. Dense text documents without contrast and visual relief are also hard to read, particularly on smaller or relatively low-resolution screens. But without the depth and complexity of text, highly graphic pages risk disappointing the user by offering a poor balance of visual sensation, text information, and interaction. Graphic design has its roots in language, and is still fundamentally about typography, and typography is a means to represent spoken language in print. In seeking the ideal balance, great design is about walking the tightrope between visual and intellectual stimulation, producing “differences that make a difference,” in Edward Tufte’s phrase, while respecting and taking advantage of the millennia-long traditions of written communications in human culture.

Fluid logic

Given the myriad of current and future computing device sizes and shapes, today’s extremely plastic web page designs usually begin under the surface of the visual field, with the structure of the underlying “responsive” code, and not with static visual tools like Photoshop or Illustrator. This is a deep challenge to designers educated in the traditional “canon” of print design, with its fixed visual planes and the mechanical technologies of ink on paper. When every “page” can exist in multiple forms and layouts, when style itself seems blown apart into visual confetti and fragmentary “style tiles,” it can sometimes seem as if graphic design as a discipline has reached the end of history.

Not so. Web communications has never had a greater need of the visual intelligence and unifying force of graphic design. Yes, the landscape has changed in fluid ways that can make traditional designers queasy, but the fundamentals of contrast and focus, texture and pattern, color and typography have not changed, and still operate in powerful ways to knit together the slippery digital bits of graphics and words into a meaningful whole on the display screen. In a prescient article written more than fifteen years ago, “A Dao of Web Design,” designer John Allsopp wrote: “The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

Business logic

Visual and functional continuity in your web site organization, graphic design, and typography are essential to convince your audience that your web site offers them timely, accurate, and useful information. A careful, systematic approach to page design can simplify navigation, reduce user errors, and make it easier for users to take advantage of the information and features of your site. Good web design is more important than ever. As the matrix of our online world begins to fully meld with “real life,” and we begin to live fully within our mixed virtual and actual landscapes of kitchen and Twitter, Facebook and the office, Amazon and the grocery store, the elements of online design are becoming more permanent, architectural, and even environmental.

Evolving a style

Don’t set out to develop a “style” for your site, and be careful about simply importing the graphic elements of another web site or print publication to decorate your pages. The graphic and editorial style of your web site should evolve as an organic consequence of consistent and appropriate handling of your content and page layout. Prefer the conventional over the eccentric, never let the framing overwhelm the content, and remember that the best style is one that readers never notice—where everything feels logical, comfortable—and beautiful—but where heavy-handed visual “styling” never intrudes on the experience. As Edward Tufte has said, “If you look after truth and goodness, beauty looks after herself.”

It may seem that today’s rapid technical changes constitute a unique challenge, but as scientist and historian Jacob Bronowski wrote many decades ago, designers have always had to reconcile rapid social, technical, and business environment changes, and while our digital tools can sometimes seem like a mixed blessing, we designers have never had more powerful, useful—and fun—tools at our fingertips. The best design aims at the balanced “sweet spot” of current thought, technical capabilities, and most of all, the needs of the audience.

Design integrity

Design quality is the respect you owe to the audience, and a means to convey sincerity and trustworthiness of thought and purpose. Careful, considered, and informed craft is the respect we show to our users and readers. Design is the process of making things right, with intention, and with purpose.

Appreciating the impact of attractiveness

Many people are skeptical about the role of visual aesthetics in the user experience—and of designers who insist that graphic emotive impact and careful attention to a site’s visual framework really contribute to measurable success in usability. The visual aesthetics that frame and define content are much more than simply a “skin” that we can apply or discard without consequence. Users react in fast, profound, and lasting ways to the aesthetics of what they see and use, and research shows that the sophisticated visual content presentation influences user perceptions of usability, trust, and confidence in the web content they view. Those judgments begin within fifty milliseconds of the user seeing the first page of your web site.

Eye-tracking and aesthetic response

Many eye-tracking studies show that large graphics and graphic elements attract few “gaze fixations,” but can we really conclude that large, aesthetic, tone-setting graphics have no lasting effect on the user’s attitudes toward a site? Another body of web user experience research shows that web site users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability.

Eye-tracking is a good method for analyzing and understanding how users see, interpret, and use information. However, on the basis of eye-tracking studies some user interface researchers assert that because study participants (apparently) pay little attention to large graphics on web pages (few eye-tracking gaze fixations), we can infer that large page graphics have little influence on users. Here we are talking not about catalog images or other images closely related to merchandise or tasks but about the images and other graphic content that designers use to create a site’s aesthetic ambiance. Context is important here: In such studies, participants have a set of specific tasks to accomplish, and thus their gaze tends to focus on navigation links, titles, labels, and interface controls such as buttons and form fields. Expressive or visual tone-setting graphics are rarely useful in such tasks, and it’s not surprising that users performing these tasks (apparently) ignore most page graphics, as indicated by the infrequent gazes directed at large images.

To reconcile the differing views of the proper role of visual aesthetics, we need to understand how the brain processes images and responds to what we see.

“Gut” reactions

Thanks to the work of the early-twentieth-century gestalt psychologists—and to many studies since—we know that the brain’s response to images is extremely complex, and in many cases nearly instantaneous. The process seems semimagical and therefore untrustworthy. How could something so complex happen so fast? How can we trust the results of a process we don’t thoroughly understand? Research confirms that users make aesthetic decisions about the overall visual impression of web pages in as little as fifty milliseconds (one twentieth of a second). These instant visceral reactions to web pages happen in virtually all users, are consistent over visit length, and strongly influence the user’s sense of trust in the information. In short, users have made fundamental, consistent, and lasting aesthetic decisions about the credibility and authority of sites before significant eye-tracking events even begin.

In intensely visual fields such as art history and diagnostic radiology, this kind of sophisticated, complex, nearly instantaneous gestalt visual judgment is well known and respected, although the exact neural mechanisms at work are not well understood. In his book Blink Malcolm Gladwell tells the story of the Getty Museum’s famous kouros, a nominally ancient Greek statue now widely regarded as a modern forgery. Although the provenance and mineralogy tests seemed to provide definitive proof of the statue’s age, independent art history experts were almost universally negative in their first visceral reactions to the statue. Thomas Hoving’s immediate reaction to the statue’s unveiling was “fresh,” hardly the right word for a sculpture that had supposedly been buried for two thousand years. At first, the experts had only their gut visual reactions as proof, but their skepticism caused the Getty to reconsider, and the evidence supporting the statue’s age and provenance fell apart on closer inspection.

Affective response and decision making

In psychology, emotional reactions to stimuli are called affective responses. Affective responses happen very fast, and are governed in an automatic, unconscious way by the lower centers of the brain that also govern basic instincts (food, fear, sex, breathing, blinking, and so on). Think of affective responses as the brain’s bottom-up reaction to what you see and feel. Cognitive responses are your brain’s slower, top-down, more considered responses. They’re governed by your personal cultural views, learning, experiences, and personal preferences that you are aware of and can easily articulate. Affective reactions assign value to your experiences; cognitive reactions assign meaning to what you see and use.

Affective and cognitive responses to visual stimuli are governed by a three-stage process in the brain, at visceral, behavioral, and reflective processing levels.

The visceral (“gut”) processing level reacts quickly to appearances. It’s the visceral reaction to web pages that researchers measure when they detect reaction times as fast as fifty milliseconds. It’s crucial to understand that these instant good/bad visceral-level affective responses are largely unconscious: it can take seconds or minutes to become consciously aware of your first, visceral reaction to a stimulus—particularly a stimulus as complex as a web page.

Behavioral-level processing involves the more familiar aspects of usability: it responds to the feel of using the site, the functionality, the understandability of the structure and navigation, and the overall physical performance of the site. At this level, users are consciously aware of their attitudes toward the behavior of the system, and their reactions (pleasure, for example, or frustration) play out over seconds and minutes as users interact with a site. It’s at this behavioral level that techniques such as eye-tracking are most powerful and trustworthy, because they offer detailed moment-by-moment evidence of what users consciously decide to look at and do to fulfill a given task.

Visceral (affective) reactions can take a relatively long time to bubble up through layers of processing to enter conscious awareness at the behavioral or reflective level, but that doesn’t mean that affective reactions don’t immediately influence thought. In fact, it’s the instant, preconscious pleasure of seeing a well-designed page that makes you predisposed to find a beautiful design easy to use—an effect that lingers long after the slower, conscious behavioral and reflective levels of processing kick in and make you aware of how you feel about what you see.

Reflective processing of reactions is the most complex level, and typically involves a user’s personal sense of a site’s beauty, meaning, cultural context, and immediate usefulness. Reflective processing often triggers memories and encourages pragmatic judgments about the overall aesthetic worth and value of what a user sees. Eye-tracking and traffic logs are irrelevant at this level, but user interviews can give you insight into your user’s reflective judgments. Reflective processing of what we see also involves layers of symbols and meaning created not just by the more automatic sensory components of vision (color, pattern, shade, contrast, facial recognition), but also by our more nuanced and complex reactions to representational images (photos and realistic artwork), and to the symbolic elements of pages (typography, icons, diagrams).

Visual Design

Shaping the visual plane

At its most fundamental, graphic design is about organizing visual elements on a plane: manipulating graphics, various media, and typography to produce a visual order that reflects and enhances the messages of the content. In today’s ever-expanding world of screens ranging in size from the watch on your wrist to whole walls of conference rooms, it can seem that the edges of the visual plane have become simultaneously unknowable and inescapable. Our designs are surrounded by the edges of thousands of devices, and we can only approximate how our layouts will respond to this diversity of planes.

Today’s visual plane on digital devices is:

Variable: We no longer know the size or even the physical characteristics of the field we design upon. We have lost control over the borders of our work, and no longer have those fundamental edges to guide our work and act as a reference frame.
Dynamic: Our designs for screens are built on the fly, and we can never be entirely certain what browsers, operating systems, fonts, colors, or other foundational display technologies will be present to support the design.
Ubiquitous: The good news is that our designs have never had a wider audience, and that information displays are now unbound from desks and have become truly environmental. Designers have never had a more powerful, plastic, or useful visual plane to work upon.
Responsive: The only rational way forward in this multiscreen world relies on the foundations of responsive web design: fluid page grids, responsive images, and CSS3 media queries that allow your designs to respond in intelligent ways to the variety of screens on which they live.

Where once designers knew the firm dimensions of the visual field and built against known borders and limits, today’s web designer knows only that there is a screen of unpredictable height and width, and that the screen has a top to build down from, and a center to build out from. The good news is that all the fundamental tools of visual design still work: typography, color, contrast, size relationships, and even complex layouts work well in fully responsive designs.

The design process must also evolve to support the variability of graphic design:

Old design: Define a plane with fixed edges and proportions, and a fixed grid, and populate it with content.
Transitional: Define a flexible grid and populate it.
New: Design from the content out, “mobile-first,” starting with the most basic and important content, and building out from there.

Line length

The ideal line length for text layout is based on the physiology of the human eye. The area of the retina used for tasks requiring high visual acuity is called the macula. The macula is small, typically less than 15 percent of the area of the retina. At normal reading distances the arc of the visual field covered by the macula is only a few inches wide—about the width of a well-designed column of text, or about twelve words per line. Research shows that reading slows as line lengths begin to exceed the ideal width, because the reader then needs to use the muscles of the eye or neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on a page, the reader must hunt for the beginning of the next line (fig. 8.8).

Given the user-defined nature of the web and the vagaries of technology, it’s impossible to control line length in all circumstances. A line that is designed to display a comfortable sixty-six characters per line of standard text will become a narrow, twenty-character line if the user enlarges the default browser text size. A multicolumn layout with fixed column widths can easily become difficult to read with enlarged text.

Both responsive design and universal usability principles (see Chapter 3) offer a great solution to the line-length problem by ensuring that the page design can fluidly adapt in width, so that users are not locked into a single view that may not work well for them. All current browsers also allow users to change the overall size of type in web layouts, giving users additional flexibility to adapt layouts for comfortable reading. In responsive layouts for larger screens designers can set a CSS “max-width” for the page to prevent a layout from expanding to absurd (and less legible) widths on larger display screens.

Color and contrast

Color and contrast are key components of universal usability. Text legibility is dependent on the reader’s ability to distinguish letterforms from the background field. Color differentiation depends mostly on brightness and saturation. Black text on a white background has the highest level of contrast since black has no brightness and white is all brightness. Hue is also a factor, with complementary colors, such as blue and yellow, producing the greatest contrast. Be sure your color choices do not make it hard for users to distinguish text from background. Also, never forget that almost 8 percent of male readers have some trouble distinguishing fine shades of red from shades of green (fig. 8.9).

Using the gestalt principles of perception

The gestalt psychologists of the early twentieth century were fascinated with the mind’s ability to see unified “wholes” from the sum of complex visual parts (“Gestalt” is German for “whole” or “whole form”). Their research into the perception of visual patterns yielded a number of consistent principles that dominate human visual reasoning and pattern recognition, and these principles form the theoretical basis for much of modern graphic design. The following principles are those most relevant to web page design:

Proximity: Elements that are close to each other are perceived as more related than elements that lie farther apart (fig. 8.10a).
Similarity:Viewers will associate and treat as a group elements that share consistent visual characteristics (fig. 8.10b).
Continuity:We prefer continuous, unbroken contours and paths, and the vast majority of viewers will interpret Figure 8.10c as two crossed lines, not four lines meeting at a common point.
Closure:We have a powerful bias to see completed figures, even when the contours of the figure are broken or ambiguous. We see a white square overlying four circles (fig. 8.11a), not four circles that each have a section missing.

Figure-ground relationships

In figure-ground reversal the viewer’s perception alternates between two possible interpretations of the same visual field: you see either a goblet or two faces, but you cannot see both at once (fig. 8.11b). Proximity has a strong effect on figure-ground relationships: it’s easier for most people to see the goblet when it’s wider and the “faces” are farther apart (fig. 8.11c). Also, visual elements that are relatively small will be seen as discrete elements against a larger field. The small element will be seen as the “figure” and the larger field as the “ground” around the figure.

Uniform connectedness

Uniform connectedness refers to relations of elements that are defined by enclosing elements within other elements, regions, or discrete areas of the page.

1 + 1 = 3 effects

The “white space” between two visual elements forms a third visual element and becomes visually active as the elements come closer together. The well-known visual illusion below of gray “spots” appearing in the spaces between the dark squares shows the worst-case scenario for 1 + 1 = 3 effects, but this principle applies to all closely spaced elements in which the ground forms an active part of the overall design.

Visual Structure

Design creates visual pathways that highlight and reinforce content. Design elements must have meaning and never look arbitrarily “styled” simply to attract attention. Every element on the page ought to be there for a clear and identifiable purpose, in logical semantic relationships with other page elements that make content engaging and easy to read and understand.

Understanding the origins of visual structure

Even in a medium that often seems to be entirely about the frenetic present and the immediate future, we are deeply influenced by the past. The proportions of your business card are based on the Parthenon’s facade. Responsive sites like A List Apart use the same page layout as The Book of Kells (c. 795). Christophe Plantin or Aldus Manutius would recognize any story page in the New York Times site as essentially kin to his own work, however alien a computer screen might seem to these Renaissance printers.

A page is a visual architecture, full of implicit messages about the structure and relative importance of the content. Design, if it means anything, means planning. Page design requires an analysis of the project’s strategy and objectives, and a thorough understanding of your audience and its needs. Developing a beautiful and functional visual structure is essential to any communications project: you must attract the reader before you can transmit a message. We normally think of content as fairly straightforward stuff—you look at a page, read the words, and get the message. But great page design has always been a subtle but profound mix of explicit and implicit messages. Explicit meaning from the words and images conveyed, and implicit meaning from the typography, graphics, and visual hierarchy of contrast and emphasis. It is the designer’s task to create a visual architecture, using implicit graphic tools that reinforce the explicit messages from content.

Design is also about the designer. Design can be approached subjectively, as an artist does his artwork, making visual decisions based primarily on personal visual tastes and preferences. Many postmodern design approaches are explicitly rejections of modernist objective design, although deeply subjective design is rarely seen outside the fine arts and fashion worlds. But art is an answer to a puzzle born within the artist, and design is the creative answer to a puzzle posed by others.

Objective design was pioneered by modernist Swiss and German designers like Herbert Matter and Josef Müller-Brockman, and expanded by later designers like Braun’s Dieter Rams and Apple’s Jonathan Ive. Objective design incorporates the Bauhaus philosophies of functionalism and gestalt visual psychology, with the aim of creating modular and systematic designs based on objective physical and psychological phenomena. Objective design loves modular systems, design grids, and systematic ways of investigating design problems. Within the web creation disciplines, the areas of page coding, information architecture, user interface design, and accessibility tend to be the most research-based and objective. Graphic design and marketing are inherently more subjective in their synthesis, but even design can be analyzed objectively with user testing and a/b testing of different designs.

Most contemporary web design is objectivist in philosophy, but that doesn’t necessarily mean that the ideas and structures seen in today’s web are all new ones. We are bound to our past even as we create our future.

Classical page design

The first mechanically printed pages with movable type grew out of older traditions of illuminated manuscripts and calligraphy. The fundamental design they used was so practical that most pages today use the same structure: in Western languages we read from top to bottom, scanning left to right on each line in the classic “Gutenberg Z” or “Gutenberg diagram” reading pattern. Page structure in classical layouts is based mostly on the placement of margins, within which the text and graphic content flows top to bottom in a single or sometimes a double column.

Many of the design innovations now associated with the modernist movement are actually much older. Swiss designers didn’t invent “white space” in the 1950s. The best classical page design rarely used more than 50 percent of the (printed) page area, and used space wisely in support of both legibility and graphic innovation, even if the overall visual vocabulary was restrained by modern standards. “Form follows function” is a core tenet of modern design, but the saying was born in the classical era. American architect Louis Sullivan, a teacher of Frank Lloyd Wright, first used the phrase in an 1896 book on the form of early Chicago skyscrapers, but also credited the original thought to the ancient Roman architect Vitruvius (c. 70–15 BC).

Classical page design tended to use—and still uses—stately humanistic typefaces, both ancient and modern: Bembo, Caslon, Centaur, Garamond, Goudy, Jenson, and Palatino, to name a few, now thankfully all available via CSS3 web fonts. Mixing typefaces isn’t modern either—the practice was born in practicality: early printers had only so many sizes of particular typefaces, back when “having a font” meant spending a small fortune on thousands of pieces of metal type in large wooden cases.

The classical top-to-bottom linear page structure dominated most page design well into the late 1800s, when the combination of new communications media like the telegraph and early telephones and more advanced hot-metal typesetting and lithography led to increasing complexity in print publications, with much slower corresponding changes in page design and typography. A glance at a newspaper of the time shows the problem: the only notion of “design” was classic top-to-bottom layout, but with multiple columns pages had grown too complex for that approach. “All the news that’s fit to print” usually meant all the news that could be crammed onto the front page, in type just barely large enough to read. Not unlike many web home pages from the 1990s.

Modern design

In the early twentieth century, page designers began to break the ancient top-to-bottom Gutenberg diagram model of the page. In newspaper and early magazine design, the page began to be treated as a unified field, where the size and contrast of page elements were used to create “entry points” for the reader’s wandering eye. The aim of modern page design is to create a rational, rules-based visual architecture for the page, where the size and contrast relationships of typography and graphics create a visual hierarchy, which the reader assumes to reflect the relative importance of the content.

Contrast draws the eye. Eye-tracking studies show that even modern readers of web and print documents follow a scanning pattern based on the classic top-to-bottom, left-to-right Gutenberg diagram, but modern readers are far more likely to start reading at other points on the page besides the top left, especially in complex layouts that offer many topics to choose from, like the typical news or e-commerce home page.

Modern design strives—at least in theory—to be an analytically neutral mediator and transmitter of information, even if that is a goal it rarely achieves. The best modern design is quite proudly synthetic and creative, but neither of those qualities is in short supply today. The tools and products of modern design are now ubiquitous—available to anyone with even a modest computer and budget, and we live in a virtual stew of cell phone shots, selfies, web pages, Facebook posts, and Vine videos. What stands apart today is the quality of thinking and making, and the usefulness of the ideas we communicate, which have become the hallmarks of professionalism in modern design.

Establishing visual hierarchies

Pages that lack a clear graphic center of interest make it harder for the reader to engage, because it takes more time and effort. We begin to make sense of any visual display by doing a quick visual scan, structured by the basic conventions of Western languages and the way web pages are normally laid out, particularly pages with significant text content (fig. 8.18).

The lessons here are simple:

Use conventional page layouts, and avoid radical departures from normal form, as they tend to confuse the reader. This attachment to conventional form isn’t some particular burden that web designers bear, as all media have their forms and conventions. That’s what allows us to engage with them quickly and without a lot of cognitive load just to “get” the basic layout. Book design is an ancient and respected design craft, and yet the “rules” of book design run to several hundred pages in The Chicago Manual of Style. The rules don’t smother book design, they enable it.
Your priorities ought to be immediately and graphically obvious. Clear page hierarchies enable the start of reader engagement by using the basic visual tools of contrast in weight and size, color, and typography to make it obvious where to look, and ideally to supply enough narrative interest (the words) and visual clarity (images and layout) to pull the reader in from initial scanning to full engagement with your content.

Visual hierarchies and negative space

Well-crafted hierarchies are about more than just graphic contrast, or all we would need to organize a page would be big heavy headlines, a picture near the top, and smaller blocks of text running down the page. Indeed, that’s the basic formula for a huge percentage of web pages on the Internet—not because it’s dysfunctional, but because it’s straightforward and it works.

More sophisticated and complex page layouts use the gestalt visual principles discussed earlier to create meaning and order on the page, grouping related items through careful arrangements, using the tools of proximity, similarity, continuity, and closure to create visual structure.

All gestalt visual principles—indeed all of typography and graphic design—depend on negative space, or “white space,” to create conceptual groups and legibility on the page. Without significant white space on the page to create ordering and groups, graphic design is not possible. All the possibilities of establishing a visual narrative, and using contrast, visual weight, tonal emphasis, and graphic narrative to guide the reader disappear when white space is squeezed out of a page and everything becomes a wall-to-wall cacophony of competing graphics.

White space is achieved through margins and padding around elements, and it’s the white space that forms groups of elements, and delineates groups from one another. For example, adding more padding above a subsection heading than below tells the reader that the heading belongs to the following block of content, and that the content of the preceding section is distinct from the subsequent section.

Clarity of intent and design looks simple but requires enormous discipline, both in the messaging strategy and in the graphic design that supports it. Most organizations fail at this because the easiest way to appease competing groups of stakeholders is to parcel out pieces of the home page. When everybody gets a little slice of attention, what you usually get is a noisy fail that is often—ironically—an accurate reflection of the muddled thinking behind the business and communication strategy.

Unity, simplicity, and focus

Great designs create a clear center of interest to attract the reader’s attention, within an overall page architecture that establishes a unified sense of order and balance. The graphic tools of contrast and weight are powerful, but can quickly become visually exhausting and distracting if you overuse them. Readers benefit from gentle but clear guidance, but resent having a bold visual constantly shoved in front of their noses. If you’ve got good content, trust that the quality will be obvious—you don’t need to shout about it to get attention.

Effective contrast

Horizontal rules, decorative bullets, prominent icons, and other visual markers have their occasional uses, but apply each sparingly (if at all) to avoid a patchy and confusing layout. The tools of graphic emphasis are powerful and should be used only in small doses for maximum effect. Overuse of graphic emphasis leads to a “clown’s pants” effect in which everything is equally garish and nothing is emphasized.

Color palettes chosen from nature are an almost infallible guide to color harmony, particularly if you are not a trained graphic designer. Subtle, desaturated colors make the best choices for backgrounds or minor elements. Avoid bold, highly saturated primary colors except in regions of maximum emphasis, and even there use them cautiously (fig. 8.22).

Using page grid systems

The page grid is a popular means to provide a consistent, predictable structure for page layouts. Unlike traditional fixed-page grids for print, the best contemporary web page grids are fluid, proportionally spaced grids that adjust to fit the width of smaller screens, but usually specify a maximum width (CSS max-width) for larger screens. However, grids represent only part of the solution to efficiently constructing web pages.

Origins of grid systems

Page grids are most famously associated with the 1950s modernists of the Swiss design schools, such as Josef Müller-Brockmann, but page grids are thousands of years older. Every carefully designed page uses a grid. The oldest and most basic layout grid is the manuscript grid, widely used well before movable type was invented, and still widely used today in books, blogs, and layouts for smartphones. The classic manuscript grid (fig.8.23a) has a single dominant column, although sometimes the wide margins might be used for marginal notes or parenthetic materials. Since the rise of mechanical printing and more standardized forms for books, the manuscript grid usually incorporates simple headers or chapter titles, as well as simple footers for page numbers.

Column grids (fig. 8.23b, c) existed before Johannes Gutenberg invented movable type around 1452, and by the early 1800s became the most widely used layout for newspapers and early magazines. Column grids were particularly flexible for introducing woodcut or, later, etched graphics into periodicals, books, and early mass-circulation magazines. Most print magazines, advertising and informational print publications, brochures, and web sites today use some form of multicolumn layout.

Today the modular grids (fig. 8.23d) popularized by modernist designers in the 1950s and 1960s are the best-known layout grids in print and web design. This form of fixed-layout grid was briefly popular in web design in the 2006–2011 period, as CSS support in browsers became more reliable and sophisticated. Ready-made frameworks like the 960 Grid (960.gs) enjoyed brief popularity before the sharp rise in mobile computing made fixed-width web grids irrelevant for most uses. As responsive web design matures, we will probably see a return to more complex modular layout grids for at least desktop-sized page layouts.

The hierarchical grid (fig. 8.23e) is a more free-form variant of modern grid design, typically used in special situations like highly graphic print or web pages, such as magazine photography spreads or home pages on web sites. In hierarchical grids one or several dominant graphic elements anchor the page design, although text elements are typically set in conventional single- or multicolumn grids.

Modern grid systems

In the 1920s the Bauhaus school in Germany blended the theories of gestalt psychologists with modernist theories on form, color, and layout for the printed page. The early Bauhaus graphic designers were also much influenced by the Russian Constructivist artist, graphic designer, and architect El Lissitzky, whose bold geometric page designs and posters still inspire designers today. After the Bauhaus was closed by the Gestapo in 1933, many of the faculty moved to Switzerland. Swiss design was strongly influenced by the Bauhaus, but it was later Swiss designers like Jan Tschichold and Josef Müller-Brockmann who gave us modern layout grids and design modularity. In the 1950s and 1960s modernist designers like Charles and Ray Eames, Paul Rand, and Massimo Vignelli made modernist design the signature look of corporate America.

Müller-Brockmann was the most articulate of the advocates for grid-based design systems, and his book Grid Systems in Graphic Design is considered the definitive modernist statement on grids in print design. Modernist designers used grids across the spectrum of print graphic design projects, but grids provided a particularly powerful means of bringing consistency and rationality to complex documents like books and magazines. Grids provide a repeatable system for content presentation and placement.

Grid systems may seem like a hindrance to creative layout, but when used appropriately, they can bring consistent structure to layouts without producing graphic monotony (fig. 8.24).

For the first decade of the web’s evolution true grid systems were not practical, as “web design” then consisted largely of hidden tables and transparent gif graphic spacers that were required to produce anything beyond the bare minimum of a single-page column. The growth of browser support for CSS in the early 2000s was due mostly to the efforts of activist web designers like Jeffrey Zeldman and the Web Standards Project, who were vocal advocates for a “standards-based” design with consistent implementations of CSS and HTML across the major browsers. As standards-based design became practical, the increasing sophistication of web layout tools like CSS2 and xHTML led to a revival of interest in grid-based layout among web designers.

Grid-based CSS design frameworks like 960 Grid (960.gs) became popular as a means to structure fixed-width web template designs using classic modernist grid principles. With the rise of mobile computing and responsive web design, fixed-grid systems evolved to become more fluid and responsive, and the rationality and modular thinking of the classic grid systems is now adapted for more fluid designs on small screens, and classic fixed-width grid layouts where screen space allows. Former New York Times design director Khoi Vihn and U.K. web designer Mark Boulton have written extensively on grid systems for the web, in both fixed and responsive implementations. As the CSS3 flexible box layout (“flexbox” for short) becomes more widely and reliably supported in browsers we should see increasingly sophisticated flexible and responsive grid frameworks emerge.

For a brief time in 2005–2010 printlike fixed-width grid designs for web pages became popular. The CSS2 of the time became sophisticated enough to create printlike grids, and mobile users were usually relegated to highly simplified “mobile” sites with only the most basic information and interactive features. The “960” grid (www.960.gs) shown here (fig. 8.23) was one of the most popular web grid systems, and is still seen in older fixed-width site designs.

Module and program

The modern design movement of the 1950–1960s is famous for its dedication to grid layouts, but grids were only anchor points for consistent, repeatable graphic design forms, or modules, created as components of more comprehensive design programs. The module-and-program forms of modern design formed the heart of the rationalist approach to layout and typography. Repeating design modules were effectively libraries of preconceived graphics subunits, which could make even complex print design programs more efficient, cost-effective, and visually unified through carefully programmed systems of design.

The example in Figure 8.26 shows a module-and-program design system that is still going strong almost fifty years after designer Massimo Vignelli conceived the system for the U.S. National Park Service. Vignelli’s Unigrid design system for National Park maps and brochures is both beautiful and highly functional, and the consistency and predictability of the design system has saved the Park Service millions of dollars over the lifetime of the program.

Consistent layouts

Establish a layout grid and a style for handling your text and graphics, and then apply it consistently to build rhythm and unity across the pages of your site. Repetition is not boring; it gives your site a consistent graphic identity that creates and then reinforces a distinct sense of “place” and makes your site memorable. A consistent approach to layout and navigation allows users to adapt quickly to your design and to predict with confidence the location of information and navigation controls across the pages of your site.

Established patterns

Today the conceptual descendants of the modernist module-and-program designs are web “pattern libraries,” which are not just static visual examples of how repeatable content and functional design modules should look, but are “live” self-contained chunks of HTML and CSS code that can be quickly reused and customized in a web site.

In web design jargon a “pattern” is a self-contained unit of HTML and CSS code that describes a common recurring object or HTML tag in your site, such as buttons, basic input forms, characteristic ways of handling pull-quotes, block quotes, and styles for even the most basic headers, lists, tables, and other standard elements of HTML. Designers have always copied-and-pasted these bits of code for convenience, and to support a consistent way of handling things throughout a web site. Pattern libraries are carefully maintained collections of these repeating building blocks of web sites. Pattern libraries are also sometimes called “style guides” or “front-end style guides,” but we prefer “pattern library” because pattern libraries—based as they are on working HTML and CSS code—are much more powerful and useful than mere collected examples of visual styling.

Most entities that need a web site already have a site, and often as a web site ages and is refined over the years, it gradually accumulates CSS code from new projects. The most conservative way to add new features and styling is simply to add new CSS code to the older CSS listings. This addition method prevents older things from breaking, but as more and more styling code accretes, the CSS can become bloated to the point where the site’s performance suffers. Perhaps even worse, the old code becomes so complex and tangled that nobody remembers what code is actually used in the “live” site and what code has long since been made redundant by newer styling projects.

Maintaining a consistent pattern library of working and tested code takes some effort but offers a number of advantages:

A solid, reliable code library can save huge amounts of time, as new features become cut-and-paste affairs, and reduces redundancy, as nobody wastes time reinventing objects and features that already exist in your pattern library.
A single code repository makes the HTML and CSS of your site much easier to check and maintain. This is particularly true if you keep all your pattern examples in one long web page. If you have new code to test, you can add it to the pattern library page and quickly assess whether your new code breaks any older code, or whether any of your new CSS, HTML, or JavaScript class or variable names conflict with existing site code.
The pattern library becomes a powerful communications tool, as designers, front-end developers, and everyone else on the team have a common reference point and shared vocabulary for existing styles and features, and a quick means to check to see whether a feature already exists and can be modified from existing code.
A thorough pattern library specifies a compatible style for all plausible HTML tags, even ones that you (currently) never plan on using. You may never have used a <cite> or <abbr> tag, but specifying a style for seldom-used HTML can prevent unpleasant surprises (ugly browser-default styling) if somebody does use those tags within your site.

Favorite style and pattern libraries

Fortunately a number of companies and organizations maintain style guides and pattern libraries that are visible to the public and can be used for inspiration and guidance. As style guide nerds, here we highlight a few of our favorites:

A Pattern Apart (A List Apart magazine’s pattern library): patterns.alistapart.com
Code for American Website Style Guide: style.codeforamerica.org
MailChimp’s Pattern Library and Style Guide: ux.mailchimp.com/patterns and mailchimp.com/about/style-guide/
Pattern Lab: Create Atomic Design systems: patternlab.io
Starbucks responsive web pattern library: www.starbucks.com/static/reference/styleguide
UK National Health Service, NHS Brand Guidelines: www.nhsidentity.nhs.uk
IBM Design Language: www.ibm.com/design/language

Chapter 8 Graphic Design