Desde Biko creemos que comprender el funcionamiento de los sistemas de diseño puede resultar muy práctico para el trabajo en equipo y para el proyecto final. Por eso, nos gustaría profundizar en este tema, para dar a conocer una metodología que llevamos usando desde hace tiempo y que genera muchas ventajas de cara al proyecto.
¿Qué es un sistema de diseño?
Un sistema de diseño es la manera de documentar los diseños para hacer más fácil la construcción de productos y comunicarnos con el equipo. Es decir, un sistema de diseño consiste en registrar el diseño para que posteriormente pueda utilizarlo otro diseñador y para que sea útil a la hora de comenzar el desarrollo.
Cuando hablamos de sistemas de diseño estamos hablando de una colección de componentes y patrones reutilizables. Normas, reglas y lenguaje común entre el equipo que hace que el producto que se está construyendo sea mucho más consistente y comprensible para todos.
Esto nos va a permitir reutilizarlo a lo largo de toda la vida del proyecto, tendremos disponibles los patrones comunes dentro del sitio y hará que el diseño sea más fluido y coherente, con lo que ayudaremos a que se fortalezca la marca con la que estaremos trabajando.
¿Por qué utilizar un sistema de diseño?
Los beneficios de esta metodología de trabajo son para todos y cada uno de los miembros del equipo y del cliente:
- Para el diseñador UI: Ayuda a tomar las decisiones de diseño mucho más rápidamente a la hora de construir y crear un sistema sólido. De esta manera, solo creamos nuevos componentes cuando son necesarios.
- Para frontend y desarrollo: Podemos crear páginas con los elementos usando todos los patrones del sistema.
- Para el usuario: Un componente siempre funciona igual en todos los sitios por lo que no genera confusión.
- La curva de aprendizaje es mínima, haciendo fácil que una persona externa al equipo se integre con facilidad.
- Escalabilidad del proyecto.
- Potenciar la imagen de marca.
La conclusión a la que podemos llegar es que vamos a asumir una reducción de costes, vamos a disminuir los tiempos en la construcción del proyecto, por lo que esto provocará que seamos más eficientes entre nosotros y de cara al cliente.
¿Cómo crear un sistema de diseño?
Vamos a utilizar la metodología atomic design aplicada al diseño. Algunos elementos definidos en un sistema de diseño:
- Tono de voz: La forma en que se comunica la marca con el usuario.
- Layout: Cómo distribuimos los elementos dentro de los dispositivos.
- Paletas de color: Colores utilizados en el proyecto.
- Tipografías y ritmo vertical: Fuentes, escalas, tamaños…
- Espaciado de elementos. Distancias.
- Iconografía: Biblioteca de elementos y escalas.
- Imágenes: Escalas usadas, tono de voz, estilo visual…
- Átomos de diseño: Elementos simples, como enlaces, texto.
- Biblioteca de componentes: El conjunto de elementos que podemos utilizar en múltiples pantallas. Tabs, Cards, Forms, Headers…
Todo esto pasará a código y será nuestro lenguaje de comunicación entre diseñadores y desarrolladores. Es importante tener en cuenta la diferencia entre la guía de estilo y el sistema de diseño. El sistema de diseño siempre está vivo y evolucionando mientras que la guía de estilo es estática.
Para poder ponernos en contexto, cuando te enfrentas a un proyecto tienes que valorar todos y cada uno de los detalles que te pide el cliente. Por ejemplo, puede darse el caso de que al estar trabajando en la construcción de un sitio web se decide cambiar el color de un botón por cuestiones de usabilidad. De esta manera, al cambiar un color por otro el sistema hará que se cambie en todo el sitio web a la vez, con lo que aseguramos una consistencia de todo el sitio.
Como conclusión diremos que los sistemas de diseño son una herramienta que facilita la simplificación y construcción de un proyecto, ayudando a todos los integrantes del equipo a tomar decisiones en la evolución del mismo.
