60 lines
4.3 KiB
Markdown
60 lines
4.3 KiB
Markdown
|
---
|
||
|
|
title: Material Design
|
||
|
|
---
|
||
|
|
# Material Design
|
||
|
|
Material Design is a design system to build bold and beautiful digital products. Created by a team of UX engineers and designers on Google. Google added the material design concept in Android 5.0 - Lollipop. Currently used in Android, IOS, Flutter, and Web.
|
||
|
|
|
||
|
|
It uses the experiences of the physical world to make user interfaces (UI) more intuitive, using the following concepts: Light, shadow and volumes of renderings. Material Design focuses on 4 main concepts:
|
||
|
|
|
||
|
|
- Tangible surfaces
|
||
|
|
- Bold graphic design
|
||
|
|
- Significant movement
|
||
|
|
- Adaptive design
|
||
|
|
|
||
|
|
## Tangible surfaces
|
||
|
|
You have an intuition about what objects will feel like, just look at them, we call them Affordances. The material design takes the basic principles of Affordances to make our UI more intuitive.
|
||
|
|
|
||
|
|
In material design, the UI has pieces of digital paper called surfaces, so everything on the screen is on a surface. The shadows transmit relative elevation.
|
||
|
|
|
||
|
|
Floating Action Button is a distinctive pattern of Material Design. It is easy to access and communicates importance, it has elevation and interaction characteristics.
|
||
|
|
|
||
|
|
There are two forms of visual feedback in response to touch:
|
||
|
|
|
||
|
|
- Subtle wave effect, based on the ink ripple, a radial movement that goes to the limits of the surface.
|
||
|
|
- Elevation of Surface, feeling as if the touch attracts the surface.
|
||
|
|
|
||
|
|
## Graphic Design Bold
|
||
|
|
Material Design uses color with a bold purpose, not only for aesthetics but to make apps easier to use. The Material Design color palette recommends 2 shades and an accent color.
|
||
|
|
|
||
|
|
- Primary color: Usually used for the bottom of the action bar.
|
||
|
|
- Primary dark color: Usually used for the background of the status bar.
|
||
|
|
- Accent color: Highlighting color, enveloping and completely adaptable to your app.
|
||
|
|
|
||
|
|
Roboto typography is the standard typeface on Android. The use of Roboto ensures us to work with a variety of languages, it is clearer and readable on any screen.
|
||
|
|
|
||
|
|
Good images make us form a connection with the theme, sympathize with their joy, pain or pleasure, for this you use photography to convey a bold and dynamic meaning, the illustration to convey a playful and elegant meaning, the iconography conveys an elegant meaning and refined. All this helps create an immersive experience.
|
||
|
|
|
||
|
|
|
||
|
|
## Significant Movement
|
||
|
|
Animations on Android have evolved since its inception. In the first versions, the animation only allowed to move, scale and vanish. In the version of Android 3.0 and 4.0, it became simpler and easier to use. In Android 4.4 we started talking about the scenes and transitions generating a new paradigm for the animation of objects in the UI. In Android 5.0, new ways the choreographing movements were added.
|
||
|
|
|
||
|
|
The animation in Android became very powerful in each version, nowadays there are many animation effects, with the purpose of providing continuity between different states of UI to create more comprehensible experiences.
|
||
|
|
|
||
|
|
|
||
|
|
## Adaptive Design
|
||
|
|
The adaptive design changes the UI based on the size of the screen, whether it is on a Nexus 4 (4.7 inches), Pixel XL (5.5 inches), Nexus 6 (6.0 inches) or a Nexus 10 (10.1 inches) phone ).
|
||
|
|
|
||
|
|
Breakpoints are points where the UI changes. When finding a breakpoint you should start to change the UI. You can start with the drawable, string, layout, orientation files. For specific adaptations, you can vary the number of columns, heights, and width of margins, space.
|
||
|
|
|
||
|
|
### More information
|
||
|
|
- [Material Design para Android](https://developer.android.com/design/material/?hl=es-419)
|
||
|
|
- [Material Components for Android](https://github.com/material-components/material-components-android)
|
||
|
|
- [Material design specifications](https://material.io/design/introduction/#)
|
||
|
|
- [Material Design](https://www.youtube.com/watch?v=Q8TXgCzxEnw)
|
||
|
|
- [Material Design in the Google I/O App](https://www.youtube.com/watch?v=XOcCOBe8PTc&hl=es-419)
|
||
|
|
- [Google I/O 2014 - Material design: Structure and components](https://www.youtube.com/watch?v=dZqzz5lZFvo)
|
||
|
|
- [User interfaces using Material Design by Uplabs](https://www.uplabs.com/android)
|
||
|
|
|
||
|
|
### Courses
|
||
|
|
- [Material Design for Android Developers](https://www.udacity.com/course/material-design-for-android-developers--ud862)
|
||
|
|
- [Codelab](https://codelabs.developers.google.com/codelabs/material-design-style-sp/index.html#0)
|