How Google is Changing Apps With Material Design

Google is actively seeking to change the way people develop and use apps on different platforms. The colossal company has now created a template outlining the user-friendliest app, which they have coined as “Material Design.” Material design is the result of Google’s goal to create a visual language that puts together all of the important principles of great design paired with technology and science. The current document outlining material design is expected to change and reshape as knowledge and technology simultaneously grow into the future.

Material design is, “a single underlying system that allows for a unified experience across platforms and device sizes.” Google’s efforts stand to benefit anyone building an online app or platform. Google designers working on this project used the overall premise of material design to create apps for a number of vastly different brands. They found that the overall design speaks to users but still allows individual companies to maintain their identity. Most importantly, material design could forever change the way apps are developed and built.

The Key Principles Behind Material Design

Roma Shah is the UX lead Chrome Designer for Google. During a recent presentation, Shah explained the concepts behind material design. The design framework was created to achieve a specific goal. First and foremost, of course Google wants anyone to be able to build a well-designed app, but they realize they can’t cover every single need of every single app. The hope is that people will work with the design and build on it so that it evolves over time.

Material design was created as a system that works across all different screens people use to access online information every day. Every screen is unique and requires its own coding and design elements in order to make the user experience easier and more enjoyable. A key principle of material design is creating a similar appearance on all screens, but with specialized features that work with the available tools on a given platform.

Turning The Unfamiliar Into The Familiar

Google’s team of designers started at square one looking at paper. In fact, material design is heavily influenced by the studies of paper and ink. In honor of paper and pen Google designers decided to stick with simple shapes like squares and circles. This helps users feel like they can interact with the material on the screen, just like real paper.

A core concept of material design is to incorporate elements from everyday life that you are familiar with and take meaning from, such as surfaces, shading, edges, movement and dimensionality. All of these elements give us a good idea how objects relate to one another in the world, and material design ensures these same engrained concepts can also be used to analyze how to use an app or webpage. The goal is to create an aesthetically pleasing appearance that also gives users hints how to better navigate a platform. Roma Shah explains, “Material Design is bold, graphic, and intentional.”

The Importance Of Motion & Animation In Material Design

Motion and animation are really important to Material Design and not just for show. According to the principles of material design, a large purpose of animation is to let the user know they are in control of the happenings on their screen. Motion is so important but it can easily be overdone. If you are going to incorporate motion it needs to be smooth and realistic, showing how an app works and making things easier for the user as opposed to more complex. A professional motion designer best provides these qualities. If you don’t have a motion designer on your team, or you don’t have the biggest budget to work with, it is better to keep things simple than to overdo it with animation. Otherwise, you might end up overspending on something that isn’t worth it.

Sizing Guidelines

Designers are always hard at work finding the best sizing for different animations, text boxes and more. Turns out, Google has researched the best sizes for buttons and graphics based on user experience, aesthetics and productivity.

Material design includes sizing guidance for images, text, etc. based upon a system of increments. While there are different template layouts available, they all rely on fundamental similarities, among which include key spacing and graphic size. Even the actual touch targets are given a specific size for best results, measuring 48 by 48 in dp, regardless if the items within the touch target are smaller than that.

FAB: The Floating Action Button

The floating action button, also known as FAB or paper FAB, is a noticeable element of material design. The floating action button on your app or website should offer a clear picture that identifies what the app offers. FAB should be visible and easy for users to pinpoint and properly interpret.  For instance, a media app might include a play/pause button that helps highlight the purpose of the application. Or, an app that provides driving directions might include a FAB with the image of a map or a car.

How To Properly Incorporate Colors, Font & Depth

The color of an application is more than just visually important. The material design color template offers a huge range of colors for any app’s branding purposes. Green, blue, or hot pink, how do you pick your primary template color? The key is to use your brand’s color as the primary color on the app. An app also requires accent colors, which should not be dull or bright, but instead fall somewhere near the middle. Accent colors play an important role in the design of an app, as they help guide users’ focus in the right location. This is why using too many colors can be distracting as opposed to helpful or fun.

Material design also includes a variety of texts pinpointed as the most effective by Google designers. Still, if your brand uses a different font it is more important to stick with the same font than to use one of the texts listed as material design. Text font represents a company’s identity, which is something users need to recognize right away.

Color and font are clearly important elements, but so too is depth. When properly executed, depth provides users with hints that help identify the relation of things within an app. For example, a shaded line between two square boxes indicates the boxes operate separately, while no shading at all makes two boxes seem interconnected. Shading can also be used to identify a hierarchy of things. Overall, perception alters how users interact with an app, and playing with depth alters perception.

Applying Material Design To Chrome

Applying material design to Chrome was an interesting experience. Designers at Google think of Chrome as a container for user data and platforms, meaning it strives to be invisible. Core components such as tabs, a toolbar and the omnibox are still incorporated into Chrome, but in much more discrete ways than an individual app likely needs. Chrome wants the UI to be there when needed, but be out of the way when it is not needed so that people can enjoy the content they are actively seeking.

Chrome isn’t the only popular platform that switched to the primary principles of material design. Tumblr recently recreated their app using material design, and the results are important for Google designers. Even without Tumblr’s logo on the screen you can tell you are looking at the Tumblr app because of distinct design elements. This proves that any brand can use the principles of material design and still remain unique and identifiable as an independent brand.

Polymer-project.org offers you the chance to try out the concepts behind material design free for an entire year. The platform is built primarily to help you build web apps, and includes all of the tools you need to create a single button or an entire app. You can also reference the full description and outline for material design at google.com/design/spec .