What’s a shape and what role do shapes play in design?
TL;DR
- A shape in design is a two-dimensional figure defined by its edges, which can be straight lines, curves, or a combination of both.
- Shapes come in various forms, such as geometric (like circles and squares), natural/organic (like leaves and rocks), and abstract (like icons and symbols).
- Designers use shapes to create visual hierarchy, guide the user’s eye, and convey different emotions and meanings. For instance, rounded shapes can evoke friendliness, while sharp shapes can feel dynamic.
- Shapes play a role in typography and branding, influencing how we perceive text and logos.
- Effective use of shapes, including positive and negative space, enhances the overall balance and readability of a design, making it more intuitive and engaging.
Detailed answer
Shapes are two-dimensional figures defined by their edges, which can be straight lines, curves, or a mix of both. Shapes come in various forms, from open to closed, angular to round, and large to small. They can be free-form, taking on more natural, flowing forms, or geometric, presenting more structured patterns.
By combining simple shapes, designers can create complex forms, and by abstracting complex shapes, they can simplify the design, making it more intuitive.
Shapes help create a visual hierarchy, guide the user’s eye, and convey different emotions and meanings. For example, a sharp, angular shape might feel dynamic and edgy, while a round, smooth shape might evoke a sense of friendliness and approachability.
Types of shapes
There are three main types of shapes in design: geometric, natural/organic, and abstract.
Geometric shapes are the ones most people are familiar with, like circles, squares, triangles, and diamonds. These shapes are characterized by their regular patterns and symmetry, giving a sense of order, efficiency, and structure. They're often used in design to create a clean and organized look.
Natural or organic shapes are more irregular and asymmetrical, often with curves and uneven edges. These shapes mimic those found in nature, like leaves, rocks, and animal silhouettes. These shapes feel more spontaneous and natural, making them perfect for adding a more relaxed and inviting feel to a design. They're commonly created through hand-drawn illustrations or photographs, adding a touch of authenticity and creativity.
Abstract shapes are stylized or simplified versions of organic shapes. They represent real objects but in a more symbolic form. For example, a stick figure is an abstract representation of a person, and icons are abstract shapes used to convey ideas or concepts quickly and universally. Abstract shapes are especially useful for creating a recognizable and intuitive user experience.
Additionally, there are positive and negative shapes. Positive shapes are the main figures, while negative shapes are the spaces around and between these figures. Effective use of negative space can be just as impactful as the positive shapes, contributing to the overall balance and readability of the design.
This concept is illustrated in one of Henri Matisse’s cut-out works. In "Icarus," is the black figure a positive shape set against the blue background? Or is the vibrant blue the positive shape, with the figure seemingly carved out from it?
Related reading: The Psychology of Lines and Shapes in Web Design
The role shapes play in design
In digital design, shapes are everywhere. They form buttons, icons, and content layouts. They help organize information by connecting and separating different elements. For instance, text blocks are often in rectangles, which help users read and copy information easily
Shapes, as visual cues, also guide the user’s eye. Arranging content in a triangular layout, with the most important element at the top, naturally draws attention to that point. A simple arrow can direct the user’s gaze, subtly leading them toward desired actions.
Related reading: Shape and hierarchy
Shapes create movement, texture, and depth, adding visual interest and making the design feel more dynamic.
Shapes play a role in typography too. Fonts with rounded shapes feel soft, while those with sharp angles appear more formal and sometimes aggressive. It’s essential to match the shape style of your typography with the context to avoid visual conflict.
Shapes can symbolize different ideas, adding layers of meaning to your design. They can set the mood and evoke emotions, whether it's a sense of calm with rounded shapes or energy with sharp angles. Understanding the psychology of shapes helps designers create effective logos and user interfaces.
Related reading: How can shapes be used effectively in design?
Shapes contribute to creating branding and identity. The Nike swoosh or the Apple logo – these iconic shapes have become synonymous with their respective brands. Using shapes effectively can strengthen brand identity and recognition.
Related reading: Shapes as expression
Graphic designers often deal with small but crucial elements like logos and icons. A well-designed logo needs to convey the right message, serving as the voice of the brand. Choosing the appropriate shapes for a logo is key to communicating the desired attitude without needing extra words. For instance, a financial company might use shapes like squares or triangles in its logo to evoke feelings of trust and stability.
Real-life examples showcase the power of shapes in design. Circular shapes in the Apple Watch's user interface contribute to a friendly and approachable experience, aligning with the device's health and wellness focus. Similarly, the sharp, angular shapes in the Microsoft Office suite's icons convey professionalism and efficiency, reflecting the software's productivity-oriented nature.
Shapes can indicate interactivity and guide user actions. For example, rounded rectangles or pill shapes are commonly used for buttons, suggesting clickability. Consistency in shape usage for interactive elements enhances usability and reduces cognitive load.
Related reading: Do rounded buttons perform a better usability?
❓Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.
- What emotions and associations do I want to evoke with my shape choices?
- How can I use shapes to create a clear visual hierarchy and guide user attention?
- Are my shape choices consistent with the brand identity and design system?
- How can I use shapes to enhance usability and interactivity?
- Have I tested my shape choices with users to validate their effectiveness?
⚠️ Common mistakes to avoid
Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.
- Overusing too many different shapes, leading to visual clutter and confusion.
- Neglecting the psychological associations and symbolism of shapes in the design context.
- Inconsistent application of shapes across the interface.
- Relying solely on shapes for communication without considering accessibility and alternative cues.
- Failing to test and iterate on shape choices based on user feedback and insights.
🛠️ Useful tools
These tools will make your job easier and more effective.
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
- The Meaning Of Shapes: Developing Visual Grammar by vanseodesign
- The Meaning of Shapes and How to Use Them Creatively in Your Designs by Orana Velarde
- How to Master Shapes in UX/UI Design Through its Psychology by Rahul Raman
- Lines and shapes in design by Krisztina Szerovay
📚 Keep exploring
Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.
About shape by Material Design