Negative Space
White space is sometimes also called negative space. The text and images on a page represent the positive space. Art design teaches that an observer notices both negative and positive spaces on a page. As a result, many designers pay close attention to the negative space on a page. To them it is a design itself.
Figure 5.12
Reversing the text and graphics in this figure makes it easier to seethe negative space on the page.
One of the ways to see the impact of negative space is by studying it separately from the content on the page. If you look at Figure 5.12, you will see the reverse of Figure 5.10.
In this figure you can see clearly the black or negative space up against the white or positive space. Studying negative space makes it easier to see the impact of white space on a page. In this figure the white box competes with the white title for your attention. The overlapping of the text on the image is even more apparent when you are viewing it only as negative space.
Negative space is another term for white space or areas on the page where no text or graphics are located.
Positive space is the area on a page where text or graphics are located.
Web Page Design Principles
Web page design has evolved much like print pages did. In print, initially there were few design options. Pages consisted of text and a few graphics placed at the start of a paragraph (called illumination). Printing presses allowed more complex designs to appear, including the use of columns. Desktop publishing software allowed personal computer users to design pages once possible only by highly skilled printers.
Web pages (just like early print pages) initially consisted of text and a few graphics that could only be placed with limited control. No true "design" was possible. The web editor was restricted by the limits of HTML code. In time, more options became available and today the design possibilities continue to grow. As a result of these changes, websites are beginning to be designed with rules of their own.
Web Page Structure
The nature of a screen design is somewhat different from one designed just for the printed page. Focus is always at the top of the page and then flows down. This is the result of the need to scroll down the computer display. Text or images at the bottom of the page may not be immediately visible.
White space is even more important on web pages than text because there are no margins to provide the openness that appears on print pages. Some web designers place all the text in frames that are smaller than the average screen so that there are wide borders that mimic margins. Another way that white space is added to web pages is by increasing spacing between each paragraph. Designers often don’t take full advantage of the possibilities that white space provides.
In print, readers are not required to navigate from one link to the next. They read in a linear fashion moving from one page to the next. Consistent design is not necessary. However, with web pages that require the reader to make navigation decisions, good design requires a consistent page structure. This consistent design from link to link within the site helps the reader know what to expect.
Standard Design
Most sites now follow a pattern that places link choices for the site in a left column and additional information in the right column (see Figure 5.13). The center column is used for visual flow of information. An image is placed at the top of the page or the left corner, but its purpose is to provide a visual reference rather than to attract interest.
The bottom line of the page contains links such as contact information, copyright, and page designer similar to those shown in Figure 5.14.
Just as in print, there are a wide variety of good designs. The best ones take into consideration the audience by tracking their eyes on the page.
It should be easy for readers to find the information for which they are searching. It should also be easy for them to read it once they find it. That’s good design regardless of the placement on a page.
Figure 5.13
Web pages that are designed for a screen rather than the printed page have slightly different design rules.
Figure 5.14
The bottom of the web page is often reserved for legal and contact information such as this one from the Gutenberg site that provides copyright restrictions and the name of the web master.
While it is unethical (and illegal) to use someone else’s images without permission, page design is unusual in that there are few such limitations. Observing someone’s web page or brochure design and then using a similar design is not only acceptable, but also a good practice. Imitating good design is a great way to become a better designer yourself. Just be aware that you are only allowed to use the arrangement on a page and not the actual components.
Design Decisions
All desktop publishing software, from the most basic word processing program to advanced programs such as QuarkXPress, allow for arranging pages in ways that attract attention and make it easy for readers to follow the information on the page. Good design is not a function of software; it is a function of your understanding of what you need to consider in the makeup of a page or pages.
On a final note, it is often hard for new designers to trust their judgment. They feel that they are not knowledgeable enough to know what others will see first or track. Trust yourself. You have been reading text for years. You have been following the focus and flow of designers without even realizing it. Now it is time to use this experience. Even designers with years of experience sometimes misunderstand what a reader will do, but most of the time they get it right. You will too.
SUMMARY
In this topic you learned how to look for the focal point on a page. Then you looked at the way the eye moves from the focal point and through the page using a Z pattern or another one determined by the designer. You saw how white space is an important element in the design process, which can be seen by studying the positive and negative space on a page. You saw how web page design uses similar design techniques but with modifications based upon screen limitations. And finally, you learned that it is important to trust your own instincts while making design decisions.
KEY TERMS
flow |
negative space |
white space |
focal point |
positive space |
Z pattern |