Resources for Web Workers

Design

Some Web pages make us say, "Ooo ... aaah ..." Some give us a feeling like "Wow!" Others appear blah or even ugly. A Web page can repulse someone.

What makes the design of a Web page good or bad?

See > Type > Layout > Color

The Seven Components of Design*

  • Dominance
  • Hierarchy
  • Balance
  • Space
  • Color
  • Unity
  • Gestalt

Even though your first impression of a Web site may be "Wow!" -- that might change to "Huh?" if you cannot figure out what the site is about. Where can I go? What can I do? How can I find what I want?

Communication -- all seven components contribute to clear and effective communication.

All good design succeeds at communicating something.

For example, if nothing is dominant on a Web page, then you don't know what to look at first. You may give up and try another Web site. Dominance can be conveyed by size (largeness), or color (red attracts attention), or placement (position).

Even a Web page with just one headline, one image and one block of text can have a hierarchy. Which element on the page is most important? Which element grabs your attention first? Which element plays with your emotions or appeals to your logical mind? How does your eye move across the page?

Untrained designers think balance means that all elements should be centered. Not so. Centering everything means there is no tension. Tension creates interest and even excitement. Balance can be asymmetrical. Think about three children on a seesaw (teeter-totter). Two small kids on one side. One large kid on the other side. That's balance.

The deliberate use of empty space (also called white space, although it's not always white) as a design element contributes to a dynamic balance among all the elements on a Web page. It helps to reveal a hierarchy.

Color can help to communicate hierarchy as well as establish a mood, such as calm or seriousness, fun or excitement. Color can be used to show how elements on a page are organized. It can help the eye match things that go together and separate things that stand alone.

> More about use of color on the Web

When elements are dropped onto a page without planning and forethought, they appear to be random and even senseless. Unity is the opposite. When unity exists among the elements on a Web page, they look like they belong exactly where they are.

The Bauhaus brought us the word and concept of gestalt. The whole is more than the sum of its parts. Design is a system, and each part of a system is affected by the other parts.

You Don't Know What You Don't Know

How can you learn the best ways to use these seven elements in your own Web page layouts? Some people have a natural ability for visual design. Most people, however, do not.

This little page is just an appetizer in the banquet of design knowledge. Take a class. Read some books. Visit the largest bookstore you can find and look for the magazines How, Step, Communication Arts and Applied Arts. Explore the AIGA site. Invest some time in learning about professional design practices.

Unlike HTML and CSS, design is not a topic with hundreds of online tutorials and instructional Web sites. You will need to go offline. I have listed a couple of good publishers on the Books page. Try the public library. If you're at a university, go to the department of fine arts.

> Start learning about Type
> Start learning about Layout
> Start learning about Color

Most people can learn to create better designs -- if they study, observe and practice new things.

> See also the Books page

*Alex W. White, The Elements of Graphic Design. Allworth Press, 2002. Only 150 pages, this book provides a wonderfully thorough discussion of the subject.