Using Shapes in Web Design

SUMMARY

Shapes like lines are an essential building block in our visual vocabulary and grammar. Try to create a design without using at least one shape. It’s impossible as even the blank page is a shape. There are an infinite variety of shapes and shape combinations. Most of the shapes you use and encounter will be geometric so try to work in organic shapes to create interest where appropriate. Abstract shapes are symbols representing organic shapes and are common to logos and icons. They can carry a lot of meaning due to their connection with more concrete natural forms and can communicate quickly and effectively and because of this some are overused. Look around you and observe shapes in designs and nature and think about what they are saying to you, what they make you feel, what they are communicating. Do they enhance or hinder the message of the designs you see? Keep pen and paper handy and scribble and doodle various shapes. Notice the shapes you draw, how they affect you, and how you can use them in your designs.

The Grammar of Shapes

Shapes are two-dimensional areas with a recognizable boundary. They can be open or closed, angular or round, big or small. Shapes can be organic or inorganic. They can be free-form or geometric and ordered. Shapes can be defined by their color or by the combination of lines that make up their edges. Simple shapes can be combined to form complex shapes. Complex shapes can be abstracted to make simple shapes. The different characteristics of a shape convey different moods and meanings (.doc file). Changing the characteristics of a shape alter how we perceive that shape and make us feel differently about a design. Shapes are a powerful way to communicate.

The Meaning of Shapes

There are truly an endless variety of shapes and combination of shapes, each communicating its own meaning and message. Often the meaning behind shapes is cultural (a red octagon as a stop sign), particularly as shapes are combined. We’ll confine ourselves to a discussion of some basic geometric shapes here and I’ll provide some links to more detailed sources of shape meaning beyond the basics.

Using Shapes in Web Design

We use shapes to add and sustain interest in a design. Shapes of different visual weight can be used to create focal points in a design and direct the flow of a design. Shapes organize elements by separating some and connecting others. Shapes can be used to convey depth by varying their size and position within a design. Larger shapes will appear closer and smaller shapes will appear further away. Shapes that are located lower in a design will seem closer and those higher up further away. Overlapping shapes is another way to create a sense of one in front of the other to add depth to your design.

    Designers use shapes to:
  • Organize information through connection and separation
  • Symbolize different ideas
  • Create movement, texture, and depth
  • Convey mood and emotion
  • Emphasize and create entry points and areas of interest
  • Lead the eye from one design element to the next