what is material design? michael williamson 9/25/2014
TRANSCRIPT
WHAT IS MATERIAL DESIGN?
Michael Williamson9/25/2014
DEFINITION
Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. To use material design in your Android apps, follow the guidelines defined in the material design specification and use the new components and functionality available in the Android L Developer Preview.
“Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies.
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.
This is Material Design.”
9 PRINCIPLES
9 PRINCIPLES
1: Material is the metaphorA material metaphor is the unifying theory of a rationalized space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.
9 PRINCIPLES
2: Surfaces are intuitive and naturalSurfaces and edges provide visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances.
9 PRINCIPLES
3: Dimensionality affords interactionThe fundamentals of light, surface, and movement are key to conveying how objects interact. Realistic lighting shows seams, divides space, and indicates moving parts.
9 PRINCIPLES
4: One adaptive designA single underlying design system organizes interactions and space. Each device reflects a different view of the same underlying system. Each view is tailored to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships remain constant.
9 PRINCIPLES
5: Content is bold, graphic, and intentionalBold design creates hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity.
9 PRINCIPLES
6: Color, surface, and iconography emphasize actionsUser action is the essence of experience design. The primary actions are inflection points that transform the whole design. Their emphasis makes core functionality immediately apparent and provides waypoints for the user.
9 PRINCIPLES
7: Users initiate changeChanges in the interface derive their energy from user actions. Motion that cascades from touch respects and reinforces the user as the prime mover.
9 PRINCIPLES
8: Animation is choreographed on a shared stageAll action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.
9 PRINCIPLES
9: Motion provides meaningMotion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.
• GOOGLE, INC: MATERIAL DESIGN GOLD PRIZE, BEST CONTRIBUTION TO UX
GOLD PRIZE
http://userexperienceawards.com/ux-awards-2014-winners/#google
• Animation- Authentic
Motion- Responsive
Interaction- Meaningful
Transitions- Delightful
Details
WHAT'S IN THE SPEC?
http://www.google.com/design/spec/animation/responsive-interaction.html#
http://www.google.com/design/spec/animation/meaningful-transitions.html
http://www.google.com/design/spec/animation/delightful-details.html
• Style- Color- Typography- Icons- Imagery
WHAT'S IN THE SPEC?
• Layout- Principles- Metrics and
Keylines- Structure
WHAT'S IN THE SPEC?
• Components- Bottom Sheets- Buttons- Cards- Chips- Dialogs- Dividers- Grids- Lists- List controls
WHAT'S IN THE SPEC?
• … - Menus- Progress and Activity- Sliders- Snackbars and Toasts- Subheaders- Switches- Tabs- Text fields- Tooltips
WHAT'S IN THE SPEC?
• Patterns- Selection- Gestures- Promoted Actions- Settings- Imagery Treatment- Search
WHAT'S IN THE SPEC?
• Usability- Accessibility
• Resoources- Layout Templates- Sticker Sheets- Roboto Font- Color Palettes
WHAT'S IN THE SPEC?
• http://static.googleusercontent.com/media/www.google.com/en/us/design/material-design.pdf
• http://www.google.com/design/spec/material-design/introduction.html#
• http://googledevelopers.blogspot.com/2014/06/this-is-material-design.html
• http://www.google.com/design/• https://www.google.com/webdesigner/• https://plus.google.com/+googledesign/posts• http://www.polymer-project.org/docs/elements/material.html• https://
play.google.com/store/apps/details?id=com.chromecordova.Topeka
• https://www.youtube.com/v/Q8TXgCzxEnw