Material design Made Real
•Als PPTX, PDF herunterladen•
0 gefällt mir•818 views
A visual presentation to display the concepts behind Google Material Design and the implementation in various technologies
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Material design Made Real
Ähnlich wie Material design Made Real (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Material design Made Real
- 1. Material Design Made Real Tally Barak
- 3. We challenged ourselves to Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. The movie
- 5. Icons made by Yannick, Freepik, Google from www.flaticon.com is licensed by CC BY 3.0
- 6. Bold, graphic, intentional Motion provides meaning Material is the metaphor
- 9. Material is the metaphor Motion provides meaning Bold, graphic, intentional
- 16. Material is the metaphor Bold, graphic, intentional Motion provides meaning
- 18. Surface Interaction Material Response Radial reaction Responsive
- 21. • Layout • Gestures • Scrolling • Touch • Errors • Navigation • ARIA • RTL
- 22. Made Real
- 27. Thank You!
Hinweis der Redaktion
- Android 5.0 was first unveiled under the codename "Android L" - June 2014 Part of the presentation was dedicated to a new cross-platform design language referred to as "material design". Expanding upon the "card" motifs first seen in Google Now, it is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
- Designer Matías Duarte explained that "unlike real paper, our digital material can expand and reform intelligently. Treat the pixels on screen as if they were “real thing” – not just color but also depth. Build a model that fits the human mind.
- 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. The watch is missing
- he material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness. Material has varying x & y dimensions (measured in dps) and a uniform thickness (1dp). Materialnever has a thickness of 0.
- Material can change shape / elevation cast shadows display content join together / split apart / heal be spontaneously generated & destroyed move along any axis Material cannot pass through other materials cannot occupy same space as another material object bend (no origami or pagefold) change thickness (always 1dp)
- Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors.
- Limit selection to two palettes: primary & accent 3 color hues from primary palette 1 color from accent with possible fallback options Use alpha values of black for grey text, icons & dividers Toolsbars should use the primary 500 color Status Bar should use the darker primary 700 color Use accent color for primary action & components If accent is too light or dark use a fallback accent for greater contrast use primary 500 on white use white or black 54% on primary 500
- Imagery is more than decoration. It’s a powerful tool to help you communicate and differentiate your product. Bold, graphic, and intentional imagery helps to engage the user. Whether the mood is subdued and muted or bright and colorful, the following principles and best practices can help you successfully incorporate imagery and bring your apps to life, no matter what the visual brand. When using illustration and photography to enhance the user experience, choose images that express personal relevance, information, and delight. These principles will help inform the ima Use multiple mediums Both illustration and photography can live within the same product. Photography automatically implies a degree of specificity and should be used to showcase specific entities and stories. Illustration is effective for representing concepts and metaphors where specific photography might be alienating. Use multiple mediums Both illustration and photography can live within the same product. Photography automatically implies a degree of specificity and should be used to showcase specific entities and stories. Illustration is effective for representing concepts and metaphors where specific photography might be alienating. gery considerations in your product.
- Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.
- Responsive - In material design, apps are responsive to and eager for user input: Responsive interaction elevates an app from something that delivers information to the user upon request to something that communicates with the user in a tangible way. Surface reaction - Upon receiving an input event, the system provides an instantaneous visual confirmation at the point of contact: under the pad of a finger for touch, at the mic for voice, or in the appropriate field for a keyboard press. One way to express this acknowledgment is through the ink metaphor, the dynamic display surface that coats every sheet of paper. The core visual mechanism to express this contact is the Touch Ripple. Material response - In addition to ink-like actions on the surface, the material itself can also react. The material can lift up when touched, indicating an active state. The user can generate new or transform existing material on touch, or directly manipulate sheets of material by dragging or flinging them. All user-initiated actions have an epicenter; the place or places where their intent enters the system. Add clarity to user-initiated events by creating strong visual connections from user input, whether by fingers on a touch screen or voice through a microphone. State changes across the screen should trigger progressively as their distance to the point of contact increases, creating a ripple of action. Inputs have an epicenter. Touch occurs at the point of contact, voice enters through the mic icon, keyboard through the individual keys. Actions should visually connect to their respective input epicenter. Closer actions occur sooner than more distant ones, creating a ripple of actions (movement occurs from the distance from the epicenter).
- A lot more guidelines in the material design website. Constantly updating ARIA - Accessible Rich Internet Applications Navigation – right side bar, left side bar,dividers, The main difference between RTL and LTR interfaces is the direction of time. For speakers of languages that use RTL scripts, time moves from right to left. These users expect the UI to flow from right to left to accurately reflect the direction of time. Mirroring—changing the UI from LTR to RTL or vice-versa—includes both the layout of the app and graphical elements. Numbers – for languages that have different numerals (Arabic)
- Polymer – large molecule
- Layout and flex box Directives (components) Services