This book simply would not have been possible without the guidance, support, and valued friendship of my longtime mentor, Alex W. White. There are countless designers whose ability to think and see has been forever impacted by Professor White’s articulation of the principles of type, image, and space—but none more grateful than this one.
I owe a special thank you to Nancy Heinonen at Crescent Hill Books for her patient, professional, and informed management of this entire process.
Thank you to Roger Black for lending his valuable time and knowledge to this project.
I also want to acknowledge my fellow Type Directors Club board members, as well as my current and former students, for reminding me of the real reasons I pursue a career as a designer.
To Shick, my constant companion.
And, of course, Sarah and Bridgette, with love and gratitude.
Table of Contents
Foreword by Roger Black
SECTION I WEB DESIGN & TYPOGRAPHY
Chapter 1 Understanding Web Design
Chapter 2 Anatomy of a Web Site
Chapter 3 Web Design Unity
Chapter 4 Elements of Web Design
Chapter 5 Web Typography
SECTION II PLANNING & USABILITY
Chapter 6 Site Planning
Chapter 7 Elements of Usability
SECTION III BUSINESS VALUE
Chapter 8 Search Engine Optimization
Chapter 9 Marketing and Conversion
Chapter 10 Analysis
Above the Fold: Foreword by Roger Black
On not starting at the beginning
Web design is always a conflict between the “stakeholders” and the users.
Typically, at the kickoff meeting, all the stakeholders come with a list of their most important requirements for, say, a landing page. If you’ve got ten in the room, each with a list of five “musts,” that’s fifty things that the client wants. But a user, coming to the page, just wants one thing. And so the conflict begins.
A designer’s job is to pare those things down and put them in a place where users can find them if they want them, and ignore them if they just want to know the price of the ticket, or read the story, or watch the video, or somehow achieve their goal on clicking the link that brought them there.
Many times there is something they don’t care about, like advertising, that is essential to the business of the site. The designer may be forced to ignore the end clients, the users, to get paid!
Similarly, there are conventions of Web design (like putting a lot of things on a page) that users have gotten to expect, but they don’t help make a page look good. Designers ignore these conventions at their own risk.
Resolving these conflicts aren’t always easy, and this book provides a number of tools to help. Brian Miller is first of all a typographer. Since Web pages consist largely of text (in area, if not in file size), learning how to handle type is a key skill for a Web designer. (See Chapter 5.)
As well as abundant common sense, Brian brings his design experience in corporate, retail, and media fields to the Web. His sites have a sophisticated and classical look, one that is very clean, organized, and even elegant. The things he learned in the offline world play a role here. And guess what? Users know these conventions too. Grids and columns, for example, are a familiar organizing principle.
And that’s a key underlying principle of Above the Fold. Web design does not live on its own planet. It’s connected to the rest of the world. Things you’ve learned from other media and other kinds of design, such as architecture and industrial design, are useful here. Users can latch onto that, when they see it.
So don’t start at the beginning. Start with what you know.
Illustration of Brian Miller by Abigail Zambon
In preparing to write this book, I spoke with several colleagues and asked them what they would find valuable in a book about Web design. One of the most memorable of these discussions was with Jeffrey Kroll, a friend and colleague from my days at Digitas. In typical Jeff fashion, he turned the conversation around and began asking me the questions: “What do you want people to do as a result of reading the book?” he asked. Embarrassingly, I didn’t have an answer.
Jeff’s question got me thinking about the purpose of the book, and I remembered a story I heard in graduate school. It was the story of a behavioral study that was conducted to see how children would react to an unfenced playground compared to a playground with a fence around the perimeter. Interestingly, the children in the unfenced playground grouped themselves in the center of the unenclosed area, while the children in the fenced playground played and explored all areas of the enclosure.
The conclusion is simple: Rules, represented in this story by the fence, are comforting. They help us feel safe and allow us to explore beyond our comfort zone.
That’s what I want this book to be—a comforting fence for anyone interested in exploring the specific nuances of Web design. This book is not about timely design or technology trends; instead, Above the Fold is about the timeless fundamentals of effective communication within the context of Web design. It is intended to help you, the reader, understand the “perimeter fences” that Web designers use to develop successful sites.
It’s difficult to determine, really, the number of times I’ve assured a client that his or her name, product, ad, or idea will appear “above the fold,” but I’m sure it’s easily in the hundreds. What’s interesting is that the majority of my clients don’t ask me to produce anything that can actually be folded. I’m a Web designer, and it’s taken me sixteen years to admit that publicly.
The problem with admitting you’re a Web designer is that inevitably the person you’re talking to has a twelve-year-old niece who designed and produced a Web site over her summer vacation. Most people don’t think of Web sites as even needing a designer. “People can make a living doing that?” they say.
In fact, it’s true that throughout the history of the Web, non-Web designers have been shaping the aesthetic of the Web landscape. In the early days of the Web, most “designers” weren’t designers at all, but technicians focused on pioneering new means of communication. Soon, due mostly to increasing client demand, classically trained print designers began porting their talents over to Web site design, bringing with them many of the design conventions they were accustomed to.
One of these transplanted conventions is the idea of being “above the fold,” which is a phrase that comes from the newspaper industry. It refers to the fact that the most important news items of the previous day would need to appear on the upper portion of the front page. Since most papers were folded for shipping, anything at the bottom of the page would not be seen by passersby. The content that appeared above the fold—BAND PLAYED TILL END; WAR! OAHU BOMBED BY JAPANESE PLANES; MEN WALK ON MOON— attracted people and sold newspapers.
Fast forward to the rise of the Internet, where monitor resolution has as much influence over information hierarchy as the fold in a newspaper did. The information that appears in a browser window needs to engage the user in the same way information on the top half of the first page of a newspaper did. Thus, the phrase above the fold was adopted by millions of Internet users.
The phrase “above the fold” reminds us that there are both close similarities and vast differences between print and Web design.
The phrase “above the fold” reminds us that there are both close similarities and vast differences between print and Web design. The principles of space usage, typography, and other elements of effective hierarchical communication are essential to both print and Web design, but the methods of achieving these principles involve different skill sets and considerations for the end user. That’s what this book is about—the fundamentals of graphic design and the specific considerations a designer makes for effective Web communication. And it’s the reason Above the Fold is a fitting title.
The other reason for choosing Above the Fold as the title is more metaphorical and has to do with the type of information you’ll find within the book. If the information that appears above the fold on a newspaper or Web site is the most important and engaging of its time, the information you’ll find in the book Above the Fold is too. It is important that Web designers learn, in addition to the necessary technical aspects of digital media, the fundamentals of design that lead to clear communication. This book looks at Web design as a form of graphic communication—a point of difference from most of the other Web design books on the market. Most of the current books on Web design are outdated before they’re even printed, because they focus heavily on style and trends. More troubling is the fact that most books depict Web design as a medium whose ultimate expression is somewhere between print pieces with movable parts, and movie titles with buttons—more form than substance. The sites in this book put the user first and drive value for the clients they represent.
Above the Fold focuses on the three phases of a Web project—planning, design, and analysis—with each phase aligning with the constituents of a Web site: the user, the designer, and the client.
The majority of the samples chosen to illustrate the concepts in this book are real-world examples produced for clients with strategic business objectives. Designing for clients is significantly more challenging than designing for designers. Portfolio sites and design blogs are often the most beautiful sites on the Web, but being aesthetically pleasing is only one aspect of Web design. Above the Fold is divided into three sections: Design & Typography, Planning & Usability, and Business Value. Each section represents a phase in the continuous cycle of Web design. These three sections also neatly align with the players in a Web project—the designer, the target audience, and the client. It’s the balance between design, usability, and return on investment that makes a Web site truly great.
Over the past sixteen years of my career, Web designers have gone from being technicians and hobbyists to critical members of the business environment. And for this reason, I’m proud to admit I am a Web designer.
WEB DESIGN & TYPOGRAPHY
Understanding Web Design
Anatomy of a Web Site
Web Design Unity
Elements of Web Design
UNDERSTANDING WEB DESIGN
There’s an old legend in the world of football that says Vince Lombardi, head coach of the Green Bay Packers, started every season with a speech to his players about the game of football. He began the lecture by holding up a football and saying, “This is a football.” He proceeded to describe its size and shape, talk about how it can be thrown, kicked and carried. Then he’d point down at the field and say, “This is a football field.” He’d walk around, describing the dimensions, the shape, the rules, and how the game was played.
& Usability S3
This is the Internet
The message from the two-time Super Bowl-winning coach was simple: Remember the basics. This ingenious demonstration stripped away the complexities of the game and reduced it to its essence. In doing this, Mr. Lombardi refocused his players’ attention on what was truly important about playing the game of football effectively.
Taking a cue from Vince Lombardi, I’d like to conduct a similar exercise for you: Go over to a computer, open the Web browser of your choice (Safari, Chrome, Firefox, Internet Explorer, etc.), type in the address of your favorite Web site, and behold—this is the Internet. The Internet is a series of interconnected computers, called servers, that enables companies, brands, organizations, governments, religious groups, and individuals to share information on a worldwide scale in real time. The “World Wide Web,” or Web for short, is actually only a portion of the Internet, which includes all aspects of computer-to-computer communication like email, messaging and file serving, just to name a few.
When an Internet user types the address of a Web site into his or her Web browser, the computer transmits a signal to a server, and the server responds by sending bits of information back to the computer. This information includes images, raw content, and instructions for the computer to reassemble the layout, called markup (the “M” in “HTML”). The computer then takes that information and configures the files based on two things: the markup and styles that came from the designer/developer, and the preferences and limitations of the Web browser and computer itself. When a computer reassembles a Web page that it has received from a server, the following factors influence exactly how that page appears on the screen:
These charts highlight the majority share of users in each category. When designing for the Web, designers must tailor their design toward the limitations of their target demographic. The capabilities of individual users vary by market.
Color depth is the number of colors that a monitor is able to display. The number depends on the video card in the computer as well as the monitor itself. Most current computers/monitors can display millions of colors, making color-depth a non-issue in most cases of Web design today. In the not-sodistant past, monitors could only display 256 colors. Therefore, Web designers were limited to a color palette of 216 colors called the Websafe palette. The colors in this palette consisted of the common hues that could be displayed on both Mac and PC operating systems.
Not to be confused with the monitor size in inches, monitor resolution is the number of pixels when measured horizontally and vertically on a monitor. Most monitors today are 1024 x 768 or higher, although some computers still display at 800 x 600 or even 640 x 480. Most sites these days are optimized for a 1024-pixel width and are designed in a size range of 975 and 990 pixels wide. Fifty or so pixels are subtracted from the overall width to accommodate for the scroll bars and borders on the browser window.
The type of computer and version of the operating system (OS) the audience is using to browse a site can have an effect on how a site is seen. The main difference in operating systems is their ability to anti-alias type. Anti-aliased type looks smoother because the system creates a slight blur effect around each character. Non-anti-aliased type can look jagged or “pixelated.” The operating system can also limit the availability of certain Web browsers. For example, in 2004, Microsoft suspended development of Internet Explorer for the Macintosh OS because of the emergence of Safari, which is made by Apple.
The primary Web browsers used today are Safari, Chrome, Firefox, and Internet Explorer. A Web browser is an application whose function is to receive layout and styling information from a host and display that information on screen. Because these are different applications developed by different companies, they all interpret this information slightly differently. Added to this, the language that makes up Web styling, cascading style sheets or CSS, is always evolving; therefore, Web browsers are constantly updating to keep up with the latest styling attributes.
While the connection speed of someone browsing a site won’t have a direct effect on how a site looks, it will definitely have an effect on the person’s experience of the site. This was a major consideration for Web designers in the early days of dial-up Internet—using a phone line to access the Internet. For a time this issue subsided due to the prevalence of high-speed Internet services such as cable and DSL; however, now the issue is re-emerging as a factor in Web design because of mobile Web browsing. Mobile devices are increasingly accounting for a larger percentage of the Web audience, and the majority of mobile browsers use low-bandwidth methods to connect to the Web.
To complicate matters, beyond these inherent system-based influences, individual user preferences also can affect the way a site looks. In this image we see the “Content” preferences in Firefox. These controls allow a savvy Web user to change the fonts, the minimum size for type (this is an accessibility feature for users with impaired vision), the colors used for links, and even whether links are underlined. In some cases, these user preferences can even override the design decisions a designer has made for a page.
This screenshot of the preferences panel in Firefox shows how users can change how specific characteristics of Web design appear on their screen
It’s this aspect of disassembling a design and allowing the user to reassemble it under a varying set of circumstances that makes Web design unique and challenging.
Limiting subjective decisions and being creative within those limitations is the essence of what all designers do.
Designing for the Web
To explore the subject of design for any medium, it’s important to define the term design. At its most basic, design is a plan. Things that are said to have happened “by design” are said to have happened not by accident. So, the more that things appear to have been done on purpose, the more effective a design is likely to be.
A design plan is a series of decisions made by a designer to create a final piece. Clear and defendable decision-making leads to more effective design. Designers are always looking to limit the decisions they need to make in a design, because each decision that’s made leaves room for subjective criticism. For example, if a designer chooses to use red as the dominant color of a layout simply because he or she prefers that color, the designer will likely face criticism from a client who prefers any color other than red. However, if the color decision is made for a designer, either by brand guidelines or thoughtful research, the defense of the color is made easier when questioned by a client. Limiting subjective decisions and being creative within those limitations is the essence of what all designers do.
The Web as a design medium comes with several built-in design decision limitations. Designers accustomed to designing for print might be used to controlling things like font selection from a library of thousands of fonts, exact color matching, specific page size and breaks, text wraps, and the use of white space to separate sections of content. In Web design, these luxuries are difficult at best and impossible at worst.
Most organizations have Web standards like this one from the Shintaro Akatsu School of Design (SASD). They spell out the dos and don’ts of everything from typography and color to image use and grid structure. These rules help define the creative decisions made by a Web designer and ensure brand consistency.
Up until very recently, a designer had a choice of only a handful of fonts to choose from for the text on a Web site with only bold and italic styles. Choosing a font for a Web layout meant picking from the small list of fonts that were available on the majority of computers used by the audience of the site. This restriction of Web design, however, is changing rapidly (see Chapter 5, “Web typography”).
Design is about having a plan. Web design is about having a backup plan.
Color matching is nearly impossible due to the fact that everyone’s monitors, graphics cards, and lighting environments are different. Web designers must be tolerant of a range of color matching as opposed to a need for exactness that can be achieved in print. Colors on the Web are made up of the additive spectrum (red, blue, and green—RGB), meaning that all three create white when added together. This is different than with the printing process, which is a subtractive process made up of cyan, magenta, yellow, and black— CMYK. (K stands for black.) When added together these colors create black. Although RGB generally has a wider range of hues—the electric, bright colors—converting design elements from CMYK to RGB when preparing them for the Web can result in slight color shifts that Web designers should be mindful of.
There is no page height or width on the Web. Depending on the length, the content on a Web page can scroll practically forever. This can get overwhelming to a reader and can be dealt with by “paging” the content. A list of Google search results is an example of this.
Widows, a single word on a line at the end of a paragraph and a typographic no-no, are impossible to predict since the size of type can vary from user to user.
Images on the Web are rectangular only and cannot be rotated. Designers get around this by adding in background color or transparency behind a rotated image. The use of imagery on the Web can be restricted by a target audience’s tolerance for download time. The more imagery a page has, the longer it takes to download. As mentioned earlier, this concern waned in the past few years because of the ubiquity of broadband Internet connections, but it is once again becoming a major consideration due to the emergence of mobile browsing.
Pictured here is a single page from Wikipedia.org—the definition of “the Internet.” On the Web there is no page height, so pages can go on virtually forever.
A Word About the Other Kinds of Sites
There are, of course, ways around the limitations that come with Web design. Using images of type instead of live text, for example, will allow you to have complete control over the type on your site. There are two main issues with this workaround: one, images take longer to download than text, so the more images you have the longer your page will take to load; and two, search engines can’t read the content of an image and therefore your search engine ranking can be hurt by this. See Chapter 5, “Web Typography,” for more on this subject.
Another means of circumventing Web design limitations is to use alternate development tools such as Adobe Flash or Microsoft Silverlight, which allow a designer to create highly interactive sites that stand independent from standard Web design restrictions—as long as the browser has the correct plug-in. And although Flash has the ability to be search engine-friendly there are very few sites that take advantage of these techniques. There’s no doubt that many beautiful and effective Web sites are created using these tools; however, posting images or movies on the Web is a subject for a different book.
ADOBE FLASH can create extremely dynamic animations and interactivity, but is best used as an element on a page rather than an entire site.
MICROSOFT SILVERLIGHT is similar to Flash in that it can create dynamic elements for a Web site as well as a wealth of back-end functionality.
The x-height, represented by the blue line, is the distance between the baseline—where the letters sit—and the top of a lowercase letter. It’s clear to see that Georgia, designed by Matthew Carter specifically for the Web, has a higher x-height than Times Roman at the same size. A counter is the “hole” created in letters like a lowercase a. In Georgia, the counters are larger and more open. These characteristics combine to make Georgia more legible that other serif typefaces when viewed on screen.
POINTS & PIXELS
The most common units of measure when dealing with type is points and picas. There are 72 points in .996 inches and standard screen resolution is 72 pixels per inch (PPI). Therefore, one point is equal to one pixel when referencing elements at screen resolution.
The typographically expressive work of David Carson, like this spread from Raygun Magazine, would be difficult if not impossible to reproduce online without the use of images of type. Outlined type, custom fonts, and type wrapping on a curve are some of the limitations of Web design.
Unlike print layout programs that allow designers to wrap text around a curve, Web design does not yet have such a feature. Text runs in straight columns, aligned to the left, right, or justified. A Web designer’s options for using white space to break up large columns of text are reduced to line spacing between paragraphs exclusively. There is no easy method of creating tabbed paragraphs in Web design. French spacing—the use of two spaces after a sentence—is also not possible, since HTML renders any number of spaces as a single space.
Successful Web designers embrace these limitations and find ways to be creative within— instead of trying to circumvent—them. In addition to having a plan, Web designers need to have a contingency plan—a backup plan that allows for user variables. For example, when specifying fonts for live text on a site, a designer will list a series of fonts starting with a first choice, followed by similar font choices in the case the user does not have the first choice:
font-family = Georgia, [if you don’t have that then use] “Times New Roman”, [if you don’t have that then use] Times, [if you don’t have that, please just give me something with a…] serif;
When specifying typefaces for Web design, a designer must list his or her preferences for fonts in descending order to accommodate users who don’t have the first choice installed on their computer.
Although subtle, the difference in one serif font to another can have a big impact on the overall texture of a design. It’s a major component for a designer to have limited control over, but this is rapidly changing, see Chapter 5, “Web Typography.”
Brief History of Web Design
Web 1.0 (1993–2002)
Brief History of Web Design
Web 2.0 (2003–present)
This timeline illustrates a couple of key points about Web design: The evolution of the Web browser has had a profound impact on Web design, from the use of type to the structure and layout of pages; and Web design is an interactive and evolving process, where “first-tomarket” status is more important than design perfection.
Another interesting fact that emerges from this timeline is the evolution of the purposes of Web sites, from serving the company to serving the user. Over time, sites have become utilities that perform functions for the user, not only the organization who builds them.
Good Web Design is an Experience
Good Web design goes well beyond evidence of a plan—good Web design is an experience for the user. The best Web design creates an environment where users feel they have just enough control over the experience that they feel empowered, but not so much control that they feel overwhelmed.
Designing the experience that’s right for the target customer is critical to being a successful Web designer. It’s the criteria by which each of the samples shown in this book has been judged. It’s also the criteria that the Web-browsing population uses to determine how successful a Web site will be.
Take twitter.com, for example. It’s unlikely to win a design award, yet it’s undeniably and profoundly popular. Twitter’s popularity is due largely to two main things: It’s a simple idea—telling your friends what you’re up to—executed simply with no bells, whistles, or decoration—and users have enough control over the experience to make them feel as if they’re expressing themselves—but, again, not so much control that the experience becomes overwhelming or intimidating. Specifically, users can customize their backgrounds and a few colors on the page, but they don’t have to be Web designers to achieve something unique.
(Right) Celebrities, companies, and individuals all use Twitter to express themselves by customizing their pages. The Twitter brand itself becomes one of variability.
The simple design controls on Twitter give users the experience of “designing” their page without being overwhelmed with too many options.
ANATOMY OF A WEB PAGE
& Usability S3
Form and Function of Web Design
Web design, as with any other form of design, requires the designer to understand the end user’s habits, the context in which the work is received and the necessary function of the end result. These factors usually present limitations that set the boundaries for starting a design project. For Web design, these boundaries have caused several design and structural conventions to emerge. Such conventions include a page header; persistent navigation; content areas and sidebars; footer navigation; and often a background treatment. Although stylling and aesthetics vary greatly from site to site, most sites adhere to this basic structure. Each of these common Web design elements and their placement on the page, came to be for several basic reasons:
THE NATURE OF HOW THE PAGES ARE VIEWED.
In Western culture, we’re conditioned to read from left to right, top to bottom. Therefore, the natural position for important information would be the upper left of a Web page. This ensures that elements such as logos, navigation and “featured items” are perceived first by the user.
The notion that users scan pages from left to right, top to bottom has been validated through the use of eye tracking studies. Sophisticated cameras fixed to the top of a computer screen have the ability to track the eye movements of Internet users and map out the patterns. The red areas in the images below indicate where users focused most of their attention. They reveal not only the fact that users’ attention is mainly focused on the upper left of a page, but also that Web users skim a page for key points, as shown by the spotty bits of color in the center and left image.
These images show the results of an eye-tracking study. They indicate that users focus their attention on the upper-left area of a Web page.
Many Web design conventions are borrowed from the world of print communication. Pictured here is the New York Times newspaper showing a header and feature area very similar to those on a Web page.
Because almost all early Web designers were amateur designers or trained as print designers, elements from print design were converted to Web design. Design elements like headers, feature areas, body text, and sidebars all come directly from age-old newspaper design standards.
The “fold” of a newspaper is literally the horizontal crease in the center of the front page delineating the top half from the bottom half. Newspaper editors tend to put as much of the most important information as possible above that fold since that’s the area that potential newspaper buyers will see. Similarly, a “fold” on a Web page is the line that delineates where the browser window cuts off the content. Areas above the fold are seen by the user when the page loads. Content below the fold requires that users scroll down.
Sites that want to attract the masses, like news portals, travel sites, e-commerce sites, etc., need to appeal to the lowest common denominator in terms of one’s ability to use technology. As the Web became established in the mid-to late 1990s, companies interested in having their users find what they wanted quickly would imitate the metaphors for navigation and site layout from other, already established, sites. For example, Amazon.com is credited with creating the first tab-style navigation (another borrowed convention); although there are probably earlier examples, the “tabs” served as a metaphor that worked in part because tabs were something people understood from the “real world” of file folders. As a result, Web sites all over the Internet began using a tab structure for their navigation—and still do to this day. Even Apple.com, known widely for its innovative design, once used a tabbed navigation very similar to that of Amazon.
Image of Apple.com from 2007 showing the tabbed navigation style.
At the height of the tab craze in 2000, some said that the navigation on Amazon.com resembled a graveyard.
SEARCH ENGINE OPTIMIZATION (SEO).
Having a high search engine rank is critical to a company’s online success. A higher rank on a list of search results means more traffic. Search engines, such as Google.com and Bing.com, use various methods to evaluate the content of a site and determine its rank. Some design factors that influence the search engine optimization of a page include: text links in the main navigation; multiple keywordrich text links throughout the page; limited use of images, especially images of text, since search engines cannot get content from images; bolded subhead copy styled with the <H> tags; and important content placed above the fold—the higher the better. Although these are not all of the SEO factors that influence the rank of a page, these are generally the factors that a designer has the most control over. The topic of SEO is discussed further in Chapter 8.
Orbitz.com is a good example of a page designed for SEO. Multiple keyword-rich text links, bolded subheads and limited use of imagery consistently produce a top ranking for searches of “Vacation Packages.”
The Interactive Advertising Bureau (IAB) was established in 1996 to set up standard practices in Web advertising. The organization sets forth rules that govern the size, shape, and file weight (among other things) for advertising assets. This helps advertisers create a finite series of banners that can be used on any Web site that adopts the IAB standards. For Web designers, this means that their Web design must accommodate banners that are 300 x 250 pixels (“big box”), 180 x 600 pixels (“skyscraper”), and/or 728 x 90 pixels (“leaderboard”), among others. If a Web site is funded with ad revenue, these dimensions become a critical part of the framework of the site. Additionally, advertisers want their ads above the fold so that the user sees them immediately. Web site owners, on the other hand, don’t want the ads to overpower the message of their site. Web designers satisfy both sides by establishing a structure that flows with the required sizes of the ads—a 300-pixel-wide sidebar will fit a big box ad without any dead space around it, for example.
Yahoo.com and many other sites across the Web display advertising. In this example of the home page, a “big box” ad appears in the right-hand sidebar. The sidebar for this page has been designed to accommodate banner having a standard width of 300 pixels.
Without understanding the function behind standard Web design conventions, designers are purely imitating things that they’ve seen.
While these particular factors are unique to Web design, the idea of a set of parameters that restricts and informs a design is not unique. Car designers, for example, are faced with hundreds, if not thousands, of these types of challenges. People want to be able to drive more than one make of car without having to work to relocate and decipher the speedometer, for instance. Yet, there’s a wide range of variation in the sizes and shapes of cars on the road today.
The duality of form and function is a universal design concept; however, most new Web designers aren’t as aware as they should be of the technical and functional implications behind the design decisions they make. Without understanding the function behind standard Web design conventions, designers are purely imitating things that they’ve seen. This chapter explores the parts of a Web page and specifically how those parts contribute to the overall effectiveness of a site—aesthetically and technically.
Car designers face similar challenges as Web designers when designing a dashboard interface. They seek a balance between unique style and standardization and ease of use.
This chapter examines the structural design conventions that have evolved to make up Web pages. This idea is different than the concept of design templates or “themes” that have become very common with the emergence of content management systems (CMS) like WordPress and Drupal. Below are the “Church Theme” and the “Lifestyle Theme” designed by StudioPress for use with WordPress. Notice how they are identical in structure and format. The only difference between the two is their “skin”—the colors, fonts, and images. While theme-based Web design makes having a Web site easy and affordable, the concept has the potential to erode the value of what Web designers do. At worst, it turns design and creativity into a commodity and homogenizes the look of the Web.
MarthaStewart.com is an elegant design example from both a structural as well as an aesthetic point of view. The subtle and consistent design treatments give the site a uniquely Martha Stewart feel, despite using a standard Web structure.
The header of a Web page is one area that remains relatively consistent throughout a Web site. It acts as a grounding force for the user by identifying and visually unifying all the pages of a site. Headers establish the brand look and feel for a site and often will present the user with a call to action—search, buy, register, etc. The header of a page must perform these tasks without overpowering the content of the page and distracting the user.
The code behind the header contains information that is vital to the search engine optimization of the page. From meta data (keywords and descriptions of the page in the code) to the page title (this is the line of copy that appears on the top of a browser window), search engines use these elements to begin indexing the content of the page.
The header graphic for GQ.com uses the magazine’s iconic logo as the central element. The clean, centered design approach creates a unique and identifiable presence for the brand.
Headers act as a grounding force for the user by identifying and visually unifying all the pages of a site.
The header often contains the main navigation for a site. Since navigation is essential for a site’s usability, it’s logical that it would placed prominently above the fold. The topic of navigation is explored further in Chapter 7, Planning & Usability.
The header for MenuPages.com integrates navigation, branding, a call to action, and advertising space into a delightfully clean and clear presentation.
WhiteHouse.gov uses a simple and elegant treatment for the header/navigation of the site, with subtle hints of depth and texture.
CNN.com’s bold use of their brand color and centered placement of their logo make for a distinctive page header.
One indication of effective design is a clearly defined hierarchy of information. To achieve this, designers use a focal point—an area in the composition that is perceived before all others and serves as an entry point into the layout. In Web design this is often the main feature area. This area usually takes up a large portion of the home page, has the most vibrant color and typography, and usually features some sort of motion or animation. All of these things combine to make it the most important visual item on the page.
MarthaStewart.com has a tasteful feature slideshow that highlights various content from the site with each frame indicated by a tab at the bottom. This solution also includes a pause/play button so users can stop the animation, reducing distractions as they read other content on the page.
To achieve hierarchy, designers use a focal point—an area in the composition that is perceived before all others.
Apple.com uses the feature area to highlight their latest products. Dramatic photos combined with simple, pithy headlines set in minimalist typography result in an impactful presentation with a clear focal point and call to action.
FamousCookies.com uses Flash animation for the main feature. The oversized cookies and type are munched away and replaced one at a time. The combination of HTML and Flash technology works well for this site since the animation serves as an accent for the page, and does not contain any important content that would be hidden from most search engines.
BuiltByBuffalo.com, one of the few design agency sites in this book, has a simple yet dynamic feature area on the home page. The photography used in this example overlaps the header area, helping to unify the page and add a sense of depth.
Breaks in the content allow users to scan the layout quickly and gives them multiple entry points into the page.
The body or content area of a Web site is where users spend most of their time, as it usually represents the end of their search for content. This is where traditional design ideas of legibility and clarity come into play, but with some added considerations. A Web page can be any height; therefore, it’s important to break up long stretches of content with white space and subheadings. These breaks in the content allow users to skim the page quickly, and it gives them multiple entry points into the content.
Dividing up the content by using heading tags (<H1>, <H2>,and so on) helps search engines evaluate the content of a page. Some search engines place a higher value on words contained within these tags, since they tend to summarize the key points from the content.
Bolded subheads, iconography, and generous white space make this page from Apple.com easy to scan to find the information you’re looking for.
Linked words within the text of a page help to organize ideas and reduce the need for long pages; if a user would like to know more about a related topic, the user can click to another page rather than have all the information on a single page.
Highlighted text links on both GapersBlock.com and AndyRutledge.com help the user scan for related information and key ideas contained within the linked text.
The optimal line length for ideal legibility is no more than two to two and a half alphabets—52 to 65 characters.
In addition to not having a height limit, Web pages also don’t have a limit to how wide they can be. Web designers have two options for addressing the problem of page width variability. Most current sites have a fixed width frame or boundary, whereas the content is confined to a box with a set size that floats in the browser window as it expands and contracts. The second option is to have variable-width columns. Variable-width layouts were popular in early Web design primarily because they were easy to produce. Designers would simply flow copy into a layout, unconcerned with the consequences of expanding browser windows. The issue with variable width layouts is that without limits to the the length of a line of text, it can become illegible. Typographically, the optimal line length for ideal legibility is no more than two to two and a half alphabets—52 to 65 characters. This prevents eye fatigue both with lines that are too long where a user might lose their place, or lines that are too short where the user is continually going to the next line after just a word or two.
acted quietly but
kept driving their
Jaded zombies acted quietly but kept driving their oxen forward.
The wizard quickly jinxed the gnomes before they vaporized. All
questions asked by five watched experts amaze the judge. Six boys
guzzled cheap raw plum vodka quite joyfully.
Jaded zombies acted quietly but kept driving their oxen forward. The wizard quickly jinxed the gnomes before they vaporized. All questions
asked by five watched experts amaze the judge. Six boys guzzled cheap raw plum vodka quite joyfully. Just keep examining every low bid
quoted for zinc etchings. Sixty zippers were quickly picked from the woven jute bag. Few black taxis drive up major roads on quiet hazy
nights. Six big devils from Japan quickly forgot how to waltz. Painful zombies quickly watch a jinxed graveyard.
These three examples of text show how a short line length (top) and a long line length (bottom) make text difficult to consume quickly. The middle example contains 52 to 65 characters in a single line, presenting optimal legibility.
Wikipedia.org uses a variable width for the body/content area of the page. Both of these images are of the same page, showing a narrow browser window and a very wide window.
The sidebar of a Web page contains secondary information that either supports the main content of the page or directs users to related content through the use of submenus and links. Areas of a sidebar are often sold for advertising space. Skyscrapers and big boxes typically fit well within the modular structure of a sidebar. As with the header, the design of a sidebar should blend in with the look of the site as not to visually overshadow the content of the page, helping to create an overall feel for the page.
Sidebars, like the ones shown here from Kinder-Aktuell.de (above) and Breez.com.au (right), are useful for providing supporting information as well as advertising space.
The sidebar on Vimeo.com begins with a call to action for new users to sign up. The 300-pixel-wide column also has space for standard IAB ads and related item links, each color coded for increased usability.
The footer has emerged over recent years as a critical part of Web design, performing tasks for both the user and search engine optimization. In the early days of Web design the footer would contain the copyright information for the site as well as a couple of links. Over time, Web page footers have grown to resemble a mini site map, with links to each of the main pages of the site. These links not only help the user navigate the site but also help search engines like Google index the site properly, improving the search engine ranking— Google places a higher value on words contained within links.
The playful footer of Drupalcon.com provides a tasteful place for sponsor logos and promotional banners in addition to textbased navigation.
The footer of automaker Honda.com gives a complete list of areas of the site and also adds a small bit of visual interest with a randomly appearing image.
In the earliest days of Web design, designers would use a repeating graphic in the background of a Web page, imitating the effect of patterned wallpaper. Today, Web page backgrounds are used in more sophisticated ways to complement the content of the page. Backgrounds can be used to create depth or dimension, add richness with texture and color to a page, or even expand the content beyond the borders of the page.
The designers of Vaseline.com turned the background into a critical element of the page. Large images of smooth skin lay beneath a simple, CSS design structure.
Wiski.com uses a topographical map in the background, which also gives the user a feeling of snow.
The background of a Web page doesn’t need to recede or be subordinate, as seen in this example from TNVacation.com. The illustration in the background of this home page adds both visual interest and content to the page.
The background images on en.opera.se give a dramatic sense to the pages of the site because of their contrast of scale.
The dark wood panel pattern in the background of VaelProject.com gives the pages texture and creates a mood that’s dark, rugged, natural, and masculine.
There is some debate between Web designers and usability experts regarding the use of dark background and light text. Most experts believe that it’s more difficult to read light text that’s reversed out of a dark background; however, many designers prefer the look of dark backgrounds. As with many other decisions a Web designer makes, this one comes down to the tolerance and preference of their user.
Draplin.com, the Web site for graphic designer Aaron Draplin, offers users the ability to switch from a light to dark background.
Blackle.com, a Web site that employs the Google Custom Search tool, mimics Google.com but with a black background. The site, created by Heap Media, claims to save energy by reducing the amount of watts a monitor needs to display black versus white.
WEB DESIGN UNITY
Until now, this book has been about what makes Web design unique—the special considerations one must make as a Web designer. There are, however, many commonalities between Web design and other forms of communication design—the fundamental principles of organizing space and hierarchical communication that are essential to all forms of design. This chapter explores means of organizing space to enhance a user’s access to, and understanding of, information.
& Usability S3
Organization and Hierarchy
One of the most important aspects of design is the concept of hierarchy. Visual hierarchy is the sequencing of elements within a design. This sequence clearly defines the most important elements of the design, followed by the second most important elements, and so on. Almost every type of information can be broken down into three to four levels of importance. More than that makes contrasting the difference between the levels difficult.
An effective design system takes precedence over the individual elements, so that the user perceives a cohesive unit.
To create hierarchy, a designer must first create a system. A system is created by logically grouping the elements of a design, either through meaning or function, and forming visual relationships between them. An effective design system takes precedence over the individual elements so that the user perceives a cohesive unit. Any element that breaks this system will have more visual value and be understood to have more importance than the other elements, creating a hierarchy.
For example, in a classroom where the desks are neatly arranged in five rows of five desks and each student is sitting in his or her seat, the students appear as a single unit. Regardless of the different genders, clothing, hair styles, or body types, all the students fit within the group because of their organization or spatial relationship to one another. If a single student decided to break the system of rows by moving his desk into the aisle, he would stand apart from the system and give himself visual importance over the other students. The students appear as a single unit because of their arrangement in space—the rows of desks—and the student whose desk is not in line with the others stands out strictly because of his lack of relationship, or his contrast, with the others.
There are, of course, other methods of developing design systems to create hierarchy. Elements of style such as size, scale, color, texture, and depth are examined in the next chapter, “Elements of Web Design.” This chapter focuses on the use of space and the effects of a grid system on Web design.
Creating a design system almost always starts with the clear organization of space. Deliberately constructed white space, not to be confused with unconsidered or empty space, is often overlooked as an element of Web design. In fact, a common mistake among inexperienced designers is to focus too heavily on the “objects” in a design (type, images, points, lines, and planes), and space is simply what’s left over when they’re finished. Space is essential for creating relationships that form systems that lead to hierarchy.
The interplay between the objects of a design and the background is called the figure-ground relationship. White space, also called negative space, is a reference to the “ground” in “figure-ground.” The goal of a designer is to achieve a balance between figure and ground, where one doesn’t completely dominate the other. Instead, they work together to unify the design.
White space design elements include:
Margins the area surrounding a design
Gutters the space between columns of a grid
Padding the area around an element contained by a border
Line Spacing also known as leading, this is the space from baseline to cap height between lines of text
Paragraph Spacing adding line space is the most common form of paragraph indication in Web design although it is possible to use other methods like indenting, which is also another form of white space
These elements are arranged with no consideration of the space within the layout.
The same elements as above are now grouped and the space has been more clearly defined and organized.
The organization of the space in the layout creates a natural hierarchy or sequence of importance by either relating or separating elements.
The Gestalt Principles of Perception:
“The whole is greater than the sum of the parts.”
Theories involving the psychology of visual organization within art and design come mostly from the Gestalt Principles of Perception. These principles, developed in the early twentieth century at the Staatliches Bauhaus in Germany, refer to the mind’s ability to group elements based on one of the following relationships:
Grouping of elements that have a unique visual relationship. The two rows of squares above are grouped, despite being separated by a row of circles. The relationship of shape takes precedence over the spacial relationships.
Grouping of elements that are close to one another. Two groups are perceived above, despite the fact that there are sixteen individual boxes.
Grouping of elements that complete a larger unit. A single square is perceived in the above illustration, despite several of the smaller units being removed. The small square in the upper right “closes” the spacing to create a single form.
Grouping of elements that complete a pattern or progression. Each row of boxes above forms a group despite the gaps in the row.
Deliberately constructed white space, not to be confused with leftover, unconsidered, or empty space, is often overlooked as a useful element of Web design.
InformationArchitects.jp (opposite) uses a minimalist design that relies heavily on the use of white space to organize information and create hierarchy. The gutters, line spacing, and paragraph spacing are carefully crafted to help the user identify individual groups of information.
Similarly, JonTangerine.com (this page) uses wide margins and ample padding to make the page design scannable. With the exception of a small dot of yellow and a bit of red at the bottom, this black-and-white layout uses only a single font (Georgia) yet it has a clear hierarchy of information and plenty of visual interest.
The use of hierarchy and white space in Web design has a bit of extra significance over other forms of communication, since the elements of a design aren’t just elements, they’re the interface that the user needs to navigate and find information. The primary navigation bar, for example, needs to be immediately identifiable as such, so that the user can navigate the site. The design conventions discussed in the previous chapter help the user identify specific areas of a Web site, but they shouldn’t be taken for granted. Guiding the user through a layout should be done deliberately to ensure maximum usability.
In this example (CateringByLinda.biz), the designers surrounded the navigation with a generous amount of white space to help it stand out from the rest of the layout.
Surfstation.com has long been known for its beautiful design. The latest incarnation of the site emphasizes white space for clear separation of elements and organization.
White space is also essential for making a layout scannable, a critical aspect of Web design. Layouts with well-managed white space allow users to scan information and groups of information to find what they’re looking for quickly. Cluttered layouts, or ones that don’t effectively manage white space, make it hard for the user to identify patterns which are essential for scanning information. Imagine a group of people milling around at a party versus a line of soldiers at roll call. The people are the same, but the space between them has been organized.
This is a side-by-side comparison of a competition mini-site created by the AIGA DC. On the left is the original site; on the right the white space has been filled in to highlight the consistent and almost rhythmical use of space. The generous spacing around the headline and lead-in statement helps them stand out on the page. The non-default, slightly open line spacing for all the text gives the pages a very light and scannable feel.
White space is actually a reference to “ground” as in “figure-ground,” and doesn’t need to be white at all. In this example, ThinkingForALiving.com, the ground is a pink hue, but the result of well-constructed white space on the design is the same.
At times, more than space is needed to highlight, group, or separate elements on a page. Borders, lines, and boxes can be helpful in defining the space and containing elements within sub-groups. The varying types of borders that can be created with CSS, including dotted, dashed, double, and single lines, make them powerful stylistic elements as well. Even rounded corners, a popular design treatment for boxes, are now possible using CSS3, and they are viewable in browsers compatible with CSS3.
CSS can be used to define the border of an object. The border, represented by the orange line in this diagram, lies between the padding distance and the margin area.
The sites seen here, BrandNew.UnderConsideration.com (left, top), 20×200.com (left, bottom), and DollarDreadful.com (above), use a wide variety of distinctive line styles to segment the page and reinforce a design style.
Grids not only organize the elements of a design, they organize the space within a design.
One of the oldest ways to create a balance of figure and ground is through the use of a grid system. Grids not only organize the elements of a design, they organize the space within a design. Clearly aligning design elements through the use of columns creates defined space, and it’s this space that gives the appearance of organization.
Early Web sites were laid out using tables, a word processing convention of rows and columns used to arrange elements. Some early Web layouts had a compartmentalized or checkerboard feel as a result of using or overusing tables. Tables are also limited in their flexibility and result in long markup for even simple layouts. Although tables still exist in HTML, <div> or divider tags have taken over as the preferred method of containing and laying out elements of a design. The flexibility of CSS-styled <div> tags more closely resembles the feel of a print layout program such as Adobe InDesign. They enable very sophisticated, print-like layout and grid use.
The letterforms of Helvetica, the ubiquitous Swiss typeface and subject of a documentary film, are based on a grid system, making it instantly recognizable over its predecessor, Akzidenz Grotesque.
New Graphic Design magazine was started in 1958 by Richard Paul Lahose, Josef Möllerbockmann, Hans Neuburg, and Carlo Vivarelle. The cover of issue 16, pictured here, illustrates the grid system that permeated the entire magazine and is credited with defining the Swiss style of graphic design.
Left Loft, the designers of CorporateRiskWatch.com, actually expose the grid structure they’re using by tracing it with dotted lines. The elements of every page seem to dance around this five-column grid.
BlackEstate.co.nz, which has won numerous awards for its use of typography and unique navigation, features a six-column grid. The tall page is held together because of the strict adherence to the elegant grid.
The Swiss styling of WilsonMinor.com is a classic example of a well-used grid structure. Headlines, subheads, images, and text work together to define and span the six-column grid.
The grid on DigitalPodge.com is filled in a more organic way. Instead of the elements neatly aligning in exactly the same way, there’s a playful bouncing of text and image within the grid structure.
To create a fixed-width grid for the Web, a designer must first determine the width of the design, which is determined by the target user’s monitor resolution. Most sites are still optimized for 1024 pixels x 768 pixels, therefore most Web grids are between 950 pixels and 990 pixels wide. The reason the width is 25 to 50 pixels less than the monitor resolution is to accommodate for browser elements like scroll bars and window frames, avoiding side scrolling. Once the width has been determined, a designer decides how many columns are needed. Generally, three columns is too limiting, and more columns means more design flexibility; however, too many columns can make recognizing relationships difficult. There is no right number of columns, but the optimal grid gives a layout a clear sense of organization while still allowing for flexibility. The column width for a grid is determined by the overall width divided by the number of columns. And finally, gutters, or the spaces between the columns, are added, providing separation between the elements in each column.
This is a diagram of a grid system with the following specifications: Width: 948px Columns: 4 Column width: 222px Gutter width: 20px 2-col span: 464px 3-col span: 706px
FIXED WIDTH (Floating Centered; Fixed Left)
Grids used for Web design need to have a flexible quality to them in order to accommodate varying monitor widths and resolutions. There are several solutions to this issue. In this example of a fixed-width grid, the grid either floats in the center of the browser window or is fixed to the left side. As the browser window expands in both cases, the layout within the grid is not altered.
In a variable-width grid system, each column expands proportionately with the width of the browser frame. This causes the layout within the grid to change and shift depending on the width of the user’s monitor.
COMBINATION OF VARIABLE AND FIXED WIDTH
This diagram shows a grid that has both fixed-width columns as well as a single variable-width column. As the browser window expands, only one column width expands with it. The layout of the center column shifts, while the two flanking columns stay fixed.
The grid system on SimpleArt.com.au is flexible, so whether the page is viewed on large or small monitors the layout feels consistent. Note in the wider layout below, the columns of the grid widen and the header/navigation area moves to the right.
Items in a layout that break the established system stand apart from the rest of the elements within the system. In this example of AIGALosAngelese.org, the AIGA logo does not “sit” on the grid. By shifting outside the grid it’s given more visual value than the other elements on the page, as illustrated in this diagram.
Once the grid system has been established, elements of the design are placed within the grid. Objects can span more than one column width, but each element must have some clear relationship to the grid itself. Any element that relates to the grid in a unique way or breaks the grid system will rank higher on the hierarchy scale.
The Baseline Grid
Something that print designers have been using for years but is only recently being adopted by Web designers is the use of a baseline grid. A baseline grid is a horizontal grid system that exactly aligns the baselines of all the text on a page, regardless of size or style. Baseline grids create a smooth rhythm in the typography within a design.
Creating a baseline grid in CSS involves a bit of math, since there’s no built-in baseline grid attribute. A Web designer starts by choosing a type size for the majority of the text on the page. Then a line height is applied in the CSS, which is essentially the equivalent of leading. To create the appearance of a baseline grid, all other measurements, including the margin spacing, display type size, etc., should be multiples of the line height. This will ensure that all baselines will line up relative to one another.
TheGridSystem.org is a blog about the use of grids in design. An interesting feature of this site is the ability to expose the grid structure as well as the baseline grid.
Below is an example of a baseline grid in use. Note that each typographic element, regardless of size or typeface, sits exactly on the baseline grid.
Modularity can mean a couple of things when it comes to Web design. For a Web designer, modularity means creating reusable or modular design assets that fit within the established grid system and get reused throughout a site. These modules not only create design efficiencies, but they also help with usability by repeating recognizable elements that a user can remember.
This design for CNN.com from the late 2000s employed white modules of content on a gray background. The modules could expand and contract based on the length and priority of content as seen in this three-consecutive-day span following the 2008 U.S. elections.