+

Material Design 1

Learning Goals

En esta lección:

• Aprenderás qué es un sistema de diseño y qué es Material Design
• Conocerás las bases de Material Design

¿Qué es un Sistema de Diseño?

Es una herramienta colaborativa que comprende estándares, guías y componentes reutilizables para poder definir un producto digital.

Dentro de las directrices claras de un sistema de diseño, también puede haber patrones, procesos y cualquier elemento visual que sirve para comunicar y describir el producto o el proceso que conlleva la confección y mantenimiento del mismo.

Además, los sistemas de diseño nos ayuda a construir mejor y más rápido. Pero además:

• Mejora la comunicación en equipo de diseño, desarrollo y otros grupos de interes
• Ayuda a mantener la consistencia del producto, ya que todos los elementos mantienen coherencia entre ellos
• Nos ayuda a optimizar el tiempo
• Reduce la probabilidad de error al realizar cambios en el diseño
• Mejora la experiencia de usuario
• Permite que el producto sea más escalable
• Facilita la incorporación de nuevos integrantes a los equipos porque facilita el aprendizaje sobre el producto

Sistemas de Diseño en las empresas

Hace muchos años atrás, empresas como Google, pero también Airbnb, IBM y muchas otras, comenzaron a hacer públicos sus sistemas de diseños. Incluso compartiendo los componentes no sólo a nivel de prototipo, sino también a nivel de código.

Esto ha permitido llevar el diseño a otro nivel dentro de la industria y colocarlo en el centro del desarrollo de software.

A nivel macro, los diseñadores de todo el mundo son capaces de aprender patrones, utilizar componentes e ir creando experiencias a la medida de sus usuarios pero de la mano con las tendencias mundiales.

¿Qué es Material Design?

De forma simple, Material Design es un sistema de diseño creado por Google para ayudar a los equipos de creadores de aplicaciones y webs a construir experiencias digitales de alta calidad para cada plataforma: incluyendo Android, Flutter, iOS y la web como una entidad completa.

La evolución de Material Design

La mayoría de las experiencias digitales están constituidas de aplicaciones, páginas webs y sitios que se apoyan fuertemente en las guías de diseño de Material Design.

Antes de que se creara Material Design, y su posterior recepción a nivel mundial, la web consistía en un montón de interfaces de usuario poco amigables que eran inconsistentes en cuanto a sus principios de diseño y su implementación.

Material Design fue una respuesta a esas inconsistencias en los principios de diseño web antiguos. También, fue un intento de impulsar el mundo del diseño en una nueva era de diseño y experiencia de usuario.

Una cuestión importante

A lo largo de los últimos 20 años, ha habido otros intentos de unificar el diseño de experiencia de usuario y de impulsar la consistencia en los productos digitales. Material Design es uno de ellos, quizás el más conciso desde el punto de vista de UI. Sin embargo, son notables otras aportaciones que complementan el diseño de una experiencia digital. No olvidemos:

UX:

• 10 heurísticas de Nielsen
• principios de diseño clásico
• principios de diseño centrado en el usuario

como forma de entender a nuestros usuarios y:

UI:

• iOS Human Interface Design
• Carbon IBM
• Otros sistemas de diseño que han servido para crear consistencia y unificar interfaces de usuario y patrones

Todavía hoy es común encontrar desarrolladores creando sus propias interfaces, sin ningún tipo de metodología ni cuidado por la consistencia. Material Design también fue una revolución para los desarrolladores de front-end porque permitió darles guías para que pudieran crear interfaces que fuesen interesantes para el usuario, más sencillas, más limpias y que anticipaban experiencias responsivas e intuitivas para el usuario.

El Inicio

Se creó por primera vez en 2014 y su sistema de diseño fue basado en un sistema basado en Grids (¿os acordáis de la clase?). Este diseño fue rápidamente adoptado y no tomó mucho tiempo antes de que la mayoría de las webs en Internet comenzaran a utilizar este sistema.

Google publicó el lenguaje de diseño entero, el sistema de diseño y su documentación en material.io.

La website contiene todos los componentes y guías requeridos para crear una web entera utilizando el sistema de diseño.

Material Design 2

Material Design 2 es en la actualidad la guía más utilizada para diseñar interfaces.

Material Design tiene tres principios base:

• El material es una metáfora
• Es gráfico, arriesgado e intencional
• El movimiento tiene significado

La idea detrás de estos tres principios es que el diseño se apropie de cosas del mundo natural y que provea pistas visuales que estén basadas en la realidad, la luz y el movimiento para crear atributos que los usuarios puedan entender. De esta forma, se recuerda a la realidad de los objetos y jugamos con la sensación de objetos físicos.

Anatomía del Layout

Las regiones de un layout son las bases de la experiencia interactiva. Funcionan como bloques y se componen de elementos y componentes que comparten funciones similares. Las regiones en el layout también pueden contener y agrupar pequeños contenedores (como por ejemplo cards, imágenes, tablas…).

El layout de una pantalla de escritorio, por ejemplo, tiene tres secciones principales:

1. Barras de aplicación (App bars)
2. Navegación (Navigation)
3. Body (Cuerpo)

Courtesy of Material Design

Cuando estás creando un sistema responsivo, es de gran ayuda establecer dimensiones máximas y mínimas para el cuerpo y los márgenes (¿recuerdas la clase de Grids y Alineación?), así como también el comportamiento que puede hacer que una región se tenga que adaptar a diferentes factores.

1) Barras de aplicación (App bars)

Las barras de la aplicación se usan para mostrar y agrupar componentes y acciones que facilitan a los usuarios a realizar acciones primarias o tomar acción sobre los elementos en el cuerpo (body).

Ejemplo:

From @fontcuberta's design

Puedes ver un ejemplo de ello en un diseño real de escritorio. Esta aplicación tiene dos barras.

1. En la barra superior hay elementos agrupados utilizando jerarquía en las fuentes, espacio entre elementos y separadores: a la izquierda está el logo, al centro el stepper que muestra en qué sección estamos y a la derecha del todo varios iconos de control que permiten ejecutar acciones, incluyendo el placeholder circular que evoca al avatar y despliega las opciones de My Profile.
2. La barra inferior tiene tres botones que permiten seleccionar opciones directamente del elemento en el que está el usuario: el nombre del elemento y al lado los botones "Más info", "Ver Componentes" y "Abrir".

2) Navegación

La región de navegación contiene los componentes de navegación y elementos como el drawer. Ayuda a los usuarios a navegar a través de los diferentes destinos en la aplicación o a acceder a acciones importantes. Mantiene un ancho consistente de 256dp cuando se expande y 72dp cuando está colapsada. Así mismo, el margen con el cuerpo (body) es de 32dp.

Courtesy of Material Design

A medir
Acabamos de escribir unas medidas que probablemente no hayas entendido. Ahora te las explicaremos.

Un dp (density-independent pixel) es una unidad abstracta que se basa en la densidad física de una pantalla. Estas unidades son relativas a una pantalla de 160dps. Es decir, 1dp es 1px en una pantalla de 160dp.

IMPORTANTE: El ratio de dp a pixel va a cambiar con la densidad de la pantalla pero no necesariamente en la misma proporción.

Para entenderlo en Android, echa un vistazo a esta tabla:

En el caso de Desktop, a 1440px, usaremos los píxeles como sinónimos de dps, lo cual además nos viene bien, porque ya venimos creando cosas en múltiplos de 8.

Made with Figma

3) Cuerpo (Body)

La región del cuerpo es usada para mostrar la mayoría del contenido en una aplicación. Típicamente contiene componentes como listas, cards, botones e imágenes.

La región del cuerpo usa valores para tres parámetros:

• Dimensiones vertical y horizontal
• Número de columnas
• Márgenes

*Courtesy of Material Design

El grid está compuesto de tres elementos: columns, gutters y márgenes. Usualmente para móviles utilizamos 4 columnas, 8 para tablets y 12 para escritorio.

Consideraciones con el Gutter

Este layout presenta gutters de 8dps. Si el espacio es ajustado, sugerimos al usuario que las imágenes están relacionadas las unas con las otras, y por ende, son parte de una colección.

Por otro lado, este grid tiene gutters de 32dps. Ahora podemos ver más separación entre los elementos. Tiene sentido porque además de imágenes, los elementos tienen texto.

CUIDADO:

No crees gutters muy grandes o con el mismo ancho de las columnas que sí muestran contenido. Los gutters tan grandes no permiten que se vea suficiente contenido y se ven raros.

Colores

El sistema de colores de Material Design te permite seleccionar un color primario y otro secundario. Adicionalmente, puedes utilizar variantes oscuras y claras de estos colores para aplicar en la interfaz.

Esta paleta de ejemplo contiene

1. Color primario
2. Color Secundario
3. Variantes más claras y más oscuras

Principios del Color en MD

Para Material Design, la selección de colores debe ser:

Jerárquica:
El color indica qué elementos son interactivos, cómo se relacionan con otros elementos y su nivel de importancia. Elementos importantes, como los CTAs deben resaltar por encima de los demás.

Legible:

El texto y los elementos importantes, como los iconos, deben ser legibles cuando tienen colores de fondo.

Expresiva:
Muestra los colores de tu producto como momentos que el usuario pueda recordar y que refuercen el estilo de la marca.

La Paleta de Colores

Material Design viene diseñado con un tema de base que puede ser utilizado tal cual es.

Este incluye colores predeterminados para:

• Primario y secundario
• Variantes de colores primario y secundario
• Colores adicionales de interfaz: backgrounds, superficies, errores, tipografías e iconografía.

Todos estos colores pueden ser customizados para tu aplicación.

Consejo Profesional:

Utiliza la plantilla para llenar tu guía de estilo y como guía en general para elegir tu paleta completa.

Colores de tipografía y de iconografía

Colores "ON":

Cuando un elemento, como texto o icono, aparece en frente a una superficie que tiene un color primario, usualmente necesitamos que sea de un color diseñado para leerse con claridad sobre el fondo. Esta categoría de colores se llaman colores "on". Cuando un color aparece sobre un color primario, se llama 'color on'. De forma predeterminada en MD son el blanco y el negro puros: #FFFFFF y #000000.

2014 Material Design Color Palette

Estas paletas, originalmente creadas en 2014, están diseñadas para que funcionen juntas.

Material Design Color Tool

Material Design ofrece una herramienta llamada Color Tool donde puedes escoger directamente tus colores de la paleta oficial de Material Design.

Componentes

Los componentes de Material Design difieren de otros componentes y otras guías de estilo porque no fueron construidos para un proyecto o marca particular. Fue diseñado para servir como una guía de diseño para todo Internet.

El objetivo era tener un sistema de diseño intuitivo para ser utilizado de forma uniforme en todos los dispositivos. Google eventualmente utilizó Material Design para reconstruir todas sus aplicaciones y hacerlas más amigables y más intuitivas.

Hecho Curioso:
El nombre-código del proyecto de Material Design fue Quantum Paper y no es casualidad, fue diseñado para imitar materiales de la vida real con disposiciones planas (como el papel), pero con sombras y texturas.

Resumen

• Un sistema de diseño es una herramienta colaborativa que comprende estándares, guías y componentes reutilizables para poder definir un producto digital
• Empresas como Google, pero también Airbnb, IBM y muchas otras, comenzaron a hacer públicos sus sistemas de diseños. Incluso compartiendo los componentes no sólo a nivel de prototipo, sino también a nivel de código
• Esto ha facilitado el aprendizaje de diseñadores en todo el mundo
• La mayoría de las experiencias digitales están constituidas de aplicaciones, páginas webs y sitios que se apoyan fuertemente en las guías de diseño de Material Design
• Se creó por primera vez en 2014 y su sistema de diseño fue basado en un sistema basado en Grids
• Material Design 2 es en la actualidad la guía más utilizada para diseñar interfaces

Recursos

• Material Design
• Color Tool
• MDL Material Design Lite
• Figma Plugin - Material Theme Builder
• Material Foundation - Material Theme Builder