You Need a Shape System

You Need a Shape System

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.

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.

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

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.

You Need a Shape System

Research & References of You Need a Shape System|A&C Accounting And Tax Services