Lecciones UI para creativos

Hay momentos en la vida donde desvelas la fiera que llevas dentro. Marcan de lo que eres capaz.

Recuerdo aquel día que me marcó de por vida. Fue el día que mi mejor amiga no obedeció en el colegio. Había un poco de tormenta eléctrica y, después de comer, se coló en la clase con otra niña porque tenían miedo a los truenos.

Tuvo la mala suerte de que les pillara una de las profes más repipis que tuve en toda mi educación. Al sorprenderlas, les empezó a reñir. Mi amiga quiso explicarle el por qué estaban allí, pero la profesora no atendía a razones.

Así que mi buena amiga que siempre había sido bastante obediente y dócil se reveló. Tirándole un lápiz a los pies con toda su rabia le gritó: …

¿Qué te parece si lo dejamos aquí? A nadie le gusta que le dejen sin saber el final de cualquier historia, ¿verdad?

Si te gustó la primera parte, tratada en el  episodio de la semana pasada sobre Material Design, te encantará que nos quitemos la sensación de coitus interruptus con la que nos quedamos y descubramos en el episodio de esta semana lo que nos quedó por explicar sobre Material Design para tus diseños web y app.

Además, desvelaré también cómo continuó la historia de mi amiga, y cómo dejó una persistente huella en mí.

¿Empezamos?

El episodio de hoy está compuesto por 2 partes:

1. En la primera parte hablaremos de 6 elementos clave en Material Design y de cómo usarlos en la práctica según las indicaciones de Google.
2. En la segunda parte os presentaré dos herramientas que os serán muy útiles para acabar de entender y utilizar este entorno.

6 Elementos clave en Material Design

La semana pasada vimos los principios fundamentales de Material Design. Ellos son la base para entender cómo aplicar el resto. Pero con esta base, no sé a ti, pero a mí me pasó que aún era todo muy abstracto y no sabía cómo aplicarlo.

Por eso esta semana vamos a ver en detalle precisamente cómo pasar a la acción para diseñar apps y webs basadas en este entorno.

1. El contenido es el rey

En primer lugar me gustaría enfatizar el hecho de que para Material Design el contenido es primordial. Si te fijas, la mayoría de los principios están pensados a partir de esta premisa.

Si recuerdas esos principios nos decían cosas como por ejemplo que en Material Design se aplican las leyes de la física para permitir al usuario entender la relación entre elementos, es decir, entre la información al fin y al cabo; También nos decían que el movimiento debía tener significado, es decir, debía tener un sentido para aportar información o enfatizar una información, etc.; Las interacciones tampoco podían despistar al usuario; etc.

Es decir, todo gira alrededor del contenido. El motivo es que el contenido es realmente la atracción principal que persuade al usuario a quedarse en la página o utilizar la app. Si ese contenido no le aporta nada, no le va a resultar interesante y no se va a quedar, por muy increíble que sea la experiencia de usuario y el diseño.

Así pues, la realidad es que usamos apps y navegamos las webs porque queremos un contenido. Y esto Google ya lo tenía muy claro cuando creó Material Design. En el caso de las apps el contenido puede ser incluso comprobar el tiempo, hacer unas fotos y compartirlas en una red, leer noticias, etc.

Por todo ello, el contenido es quién realmente dirige el comportamiento interactivo. De acuerdo con la filosofía de Material Design, cuando los usuarios interaccionan con contenido, deberían percibir el comportamiento como intuitivo. Además, debería ser basado en el objetivo del usuario.

Según este punto de vista, para ver un vídeo, por ejemplo, se puede percibir como bastante intuitivo tocar el vídeo simplemente para llevar el foco a él, que se amplíe la pantalla y ser reproduzca.

En definitiva, ¿la idea con la que debes quedarte? Sencillo: el contenidos es el rey. Todo lo que provoque una desviación de la atención hacia otros elementos, etc. debe quedar fuera del diseño.

2. La profundidad de Material Design:¿Cómo crearla?

En el capítulo anterior tratamos el tema de la profundidad y su importancia para Material pero ¿cómo nos sugiere Material Design que la creemos?

La respuesta es muy sencilla: como se ha hecho toda la vida, es decir, usando luz y sombra. La peculiaridad está en que Material Design es muy concreto a la hora de indicar qué luz y sombra utilizar y cómo.

Para empezar, con la luz y la sombra creamos sombras sutiles para el efecto de profundidad pero no el de volumen. Los objetos como botones, cards, etc. continúan teniendo el aspecto plano.

Según la documentación de Google, ellos se basan simplemente en el hecho que las superficies materiales proyectan sombras cuando obstruyen las fuentes de luz. En el caso de las apps, Así pues, Material Design nos especifica lo siguiente sobre luz y sombra:

Luz

Respecto a la luz, define dos tipos de luces virtuales para la iluminar la interfaz del usuario:

• Luz clave: sirve para crear las sombras clave, es decir, las sombras direccionales más nítidas.
• Luz ambiental: se trata de una luz que aparece desde todos los ángulos y crea las sombras ambientales, que son sombras difusas y suaves.

No se trata de elegir sobre la una o la otra, sino de combinar las dos luces:

Sombras

Como hemos visto, la luz provoca unas sombras. Ellas son las encargadas de darnos la pista visual sobre la profundidad, dirección del movimiento y los bordes de la superficie.

Las sombras además determinan la elevación y relación con otras superficies. Si un botón debe destacar porque tiene la acción primaria, podemos utilizar la sombra para que de el efecto de que está más elevado, como si estuviera por encima del resto. Así le otorgamos un puesto más elevado en la jerarquía.

Material Design incluso determina la medida de las sombras en dps. Un material que está completamente apoyado en la superficie y que tiene menos relevancia, tendrá una sombra de 2dps, pero si queremos elevarlo para darle más relevancia podemos darle 6dp, o 12dp o 24pd.

¿Qué es dp?

Cómo habrás observado, he dicho continuamente dp, y no px, cuando he dicho medidas. Probablemente Te preguntarás: ¿Y qué es eso?¿Por qué nos complica la vida Google con esto de los dp?

DP corresponde a Density Independent Pixels y son una unidad física de medida multidispositivo que hace referencia a la densidad de píxeles. Su objetivo es permitir crear interfaces que son independientes de una resolución de pantalla particular.

Explicar los motivos del uso de esta unidad, entenderla y cómo aplicarla, alargaría mucho el episodio de hoy. Por eso dedicaré un capítulo más adelante a tratar sobre ello.

Lo que ya te puedo adelantar es que según nos dice M.D., si estás diseñando para web, la cosa se resuelve de forma muy sencilla: sólo tienes que substituir dp por px al seguir las indicaciones de las guías de este entorno.

Layout de material Design

Recordemos de la primera parte que tratamos en el episodio anterior que el concepto de material design partía del mundo impreso del papel y la tinta. La consecuencia directa de esta base es que Material Design utiliza algunas herramientas como grids (retículas) y plantillas estructurales para mejorar la consistencia a través de los entornos.

Una de las grandes ventajas de estos layouts es que permite crear apps escalables ya que encajan perfectamente en cualquier medida de pantalla.

Las normas que rigen el layout en material design es que deben ser:

• Predecibles: Las interfaces de usuario deben usar diseños intuitivos y predecibles, con regiones de interfaz de usuario coherentes y organización espacial.
• Consistentes: Los diseños deben usar una cuadrícula, líneas clave y relleno consistentes.
• Responsive: Los diseños son adaptables y reaccionan a la entrada del usuario, el dispositivo y los elementos de la pantalla.

Los layouts de Material Visual son visualmente equilibrados, y la mayor parte de sus medidas se alinean precisamente con una cuadrícula de 8dp, que alinea tanto el espacio como el diseño general.
Así pues, los elementos tendrán espacios entre sí que serán múltiplos de 8dp. Ahora bien, los componentes más pequeños, como la iconografía tipografía, pueden alinearse con una cuadrícula de 4dp.

Layouts que garantizan diseños responsive

Otra idea que hemos dicho ya es que Material Design está pensado para mantener la consistencia entre dispositivos con diferentes medidas de pantalla. La pregunta entonces es ¿Cómo?

La solución está precisamente en las cuadrículas definidas en este entorno, pensadas para adaptarse a las medida de la pantalla y a su orientación.

Para ello, Responsive Design utiliza columnas, medianiles (o gutters) y márgenes.

En la práctica, lo que deberemos considerar es un layout de 4 columnas con medianiles o gutters de 16dp para móvil, y 8 columnas con medianiles o gutters de 24dp a partir de 600dp, que sería ya el diseño correspondiente a tablet.

Las columnas no debes entenderlas como algo fijo. Si ya has hecho diseño web ya sabrás lo que quiero decir. La anchura de cada columna es un porcentaje. Por ejemplo, en móvil el layout se basa en 4 columnas, por tanto cada columna ocuparía un 25% de la pantalla en el caso de que el medianil o gutter fuera 0.

Los medianiles, en cambio, sí que son fijos.

Material Design también nos indica que debemos dejar un margen entre el contenido y el borde izquierdo y derecho de la pantalla. En el caso de móvil, nos recomienda que esta separación sea de 16dp, mientras que en tablet nos recomienda que sea de 24dp.

Estas son las recomendaciones, pero obviamente tu puedes customizar tanto los gutters como los márgenes. En este caso lo que nos recomienda MD es que los gutters y los márgenes no sean demasaido grandes.

El motivo es sencillo: Si los gutters son demasiado grandes no deja suficiente espacio para el contenido, y además dificultan que el contenido se vea unificado, que forma una unidad. Respeto a los márgenes, si son demasiado grandes no van a dejar suficiente espacio para el contenido.

Podrás encontrar más información sobre los layouts, así como las tablas de breakpoints, los diferentes comportamientos del layout (fijo y fluído), etc. en las notas del programa.

Tipografía y escritura en Material Design

Pasemos ahora a otro aspecto a considerar. Siguiendo la línea de beber del mundo impreso y de dar al contenido el papel principal en nuestras webs y apps, es fácil entender que para Material Design que todo lo relacionado con el texto será también fundamental.

Para Material Design, un texto conciso y claro será un objetivo para conseguir una interfaz de usuario más usable. Además, como los datos son lo único que pueden entender perfectamente las máquinas, el texto jugará también el rol central en SEO.

Por todo ello, Maerial Design llega incluso a seleccionar unas tipografías como las estándares para Android y Chrome. Se trata de Roboto y Noto. En realidad, Material ha trabajado el tema de la tipografía de forma clara para conseguir un uso multiplataforma.

Además de recomendar unas tipografías, Material Design ofrece una tabla con una escala de tipografía. De forma resumida, se trata de una tabla con el estilo recomendado por Material Design para cada categoría, es decir, para H1, H2, h3, botones, párrafo, etc.

En las notas del programa encontrarás el enlace a la página oficial del entorno que trata la tipografía, las unidades utilizadas, así como otros consejos sobre cómo utilizar la tipografía.

Color

El sistema de color Material Design está basado en un enfoque organizado para aplicar el color en el diseño. La idea es que selecciones un color primario y secundario para representar la marca. Luego seleccionas también sus variantes oscuras y claras de cada uno.

Puedes utilizar el plugin Material Editor creado por Google para Sketch para crear tu propia paleta de colores Mateiral Design. En las notas del programa podrás encontrar el enlace a la página de descarga del plugin. 

Volvamos ahora a los colores de la gama de color a crear según este sistema. El color primario es el color mostrado más frecuentemente a través del a app y en los componentes. Si no tienes color secundario, puedes utilizar el primario también como color de acento.

Para distinguir entre elementos que quieres que tengan color primario pero que están en contacto, puedes utilizar variantes más oscuras o claras del color primario. Por ejemplo, puede ser que haya un top bar y justo debajo una barra de sistema. Para que no se empasten los dos elementos, puedes aplicar la variante oscura del color primario a la top bar y el color primario a la barra del sistema.

El color secundario provee de más maneras para crear acento y distinción en el producto. Este es un color opcional. Su uso sería conveniente para:

• Botones flotantes
• Controles de selección como sliders o switches
• Destacar texto seleccionado
• Barras de progreso
• Enlaces y títulos

Podrás encontrar más información en las notras del programa.

Iconografía Material Design

El último punto que trataremos en detalle es la iconografía. Los iconos son universales. Están presentes en todas partes y ayudan al usuario a hacer un reconocimiento rápido de una información.

La realidad es que los iconos mejoran la usabilidad y también el diseño de la app o la web, siempre y cuando se usen correctamente (,claro).
Por tanto, no es de extrañar pues la importancia que tienen lo iconos en Material Design. Por eso los clasifica en tres sets:

1. Iconos de producto: son bold, simples y amigables. Estos iconos son la expresión visual de una marca y producto. Incluyen los servicios y las herramientas. Comunican la idea central y la intención del producto. La medida recomendada de estos iconos es de 48dp.
2. El segundo de los sets es el de Iconos de sistema: representan un comando, archivo, dispositivo, directorio o acciones comunes. En este caso, la medida es de 24dp.

   El objetivo es crear iconos que sean instantáneamente reconocibles en cualquier tamaño. Esto generalmente significa muy pocos detalles y un color sólido. Google tiene una gran cantidad de sus propios ejemplos, pero también encontré un paquete gratuito de iconos del sistema Material creado por Walmyr Carvalho.

   Puedes descargar el set de icnos del sistema desde las notas del programa.

3. Iconos animados: Son iconos como los de sistema pero con la peculiaridad de que están animados. Recordemos que la animación debe usarse siempre para dar significado, según Material Design. Por lo que en este caso la animación reflejará la acción que realiza un ícono de una manera que agrega brillo y deleite.

En algunos casos la animación será para reflejar la relación entre los dos estados de un icono, indicando así que esos dos estados están vinculados. Por ejemplo, el icono play que se transforma en pausa o viceversa al hacer tap sobre él.

Para saber más sobre este último set, puedes leer más en el enlace oficial, disponible en la sección de notas.

2 ayudas más para llegar al fondo de la inmersión

La primera está en Material Design en sí pero quiero enfatizarla. Se trata del apartado completamente dedicado a los Material Components. Estos componentes son bloques interactivos que puedes utilizar en tus diseños para crear user interfaces.

Dejo también la dirección de esta página oficial en las notas del programa. Te recomiendo que entres en ella y te empapes bien de todo lo que tienes disponible.

Verás que están todos definidos de forma muy detallada y te puede ser muy útil darte una buena vuelta para ver todos los componentes, es decir, bloques, que puedes utilizar en tus diseños.

Piensa que estos bloques están ya muy bien pensados y tienen una buena usabilidad, así que mejor no perder el tiempo en reinventar la rueda si ya te pueden servir.

Por último, Google anunció Material Design en 2014. Luego, en 2018 hizo pública la versión 2 de este entorno. Con el fin de no extenderme más pero que puedas saber qué aporta de nuevo esta versión, os dejo en las notas del programa un fantástico artículo de Cris Busquets, fundadora de UI from Mars, una maravillosa comunidad para diseñadores UI. En su artículo, Cris trata de forma muy amena y sencilla todo lo que Material Design 2 tiene para nosotros.

¡Y por fin tenemos el final de la historia!

Entre el capítulo anterior y este hemos tratado más en profundidad qué es Material Design para que puedas valorarlo para tus diseños, y que para ponerte con él ahora te sea mucho más fácil y rápido.

También ya podrás ver cómo llevarlo a la práctica en los aspectos más fundamentales. No te será complicado hacer lo mismo con los muchos otros puntos que trata Material Design.

Por cierto, recuerdas la historia del principio de mi amiga? Bien, la cosa no acabó bien. Cuando mi amiga se reveló, le salió la fiera de dentro, harta de aquella profesora que confundía la autoridad con la imposición como los profesores de nuestros abuelos. Así que le tiró el lápiz a los pies y le gritó: ¡Y una mierda! 

Tiró tan fuerte el lápiz, que se partió en dos al golpear el suelo. Como te puedes imaginar, el broncón aquel día fue ejemplar.

A la repipi de la profe, su falta de neuronas estaba agravada con su falta de recursos. Así que llamó a una de las monjas que más miedo nos daban y entre las dos les dieron una bronca de esas que lo que buscan es humillar y herir, pero en absoluto entender ni ayudar a crecer.

Luego vino el estúpido castigo de estar de pie durante la clase y escribir 100 veces “Obedeceré y no iré a clase a la hora del patio”.

En fin, desde entonces, mi amiga se convirtió en mi heroína. Aún ahora recuerdo su grito de guerra cuando me intentan implantar cosas con las que no estoy de acuerdo, o cuando estoy ante situaciones que me parecen injustas. En esos momentos oigo en mi cabeza la voz de mi amiga gritando: “Y una mierda!!”

Ahora que ya tenemos hechos todos los cierres que teníamos pendientes hoy, sólo me queda decirte que muchas gracias por escucharme. Si te ha gustado y te ha parecido interesante este podcast, puedes subscribirte a mi newsletter para no perderte los próximos capítulos y poder acceder al material e información exclusiva para mis suscriptores.

A través de la web también podrás contactar conmigo a través de la página de contacto si quieres que hablemos de un proyecto web o app que quieres realizar y para el cual te gustaría contar conmigo.

Y con esto me despido. Te espero en el episodio de la semana que viene con más herramientas, estrategias, metodologías y sistemas para proyectos y negocios User Interface que te ayuden cada vez a empoderarte más y más, y llegar más y más lejos.