What do you feel when you see a circle? A square? A triangle? Are you affected the same way 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 also have meaning and are a important building blocks in the visual grammar and visual thinking we have at our disposal as designers.
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. 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
Types of Shapes
There are 3 basic types of shapes (PDF).
- Geometric shapes are what most people think of as shapes. Circles, squares, triangles, and 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, which further suggests order.
- Natural/Organic shapes are irregular. They have more curves and are uneven. They tend to be pleasing and comforting. While they can be human-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 have no beginning or end. They represent the eternal whole and in every culture are seen as an archetypical form representing the sun, the earth, the moon, the universe, and other celestial objects. Circles are also used to suggest familiar objects such as wheels, balls, many kinds of fruit. They suggest 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. They are warm, comforting and offer 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 suggest community, integrity, and perfection.
Because they are less common in design they work well to attract attention, provide emphasis, and set things apart.
Squares and rectangles are stable. They’re familiar and trusted, and they 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 tilt 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 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 on 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 also suggest self-discovery and revelation.
When designing a logo, the dynamic nature of triangles make them better suited to a growing high tech company than a stable financial institution. Triangles can be used to convey progression, direction, and purpose.
Spirals are expressions of creativity. They are often found in the natural growth pattern of many organisms and convey feelings associated with 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 a return to the same point on life’s journey, though with new levels of understanding. They represent trust during change, the release of energy, and maintaining flexibility through transformation.
Clockwise spirals represent the projection of an intention and counterclockwise spirals represent the fulfillment of an intention. Double spirals can be used to symbolize opposing forces.
Crosses symbolize spirituality and healing. They are seen as the meeting place of divine energies. The four points of a cross represent self, nature, wisdom, and a 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 a group, an individual, or the self.
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 also said about vertical and horizontal shapes.
Curved shapes offer rhythm and movement, happiness, pleasure, and generosity. They are seen as softer than sharper shapes, which offer energy, violence, and anger. Sharp shapes tend to be viewed as being more lively and youthful.
Additional Resources for the Meaning of Shapes
- The Meaning of Shape
- Simple Symbol Meaning
- Symbols and their Meaning
- About Symbols
- The Psychology of Forms
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 to 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 to the viewer and smaller shapes will appear further away. Shapes that are located lower in a design will also appear to be closer, and those higher up will appear to be further away. Overlapping shapes is another way to create a sense of “one in front of the other” and can add depth to your design.
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. A large shape can help attract attention and the simplicity can move the focus of the viewer back to the foreground.
- Try to use as few shapes as possible. Don’t use three or four shapes to communicate when one shape will do.
- Try to limit the number and size of shapes where possible for clarity.
Visual Grammar – Lines, circles & squares from claudio graciolli on Vimeo.
Summary
Shapes, like lines, are a essential building blocks 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 or screen is still a shape.
There are an infinite variety of shapes and shape combinations. Most of the shapes you use and encounter will likely be geometric so, where appropriate, try to work in organic shapes that will stand out and create interest.
Abstract shapes are symbols representing organic shapes and they’re common to logos and icons. They can carry a lot of meaning due to their connection with more concrete natural forms, and they can communicate quickly and effectively. Be aware though that because of this some shapes are overused.
Look around and observe shapes in designs and nature and think about what they’re saying to you, what they make you feel, and what they’re communicating. Do they enhance or hinder the message of the designs you encounter?
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.
Amazing..
what about stars dam it!
The fault, dear Casey, is not in our stars, But in ourselves.
(Thumbs Up)
Surprize. Stars are made from 2 triangles.
Are you sure about that? A six point star is two interlocking triangles, but a five point star isn’t.
A real star is a sphere. No point, just an observation. 🙂
True. I imagine the shape comes from the rays of light you see looking at a star. We know they’re round today, but that wouldn’t been the case when someone called the shape we know as a star, a star.
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.
We see in 2 dimensions, but our brain process the eye signals to give to the object that we are looking at a position in a certain moment; at the saim time we process other information like shape, colours, shadows ecc. with a bottom-up recognition or top-down, the result is a 3-D perception (if I see an object moving in my direction i recognize it and i know that I donothin it will hit me).
The beuty of all this is that we are our brain. We live even if we don’t know at all the psicologiy of us.
What about 11 dimensions of the string theory. And millions of dimensions of quantum physics.
Isn’t this a hypothesis and not a theory. Theories can be tested experimentally.
Because this post is about the meaning of shapes in 2-dimensional graphic design. Not every post or article can be about all things.
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
Thanks Ashley. I’ll be happy to offer feedback, though I’m not sure how much I can help as I’m not all that familiar with ESL. Happy to help if I can though.
Ashley’s comment reminded me of ASL, American Sign Language, and the hand shapes and gestures of the signing alphabet. I’ve been reading your posts today, and I love the elements of design you write about. Thanks for expanding my mind and what my eyes can see and now appreciate in a more full understanding.
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
Thanks Olanrewaju. I’m gad you found this post helpful. Good luck with the design.
Hi Steven,
Are there any shapes which suggest superiority or arrogance?
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.
The inferior could be the middle of overlaps in a Venn diagram.
Lorraine
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.
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.
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
Thanks Rebecca. Glad I could help with your new logo and congrats on doing well and expanding.
Excellent concise synopsis of shapes in relation to design. THANK YOU.
thanks steven it really helps to motivate my students. God bless
Thanks Cheryl. I’m glad I can help with the motivation. 🙂
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
Thanks Salma. That’s an interesting idea. A look at shape and color through history. I bet it could shed some light on different cultures and how they communicated.
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.
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.
Hi,
thanks for providing such a beautiful information about shapes, as its very helpful and important, a designer must know this and should be aware of it, thanks a lot…:)
Thanks Amanjot. It’s definitely a good idea for a design to understand what he or she might be communicating.
Hi, Steven I was wondering could the shape of square have the meaning of elegance? I am currently analyzing a product that has square shape or can be said cube design. Still, I need to relate it with “elegance”. Are there any relations with square or cube?? Thank you so much 🙂
Hi Jennie. Sorry I didn’t reply sooner. I’m not really sure if a square would equate to elegance. I’m not sure it doesn’t, but I’m not sure it does either.
Maybe try to communicate elegance in a different way, say through color. For example black and white are usually seen as elegant. A little red mixed in could work too.
Thank you for this, Mr. Bradley. I am not a webpage designer. I enjoy painting and drawing. Shapes fascinate me. I teach English to adults in Taiwan, and in many of our classes, we’ve discussed the importance of shapes in our lives. I found your article and discussed many of the ideas you presented here with my students. I shared with them this page.
When painting and drawing, the person must look for the shapes in the object that give it unity and create the flow. The mass shapes giving rise to the thing as whole comprising its smaller shapes, which are organically molded to the mass. None is exclusive. Some are solid forms, while others are not, such as the shadow of the nose, or the mass of the hair, itself taken as a single object.
This subject of shapes ties in well with the subject of semiotics.
Thank you, again, Mr. Bradley.
Sean
Hi Steven,
I have just purchased your book as I am really interested in this blog and the way you explain this topic.
I am studying interior architecture and I have to represent the feeling of balance in an abstract form then creating that 2d abstract representation into an interior space (pop up store). I have found a lot of the shapes seem to signify balance. Do you think I should focus on circles and squares or circles and rectangles more to get my message across?
Thank you,
Rebecca
Hi Rebecca.
First, thanks for purchasing my book. I hope you enjoy it.
When it comes to balance I think it’s more about the overall balance in the composition. For example a circle or a square is balanced on their own because each is symmetrical when seen as a whole. However the overall composition, will be more than the one shape. A circle on one side can balance a square on the other for example.
Empty space can also balance a shape or combination of shapes. Don’t think you have to choose one shape over another. Thing about it in larger terms. Think about the whole plan you want to create. Say you want to stick with a symmetrical balance, you might have a long hallway with similarly sized and shaped rooms on either side. If the balance will be asymmetrical, you might place two smaller rooms at one end, which are balanced by one larger room at the other.
Does that help? The main thing is not to get too locked into having to use a specific shape. Choose one shape and then choose another (the same or different) to balance the first.
I have a chapter in the book that goes deeper into balance. It’s toward the end. Hopefully it will help to clear up a few things and feel free to ask more questions if you have them.
Thanks again.
This was a great explanation of shapes. I am trying to figure out why the Trader Joe’s name tags are so powerful. It’s the bright red 186c color and the elongated oval. Would you please comment about the design. I’m working on a piece that discusses how clever the store elements are. Many thanks for your thoughts.
Thanks so much for a well laid out, meaningful article. I’ve been struggling as an artist with reflecting deeply on the what and why in art and design and wanted to dive more into topics of meaning, specifically with line and shape at the moment. All I remember from my college 2D principles of design course relating to meaning was tension and balance when it came to shape and line. This article gave me some much needed inspiration and meaning.
Thank you for this amazing synopsis! I’ve learned a lot more than I thought I would.
Hi,
Great article!
My name is Amrita and I’m doing a research paper on shapes in graphic design. Please, can I quote you? And also can you tell me what theories informed your work? I will be very grateful for your input as a professional in this field. Thank you!
This is the best article about meaning of shapes present in the web! Hands down! I’ve read more than 10 articles and nothing compares to the content this have.
Good job! More power and hopefully more contents to come!
Thanks Carlo. I’m glad you enjoyed the article. I appreciate the kind words.
Thank you for this article. It’s been a great read, and I learned many valuable informations!
One question though. Link to the doc. file on shapes conveying different moods and meanings is not working. Do you have different one by the chance? I would like to learn on this topic as well.
Hi Steven,
It was great reading your article.
I’m exploring on a space for releasing memories through comedy. And not very sure of what form(shape) I can come up with. Any suggestions you can help me with?
Thanks,
Pav
Wow thanks Steven! Very good information here I’ll likely take it into consideration.
Hello Steven
I am a retired Chemistry Teacher. At this time I volunteer as a Docent at the local Museum. Your article was an eye opener; it will help me explain to young visitors the meaning of shapes and Patterns in some of the exhibited works. It is interesting to note that the hexagon shape is found in nature and not many know about it- it is part of beehives, and also the scaffold of many bio- molecules like cholesterol, or testosterone…
Thanks for the wonderful article
This is simply amazing. I am doing a research paper on: how does psychology influence the perception of shape in design?
This article really helped me with it. May I ask if you have any references I could go through?
Great article and most helpful. Commenters remarks were also enlightening. Here’s one of my favorite quotes by Paul Klee which you may have heard and which has provided design inspiration in my art and writings… “A line is a dot that went for a walk.”
e convey different moods and meanings (.doc file).
is this document available somewhere?
It looks like the site I linked to removed the .doc file so it no longer exists, at least I don’t know where to find it anymore.
Wow this is really cool huh
I personally am a visual learner, so I thought this was fascinating. Thanks for exploring and digging deeper into shapes and their significance, and how they inevitably allow us to communicate better.