Google Material Design and The Story of Shape System
In 2014, Google took a bold move with a new design initiative that’s Material design to weave a visual language in the app’s UI which is based on ethical design principles. From thereon, the company is continuously enhancing and iterating the design system with new tools, components, and elements to fill the designer’s toolbox with all the elements that enable the creation of elegant and intuitive UI.
The latest update to Google Material design includes- ‘Shape’, which is most often remain unnoticed when it comes to expressing hierarchy and the brand in the application design. To bring the importance of ‘Shape’ element in the spotlight, Google has brought measurable changes to the UI guidelines that are mostly related to using ‘Shape’ in the UI.
Yes, the shape is a big deal, so let’s discuss in detail. We will cover the list of topics related to shape system in Google material design
What is a shape system?
How is a shape system helpful?
How to build the shape system?
Shape system implementation
Conclusion
It’s time to start. Let’s begin.
What is a shape system?
Everything, be it cards, sheets, text fields, menus, or buttons on the screen are displayed within some types of containers that are referred to as shape. Mostly, the elements are displayed within a rectangle shape. To brings substantial changes to the rectangle shape, the material team powered up the developers with the ability to apply unique twists to the shapes.
The 4dp rectangular shapes can be customized by tweaking corner angles and curve or edge angles and curves. The use of the different shapes helps the developers in directing the user’s attention, encouraging communication, expressing brand, or easy recognition of the things.
Let’s dive in to know more! How the shape system is helping the developers in distinct ways
Making emphasis
The differences in shapes in the UI helps in drawing the attention of the users to a particular component. For instance, when the UI features mostly rectangle shapes, then a complete round-shaped floating action button will stand out from other shapes on the screen, which creates a visual hierarchy in the UI. It also aids in communicating the relationships between the various UI elements and highlight the action that you want the users to perform.
Build an identity
Just like every brand app has standard color, font, and typography which becomes their identity, the same types of shapes can also be applied consistently throughout the app’s UI so that the brand is recognized by a particular set of shapes. Implementing the shapes that give a feel of user-friendliness is the best way to go forward.
Transition state recognition
During the app interaction, the state of the element changes when the users interact with the app, and the change of state can be visually defined by changing the shapes subtly. The changed shape (changed size, changed content, or changed color) indicates the users about the change of elements’ state. Also, when shapes are used to signal the state change, then they must be consistently used throughout the app in every instance the changes occur.
For instance, the shape of the cards will change when they are selected by the users, and the similar ‘changed shape’ must appear everywhere when the user chooses any card in the course of app browsing.
Create a brand
It’s not mandatory that out-of-box UIs cannot have more than 2–3 types of shapes. A large number of shapes can be used to express brand visual language, but they must be used in tandem with other customizations (Use of text or icons) and applied strategically in a consistent manner through an app. The systematically arranged shapes when it communicates the purpose well, it makes a valuable contribution to the creation of brand impression.
It appears shape system weighs a worth pound in completing the unmatched design equation.
The high degree of flexibility of creating and implementing the shapes provides freedom to the UI-UX designers to experiment and design the creative shapes, but zero restriction sometimes create clutter that leads to poor design. The best practice involves investing optTop 7 Mobile App Design Slip-Ups That You Should Avoidimum time and resources on designing the functionality that adds value and stays synced with Material design guidelines.
Here’s the answer to how to build the best shape system
When the time to finally play with the shapes occurs, the developers remain clueless because bringing the unique twist to the shapes is not like applying all the colors of the palette to the painting. It’s a great combination of science and art where the designers have to learn the impact of every shape on the UI and the users.
It’s necessary to identify how to design the shapes that help users to quickly identify the components, understand the transitions in the state, and make them initiate the required action. Follow the steps to engineer the great shapes:
- Do the brainstorm to find out the brand’s attributes and then the shapes that will represent the brand as a whole. Later, the basic shapes can be complemented with other types of shapes to build a hierarchy, or to display the change in the states.
- Think about how the hierarchy built into the UI through shapes will support consistently across all platforms- Android, iOS, and web. It’s the most significant blocker as the shape with a round or cut corners may work on the Android and iOS, but not on the web. Consider the shapes that are a viable solution for all the platforms.
- Decide how will you use the shapes across the interface. The overdose of the shape types or their inconsistent usage makes the UI ambiguous that confuse the users. Don’t jam-pack the UI with ornamental shapes; instead, apply only those shapes that serve the purpose, and communicate the right thing to the users.
- It’s all-important to get the UI that’s built wearing the user’s lens, tested by its real users from the perspective of the shape to determine the shapes work and understood the way they are intended. The beta testing helps in unearthing whether the shapes used are appropriate or not, shapes enable easy identification of the component or not, shapes paired with an icon or text is fulfilling the ergonomic requirements or not, and pretty more.
My two cents: Don’t use shapes that make components challenging to recognize, intervene the component’s ability to receive the user’s input due to large size, and looks too similar that distinguishing the two different components becomes impossible.
Once you are crystal clear on the part- the types of shapes to include and how they will be paired with other UI elements, the next step is to start designing the shape. That’s where you need shape customization tools which Material team has provided.
The Material shape customization tool has made shapes generation a breeze. To ease the customization, the table of ‘shape value ranges’ recommend the value ranges for every UI component. According to the size, the components are segregated into three categories where the components tied to the category will automatically take up the shape value assigned to that category. It’s not too rigid. The components’ corner can be individually shaped irrespective of the category’s value they belong to.
After mastering the art of shape system building, it’s a turn of implementing the shapes in the app’s UI across different platforms.
The Material component library provides a shape library to the Android designers to create non-standard shapes while taking various design gradients into account. The detailed design and API documentation is available to craft the great UI.
For iOS, the shape library provides a way to customize the component or enhance the view to create a custom shape. The in-built functionality is offered for the shapes within Buttons and Cards components, and the comprehensive documentation is there to help.
Conclusion
The breathtaking UI is the essence of the application that creates an indelible impression on the user’s mind before they browse or use the app’s functionality. Understanding the importance and impact of UI and UX design, Google has launched material design to supercharge the developers and designers with all those tools that add wings to their creativity and let them build innovative designs. The Shape is one of the unexplored territories of the material design that holds significant potential in raising the UI standards and spreading the magic that spellbinding UI creates.
In this blog, we have discussed everything about a shape system from in-and-out which lets you design and apply better shapes.
