Digital Marketing Webinar

Material Design Done Right

November, 6, 2015| Robin Dhanwani, Founder, Parallel Labs

What are we going to talk about?

• Introduction to Material Design

• Why Material Design

• Pitfalls to Avoid

• Expressing your Brand

• Devil is the in Details

• Case Studies

• Inspiration

• TakeAways

• Q&A

Why Material Design

Need for Consistency across Platforms

Gmail.com(Project Kennedy)

Gmail for Android(Holo)

Why Material Design

Need for Consistency across Platforms

What about your Gmail on Cars, TV, Wearables, Mobile phones?

Skeumorphism is dying and Flat design is the Trend

Why Material Design

Key Principles

Material is the metaphor Bold, graphic, intentional Motion provides meaning

Pitfalls to Avoid

Principles vs Guidelines UI Kits and Stock Elements Trap of Design Patterns

Principles vs Guidelines

Material as a Metaphor

Use of Shadows

Z-axis and Hierarchy

Bold Imagery

Meaningful Animations

Typography

Design Principles

White Space

Roboto

Color Palette

Floating Action Button

Card Style

Icon Sets

Tab Styles

Hamburger Menu

Examples

Dimensions

Guidelines & Examples

UI and Icon Kits, Stock Images,

Color Palette, Material Icon Font

Forced Design Patterns

Floating Action Button (FAB) Cards Activity Bars

Does this Screen need a FAB ?

Google “Keep” dropped FAB

Old New

This is what Card style is supposed to be.

But, It didn't work for Facebook.

Old New

Medium dropped it too…

Old New

Trello - Lists inside Cards

Navigation Patterns

Flipboard Twitter Inbox

Navigation Patterns

Boomer Shazam Housing

Expressing your Brand using

Material Design

Skype FAB - Use of Brand Elements

Google Calendar

Use of Material Principles for a Calendar like feel & interactions

Slack

Use of color to have a unique brand connect

Use of depth and Z Axis

Design of Tabs

Devil is in the Details

Development // Design

Implementation Parallax of RedBus App

Optical Alignment on Todoist App

FAB on Quikr App

There shouldn’t be a text along with the icon. Its

almost un readable.

Symmetric Motion for Animations

Case Studies

Takeaways by crafting Material Design into Todoist

Source : Todoist Blog

Takeaway #1

Research and Iterate Continuously

Iterations on its scheduler

Takeaway #2

Inspiration, Not Rules

Custom palette and approach to navigation with multiple levels

Takeaway #3

Not just a makeover

Use of gestures to mark a task as done & FAB to quick add

Takeaway #4

Motion is critical

Use of meaningful animations for immersive experience

Takeaway #5

Not just for Phones

Creating a uniform experience cross web, mobile, desktop and wearables

Lessons by Trello Team

Source : Trello Blog

Saying Bye to Navigation Drawer

Fine Design changes on Boards & Lists

FAB for creating new Board

Activity Bar to switch between Organizations

Swipe to switch between Boards

InspirationsWinners of Google Material Design Awards

Adaptive Layouts

Crafted Simplicity

Elegant Typography

Delightful Animations

Seamless Browsing

Take Aways

Don’t follow Guidelines BlindlyMake conscious choices based on purpose and audience of your app.

What works for someone might not work for you.

Experience over ConventionsIf need be, definitely consider breaking conventions for the sake of better

experience.

Get Developers on BoardDevelopers have equal role of success in Material Design as designers have.

Motivate them to get fine details like interactions, layout right to perfection.

Make a StatementMaterial Design is all about being expressive. Be bold with use of imagery,

iconography, custom illustrations.

Express your BrandUse custom typefaces, visual styles and color palettes that

connect with your brand

Have Fun in the ProcessCreate a experience that is vibrant and interact would be

fun and exiting.

Questions & Answers

Resources

http://www.google.com/design/spec/material-design/introduction.html

http://www.materialup.com/

https://ui8.net/products/material-ui-kit

Found It Useful?

Join upcoming Digital Marketing Webinar live!

http://www.digitalvidya.com/webinars/