Last week we looked at the humble yet versatile line as an element used in design. Today we’ll take a look at shape.
Shape is defined as any element that’s used to determine or give form. We see shapes every day in logos, flags, books, clothes. A shape can exist in isolation or used in conjunction with type or lines. Look at the shapes below. There are no colors, yet many people will understand what these shapes mean or represent.
As a design element, a shape can be formed in many ways. It could be a block of color, an illustration or a photograph. The designer Saul Bass was a master when working with shapes. Here’s the poster for The Man With The Golden Arm. The photographs and the illustration of the crooked arm are part of the shapes and the text is either outside or surrounded by shapes.
Watch the opening credits for Anatomy Of A Murder and see how Bass combined text with simple but bold shapes, combined with jazzy music (Duke Ellington, I think).
Photographs add interest to a piece but they also add a shape. Look at the poster below, for the movie Psycho. It contains three photographs/illustrations cut into irregular shapes. The kind of shapes that could be formed when hacked with a knife perhaps?
Creating Interest With Shapes
In web design there are some shapes that have become standards, for example the “three buckets.” Three blocks of text often set with a different background color, as in this web site for Avon. Our eyes are drawn to the blocks because the shapes and the colors are attractive and interesting. Shape can certainly be one of the strongest design elements.
Abduction Lamp take the square look off their page with some polygon shaped text boxes. By breaking text up into smaller pieces using shapes, we give the reader a break and also organize text into blocks.
Just like the line, shapes can organize, separate and join information on a page. Shapes don’t always need a background color or stroke. They can be formed using text alone. Sometimes the shape of the text alone is enough to hold interest and break up the page. The examples below are stronger because there is no line or background color added. If you don’t need a design element, don’t use it.
Images from Typography Served
Images from the Ministry of Type
Generally, when we look at any layout, whether it’s on the web or in print our eyes are drawn to some elements more quickly than others. We’re firstly drawn to photographs of humans, then to other photographs or illustrations, then to large type such as headings and finally to the small type in the body text. Using shapes allow us to control or guide the viewer through the layout as we want.
Guidelines For Using Shapes
1. Think about what is the most appropriate way for you to use a shape. Is it a photograph, illustration, block of color or a block of text? Remember, less is more, don’t drag you viewers eyes all over the place by using too many shapes.
2. If you have a large block of body text, will the design benefit if you break it up using shapes? It can be tiring for a reader to read long sentences that run the whole way across a web or printed page. Use columns if it’s appropriate.
3. Are the shapes you’re using leading the viewers eye to the right places?
4. Don’t add shapes purely for decorations purposes. They are a powerful tool in communicating a message.
Next week, I’ll be taking a look at texture.
Related Reading:
- Design Elements: The Line
- Primary Design Elements, A New Series
- Create Type Within A Shape In Photoshop
Written By:
