Elements Of Design: Shape

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.Shapes1As 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.man_with_the_golden_armWatch 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?PsychoPosterCreating Interest With ShapesIn 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.3BucketsAbduction 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.AbductionLampJust 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.TypographyServed1TypographyServed2Images from Typography Servedexplorations-1Images from the Ministry of TypeGenerally, 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 Shapes1. 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:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • dckirba

    Thanks again Jennifer. Enjoying this series :)

  • André Henrique

    Very nice reading for non-designers! Congrats!

  • http://www.joygallucci.com jgwebdesigner

    Love this. Shapes are foundational, not decoration! They are SO important in designing.

  • http://www.crearedesign.co.uk/ Nicola Connolly

    I love ‘The Readies’ examples – really interesting to see the same content (I assume?!) displayed in such contrasting ways. Each style communicates a fresh meaning – a fantastic series of examples which support the design principle that getting the ‘form’ right is paramount. ‘Function before form’ is the key (that old chestnut) i.e. working out what the design needs to communicate and then presenting the content in a relevant style/shape/form to achieve the right mood and therefore the desired reaction in the viewer/reader. ‘Don’t add shapes purely for decorations purposes. They are a powerful tool in communicating a message’ spot on IMHO – using random shapes just for the sake of it will only confuse the viewer.

  • alyssa stewart

    this is really cool. after this i would like to get into shapes, and lines.