White Space in Web Design
Excerpt from Brian Miller's book
Above the Fold:
Creating a design system almost always starts with the clear organization
of space. Deliberately constructed white space, not to be confused with
unconstructed 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, photos, 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 balance between figure and ground, where one doesn't completely
dominate the other. Instead, they work together to unify the design.
Types of White Space
Every element on a webpage can be thought of as a box. margin is the area
surrounding a box, separating it from other webpage elements. padding is the
area surrounding the contents in a box, between an image or text and the
boxes border (the border may or may not be visible). In traditional print,
the first line of a paragraph is indented. In webpage text, and in modern
print text, the first line is not indented, paragraph spacing is used instead.
Colums can be equal widths, or different widths. Columns can be fixed-width,
or variable-width - adjusting to the size of the user's browser window. Often one
column is variable-width, while the other columns are fixed-width.
Brian Miller provides much more guidance on the principle of white space,
and many screen-shot examples of professional Web sites and how they
use white space. I don't see how anyone can be a true professional designer
if they haven't read Brian's book.
Graphic designer Ted A. Dobbs says,"
Above the Fold provides everything that you need to build a strong foundation
for a successful web site. The book is broken into three sections that talk
specifically about design, planning and marketing issues associated with
web site design. From reviewing the basic principles of design from a web
perspective to prototyping and search engine optimization, author Brian Miller
does an excellent job of explaining the specifics of the medium without getting
bogged down in markup languages. As a predominantly print-based graphic
Above the Fold gave me the knowledge and tools to design just as
successfully and comfortably for the web."
More General Web Design:
• What is Metadata?
• Ten Essential Questions for Creating a Web Design Brief
• Website Landing Pages that Capture and Convert
• What is "Above the Fold?"
• Five Ways to Give Your Web Site a Big-Company Look and Feel
• How to Make a Free Website on Webs.com
• A Day in the Life of a UX (User Experience) Designer
• Integrating Big Data Into Your Enterprise Analytics Systems
• DHTML or Flash?
• Unbiased Step-by-step Guide on Web-Hosting