Elements of Design for Web Pages

The four basic principles

Contrast The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page—it’s what makes a reader look at the page in the first place. Repetition Repeat visual elements of the design throughout the piece. You can repeat colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity. Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look. Proximity Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure.

These are overviews of the basic principles of design. But the most important principle: know your audience and the information its members need. The goal of communication is to make information pop out to viewers, that is, make the information as effortless to attain as possible. Design is not about individual elements but relations between elements. Therefore, any single element can work (or almost any) as long as it is combined with elements that form relations that utilize these four principles. However, the goal needs to remain focused on communicating specific information to specific people. The examples that follow will help you to explore these principles. Design is about performance and not the application of rules. It requires practice in applying these basic principles as guidelines to understand the complex network of relations that lead to effective communication.

From Robin Williams’ The Non-Designer’s Design Book, Berkeley: Peachpit Press, 2008.

Sample websites:

Adidas:

Chimera Game Studios:

Interview Magazine:

Singularity Design:

Big Picture:

Wordle:

MOMA:

http://www.adidas.com/us/homepage.asp

http://www.chimeragamestudios.com/

http://www.interviewmagazine.com/

http://www.singularitydesign.com/

http://www.boston.com/bigpicture/

http://www.wordle.net/

http://www.moma.org/interactives/exhibitions/2008/elasticmind/