Sistemas de diseño. Básicos que todos los UI tendríamos que conocer

Crear productos digitales puede convertirse en algo difícil de manejar si no estamos bien organizados.

3 min
Comparte f in
Comparte f in

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

Ant Design — Ant Financial
https://ant.design

Atlassian Design System — Atlassian

Atlassian Design System — Atlassian
https://atlassian.design

Backpack — Skyscanner

Backpack
https://backpack.github.io

Base — Uber

Base — Uber
https://baseweb.design

Canvas — HubSpot

Canvas — HubSpot
https://canvas.hubspot.com

Carbon — IBM

Carbon — IBM
https://carbondesignsystem.com

Fluent — Microsoft

Fluent — Microsoft
https://www.microsoft.com/design/fluent

Garden — Zendesk

Garden — Zendesk
https://garden.zendesk.com/

Grommet — HP

Grommet — HP
https://v2.grommet.io/

Human Interface Guidelines — Apple

Human Interface Guidelines — Apple
https://developer.apple.com/design

Lexicon — Liferay

Lexicon — Liferay
https://liferay.design/lexicon

Lightning — Salesforce

Lightning — Salesforce
https://www.lightningdesignsystem.com

Material Design — Google

Material Design — Google
https://material.io

Polaris — Shopify

Polaris — Shopify
https://polaris.shopify.com

Spectrum CSS — Adobe

Spectrum CSS — Adobe
https://opensource.adobe.com/spectrum-css
3 min
Comparte f in
Comparte f in