You Need a Shape System

How to use shape to enhance your brand, direct attention, and support interactions

Dave Chiu
Dave Chiu
Nov 28, 2018 · 3 min read

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

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

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.

Google Design

Stories by Googlers on the practice of design.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store