Scroll slowly to watch the shapes transition in.
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 do all those shapes say to our visitors? How do they enhance or detract from the concept you want to convey?
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 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.
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.