Universidad Mayor de San Andres – Medio Ambiente – Mundo 3D
Universidad Mayor de San Andres – Medio Ambiente – Mundo 3D
2 1
slides-material-design
presentaciones de material designOn Github jimialex / slides-material-design
Universidad Mayor de San Andres
Sociedad Científica Estudiantil
MATERIAL DESIGN“Alex Condori.” @axeljim_06
¿Qué es Material Design?
- NO es un Framework
- NO es una Libreria
- NO es... lo que estan pensando
Entonces... ¿Qué es?!!!
Es una metáfora o concepto la cual es la teoría unificadora de un espacio racionalizado y un sistema de movimiento basado en la realidad táctil, inspirada en el estudio de papel y tinta, pero tecnológicamente avanzado y abierto a la imaginación.
O sea... ¿Cómo?
Las superficies y los bordes del material proporcionan pistas visuales que se basan en la realidad.
Y, ademas los movimientos son armoniosos con cambios sutiles agradables a la vista y a la UX.
Medio Ambiente
Mundo 3D
Medio Ambiente
Luz y Sombra
Medio Ambiente
Luz y Sombra
Propiedades de Material
Física
px vs dpiPropiedades de Material
Física
Aun con espesor las sombras son naturales
Propiedades de Material
Física
Material puede mostrar culaquier forma y color
Propiedades de Material
Física
El comportamiento contenido puede ser independiente del comportamiento material
Propiedades de Material
Múltiples elementos materiales no pueden ocupar la misma dimensión en el espacio de forma simultánea.
Propiedades de Material
Física
El material no puede pasar a través de otro material.
Propiedades de Material
Física
El material puede cambiar de forma.
Propiedades de Material
Física
El material crece y se contrae sólo a lo largo de su plano.El material puede cambiar de forma.
Propiedades de Material
Física
Material nunca se dobla o pliega.
Propiedades de Material
Física
Las hojas de material pueden unirse para convertirse en una sola hoja de material.
Propiedades de Material
Física
El material puede dividirse y convertirse en nuevo todo.
Propiedades de Material
Movimiento
El material puede ser generado de forma espontánea o destruida en cualquier lugar en el medio ambiente.
Propiedades de Material
Movimiento
El material puede moverse a lo largo de cualquier eje.
Propiedades de Material
Movimiento
Movimiento en el eje Z es típicamente un resultado de la interacción del usuario con el material.
Animación
Symmetric vs Asymmetric
Animación
Linear vs Asymmetric
Animación
Reacción de Material
Animación
Reaccion Radial
Animación
Al Presionar y soltar -- al arrastrar y salir
Animación
Posición al abrir algo.
Animación
Trancisiones recomendadas
Animación
Animaciones agradables.
Animación
Animaciones agradables.
Animación
Buena coreografia.
Animación
En pequeños detales...
Estilos
Colores
Colores Material DesignEstilos
Colores
Estilos
Colores
Estilos
Colores
Estilos
Entonces... ¿Cómo convino colores?
Light theme
Estilos
Entonces... ¿Cómo convino colores?
Dark theme
Iconos
Enfoque de diseño
Iconos
Cuadriculas y referencias
Iconos
Tamaños y medidas
Iconos
Geometria
Iconos
Formas
Iconos
Principios de deseño
-Simple -Intuitivo -Procesable -Constante
Iconos
Dimensió y Posición
Iconos
Tener en cuenta
Metricas
Mobile
- Status bar: 24dp
- Toolbar: 56dp
- Subtitle: 48dp
- List item: 72dp
Metricas
Mobile
- Status bar: 24dp
- Toolbar: 56dp
- Title and list items: 72dp
- Subtitle: 48dp
- Space between content areas: 8dp
Metricas
Tablet
Metricas
Tablet
- Status bar and space above list: 24dp
- List item: 64dp
- Space between content areas: 8dp
- List item: 72dp