You Need a Shape System
How to use shape to enhance your brand, direct attention, and support interactions
When designers express brand and hierarchy in UI, they’ll often turn to familiar systems of color, typography, and imagery. But there’s another, overlooked element in the designer’s toolbox: shape.
From buttons to cards, text fields, menus, and floating action buttons (FABs), shape is an undeniable aspect of every interface. And now the newest section of the Material Design guidelines is entirely dedicated to best practices for using shape in UI. What follows is a bit of inspiration for how you can use shape to enhance your brand, direct attention, and support interactions.
Shape reinforces your brand
One of the more holistic ways to approach shape in UI is to consider its ability to express brand when applied thoughtfully throughout an app. A brand with a more organic or friendly feel might opt for rounded shapes, while a brand with a geometric style or a desire to express precision might opt for a more angular shape. For example, the Shrine app uses sharp cuts throughout its UI to reflect the angular shape of its logo.
Shape drives hierarchy
Strong differences in shape can be used expressly to direct attention. For example, if a UI features mostly rounded shapes, then introducing a sharp, diamond-shaped button can draw attention to that component. The classic Material Design UI of a round FAB in front of rectangular cards is another example of how shape can be used for emphasis. A more harmonious or subtle use of shape within the visual hierarchy can communicate relationships between elements, such as similarly-shaped cards appearing as peers, or shape helping to distinguish separate surfaces — an approach used by the backdrop component.
Shape points to interaction
Shape can also be used more tactically to indicate specific states or opportunities for interaction. Changing the corner of a card to indicate a selection state can supplement techniques like using icons, changing the opacity of the card content, or changing the card’s size. Changes in shape can also subtly indicate the opportunity of interaction with a surface. For example, rounded corners may imply that a bottom sheet can be pulled upwards, while square corners can imply that all content is currently displayed. However, using this type of visual language to indicate interaction opportunities isn’t well established or systematized, so avoid relying solely on shape to communicate meaning.
Get started building your shape system
- Consider the attributes of your brand. What core shape embodies your brand’s vibe and personality? Use that starting point to develop a complementary family of shapes. Is your core shape rounded? Try pairing round-cornered cards with an attention-grabbing, pill-shape extended FAB. More into angles? Consider cut corners on buttons and bottom sheets.
- Think through the hierarchy of your UI, and how shape can be deployed to draw attention to the appropriate parts of the screen.
- Use shape consistently and purposefully throughout your app, so that your shape choices develop meaning for your users. Inconsistent use of shape can be confusing, and overuse can dilute your brand expression. Also, be sure that purely ornamental shape doesn’t appear functional or interactive, and that shape used to communicate meaning is obvious and unambiguous.
- Also test your shape story with users. On its own, shape can be ambiguous and may be best paired with an icon or text to communicate explicit meaning. Ultimately, user testing is the best way to determine if your intended use of shape works and is understood in the way you intend.
Help us design the future
Unlike existing systems such as type and color, shape does not have well-defined rules for application in UI. Use this opportunity to experiment with shape alone or in combination with more established UI patterns to find the most effective way to communicate with your users.
Share your shape experiments with us @materialdesign.
