design, do you speak it
DESCRIPTION
VJTI Lecture Series 2014TRANSCRIPT
Faiz Malkani
Design
Do You Speak It?
What is Design?
User Experience
vs
User Interface
Evolution Of Web Design
Evolution of Design
1995
2014
Evolution Of Android Design
Droid
Material
Holo
DroidSans
Roboto 2.0
Roboto
Themes Fonts
2009 2014
User Centric Design
Psychology in Design Color Emotions
At Google we say, “Focus on the user and all else will follow.”
- Google Design
Psychology in Design Gestalt Theory
Similarity
Continuation
Closure
Proximity
Figure and Ground
Material Design Goals of Material Design
“When we started building for the first mobile devices, mobile meant less: less screen space, slower connection, fewer features.
A mobile experience was often a lesser experience. But mobile devices have evolved—they have become more powerful, faster,
and more intuitive—so must our approach to design.”
- Nicholas Jitkoff
Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.
Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input
methods.
Responsive Nature of Material Design
Material Design Principles of Material Design
Material is the Metaphor
Bold, Graphic, Intentional
Motion Provides Meaning
Material Design Concept of Depth
Layers of Paper
z-depth = 1 z-depth = 2 z-depth = 3 z-depth = 4 z-depth = 5
Material Design Animation
• Authentic Motion
• Responsive Interaction
• Meaningful Transitions
• Delightful Details
Material Design Patterns
App Bar
Side Nav
Cards
Floating Action Button
Material Design Polymer Implementation
Web Components
<!-- Import element -->
<link rel="import" href="google-map.html">
<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>
<core-toolbar> <core-icon-button icon="menu"></core-icon-button> <div flex>Title</div> <core-icon-button icon=“refresh"></core-icon-button> <core-icon-button icon="more"></core-icon-button> </core-toolbar>
Polymer Paper Elements Sampler: http://goo.gl/F9QAv9
Design Resources
• Android Asset Studio
• Android ActionBar Style Generator
• Android-Holo-Colors
• Android L Design Kit (Photoshop)
• Android 4.4 Design Kit (Photoshop)
• Android Arsenal
• Google Design
• Android UI/UX
• Android Developers Blog
• Romain Guy’s Blog
• Chet Haase’s Blog
• Cyril Mottier’s Blog
• Android Design in Action
• DevBytes
• DesignBytes
