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.
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.
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.