Google material design

Users of Android devices were in many cases learning how to use applications on an application by application basis because every mobile app development team was designing their application in order to operate in ways that they thought were most efficient.

Android is an open source operating system that has not always had complete continuity. This problem was not only noticed by user experience wonks but by developers who used the technology. In 2011 there was no typical Android application. They all worked and operated in different ways. One of the key concepts of design is consistency so in this respect the Android didn’t have a way to support good design. Google came to the conclusion that having guidelines at all will create a situation that is more likely to result in a consistent look and feel than one without.

Community expectations are also a key driver in why Google created the material design standards. People expect their apps on a device to work the same. Before material design, there was no consensus on how these applications should look and work. The closest proxy that was available was to look at how Google’s own applications worked but even they were inconsistent. Meeting use expectations for all apps work the same within the Android ecosystem was a clear part of the reason why Google created the material design.

When Google decided to make the material design guidelines they wanted one such that it would work on the entire ecosystem, not just Android applications introducing it with version 5.0, or Lollipop that is to say that the material design guidelines are flexible enough to work on Chrome OS and with web applications. Since these are not all touch-centric platforms material design considers keyboard, mouse and touch input methods all to have first-class support. However, the platforms underlying Android Chrome OS and web applications are very different.

As such, how you implement material design is different depending on the platform even if the end effect is similar. As a result of all these factors, Google created the material design. My recommendation is that every new Android app development that is appropriate for material design should use it. For the most part, that includes all non-game applications. With material design, Google created a standard to promote a unified experience across platforms. Application developers like us have a pattern that we can follow to create applications that are more likely to delight the people that use them.

Material design concepts

Developers do not need to know all the details of the material design. However, they should understand basic concepts and layouts not only so they can recognize a good design when they see it but also they can understand the philosophy behind the designs which allows them to improve their implementation. When Google says material’s the metaphor they mean that it models things in the real world. Think about shapes laid out on a piece of paper squares, pictures, circles, text. Each shape is laid out on a background to create a picture. This is similar to how old print advertising pieces were put together.

It is an important concept that none of these shapes should break the laws of physics. Let’s look at some examples. If a shape moves or spins it should never move through another shape on the same location elevation. The animation on the right shows us what we should not allow to happen. If an element has a lower elevation and moves onto the same space as another object it should appear to move behind it. If higher, it should appear to move over it. In the image on the left, we can see that one item is clearly on the other.

You never want to have two items that occupy the same space at the same elevation as shown in the image on the right. Shadows not only give the illusion of depth but also of real-world lighting. In this animation, we can see the shadow change as the elevation of the item changes. The colors that are selected are designed to work together for an immersive experience. To catch the application user’s attention white space is used in conjunction with the shapes on the screen to create a pleasing but intentional experience where everything has meaning.

 

Colors and shapes that don’t convey meaning and continuity should not be used in the application. Any time an unusual color or shape appears in the design it should be obvious why it is there and what role it is playing. It should also be obvious to the application’s user when user interaction is available. All interaction should happen in the foreground and you should never be able to touch an object behind another.

Items on the screen may move and that movement should provide some meaning for example when selecting an item in a list the description may move to a detail screen that appears. There are plenty of things to think about with our shapes that we use with material design. They always have an X, Y, and Z axis with the Z-axis being represented by a shadow. Think of the items as flat pieces of paper. They have a thickness of one dp which is a density-independent pixel. The objects in the material screen can come and go and their existence on the screen should denote some sort of context.

A save button may appear only when a save option is valid but otherwise be hidden. These material design concepts should be at the forefront of any developer’s mind when creating an application that uses material design.

Material design considerations

From a developer toolset perspective, Android material design came with a new theme, some custom widgets, and animations to go along with the new standard. The widgets themselves do not fully encompass all the different controls mentioned in the material design standards. Another thing to keep in mind is that the desire to save money may lead to cross-platform designs that aren’t truly material. For some applications, this may be okay. But if you want to truly implement material design be cautious of this approach. It is very common to first make an iOS design and tell the Android app development team to use that as a model and Androidize it.

This approach is unlikely to conform to the material design standards as the fundamental layouts themselves should be different from iOS. For myself, a team working without a designer throws a caution flag. As a developer, you should understand how material design works as this will give you the knowledge you need to implement a good design. However, most developers will not be able to create a world-class design. This is particularly important for an app that represents your brand. For many such applications, a designer is critical.

 

About Boston Technology Corporation

Boston Technology Corporation (BTC), a Boston-based digital health technology company, provides solutions for secure patient experience, engagement and satisfaction. Our services range from Enterprise mobile app development, iOS Mobile app development, custom Android app development, web development, Apple ResearchKit development, IoT and wearables and consulting.

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*

CONTACT US

We are closer than you think..!!

Sending

©[2018] Growth Valleys All rights reserved. Privacy Policy & Terms of Services.

Log in with your credentials

Forgot your details?