Building an Android App? Get to Know Material Design

In 2014, Google’s best designers teamed up to try to unify the customer’s experience throughout Google’s products. Material design (or Quantum Paper, as it was first called) was born. Material design was the most significant factor in the Android L release in 2014. As its name, material design is inspired by paper, so follows a flat, minimal design.

Material design has the rare advantage of constant updates and research from Google, thereby saving developers time and effort. As such, mobile app developers on Android also follow this design scheme. Material design fell within the concept of reduction and decluttering.

Google’s material design has seen substantial success over the last few years. Many mobile apps use material design because it’s been around long enough to undergo tests, research, and documentation. Material design comes with the Android Design Support Library to subsidise developers. Material design is simple and customisable.

Material design is a step beyond flat design. Instead of flat, 2D shapes without texture or shadows – material design adds an extra dimension without losing the simplicity of flat design. Shadows, patterns, and animations enable a far wider variety of processes and transitions than flat design.

While both forms of design have heavy minimal influences, material design is more complex and therefore, more interactive. Flat design is material design without the complexity of animations, shadows, and textures.

All leading Android App developers follow the design principles of material design. Material design is as it sounds, based on the interaction between materials – layering, shadows, edges, light, and dimensions. Material design intentionally makes use of white space with strong colours and symbols.

While material design does use animations, they should not distract from the essential design elements. Animations should only occur as a result of the crucial actions of the user.

Material design guidelines also allow mobile app developers to add their branding to the design elements with custom code. In combination with shared components across Android, iOS and web design – material design is versatile. Apps like Google Calendar, Gmail, BuzzFeed, and Google Maps all use material design.

After a quick overview of what material design is, and why it is essential – let’s take a look at design elements. The following are elements you can use in your designs to adhere to this important design principle.

1. Shadows can show hierarchy by layering what is most important or relevant on top of other layers.

2. Bold colours are more fun and transparent for users; they can make the app more enjoyable to use.

3. Material design tips from Google state that mobile app developers should use three different shades of the primary colour, and one shade of an accent colour. Primary colours are used for backgrounds, fonts, and structures, while accent colours highlight the main component on the screen.

4. Use image colours in the design around the image to create consistency in your design.

5. Google places a huge emphasis on motion design, using movement to guide the user’s interactions in the app.

6. Floating components are used to distinguish material design from flat design. Floating icons have small shadows underneath them.

7. Typography such as Roboto and Noto are great starting points if you don’t yet have a specific font in mind.

8. Responsive design is vital. Your design components should include all work within each device.

After the essential elements of material design and implementation tips for mobile developers, material design components are offered by the Design Support Library to aid in faster and better android app design. The following are examples of different elements included in the library that you can use in your next mobile app design.

Navigation bars at the bottom of the screen (or Tabbar as known in iOS) allow the user to quickly switch between top-level sections of the app by tapping the icons.

Bottom sheets are sheet elements that do not cover the entire screen. For example, the google maps element that displays information about a location.

Floating action buttons are used for primary actions within the app. For example, addition symbols or save buttons, these actions should be necessary as they may overshadow (quite literally) other elements on the screen.

Tabs are sections at the top of the app that allow you to switch between sections. These do not have to be top-level elements and are often used for categories within that section of the app.

Navigation drawers are sidebars that include top-level navigation around the app. In Android, these are now far easier to implement, and the items in your navigation drawer are taken from your menu resource by default.

Snackbars are dismissible bars that appear to give feedback to the user on an action that they took. Snackbars are not Toasts as they aren’t necessarily used for important system messages.

Material design allows mobile app developers to use their own colour palettes, animations, widgets, and transitions. App developers are concerned that material design will limit their capabilities and features of the app. Generally, material design guidelines are very flexible and meet most branding and feature needs.

Material design does not mean creating something that looks exactly like a Google app. Material design guidelines are customisable enough that the designer can shape the app using icons, colours, and fonts that produce a unique look. Sticking to Google’s standards can leave deviations feeling somewhat dull or empty (like leaving out animations).

Heavy use of Google’s material design specs can mean an overuse of some aspects like animation. In turn, too many animations can slow down the app or drain the battery.

While you may have plans to develop your look and feel for your android app, material design can save you headaches in the long run. Material design can help you avoid making design mistakes by learning from Google’s experience.

Developing your design visuals can be time-consuming and sometimes not necessary. In the past, some developers needed to create their own systems as the material design colour schemes were very bright and playful. New dark standard design elements have alleviated that issue.

As a bonus, users may feel familiar with your app after using products from companies like Google or Lyft. Familiarity boosts trust in your services. If your project is confusing and you’d rather spend more time on the business elements of your app than design – material design could be for you. In that case, you can devote less time to implementing intuitive interactions like haptic feedback.

On the other hand, some companies or developers will choose to stay away from material design because they want to stand out. Developers may desire to build their visual system from the ground up to have more fine-tuning control over the hierarchy of their system or functionality. Finally, some projects won’t fit material design well, and other visual systems might be better.

There are many essential considerations when deciding on whether or not you should follow the material design elements from Google.

Is the structure of your app appropriate for material design? Certain apps won’t fit well with material design elements because they may not use the standard menus, toolbars, and buttons that are so prevalent throughout material design. Trying to force your project to fit a contradictory style can have negative effects on the experience of the end-user.

For some projects, changing icons, colours, and logos isn’t enough to feel distinguished. Consider what benefits are you obtaining by using material design? For example, sometimes the need to develop your visual language to reflect your brand is more important than the speed of development.

Does user familiarity with material design aid your project in the eyes of your users? It may be that you have already developed a strong sense of trust and familiarity with your users. In that case, material design will bring less to your project than an entirely new product.

If your app is designed primarily for android users, material design may be an easy and efficient choice. Your app will feel similar to many other native apps on the system. Whether you are an app developer or looking for one – design guidelines are essential.

As a developer, you need to take into account potential conflicts and issues with your project and brand guidelines. In the end, your decision will be a tradeoff, mostly between convenience and flexibility. For more insights, guides, and breakdowns, check out our blog on mobile apps and design.