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
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
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
Crafted Simplicity
Elegant Typography
Delightful Animations
Seamless Browsing
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/