Material design

Qandil Tariq | Software Engineer
● What is material design?
● Old design vs Material design
● Introduction
● Goals
● Principles
● Material characteristics
● Material properties
● Animations
● Responsive interaction
● Meaningful transitions
● Consistent choreography
● Style
● Components
What we will cover

● Material design is a comprehensive guide for visual, motion, and interaction design across
platforms and devices.
● It is a design with increased use of grid-based layouts, responsive animations and transitions,
padding, and depth effects such as lighting and shadows.
● As of 2015, material design is incorporated in most of Google's mobile apps for Android including
Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox, and all of
the Google Play-branded apps, and to a smaller extent in the Chrome browser and Google Keep;
as well as in the desktop web interfaces of Google Drive, Docs, Sheets, Slides and Inbox.
What is material design?

Old design vs Material design

Introduction

We challenged ourselves to create a visual language for our users that synthesizes:
● The classic principles of good design with the innovation
● Possibility of technology and science
Introduction

Create a visual language that synthesizes classic principles of good design with the innovation and
possibility of technology and science.
Goals

The depth should be meaningful.
There is no need to apply depth principles with the “ink” objects.
Take care of the movements.
Floating buttons, toolbars and dialog boxes are located at a certain height. Sometimes they need to
move along the Z axis in order to avoid collisions when users take actions.
It’s not necessary to use Floating Action Button (FAB).
FAB is a very distinctive Material Design element. Many believe that it is necessary to add it to the
interface: so it immediately becomes Material Design (not!). It should be only used for the key action in
your application.
Not everything has to be on the card.
The card suits only if object has many forms and it contains a lot of different content.
Dialog box.
Designers at Google drastically improved dialogs, but for most tasks it’s better to use Bottom Sheet or
Snackbars.
Principles

Principles

● Motion provides meaning
● Motion respects and reinforces the user as the prime mover. Primary user actions are inflection
points that initiate motion, transforming the whole design.
● Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback
is subtle yet clear. Transitions are efﬁcient yet coherent.
Principles

● Physical properties
● Transforming material
● Movement of material
Material properties

Material has varying x & y dimensions (measured in dps) and a uniform thickness (1dp).
Do: (1dp thick) Don’t
Physical properties

● Material casts shadows.
● Shadows result naturally from the relative elevation (z-position) between material elements.
Physical properties

● Content is displayed on material, in any shape and color. Content does not add thickness to
material.
● Content can behave independently of the material, but is limited within the bounds of the material.
Physical properties

Material is solid.
Do. Dont
Input events only affect the foreground material. Input events cannot pass through material.
Physical properties

Multiple material elements cannot occupy the same dimension in space simultaneously.
Do.
Using elevation to separate material elements is one method of preventing multiple material elements
from occupying the same point in space simultaneously.
Physical properties

Dont
Multiple material elements cannot occupy the same point in space simultaneously
Physical properties

Material cannot pass through other material.
For example, one sheet of material cannot pass through another sheet of material when changing
elevation.
Physical properties

● Material can change shape.
● Material grows and shrinks only along its plane.
● Material never bends or folds.
● Sheets of material can join together to become a single sheet of material.
● When split, material can heal. For example, if you remove a portion of material from a sheet of
material, the sheet of material will become a whole sheet again. (Material can split and become
whole again.)
Transforming material

● Material can be spontaneously generated or destroyed anywhere in the environment.
● Material can move along any axis. (can rotate)
Movement of material

Objects in 3D space

Authentic motion
● Observing an object’s motion
● builds meaning about the spatial relationships, functionality, and intention of the system.
Mass and weight
● Physical objects have mass
● Animation with abrupt starts and stops
● retain the feeling of physicality without sacrificing elegance
Entering and exiting frame
● Ensure that it's moving at its peak velocity
Adjustments
● You imagination and creativity
Animations

● Each interaction is thoughtful, perhaps whimsical, but never distracting. Responsive interaction
encourages deeper exploration of an app.
● What will happen if I touch this screen? And then this icon?
Responsive interaction

Contents
● User input
● Surface reaction
● Material response
● Radial action
Responsive interaction

Motion design can effectively guide the user’s attention in ways that both inform and delight.
● Visual continuity
● Hierarchical timing
● Consistent choreography
Meaningful transitions

● Color
● Icons
● Imagry
● Typography
Style

Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows,
and bright highlights.
Color

● This color palette comprises primary and accent colors that can be used for illustration or to
develop your brand colors.
● They’ve been designed to work harmoniously with each other.
● Choose your palette
● Limit your selection of colors by choosing three hues from the primary palette and one accent color
from the secondary palette.
Color palette

● Use opacity for text, icons, and dividers
● Dark text on light backgrounds
● White text on dark backgrounds
● Text on colored backgrounds
● Accent color
● Use the accent color for your primary action button and components like switches or sliders.
Consistent choreography

Toolbars and larger color blocks should use the 500 color of the primary color of your app. The status
bar should be the darker 700 tint of your primary color.
Toolbars and status bars

Themes let you apply a consistent tone to an app. The theme specifies the darkness of the surfaces,
level of shadow, and appropriate opacity of ink elements.
1. Status bar
2. App bar
3. Background
4. Cards/Dialogs
Themes

Imagery is more than decoration. It’s a powerful tool to help you communicate and differentiate your
product. Bold, graphic, and intentional imagery helps to engage the user.
Typography
● Language categorization
● Typeface
● Styles
● Line height
● Language categories reference
Imagery

Material design uses fundamental tools that have come from the world of print design
● Paper craft
Metrics & keylines
Baseline grids
● All components align to an 8dp square baseline grid.
● Type aligns to a 4dp baseline grid.
● Iconography in toolbars align to a 4dp square baseline grid.
Touch target size
● The minimum touch target size is 48dp.
Layout

Some components:
● Bottom sheets
● Buttons
● Floating action button
● Cards
● Chips
● Data tables
● Dialogs
● Dividers
Components

To create complex lists and cards with material design styles in your apps, you can use the
RecyclerView and CardViews.
● RecyclerView
● CardView
UI Widgets

A FrameLayout with a rounded corner background and shadow.
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
Card view

The RecyclerView widget is a more advanced and flexible version of ListView.
The RecyclerView class simplifies the display and handling of large data sets by providing:
● Layout managers for positioning items
● Default animations for common item operations, such as removal or addition of items
Recyclerview

<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Recyclerview

public class MyActivity extends Activity {
private RecyclerView mRecyclerView;
private RecyclerView.Adapter mAdapter;
private RecyclerView.LayoutManager mLayoutManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_activity);
mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
// use this setting to improve performance if you know that changes
// in content do not change the layout size of the RecyclerView
mRecyclerView.setHasFixedSize(true);
// use a linear layout manager
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
// specify an adapter (see also next example)
mAdapter = new MyAdapter(myDataset);
mRecyclerView.setAdapter(mAdapter);
}
...
}
Recyclerview

● public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>
● public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType)
● public void onBindViewHolder(ViewHolder holder, int position)
Recyclerview

Questions

http://static.googleusercontent.com/design/material-
design.pdf
http://www.google.com/design/spec/material-
design/introduction.html#introduction-principles
http://developer.android.com/training/material/index.html
References

Material design

Recommended

Recommended

More Related Content

Similar to Material design

Similar to Material design (20)

Recently uploaded

Recently uploaded (20)

Material design