Este es un resumen del libro "Design System Handbook" de InVision, que puedes descargar aquí.
Los Sistemas de Diseño
Un Design System es una colección de componentes reusables guiado por estándares, que pueden ser empleados en conjunto para construir cualquier cantidad de aplicaciones.
Los estándares abarcan tanto al diseño como al desarrollo, por ejemplo usando convención de nombres, requerimientos de accesibilidad o estructura de archivos; también se estandarizan aspectos como el lenguaje visual, el cual define el propósito del estilo de los colores, formas, iconos o espacios. Todo ello con el fin de crear consistencia, prevenir errores y apegarse al _branding _de la marca y crear una Experiencia de Usuario (UX) consistente.
Los componentes son porciones de código reusables que funcionan como bloques de construcción de las interfaces de aplicación. Cuanto más reusables sean los componentes menor será necesario su mantenimiento y será más facil será escalar la aplicación.
Algunos de los beneficios de contar con un Design System son:
- Reducir la deuda de diseño, lo cual acelera el crecimiento de la aplicación.
- Mejorar la consistencia de diseño, haciendo más predecible y fácil de usar una aplicación. Esto permite dedicar menos tiempo al diseño y centrarse más en la UX.
- Facilita la construcción y experimentación de un sinfín de prototipos y variantes ya que se requiere una menor cantidad de líneas de código.
- Se mejora la usabilidad, pues al tener una librería de componentes las interfaces e interacciones entre elementos se mantienen unificados.
- Se mejora la accesibilidad tanto básicas como las definidas por las leyes del país.
Creación de un sistema de diseño
La creación de un sistema de diseño efectivo involucra disciplinas como Diseñadores (definen los elementos visuales), Desarrolladores front-end (crean el código), Expertos de accesibilidad (aseguran cumplimiento de estándares como WCAG), Estrategas de contenido (definen el tono y voz del sistema), Investigadores (ayudan a entender necesidades del cliente), Expertos de desempeño (aseguran el óptimo funcionamiento del sistema), Gerente de producto (asegura que el sistema se apegue a las necesidades del cliente) y Líderes (apoyan y alinean la visión de la empresa).
1. Definir el modelo
Para comenzar a crear el sistema de diseño conviene definir el modelo a usar con base a los objetivos.
- Si se quiere avanzar rápido el Modelo solitario es el adecuado inicialmente, sin embargo después se tiene que trabajar para que los demás equipos adopten el sistema.
- Si se quiere avanzar rápido pero animando la participación desde el inicio, el Modelo centralizado es el mejor.
- Sin embargo para tener una mayor participación y mejor adopción el Modelo federado es la mejor opción ya que involucra a distintos equipos desde el inicio.
En este proceso será necesario hablar con contribuidores potenciales y clientes que ayuden a descubrir los casos de uso que el Design System debe satisfacer. Además conviene obtener las ideas o preocupaciones de ejecutivos, líderes y gerentes para convertirlas en objetivos y métricas, ejemplo de ello puede ser la entrega rápida de características, mejor desempeño o mejoras en la calidad de la interfaz.
2. Crear el inventario
Una vez reunida la información será necesario crear el inventario de los atributos visuales (colores, tipografía, espaciado, etc.) e inventario de los elementos de interfaz (botones, cards, mensajes modales, etc.).
Es una buena práctica realizar una auditoría visual de las hojas de estilo actuales para conocer la cantidad de reglas, selectores, declaraciones y propiedades usadas. La herramienta CSS Stats puede ayudar a ello.
3. Crear el lenguaje visual de diseño
Para definir un lenguaje visual se debe estandarizar mínimamente colores, tipografías (como tamaño o tipo de letra), espaciado (como márgenes, posicionamiento o bordes) e imágenes (iconos o ilustraciones), y dependiendo las necesidades también se puede estandarizar la forma visual (profundidad, elevación, sombras, esquinas, textura, etc.), el movimiento o el sonido a usar, con el fin de unificar la experiencia de usuario.
La Interfaz de Usuario (UI) usa el color para dar feedback, transmitir información gráfica o mostrar jerarquía. Algunos consejos de uso del color son:
- Incluir 1-3 colores que representen la marca de la empresa.
- Usar el mismo color para links y botones.
- Usar colores neutrales (usualmente grises) para fondos y bordes.
- Contar con colores para estados, por ejemplo de error, éxito, o advertencia.
- Mantener una paleta de colores simple (que incluya tonos y sombras) para evitar inconsistencias de diseño o usos incorrectos.
Respecto a la tipografía, se debe seleccionar teniendo en mente la legibilidad y manteniendo las fuentes comunes (como Helvetica, Times New Roman o Verdana). La cantidad de tipografías también es relevante pues impacta en el rendimiento, por ello la mayoría de Design Systems emplea 2, una para los encabezados y otra para el cuerpo. Algunos consejos de uso de tipografías son:
- Usar las variantes "light" o "thin" solo en tamaños de texto grandes.
- Asegurarse de tener una correcta legibilidad en diferentes tamaños de pantalla.
- Definir el "line-height" de cada tipografía para mejorar la legibilidad, 1.5 es el recomendado.
- Usar una escala de espaciado consistente para promover la mantenibilidad y que la tipografía se ajuste y alineé correctamente. Una escala base 4 es recomendada (por ejemplo en iconos usan esta base, por ello los tamaños son 16, 24, 32, etc.; o el navegador web tiene el tamaño de letra por defecto en 16). Para espaciado horizontal una base 8 funciona bien.
Para las imágenes algunos consejos son:
- El formato vectorial (svg) funciona mejor al escalar y en diseño responsivo.
- Definir pautas claras para usar iconografía e ilustraciones, por ejemplo si los iconos emplean múltiples colores, si son sólidos o si son minimalistas.
También deben definirse las pautas para estandarizar la forma visual, es decir, color de fondo, gradientes, texturas, sombras, elevaciones, esquinas redondeadas y bordes. De igual manera se deben definir las pautas de movimiento y sonido ya que tienen un alto impacto en la experiencia.
4. Crear una librería de UI
Una librería de interfaz de usuario se conforma de piezas tal como botones, listas, tarjetas, formularios, etc. La mayoría de Design Systems en su definición incluye el nombre del componente, descripción, ejemplo, código fuente e incluso histórico de versiones.
Se puede iniciar simplemente creando un inventario del producto en producción tomando screenshots de todos los elementos, para posteriormente categorizarlos, combinarlos y dividirlos en piezas más pequeñas, ya sea piezas básicas (átomos, por ejemplo botones o iconos), piezas compuestas (moléculas o componentes, por ejemplo formularios de búsqueda), conjunto de piezas compuestas (organismos o regiones, por ejemplo un sidebar de navegación) y disposición de conjuntos (layouts, por ejemplo un header seguido de un sidebar, un main content y un footer).
Crear un Design System no solo ayuda al equipo a generar una experiencia de usuario consistente, también permite crear puentes entre diseñadores y desarrolladores, se mejora la comunicación y se construyen interfaces de usuario más manejables, escalables y robustas.
Top comments (0)