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