Google Material desgin for AmmXdroid
-
Upload
sultan-shalakhti -
Category
Design
-
view
201 -
download
0
Transcript of Google Material desgin for AmmXdroid
Google Material DesignSultan Shalakhti
6 March 2015 twitter@sultan0254 1
Designed for
6 March 2015 twitter@sultan0254 2
A brief history of AndroidFrom a design perspective
6 March 2015 twitter@sultan0254 3
Oct. 22,2008T-Mobile G1 is launched
6 March 2015 twitter@sultan0254 4
Sep. 15,2009Introduced density independent pixels
http://www.dubacreative.com/post/110715811882/the-
difference-between-px-dp-dip-idpi-mdpi
6 March 2015 twitter@sultan0254 5
Oct. 26,2009The droids arrive
6 March 2015 twitter@sultan0254 6
Dec. 6,2010Google acquires Matias Duarte
6 March 2015 twitter@sultan0254 7
Feb. 22,2011Honeycomp (Android 3.0) showed us a glimpse of what
Android would soon look like
6 March 2015 twitter@sultan0254 8
Oct. 8,2011#yoloholo
6 March 2015 twitter@sultan0254 9
July 9,2012Jelly bean brings actions to notifications, Google Now
6 March 2015 twitter@sultan0254 10
Oct. 31,2013Loosing the fat
6 March 2015 twitter@sultan0254 11
June 25,2014Android L preview
6 March 2015 twitter@sultan0254 12
What is Material Design?
6 March 2015 twitter@sultan0254 13
+
● Universal platform design that functions across Android
Wear, Android TV, Android Auto, and all of Google’s apps
and services.
● Making the whole device feel unified.
● It’s all about everything animation, but flat at the same
time.
● Elevation value to any UI surface to get 3D effects by
virtual light sources and real time shadows
6 March 2015 twitter@sultan0254 14
What is the difference in
Material Design?
6 March 2015 twitter@sultan0254 15
Inspired by paper
6 March 2015 twitter@sultan0254 16
The classic principles of
good design
6 March 2015 twitter@sultan0254 17
Animation, Responsive interaction,
Meaningful transitions, Delightful
details
6 March 2015 twitter@sultan0254 18
Style
6 March 2015 twitter@sultan0254 19
Color Palette
6 March 2015 twitter@sultan0254 20
UI color application
6 March 2015 twitter@sultan0254 21
Roboto and Noto Fonts
6 March 2015 twitter@sultan0254 22
Typographic scale & basic styles
6 March 2015 twitter@sultan0254 23
Color and Contrast
6 March 2015 twitter@sultan0254 24
Icons get more abstract
6 March 2015 twitter@sultan0254 25
Imagery
6 March 2015 twitter@sultan0254 26
Give more space to Image
6 March 2015 twitter@sultan0254 27
Stay away from stock
6 March 2015 twitter@sultan0254 28
Focus on main
6 March 2015 twitter@sultan0254 29
Responsive layout for all devices
6 March 2015 twitter@sultan0254 30
Metrics and Grids
6 March 2015 twitter@sultan0254 31
Clean Dialogs
6 March 2015 twitter@sultan0254 32
Card view
6 March 2015 twitter@sultan0254 33
www.google.com/design/spec/material-design
Don't miss
6 March 2015 twitter@sultan0254 34
Q&AAsk me anytime, scan the bellow QR
www.dubacreative.com/ask
6 March 2015 twitter@sultan0254 35
That’s it Folks!Sultan Shalakhti
Thank you