Sistemas de diseño. Básicos que todos los UI tendríamos que conocer.
Crear productos digitales siempre es un gran reto y en ocasiones puede convertirse en algo difícil de manejar si no estamos bien organizados.
Para ayudarnos en esta tarea nacieron los sistemas de diseño (Design Systems), un conjunto de herramientas y recursos que aportan múltiples beneficios a la hora de crear estos productos. Pero, ¿qué es realmente un sistema de diseño? ¿cuáles son esos beneficios? ¿cómo nos pueden ayudar?
Pues bien, como decíamos, un sistema de diseño es un conjunto de patrones y normas que nos ayudan a gestionar el diseño de nuestros productos digitales de una forma ágil y coherente. Con él, crearemos un lenguaje visual centralizado, escalable, reutilizable y compartido y con el cual nos aseguraremos que todos los miembros del equipo (diseño, contenido, desarrollo y QA ) se encuentran en la misma página y colaboran remando en la misma dirección.
Suena bien, ¿verdad? Pues además de todo esto un sistema de diseño tiene otros beneficios:
- Un diseño más eficaz: no hay que crear nuevos elementos de interfaz cada vez, crearemos elementos reutilizables.
- Procesos optimizados: nos permite entregar el trabajo más rápido y como consecuencia, dispondremos de más tiempo para mejorar e iterar nuestros productos.
- Crearemos más consistencia: los desarrolladores y diseñadores son capaces de implementar una UI mucho más fácilmente y de una forma coherente.
- Mayor calidad: la consistencia aporta a nuestros productos mayor calidad y una mejor experiencia para nuestros usuarios.
Y ahora te preguntarás, ¿de qué se compone un sistema de diseño?
Pues bien, la mayoría se basan en estos 3 pilares:
- Documentación: principios de diseño, patrones y buenas prácticas.
- Guías de estilos: logotipos, colores, tipografía, tono de voz, diseño visual y de interacción.
- Biblioteca de componentes: elementos de la interfaz predeterminados tanto para diseño como para desarrollo.
PRO TIP:
A la hora de construir la biblioteca de componentes es una buena idea empezar a hacerlo con diseño atómico (Atomic design), si quieres saber más sobre el tema te recomiendo este post de mi compañero Aleix (podéis leerlo aquí).
Ya conocemos la teoría de los básicos, veamos unos cuantos casos prácticos.
Este son algunos casos de los sistemas de diseño más conocidos y que además están compartidos para que puedas ver (como buen UI que eres) como están construidos, diseñados y desarrollados.
Ant — Ant Financial
Espero que te haya gustado este artículo, si es así, dale al clap ¡que es gratis!
