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
Image for post
Image for post

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.

Image for post
Image for post

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.
  2. Think through the hierarchy of your UI, and how shape can be deployed to draw attention to the appropriate parts of the screen.
  3. 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.
  4. 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.

Google Design

Stories by Googlers on the people, product, and practice of UX at Google

Dave Chiu

Written by

Dave Chiu

Designer @ Google. Material Design. Former frog.

Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Dave Chiu

Written by

Dave Chiu

Designer @ Google. Material Design. Former frog.

Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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