The Meaning Of Shapes: Developing Visual Grammar

What do you feel when you see a circle? A square? A triangle? Are you affected the same when seeing an object with soft gentle curves as you are when seeing another object with sharp jagged edges? Much the same way that lines have meaning, shapes have meaning and are an important building block in the visual grammar and visual thinking we have at our disposal as designers.

Random Shapes

Shapes have an endless variety of characteristics, each communicating different messages to your audience. You’d be hard pressed to design any web page without creating shapes. Even if your page is nothing more than paragraphs of text you’re laying down shapes on the page.

What kind of shapes do we have at our disposal? What do all those shapes say to our visitors? How do they enhance or detract from the concept you want to convey?

The Grammar of Shapes

I found I could say things with color and shapes that I couldn’t say any other way—things I had no words for.
—Georgia O’Keeffe

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.

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

Shape types

Types of Shapes

There are 3 basic types of shapes (PDF).

  • Geometric shapes are what most people think of as shapes. Circles, squares, triangles, diamonds are made up of regular patterns that are easily recognizable. This regularity suggests organization and efficiency. It suggests structure. Geometric shapes tend to be symmetrical further suggesting order.
  • Natural/Organic shapes are irregular. They have more curves and are uneven. They tend to be pleasing and comforting. While they can be man-made (ink blobs), they are more typically representative of shapes found in nature such as a leaves, rocks, and clouds. On a web page organic shapes are generally created through the use of illustration and photography. They are free form and asymmetrical and convey feelings of spontaneity. Organic shapes add interest and reinforce themes.
  • Abstract shapes have a recognizable form, but are not real. They are stylized or simplified versions of organic shapes. A stick figure is an abstract shape depicting a person. Typographic glyphs are abstract shapes to represent letters. Icons are abstract shapes to represent ideas and concepts. Some abstract shapes have near universal recognition. Think of some of the icons you see in the software you use daily.

Shapes can be either positive or negative. They can be figure or they can be ground. Be conscious of the shapes you form with negative space as these are just as, if not more, important than the shapes you form with positive space.

Resources for Creating Geometric Shapes with Unicode

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.

Circles

Circles have no beginning or end. They represent the eternal whole and in every culture are an archetypical form representing the sun, the earth, the moon, the universe, and other celestial objects between. Circles are used to suggest familiar objects such as wheels, balls, many kinds of fruit. They suggested well-roundedness and completeness.

Circles have free movement. They can roll. Shading and lines can enhance this sense of movement in circles. Circles are graceful and their curves are seen as feminine. They are warm, comforting and give a sense of sensuality and love. Their movement suggests energy and power. Their completeness suggests the infinite, unity, and harmony.

Circles protect, they endure, they restrict. They confine what’s within and keep things out. They offer safety and connection. Circles suggests community, integrity, and perfection.

Because they are less common in design they work well to attract attention, provide emphasis, and set things apart.

rectangles and squares

Squares and rectangles are stable. They’re familiar and trusted shapes and suggest honesty. They have right angles and represent order, mathematics, rationality, and formality. They are seen as earthbound. Rectangles are the most common geometric shape encountered. The majority of text we read is set in rectangles or squares.

Squares and rectangles suggest conformity, peacefulness, solidity, security, and equality. Their familiarity and stability, along with their commonness can seem boring. They are generally not attention getters, but can be tilted to add an unexpected twist. Think of web pages that tilts framed images to help them stand out.

Every element on a web page is defined by a rectangle according to the css box model. Web pages are rectangles made up of smaller rectangles and squares.

In Buddhist symbolism a square (earthbound) inside a circle (eternal whole) represents the relationship between the human and the divine.

Triangles

Triangles can be stable when sitting on their base or unstable when not. They represent dynamic tension, action, and aggression. Triangles have energy and power and their stable/unstable dynamic can suggest either conflict or steady strength. They are balanced and can be a symbol for law, science, and religion.

Triangles can direct movement based which way they point. They can be used to suggest familiar themes like pyramids, arrows and, pennants. Spiritually they represent the religious trinity. They can suggest self-discovery and revelation.

The strength of triangles suggests masculinity. Their dynamic nature make them better suited to a growing high tech company than a stable financial institution when designing a logo. Triangles can be used to convey progression, direction, and purpose.

Sprials

Spirals are expressions of creativity. They are often found in the natural growth pattern of many organisms and suggest the process of growth and evolution. Spirals convey ideas of fertility, birth, death, expansion, and transformation. They are cycles of time, life, and the seasons and are a common shape in religious and mystical symbolism.

Spirals move in either direction and represent returning to the same point on life’s journey with new levels of understanding. They represent trust during change, the release of energy and maintaining flexibility through transformation.

Clockwise spirals represent projection of an intention and counterclockwise spirals the fulfillment of an intention. Double spirals can be used to symbolize opposing forces.

Crosses

Crosses symbolize spirituality and healing. They are seen as the meeting place of divine energies. The 4 points of a cross represent self, nature, wisdom, and higher power or being. Crosses suggest transition, balance, faith, unity, temperance, hope, and life.

They represent relationships and synthesis and a need for connection to something, whether that something is group, individual, self, or project related..

As with lines vertical shapes are seen as strong and horizontal shapes are seen as peaceful. Most everything said about vertical and horizontal lines can be said about vertical and horizontal shapes.

Curved shapes offer rhythm and movement, happiness, pleasure and generosity. They are seen as more feminine than sharp shapes which offer energy, violence and, anger. Sharp shapes are lively and youthful and are seen as more masculine.

Additional Resources for the Meaning of Shapes

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.

Creating depth with shapes

Shapes that lean toward a protagonist appear to be blocking or stopping progress. Shapes leaning away from the protagonist give the impression of aiding progress by opening up space.

  • Try to keep background shapes simple and large. Being large can help attract attention and simplicity can put the focus back to the foreground.
  • Try to use few shapes where possible. Don’t use 3 or 4 shapes to communicate when one shape will do.
  • Try to limit the number and size of shapes where possible for clarity in conveying your message

Visual Grammar – Lines, circles & squares from claudio graciolli on Vimeo.

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.

Download a free sample from my book, Design Fundamentals.

29 comments

  1. Why you limit your meaning to 2D shapes?

    3D shapes is the authentic menaning of all! in this way you can simulate true dinamics and actions in a true world, by using 3D real time simulation computer capabilities!

    • even 3D rendering requires a good understanding of shapes, because we don’t see in 3 dimensions we, it is only the world around us that is 3d, translated to our 2-Dimensional vision. in the end, all we can see is shapes, and not so much the true form of every object around us. I’m not sure if i’m wasting my time writing this though…

      • Good point. We’re creating on a 2-dimensional canvas so that’s all we ever see. I hadn’t even thought about our vision in the world. It’s true we only really see things in 2-dimensions when looking at them. We can build a 3d picture because we see them from different angles and understand how that 3rd dimension works, but we’re still looking at them directly and seeing 2d.

        Nope never a waste of time to share your thoughts.

  2. Hi Steven!

    Hooray! Nice post. Clear thinker. Thanks for sharing your ideas.

    I’m developing a representational English Grammar
    using color and geometric shapes. I’ve been developing an system that works quite well with ESL students. I’d love your feedback on what I’m working with.

    I totally agree with you that Visual clarity acts as a catalyst for insights to be discovered, understandings that are often otherwise labeled as unfathomable.

    I hope this finds you happy and healthy in your life.

    Sincerely,

    Ashley Tait

  3. Thank you Steven.This post is very comprehensive and is helping me consider the elements to include, and those not to, in the first am about to design. It for the drama team in my church

    • Good question. I’m not really sure. I would think you’d want something more angular and vertical, perhaps something triangular for it’s aggressive strength.

      It might not be a single shape on its own that conveys superiority or arrogance. For example a large shape next to a small shape, particularly if the larger shape is seen as confining the smaller one would probably convey superiority.

  4. Very interesting information Steven and the way you wrote it is simple and easy to read-thanks!
    Can I ask you to give me your references of these information or are these interpretations your subjective viewpoint?

    Thank you and best wishes.

    • Thanks Hala. I’m gad you liked the post. Some of the references are the things I linked to in the post. Outside of those links the information would have come from some books I was reading at the time. Unfortunately I don’t remember exactly which one.

      I published a list of some of the design books I’ve read. I probably grabbed bits of information from several of the books, but I think the majority of information would have come from the following 3:

      Design Elements: A Graphic Style Manual
      The Elements of Graphic Design
      Visual Grammar

      I have links to the books in the other post. All 3 are great books in general too.

  5. Steven! This is a pretty remarkable, clean, and fluid article. It matches my perception on 2-d shapes directly. It’s funny- I stumbled across this article because I was staring in to space in my home office and I happened to notice with enthusiasm that there were about 5 different rectangles in front of me: My cell phone, my flat screen, my computer monitor, etc. As a graphic designer my brain posed the question: What do rectangles mean? And- why do we consume all of our daily media on devices and surfaces with rectangular shapes: newspapers, books, billboards, etc.

    Nonetheless I stumbled across YOUR article and it matched my perception. These things are no accident. Books, flat screens, billboards, could all easily be circular. But I would agree that rectangles are more common, and immediately gain your instinctive trust in result to our primitive comprehension of “visual grammar” of shapes. Great article Steven, I’d love to read more of your work.

    • Thanks Austin. Cool way to find the post. You know you’re a designer when staring at objects on your desk leads you to a search for the meaning of shapes. :)

      I do the same thing. You see stuff and wonder what it means and you start looking.

      I had written a single post on the meaning of lines just before I’d written this one. I also have a series on the elements of design you might like. The link will take you to the first post and the bottom of that one should link to all the posts in the series.

  6. Steven
    What a great article!
    Im currently re branding my business as it is doing so well and are expanding.. I want everything perfect and looking for ideas for my new logo… you’ve given me great insight into portraying the right image!
    Thank you1

  7. I just love the way you explain things.
    I am a professor from Egypt teaching photography, I would like to have some samples of history from different cultures applying shapes, and analyse the meaning behind using shapes and colors in these cultures.
    thanks a lot for your effort to give people the knowledge gift.
    Regards

  8. I am wondering if lines represent more than the obvious…for example lines with open spaces…such as _____ ______ ___ that are in the margins of s circle or square in a drawing? I am wanting to have concentric circles in a drawing but to also allow free flow between the content of the circles. Thanks in advance for any comments you might send.

    • I think leaving space between the lines would communicate more of an open feeling. You’d still communicate what the shape normally communicates without the spaces, but the spaces allow your eyes to pass into and out of the shape more easily. I agree completely about it allowing freer flow between the content of the circles.

  9. I’ve found that I keep noticing something that bothers me — I’ve noticed the same on one of your articles about the 7 Components of Design (I think)…

    Sometimes, I seem to perceive the things that are meant to be perceived in a particular way from your wording differently. An example in this article is that you say the bigger circle is meant to exist in the foreground, and the smaller circle in the background, whereas I see the exact opposite — if I overlaid them, I would except the smaller to come out on top (perhaps this is the result of me using illustrator too much!)

    A similar occurrence is that, in a few of your articles involving focal points, I found some things stood out far more than other things, when I was meant to perceive one thing as the focal point instead. For example, in Kandinsky’s Composition #8 I notice the white circle off-centre towards the right as the focal far more than the black circle in the corner.

    And again, in the Gestalt article, I saw the lighter square on the dark background as being on top still, not as a ‘hole’, as you suggested.

    It’s odd how the same shapes can be perceived in different ways, but I suppose that is exactly what we need to be wary of — will our designs affect different people differently, and if so, how? Shapes and icons are prominent examples, as you’ve outlined here!

    Great as per usual!

    • Thanks Zoe. Interesting how you perceived a few things differently than I wrote about. I think to some degree that’s normal. We’re all different and most “design principles” are really more guideline than absolute rule.

      The idea of the bigger object appearing to be in the foreground is probably from my article on size, scale, and proportion. I’m guessing, but if so the idea was the bigger object would appear nearer and so would be in the foreground where the smaller would appear to be in the background.

      If you do overlay the objects I think the small one tends to look like the foreground with the larger object as the background. It’s like placing a small dark block on top of an large white block. The white block will feel like background because of it’s size.

      With the Kandinsky painting, what I described is how I saw it, but I don’t think everyone would see if the same way. Again we’re all different and we’re interested or attracted to different things. Interesting you see the white circle first. I would think it doesn’t take long for your eye to be drawn to the larger black circle, but maybe not.

      I think you have it exactly right that we have to ask if our designs will affect different people different. I absolutely think they will. Like I said it’s more guidelines than rules.

Leave a Reply

Your email address will not be published.

css.php