Material Design
By: Nikitha Gullapalli
Tags: Typography, Android App Development, Iconography, Surface, Colors

Material Design

Introduction

App contains of materials that have shape, size, color, text. While designing an app we need to take care of shape and arrangement, color, typography, Iconography.

Material design are guidelines provided by google to make our process of designing an app easy, user friendly and familiar to users. They base their guidelines on Gestalt Principles. These principles talk from experience on what designs guidelines users are more comfortable with. All these material designs are placed on surfaces.

Surfaces represent tangible materials like paper. They are sheets of digital paper. They adapt the basic principles from paper like- surfaces are opaque, they can be placed at different elevation and cannot pass through on another.

Surfaces width is fixed= 1pd. their height ,width and elevation can be changed. Elevation helps us place different surfaces at different levels and scroll them behind or above another surface. For different properties of surfaces look at the documentation.

We can identify surfaces at different levels by the shadow they cast. Surfaces with lower elevation cast smaller and sharper shadow than the surfaces with higher elevation. Lets looks at how we can use these surfaces to design something beautiful and intuitive to the user.

Bold Graphic design:

Gestalt Principles:

1. Law of past experience: When we say notepad we are reminded of a notebook with lines. To make apps as intuitive as possible initial guidelines suggested that apps imitate real world items so that users can relate, but as apps became prominent users got used to notepads without lines so the guidelines updated. Basically law of past experience takes into consideration past experience of the users and what they can relate with and use this information to provide guidelines to developers when designing an app.

Law of past experience-image from udacity

2. Law of Proximity: In the image below all the views in 1 are in closer proximity than another set of 1. So this shows proximity and arrangement of the views makes it intuitive for user to understand what views are grouped together making it easier to read.

3. Law of similarity: All the 2’s are are similar and one below the other. This makes it a list of items 2. Thus making it intuitive to users. Material design guidelines provided guidelines keeping these 3 principles in mind.

Law of Proximity and Law of similarity-image from udacity

Shape and arrangement : Grids and Keylines

Lets talk about specifics on laying things on the screen. Material design uses an 8dp grid to align components. Text aligns to a 4dp baseline grid. As seen in the below image text sizes are a multiple of 4dp and images and other items have sizes multiple of 8dp.

Basic Grids suggested by material design- image from udacity

So things like image, icon sizes, spacing, margin and padding are all multiples of 8dp. Text is multiples of 4dp. These grids helps us apply laws of grouping and keep our UI’s organized, balanced and in harmony with rest of the OS. There are material design templates and stencils that uses these grid. They can be found here.

Basic Grids suggested by material design- image from udacity

Keylines are used to vertically or horizontally align objects in the UI. Astatically they bring an order in the UI and make it much easy to scan the screen and take in the information. Material design specs suggest some common keylines to use in material design like 16dp margins from left and right and auxiliary content like icons/ avatars. 72dp from left for primary content. If we do not have auxiliary content, then primary content will have to be at 16dp from the left. It is always a good idea to look at the documentation.

Basic Keylines suggested by material design- image from udacity

Color Palette

Just like how shape and arrangement can tell us a lot, we can also infer a lot of information from an items color and appearance. Color can tell us if we should stop or go, battery is full or low, etc. It can be used to get attention or provide hierarchy in structure. Material design encourages app developers to embrace bold purposeful use of color not just for aesthetics, but to make the app easier to use. Material pallet has a set of secondary and primary colors that can be used across devices. Note that these colors are a good hand pick starting point, they can be changed if your app designs demands.

Material design color pallet suggests to have one primary, one accent color and lighter & darker shades of primary color to theme the app. Like you can see lighter shades are lower numbers and darker shades are higher numbers. These numbers are for reference purposes.

There are some tools online that can help find complimentary primary and accent colors. find the resource here.

Material design color pallet-image from udacity

Typography

After shape, arrangement (space) and color next important design spec is the type. Type refers to the text we write in our app including headlines, body, sub-title, etc. Text in an app depends on density of the screen and user preferred text size like small, medium or large. Thus “sp ”(scale independent pixel) is the unit of text for mobile development. Material design provides some types to make the text in the apps more uniform. Roboto is one such type. You can find more about it here.

User preferred text size is the text size users prefer and can change in the phone settings. E.g. older people might need bigger text size to read.

Font characteristic are different characteristics font have like serif, size, etc.

Font anatomy- image from udacity

Font weight and style: A font family or family of families can have different variety of fonts. Roboto actually has 4 distinct font families- roboto, condensed, slab, mono. Within each family each font has different weight starting from thin-100 to most thick-1000. Each of these font weights have 2 styles- normal and italic

image from udacity

Styling a text in android can be done with android:fontFamily and android:textStyle tags. While android:fontFamily allows you to choose the font family and weight, android:textStyle lets to choose the style and change weight if needed. It is advisable to choose weight using font family to avoid confusion. Note that condensed font are condensed and can fit more text, but it might look too crowded.

image from udacity

Choosing a font: how font looks can set the tone for your app. eg. fonts with round edges might look too informal or fonts with sharp edges formal. So we need to be mindful when selecting a font. Also we need to select a font that looks good and sharp in all screen resolutions.

Click here for some google fonts for your app. Apply the font using the tutorial here

Iconography:

Images should convey information or personalize the experience. Use of imagery will strongly reflect and reinforce your branding (brand can either be bold and dynamic, playful and informal, etc.). The form of imagery we can use falls somewhere in the spectrum form photography to iconography. The one we pick depends on the app needs. However all of them create an immersive experience.

Spectrum of imagery- image from udacity

Photography is great when it is very specific to the content. Make sure you have high pixel images for better experience.

Illustrations are best to communicate the abstract concepts or metaphors without getting hung up with specifications like in photographs. when creating illustrations aim for clarity instead of being overly decorative. Have a focal point and a message you are tying to communicate. Stay consistent.

Iconography provides clear way finding. Its goal is to explain the meaning and get out of the way. They should be easy to identify and interpret in the UI. For this reason it is advices to use material design icons so that users are already aware of them.

Images can be added to image view. ScaleType determines how your image fits the view. find how different ScaleType effects your image here.

Circular avatar: When showing avatars i.e., images related to a person it is general practice to show them as circle. We can use either RoundedBitmapDrawable or Picasso or Glide libraries to achieve this.

RoundedBitmapDrawable — image from udacity

Aspect Ratio: The code below shows how to set the height of an image always 2/3rd the width of the image. So doesn't matter the screen size, the image always has an aspect ratio of 3:2.

Aspect ratio: 3:2

image from udacity

image from udacity

Make text visible on dynamic background image: Background protection is important in cases when we want to place text on images, mainly when the background image changes dynamically we do not know the color or darkness of the color. In such cases out text/icon might not be visible with few background images.

title and icon visible in left image, but not in the right due to a lighter background image- image from udacity

In such cases we can use a scrim. A transparent layer between the image and the text to help provide contest and legibility. We use tune the size and ampacity values to have minimum impact on the image.

left — We could have used a solid block of color to make text visible, but it is not very pleasing to the eye. Right- A scrim is used with 30% visibility between the image and text.- image from udacity

To implement the scrim we can use the below code which is 30% opaque black at the bottom and completely transparent in the center and top.

image from udacity

Then we can use frame layout to stack our views. image- scrim view- text

image from udacity

References:

Surfaces:

https://material.io/design/environment/surfaces.html#material-environment

Creating Paper Transformations: https://youtu.be/25RCKUtqvYE

Transforming paper: https://youtu.be/iYN5mM0JN9M

Responding to Scroll Events: https://youtu.be/holemZocbOU

Making Scrollable Dynamic Surfaces: https://youtu.be/yOgonzeOYys

Parallax scrolling: https://en.wikipedia.org/wiki/Parallax_scrolling

Bold Graphic design:

Gestalt Principles: https://youtu.be/xOjN7ifAa_g

Grids and Keylines: https://youtu.be/ESJuU2gp-P8

Colors:

Intro: https://youtu.be/06_BIV7cMK8

https://youtu.be/AqmO-1vMnpU

Documentation: https://material.io/design/color/the-color-system.html#color-usage-and-palettes

Typography:

Introduction: https://youtu.be/3UuxtljrBKU

Scale Independent Pixels: https://youtu.be/DwdpKtlkiHQ

Books to read: Thinking with Type by Ellen Lupton

Just My Type: A Book About Fonts by Simon Garfield

Iconography:

https://material.io/design/iconography/product-icons.html#design-principles

using imagery:https://youtu.be/uOX6-HTy3sU

material design icons: http://materialdesignicons.com/

ImageView.ScaleType:https://developer.android.com/reference/android/widget/ImageView.ScaleType.html

RoundedBitmapDrawable :https://developer.android.com/reference/android/support/v4/graphics/drawable/RoundedBitmapDrawable.html

E.g:https://github.com/udacity/ud862-samples/tree/master/ImmersiveImages