News

Google’s Material Design

For several years we have been using Google’s Material Design SDK (Software Development Kit) to facilitate the creation of high-quality UIs (User Interfaces). We most often use Angular Material, which is essentially a plugin for Angular that brings in all the concepts of Material Design into our projects out of the box.

What Is Material Design?

According to Google’s own definition:

Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.

 

It’s “inspired by the physical world and it’s textures, including how they reflect light and cast shadows,” and incorporates these aesthetics and concepts into the design system for building digital interfaces.

One of the most important reasons for using Material Design within our team is the building of User Interfaces which have already an extensive design system behind them. This means we don’t have to spend time researching and refining these systems ourselves, as we have the confidence that Google themselves use it, along with many other companies worldwide. The support community is also very strong.

How We Use It

Material Design has many pre-built components for designing user interfaces which are compatible with web, Android and iOS software. This can greatly speed up the process of creating user interfaces and ensures that they are in line with industry best-practices for design.

Themes are a feature we often use, as you can quickly pull together sets of icons, shaped buttons, fonts etc, designate a colour palette in line with branding, and easily create functional app interfaces. We sometimes use Figma for this part of the process, too.

After that point, there is generally still a lot of programming to follow, but it certainly serves to get apps created quickly. This can be incredibly helpful with clients, as they can give feedback on the UI before the coding really begins.

There is another aspect to theming which is very important to us. This is the use of colour palettes, and how they are generated. They can be used in conjunction with Angular Theming to provide programmatic changing of colour and typography at runtime, which enables us to create things like “Calm/Vivid/High Contrast” views and “Small/Medium/Large Font” for accessibility purposes.

Summary

The Material website is particularly helpful for the design guidelines and resources. Have a look for yourself. We’re sure that anyone who is interested in UI design will learn something new and useful, and if you do, feel free to get in touch and let us know what you’ve learned!

To find out more about using Google’s Material Design SDK for your app, and how it can benefit you, contact us now for a free consultation.