Los design systems o sistemas de diseño son el proceso por el cual se define todos los elementos que va a contener nuestra interfaz. En él se puede encontrar principios, reglas y limitaciones que vamos a tener en cuenta a la hora de crear los nuevos diseños.
Dentro del sistema de diseño se puede encontrar los siguiente elementos:
- Voz y tono
- Tipografía
- Elementos Visuales
- Colores
- Iconografía
- Ilustraciones
¿Por qué crear el Design System?
Existen muchos beneficios que vamos a tener si contamos con un DS completo y actualizado. Uno de ellos es al consistencia, esto va a generar que la interfaz sea más usable y entendible por el usuario. La consistencia también ayuda a aumentar la credibilidad de nuestro site o app.
Otro de los temas importantes para contar con un DS es la velocidad con la que creamos las interfaces. Al reutilizar los componentes los diseñadores de UI no van a tener que repensar los componentes.
Ejemplos Design System
Hay varios ejemplos que podemos ver para inspirarnos en el creación de nuestros Design System. Acá te dejo lo que son para mí los más importantes:
- Alta de Oracle https://www.oracle.com/webfolder/ux/middleware/alta/index.html
- Carbon Design System de IBM https://www.carbondesignsystem.com/
- Evengreen de Segment https://evergreen.segment.com/
- Human Interface Guidelines de Apple https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
- Patterns de Mailchimp http://ux.mailchimp.com/patterns/color
- Material Design de Google https://material.io/
Podes ver estoy ejemplos y muchos en el sitio de Design System Repo https://designsystemsrepo.com/design-systems
Herramientas para Documentar
Es de suma importancia documentar de forma correcta los DS. Existen muchas formas de hacerlo las mejoras opciones son:
- Zeroheight https://www.zeroheight.com/
- Frontify https://www.frontify.com/en/
- DSM de Invision https://www.invisionapp.com/design-system-manager/
- Lucid https://lucid.style/
Libros sobre Design System
Libros gratis:
- Creating a Design System de Uxpin https://www.uxpin.com/studio/ebooks/create-design-system-guide-checklist/
- Design Systems Handbook de Designbetter https://www.designbetter.co/design-systems-handbook
- Hack the Design System de Adobe https://www.adobe.com/products/xd/design-systems/hack-the-design-system-idean-e-book.html
Libros Pagos:
- Design Systems de Smashing Magazine https://www.smashingmagazine.com/design-systems-book/
- Building Design Systems de Apress https://www.apress.com/gp/book/9781484245132
- Modular Web Design https://www.amazon.com/Modular-Web-Design-Components-Documentation/dp/0321601351