Foundations
La librería de Foundations incluye cosas como los colores de marca, grids, estilos tipográficos, iconografía, animación, tono de voz, accesibilidad...Aquí es donde definiremos los design tokens. Estos 'Foundations' son las cosas que todo el mundo debería usar y es el mínimo que cualquier producto debería cumplir para tener un OK desde el punto de vista de diseño.
Design Tokens
"Los Design Tokens son una metodología, arquitectura y proceso independientes de la tecnología para escalar el diseño entre herramientas, dispositivos y plataformas". - Design Tokens W3C Community Group.
La definición oficial es un poco confusa, ¿verdad? Quédate con que los Design Tokens manejan en cierto modo las variables del sistema, como el color o la tipografía, y se pueden aplicar a cualquier componente. Ahora iremos haciendo un repaso por los más comunes.
Además, los Design Tokens son útiles para generar la estructura de nombres del sistema, reemplazando elementos variables (como un hexadecimal de un color) con su equivalente no variable (por ejemplo, el nombre que le damos al color en el sistema). Así, un botón estará formado por varios tokens que describen sus propiedades (color de fondo, estilo de texto, etc.) sin hablar de valores (# 49a4e6), sino que hacen referencia a su propiedad global (Global-Blue-50). De esa forma, el color de fondo del botón siempre será una variable independiente del valor que represente. El valor puede cambiar (el hexadecimal) pero la propiedad (Global Blue 50) seguirá siendo la misma.
Esto permite que los equipos de diseño hagan actualizaciones globales en el sistema en un sitio y automáticamente se aplique en todos lados. Además, también aseguran la consistencia mientras el sistema va creciendo y evolucionando.
Foundation Styles
1. Color
Agrupamos los colores en 3 categorías dependiendo de la importancia que tengan para la marca y su uso: primarios, secundarios y terciarios. Una cosa importante: para asegurar que cubran los suficientes casos de uso, es importante que cada color tenga al menos 5 tonos para potenciales estados de interacción (estado por defecto, hover, click, seleccionado y activo). También recomendamos tener al menos un tono oscuro y uno muy claro en cada color para posibilitar composiciones en las que poder jugar con más jerarquía de color.
2. Grid
Para definir los espacios entre los elementos del sistema, usamos un grid (retícula) responsive. Es un conjunto de columnas y filas que nos ayudarán a componer nuestros diseños. El grid responsive de Bootstrap es una buena base para espacios horizontales pero falla en los ritmos verticales. Nuestra recomendación es usar un grid de 8 píxeles que aproveche la base de Bootstrap pero que añada sinergías verticales.
8−pixel grid
Todo elemento de la interfaz (UI) debe estar alineado al grid de 8 píxeles, tanto horizontal como verticalmente. Ajustar los elementos al píxel garantiza que todos se visualicen perfectamente en todos los dispositivos. Además también permite a los diseñadores y desarrolladores tener el mismo modelo de caja (en que cada caja como los textos ocupan los mismos píxeles) minimizando la toma decisiones y evitando muchos más errores.
Línea base de texto y espaciado de línea
Tener controlados los tamaños de las cajas de texto es importante para conseguir una buena coherencia vertical en tus diseños. Al cuadrar cajas y grid vertical, podemos conseguir que todos los elementos de la interfaz tengan un ritmo vertical armonioso.
Hay veces en las que hacemos una excepción a la regla del grid de 8 píxels, y es cuando decidimos el tamaño de la tipografía. Añadir cierta flexibilidad y permitir añadir múltiplos de 4 da a los diseñadores la libertad que elegir el tamaño de texto que nos da la mejor legibilidad. El punto aquí es que el interlineado (espacio entre líneas del texto) sea siempre múltiplo de 8 para alinearse al grid (por ejemplo, un texto de 20 px podría tener un interlineado de 32px).
Estos son casos específicos donde es difícil seguir el grid de 8 píxels. Pasa mucho por ejemplo en visualización de datos. En ese caso por ejemplo, nosotros usamos de nuevo una caja que se alinea al grid de 8 píxels y que permite que lo que haya dentro de esa caja tenga mayor flexibilidad para representar de la mejor forma los datos.
Ejemplo de grid y puntos de corte
Nombre | Punto de corte (en px) | Columnas | Margen | Gutter |
XS | 0-719 | 4 | 20 | 16 |
S | 720-1023 | 8 | 40 | 16 |
M | 1024-1439 | 12 | 44 | 24 |
L | 1440-1919 | 12 | 88 | 32 |
XL | +1920 | 12 | Auto | 32 |
3. Tipografía
En un producto digital, es importante que la tipografía sea accesible, flexible y que funcione bien en este contexto. Las guías de uso nos ayudarán a definir los tamaños mínimos (tanto para mayúsculas como para minúsculas) para que los equipos creen experiencias accesibles para cualquier usuario. Además, una tipografía flexible que renderice bien en muchos tamaños diferentes también ayudará a que los diseñadores tengan más armas a la hora de crear una buena jerarquía visual en sus composiciones. Como recomendación, es bueno limitar el número de tipografías, sus pesos y tener unas pocas variantes para estar seguros de que el rendimiento de la web o la app no se vea afectado.
Ejemplos de tamaños tipográficos
Nombre | Hasta punto de corte S | Desde punto de corte M |
Caption | 12 | 12 |
Body 1 | 14 | 14 |
Body 2 | 16 | 16 |
Action Button | 18 | 16 |
Button | 18 | 16 |
Small Button | 16 | 14 |
Title 1 | 18 | 20 |
Title 2 | 16 | 16 |
Subheadline | 24 | 24 |
Headline 1 | 48 | 64 |
Headline 2 | 40 | 48 |
Headline 3 | 28 | 40 |
4. Elementos gráficos
Cuando pensamos en elementos gráficos que apoyan la experiencia, la escala es muy importante. Por eso, solemos trabajar con iconos, microilustraciones e ilustraciones, que ayudarán a crear en cada caso la composición que mejor funcione. Es importante que estos elementos gráficos estén bien definidos y ejecutados para que el producto digital funcione lo mejor posible. Como normal general, recomendamos usar iconos entre 16 y 24px, después pasar a microilustraciones desde 32 hasta 320px, y por último, usar ilustraciones completas a partir de ahí, para tamaños más grandes.
El punto exacto para empezar a usar una u otra puede variar dependiendo del estilo que tengan los elementos gráficos de tu marca (esto pasa especialmente en microilustraciones e ilustraciones) pero lo importante es que te quedes con la idea de definir claramente estos tamaños de uso y que se lo comuniques correctamente a los equipos.
La ejecución de estos elementos gráficos también es importante para el desarrollo y el rendimiento de un producto digital. Presta especial atención a detalles como las cajas que los contienen (para asegurar que todos los elementos de una familia tengan el mismo tamaño), fondos transparentes, grosores de línea, etc para intentar que el margen de error sea lo más pequeño posible.
5. Elevación
Cuando hablamos de elevación, nos referimos a cómo jugando con sombras podemos generar diferentes sensaciones de volumen o altura de los elementos. Este concepto de elevación es útil definirlo a nivel global porque es un elemento visual que, aunque sútil, se va a usar muy a menudo a lo largo de todo el sistema, en componentes como cards, modales o hovers. Así, seguiremos haciendo fuerza en la búsqueda de una consistencia visual muy fuerte en todo el ecosistema de productos digitales.
6. Tono de voz
Otra 'foundation' muy importante a definir en un sistema de diseño es el tono y la voz. Más allá de hablar de instrucciones o mensajes informativos, el tono de voz define las guías que ayudarán a los equipos a redactar contenido de forma clara y consistente a lo largo de todos los productos y canales.
Un gran ejemplo de ejemplo que puede servir de inspiración, es el manual de tono de voz de Mailchimp.
7. Animación
La animación es también muy importante en un sistema de diseño, pues tiene un gran impacto tanto en la experiencia de usuario como en negocio. Igual que pasa con la tipografía o el color, la animación tiene mucho que decir acerca de tu producto y su personalidad.
La animación, y particularmente la interacción, combina forma y función y ayuda a captar la atención del usuario, mejora el feedback que el sistema le da conforme interactúa, ayuda a que se oriente mejor, genera emociones y ayuda a contar mejores historias a lo largo de la experiencia.
Un gran ejemplo de guía de animación es Material Design, de Google.
Acciones
Agenda workshops con equipos de diseño y desarrollo para alinear posturas respecto al grid, la tipografía y los nombres de los tokens.
Trabaja de la mano con el equipo de marca definiendo colores, tonos, iconos y estilo de ilustración.
Empieza a crear la librería de Foundations.
Documenta todo para que se pueda ir compartiendo con los equipos.
Last updated
