Material Design de Google guía en español
By Agencia MDW In Diseño gráfico, Diseño web, GoogleEl 25 de junio de 2014 Google presenta «Material Design» un lenguaje gráfico concebido para unificar el aspecto de la interface de Google.
Las características que definen en Material Design son: diseño limpio, muy colorido, con efectos dimensionales (iluminación y sombras) y uso de animaciones. El objetivo es conseguir una interface que permita una comunicación directa con el usuario tras reconocer, a primera vista, lo que es interactivo y, lo que no y que garantiza la redimensión del diseño (el paso de móvil a escritorio: design responsive) sin pérdida de calidad… ¡Ni tiempo!
Material Design empezó a usarse en Android Lollipop y Google Drive y, acabará extendiéndose por todas las aplicaciones de Google.
Material Design Introducción
Los objetivos son crear un lenguaje visual que sintetice los principios clásicos del buen diseño, la innovación y la adaptabilidad. El lenguaje está en pleno desarrollo e irá renovándose y actualizándose. Material Design está enfocado a mejorar la experiencia de usuario y tiene muy en cuenta los dispositivos móviles/táctiles.
Material Design está basado en formas, iconografía, tipografía, espacio, color, imágenes-guía, tratamientos visuales y todo ello ordenado de forma consciente para crear una jerarquía, comunicar un significado y siempre desde un enfoque concreto. El diseño es simple pero deliberado: todo esta intencionado.
El movimiento influye en el diseño: movimiento del usuario y movimiento en respuesta al contenido. La experiencia está basada en no romper la continuidad gráfica.
El Material Design se sostiene sobre entorno 3D: todos los objetos están posicionados en el espacio y por lo tanto el eje Z, el que define la profundidad en el entorno tridimensional, gana en importancia ya que es el eje que aproxima el objeto situado en este plano, más cerca o más lejos del usuario-espectador.
Estilo Material Design
El Material Desing destaca por el uso de colores vibrantes sobre ambientes apagados y un guiño constante a la arquitectura.
Colores
La paleta de colores se inicia con colores primarios y se rellena con las variaciones sugeridas para Android, Web y iOS. Los colores primarios, denominados 500 por su pureza, vienen acompañados de combinaciones que van del 50 -más claro- al 900 -más oscuro, con este material el diseñador puede trabajar cómodamente limitando la selección a tres tonos de color de la paleta de primaria y sus combinaciones de la paleta de secundaria.
Se recomienda el uso de varios tonos de color para el texto. El texto principal es el más intenso sobre el fondo blanco. Los textos secundarios se desvanecen. El uso del canal alpha para la gestión de transparencias facilita el manejo de este desvanecimiento en iconos y textos.
Las barras de herramientas y los bloques de color más grandes deben usar el color primario que coincide en el color principal de la aplicación. Los elementos principales también heredan este color. La barra de estado debe ser el más oscura que su matiz de color primario. Los diferentes elementos de la interfaz de usuario pueden tomar en diferentes partes del tema de color seleccionado.
Iconos
Los iconos de los productos son la expresión visual de la marca, servicio y/o herramienta. Comunican con la idea central y la función de este. Y aquí también se unifican las formas para mantener la armonía. El icono está enfocado a las superficies táctiles, se basa en el doblado del papel, representado por formas gráficas simples. Transmite calidad en forma de pliegues limpios, bordes nítidos, acabado mate, reflejo de luces y sombras y potencialización de los detalles importantes. Los iconos se asientan en una geometría exacta: círculo, cuadrado, rectángulo, formas ortogonales y diagonales, así como las reglas para el reflejo de luz, degradados, planos y bordes tintados, unifican los diseños.
Imágenes
En Material Design las imágenes son puramente decorativas. Reflejan cualidades y estados de ánimo, su uso se limita a reforzar la comunicación. Por eso se pide un uso consciente de cada imagen empleada para que no rompa la armonía del diseño y se mantenga integrada en el contexto temático. De las imágenes destaca la expresión, el enfoque, la escala y la posibilidad de construir narrativas, además de cuidar del encuadre y la calidad.
Tipografía
Roboto y Noto son el tipo estándar en Android. Google recomienda utilizar Roboto para los idiomas que utilizan la escritura cirílica latín, griego, y Noto y para todos los demás idiomas.
Demasiados tamaños de letra y estilos a la vez pueden arruinar un diseño. El conjunto básico de estilos se basan en una escala tipográfica de 12, 14, 16, 20 y 34. Para una mejor experiencia de usuario, se recomienda el uso del tipo dinámico, que aplicado correctamente puede hacer los diseños más interesantes y ayudar a los usuarios a descifrar el contenido con una simple ojeada. Los tamaños dinámicos se apoyan en una escala tipográfica basada en las estimaciones del tamaño de espacio disponibles. La altura de las líneas se han determinado en función del tamaño y el peso individual de cada estilo.
El texto que es del mismo color que el fondo es difícil de leer y el texto con demasiado contraste puede deslumbrar. Por eso, el texto debe mantener una relación de contraste mínima para su legibilidad.
Diseño Material Design
El Material Design nos traslada al papel físico con un fondo blanco. Un diseño típico se construye sobre varias hojas de papel.
Como si de una hoja real se tratara, el papel tiene pliegues que dividen el espacio, los elementos ubicados a cada parte del pliegue se mueven con el papel. La barra de herramientas es una tira de papel que presenta las acciones a realizar en el documento, esta puede presentarse como pliegue o como hoja independiente y ser el punto de partida a otra hoja en cascada. Una lamina circular de papel separada de la barra de herramientas es una acción flotante y siempre está situada sobre el pliegue o margen del papel.
Los elementos que se montan sobre el papel lo hacen fijados a una rejilla. La posición de los elementos y la relación entre ellos es exacta. Anchos y márgenes vienen predefinidos para garantizar la experiencia táctil idónea. El layout también viene predefinido tanto a nivel formal como de distribución del contenido. La estructura se adapta al móvil, tablet y escritorio.
Componentes
A la hora de desarrollar interfaces, sobre el papel se distribuyen diferentes elementos: Bottom sheets, botones, tarjetas, chips, diálogos, divisores, grids, listas, menús, pickers, barras de progreso, sliders, snackbars & toasts, subheaders, interruptores, tabs, campos de texto y tooltips de los que ya hablaremos en detalle más adelante.
Patrones usados en Material Design
Engloban todos aquellos formatos que siguen unas reglas unificadas como la representación de la fecha, la hora, las ayudas o errores a la hora de rellenar un campo, gestos, representación del cargado de imágenes y las técnicas de desplazamiento, búsqueda y selección
Entorno 3D de Material Design
Todos los elementos tienen tres ejes: eje X para el desplazamiento en horizontal, eje Y para el desplazamiento en vertical y eje z para el desplazamiento en profundidad, por lo tanto, un objeto está alineado perpendicularmente entre el plano de la pantalla y es usuario o espectador. Todos los elementos deben ocupar necesariamente su posición en el eje Z. No existe el valor 0 para Z. Dos objetos no pueden ocupar el mismo espacio, un objeto no puede atravesar otro (un objeto si que puede situarse encima de otro). Y el material siempre tiene 1dp de espesor.
Como en el entorno real, en el entorno Material Design los objetos están iluminados y proyectan sombras según su ubicación.
Según el tipo de luz y la profundidad del objeto las sombra puede ser más suave o más marcada.
Los elementos se comportan en Material Design igual que el entorno real. Los objetos se elevan y este es un valor relativo entre dos objetos. La elevación se mide en las mismas unidades que los ejes X e Y, por lo general en la densidad de píxeles independientes (DPS). Dado que el objeto tiene un espesor 1DP estándar, todas las distancias de elevación se miden desde una superficie superior a otra superficie superior. Los objetos proyectan sombras.
Los objetos organizados en una aplicación marcan una relación entre ellos y el usuario. Los objetos pueden agruparse en contenedores sin perder la relación entre ellos y otros objetos. Cómo pasa en la herencia de padres a hijos, los niños heredan las propiedades de transformación de sus padres: posición, rotación, escala y elevación. Por lo tanto, seguimos una jerarquía que nos permite reordenar el espacio
Animación en Material Design
El movimiento en Material Design está concebido de forma compleja ya que es sensible a las relaciones entre elementos y su espacio. Con el movimiento transmitimos sensaciones como que un objeto es ligero o pesado, flexible o rígido, pequeño o grande, ampliando la funcionalidad de la animación.
Los objetos físicos tienen masa y se mueven sólo cuando las fuerzas se aplican a ellos. Se aceleran objetos rápidamente y desaceleran lentamente para evitar cambios bruscos en la velocidad usando curvas de animación buscando movimientos realistas. Pero teniendo en cuenta que no todos los objetos se mueven de la misma forma: los objetos pequeños se aceleran y desaceleran mas rápido porque tienen menos masa y requieren menos fuerza para hacerlo; mientras que los objetos grandes, al ser más pesados necesitan más tiempo para alcanzar la velocidad máxima y más tiempo para el frenado.
En Material Design la interacción con el usuario es reflexiva –responsive interaction. Las aplicaciones responden a las acciones del usuario. Los métodos de entrada son los trazos sobre pantalla táctil, la voz, el ratón y el teclado, cuando el usuario interactua la aplicación responde de forma sensible. Las indicaciones visuales y el movimiento ayudan a transmitir una respuesta enriqueciendo la comunicación. La aplicación responde a la entrada: el sistema proporciona una confirmación visual instantánea en el punto de contacto. Todas las acciones iniciadas por el usuario tienen un epicentro y una onda de expansión. Los cambios de estado a través de la pantalla son proporcionales a la intensidad de contacto.
Todos los elementos siguen una coreografía perfectamente armonizada y sincronizada. Las transiciones se usan cuando los diseños cambian o los elementos se reorganizan y tienen como objetivo guiar la atención del usuario y mejorar su experiencia ya que la transición entre dos estados visuales debe ser nítida, suave y natural. Una transición bien diseñada da a entender dónde debe centrar su atención el usuario.
En una animación, todos los elementos trabajan juntos para construir una experiencia perfecta, una solución hermosa y funcional. El uso más básico de la animación son las transiciones, pero una aplicación puede impactar al usuario cuando transmite una respuesta sensible: un icono del menú que se convierte en una flecha o los controles de reproducción que se fusionan -del play al stop y del stop al play- tienen una doble función: informar y deleitar.
Accesibilidad y bidireccionalidad
El Material Design defiende la creación de productos que permitan el uso y disfrute de todo tipo de personas, incluyendo los usuarios con discapacidad. A la hora de desarrollar interfaces debemos estudiar cómo los usuarios interactúan con dicho producto utilizando tecnologías de asistencia: el diseño debe prever el uso sin sonido, sin color, con el modo de alto contraste activado, con la pantalla ampliada, con un lector de pantalla (sin pantalla visible), con sólo el control de voz, etc.
La bidireccionalidad permite reflejar contenido y dirección para adaptar la interface a los idiomas que se escriben y leen de izquierda a derecha (LTR) o de derecha a izquierda (RTL) incluyendo tanto el diseño de la aplicación como los elementos gráficos. Para los hablantes de lenguas que utilizan caracteres RTL, la dirección se lleva de derecha a izquierda y estos usuarios esperan que la interfaz de usuario esté optimizada para el flujo de derecha a izquierda. Escritura RTL son el árabe, el hebreo y persa.
Librería de recursos gratis
Google ha liberado los recursos de Material Design que puedes descargar desde su web oficial:
– Stickers para Photoshop e Illustrator e Iconos (debajo del todo) Material Design
– Paletas de colores Material Design
Información oficial de Google
Estos recursos y toda la información está publicada en la web oficial de Google:
– Documentación para desarrolladores Android
Vídeo oficial de Material Design: