Introducción a

material design

by Google

@gruizdevilla

¿De qué va esto?


Son las guías de diseño sugeridas por Google.

El lema que inspira esto es:
"Céntrate en el usuario y el resto vendrá solo."

La versión original de este material está en:

http://www.google.com/design/


Objetivos


Crear un lenguaje visual que sintetice 
los principios de un buen diseño 
con la innovación y capacidades 
de la tecnología y la ciencia.



Desarrollar un único sistema subyacente que proporcione una experiencia unificada entre plataformas y dispositivos de distintos tamaños.

Los principios móviles son fundamentales, pero tocar, la voz, el ratón y el teclado son todos métodos de entrada de primer nivel.

Principios de Material Design




El material es la metáfora

Interacción fundamentada en una experiencia táctil inspirada en el uso de papel y tinta.
Se extienda la experiencia física, pero se fundamenta en ella: superficies, bordes, espacio, transformaciones, luces, movimiento,...

Enfático, gráfico e intencional

El énfasis en las acciones del usuario permite que la funcionalidad principal sea inmediatamente percibida y proporciona orientación al usuario.

Los elementos fundacionales crean jerarquía, significado y foco. Las decisiones de color, imaginería, tipografía y los espacios crean un interfaz gráfico inmersivo y enfático.

El movimiento proporciona información

Las acciones del usuario son los desencadenantes de movimientos y transformaciones.
Los objetos se presentan sin romper la continuidad de la experiencia, tanto al moverse como transformarse.



El movimiento debe ser apropiado y con significado. Ayuda a focalizar la atención y mantener la continuidad.

El feedback se tiene que proporcionar de forma sutil y clara.

Las transiciones tienen que ser eficientes y coherentes.

Un mundo 3D

El entorno material tiene en cuenta el 3D, con lo que tenemos que considerar el eje Z perpendicular a la superficie


El papel tiene 1dp de profundidad


Las sombras son la consecuencia natural de la elevación de los papeles



El contenido no añade grosor al papel


Movimientos auténticos

Al percibir la naturaleza tangible de un objeto ayuda a entender como manipularlo. El movimiento de un objeto transmite esta naturaleza: es ligero o pesado, flexible o rígido, grande o pequeño. 

El movimiento no es solo algo bonito, proporciona información de relaciones espaciales, funcionalidad e intencionalidad del sistema.


Masa y peso


Los objetos se mueven en el mundo real cuando se aplican algunas fuerzas, no de forma espontánea.

La velocidad de un objeto varía con la fuerza aplicada, no de forma instantánea.

Movimiento natural

El movimiento con una rápida aceleración y suave frenado se siente más natural y agradable.

Bien                                           Mal

Entrando y saliendo

Una persona que entra a una habitación, entra andando, no empieza a andar en el marco de la puerta (suponiendo que estuviese abierta ;)

Bien                                           Mal

F' = m*a


No todos los objetos se mueven igual. Los objetos más pequeños o ligeras aceleran y se frenan más rápido porque tienen menos masa. Tenlo en cuenta para determinar como aplica a los distintos elementos de la interfaz.

Interacciones responsivas

Tocar, la voz, ratón y teclado son métodos de entrada de primer nivel.

Aunque el interfaz parezca tangible, está detrás de una capa de cristal. Los efectos visuales y los movimientos son el puente que conecta la interacción con su feedback para dar la sensación de manipulación directa.

Ejemplos

Reacción de superficies

Un evento debe proporcionar confirmación visual e instantánea en el punto de contacto. Una metáfora será la de la tinta, que es la superficie dinámica que cubre cada hoja de papel.

Hay tener en cuenta el tipo de ataque y duración del evento, amplitud de la voz, la presión del toque.

Buena práctica

Tener en cuenta el punto de entrada.
 

Respuesta de una superficie


Un material también reaccionar elevándose, tranformándose o moviéndose.

Punto de origen

Bien                                           Mal

Levantar al tocar

indicando un estado activo

Acción radial

Las acciones tienen un epicentro: el punto donde se toca, el micrófono, etc.

Las acciones tienen que estar relacionadas con dicho epicentro, propagándose hacia afuera. Lo más cercano reacciona antes que lo más lejano.

Transiciones significativas


El diseño de los movimientos debe ser bonito pero también tener un objetivo funcional. La coreografía debe guiar la atención del usuario y focalizarlo en los distintos pasos.
Hay que evitar la confusión al cambiar el layout o reordenar elementos.

Ejemplos

Continuidad visual

Las transiciones entre estados deben ser suaves y proporcionar claridad y ayudar a enfocar la atención. 

  • Elementos entrantes
  •  Elementos salientes
  • Elementos compartidos: elementos que persisten
    entre estados durante una transición.

Consideraciones


¿Donde dirigir la atención del usuario? ¿Que elementos y movimientos refuerzan ese objetivo?

Las transiciones pueden crear conexiones visuales entre estados mediante colores y elementos que persisten.

Movimientos con prudencia: ¿cómo puede mover un elemento agregar claridad y elegancia a una transición?

Ejemplos

Bien                                           Mal

Jerarquía temporal

El orden y la sincronización de los movimientos ayuda a la comprensión, creando un camino que la vista puede seguir.
Bien                                           Mal

Coreografías consistentes


La coreografía debe tener sentido y estar ordenada. Proporciona puntos de anclaje para el entendimiento y ayuda a comprender como la aplicación crece.

Buenas prácticas


  • Evita caminos lineales, excepto cuando el movimiento 
    esté restringido a un eje de alguna manera.
  • La dirección de los movimientos de los elementos
    deben tener cohesión, evitando conflictos y superposiciones.
  • Movimiento en profundidad(z): ¿qué se mueve
     debajo de qué y por qué?
  • Si pintas los caminos que trazan los distintos
     elementos, ¿se ven con sentido y organizados?
  • Refuerza las relaciones espaciales entre elementos
     con movimientos consistentes de entrada y salida.

Ejemplos

Bien                                           Mal

Atención a los detalles

El usuario disfrutará de la app cuando las animaciones se usen de formas más allá de las obvias.  Por ej, transformaciones naturales entre iconos que ayudan a informar al usuario de cambios y sorprenden agradablemente por la atención al detalle.

Color

Material está inspirado por enérgicas y coloridas afirmaciones yuxtapuestas sobre entornos apagados, influenciado por la arquitectura contemporánea, las señales de tráfico y de deporte.  

Enfatiza sombras enérgicas y elementos destacados. 
Usa colores inesperados y vibrantes.

La paleta de color

La paleta de color comienza con colores primarios y rellena el espectro hasta crear una paleta completa y usable para Android, Web e iOS. 
Los colores primarios están en el rango 500.



Aplicación del color


Limita la selección de colores a tres tonos de color en el primario y un color de acento en la paleta secundaria. El color de acento puede tener más opciones de respaldo.

Alfa para texto gris, iconos y divisores


Para transmitir la jerarquía de la información utiliza distintos alfas. El estandar sobre fondo blanco es 87% (#000000).
El texto secundario debería tener un alfa de 54% (#000000). Pistas para usuarios, como los labels o campos de textos todavía menos 26% (#000000). Otros elementos como iconos y divisores también se benefician de los alfas, asegurando que funcionan sobre fondos de distinto color.


Usa el color de forma audaz en grandes elementos de la interfaz. Distintos elementos deberán usar distintas partes del tema de colores. Toolbar y bloques grandes usarán el primario 500, el principal. Las barras de estado deberían usar el más oscuro 700 del color principal.


Color de acento

El color de acento debe usarse para las acciones
primarias de los botones así como interruptores
 y barras de desplazamiento.

Temas


Los temas son una forma de aplicar un tono consistente a una app. El estilo especifica la oscuridad de las superficies, las sobras y la opacidad apropiada de los elementos de tinta. Para promover la consistencia entre apps, proporcionan dos temas: 



Tipografías

Escalas  tipográficas
y estilos básicos 

Usar muchos tamaños y estilos a la vez rompen cualquier layout. La escala tipográfica es un conjunto limitado de tamaños que funcionan bien juntas, junto con la cuadrícula. Los tipos básicos están basadas en la escala tipográfica de 12, 14, 16, 20, y 34.

Estos tamaños y estilos balancean la densidad de contenido y el confort de lectura en condiciones normal de usuario. Los tipos se especifican en SP (píxeles escalables o dp) para permitir tipos más grandes de accesibilidad.




En todos los factores de forma, los titulos de la App Bar deben usar el estilo Title.

En algunos escenarios, la fuente más grande Subhead debe usarse en lugar de la más pequeña Body. 

Algunos ejemplos son cuando la presentación se presenta en pequeños snippets o cuando los títulos van emparejados con líneas de texto de tipo Body.

Ejemplos usando Subhead style

Ejemplos usando Body style


Ejemplos usando Button Style


Colores básicos y contraste

Demasiado contraste puede hacer el texto difícil de leer, en especial contra fondos oscuros.
El contraste mínimo debería ser de 4.5:1 y el preferido para lectura confortable debería ser 7:1.

Estas combinaciones tienen en consideración a usuarios con respuesta atípica a los colores.


Fuentes grandes y dinámicas

Las fuentes grandes pueden ser
más interesantes y ayudar al usuario
 a entender más rápido el contenido.

Las fuentes dinámicas permiten
fuentes grandes cuando el tamaño es desconocido.

Evita usar fuentes pequeñas
sólo por poder contemplar el peor escenario
y trunca como último recurso.



Iconos

Cada icono se debe reducir a su forma mínima, con cada idea editada a su esencia. 

Los diseños aseguran la claridad y capacidad de lectura incluso en tamaños pequeños.


Principios de diseño


Las formas deben ser enérgicas y geométricas. Se debe reforzar la simetría y consistencia en la forma que compone el icono a la vez que permanece simple y agudo.

Cuadrícula, proporción y tamaño 





Bordes redondeados



Consistencia

Bien                                           Mal

Iconos en contexto y aplicación

Los iconos se sitúan en una caja de 24dp determinada por la cuadrícula.

Imaginería

La imaginería da un toque mágico pero nunca excesivo. El estilo tiene que ser optimista y honest. Se potencia el material, la textura, uso inesperado de color y la apreciación de contexto. Se persigue un objetivo y la belleza del UI.


Apreciación de contexto

Las imágenes tienen que ser dinámicas, tener constancia del contexto y ser relevantes en el contexto.


Ser inmersivo

Se puede oscurecer o aludir a heros o thumbnails con color y contenido superpuesto.

Mejores prácticas

Usar múltiples medios

Ilustración y fotografía pueden convivir. La fotografía implica una especificidad, útil para entidades o historias concretas. La ilustración para conceptos o metáforas.

El uso de una foto para ilustrar un concepto debe ser bastante metafórica (no de stock). 
Bien                                             Mal

Alejarse de "stock"

Bien                                             Mal 

Un punto focal

Dispón de un punto destacado en el que focalizar la atención.
Cada concepto se debe comunicar de forma memorable.
Bien                                             Mal 

Bien                                                 Mal  

Bien                                                 Mal  
 

Crea una narrativa

Crea una historia y un sentido de contexto.
Bien                                                 Mal   


Bien                                                 Mal   

No sobremanipular

Hay que intentar mantener la integridad de la imagen.
Bien                                                 Mal   

Bien                                               Mal      

Integración de UI

Resolución



Escala

La escala ayuda a crear niveles visuales de importancia

Protección del texto

Protecciones oscuras con un 20%-40% de opacidad y las claras con 40%-60% en función del contexto. Sin abusar.
Bien                          Mal       

No hay que oscurecer todo el contenido.
Bien                              Mal 

Puedes usar capas superpuestas de color
Bien                                  Mal

Avatares y thumbnails


Hero Images

Para enganchar al usuario, proporcionar contexto o reforzar una marca.

Galerías


Introducción a material design (1 de 4)

By Gonzalo Ruiz de Villa

Introducción a material design (1 de 4)

El mismo contenido que en google.com/design pero para poder contarlo en una presentación

  • 3,254