Design systems were created to bring order into an inevitable entropy. The first design system was introduced by NASA in 1976, and today nearly all large organizations like Uber, Pinterest, Airbnb, or Shopify have such a system to bring consistency into the chaos of more products and teams.
In a nutshell, a design system is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies and other digital assets for a product design company. It’s usually hosted online as a website (public or internal). Think of it as a big knowledge-base that is part UI kit, part documentation with instructions, language and coding guidelines all wrapped up together.
¿Qué elementos tiene un Sistema de Diseño?
Manual de marca y Branding: Branding y Guías de Contenido (Valor y tono).
Valor y Principios: Principios y valores/ Misión/ Objetivos
Componentes:
Código o Tokens:
Documentación
Liberia de Patrones/ UI KIT. De aplicaciones y de sitios web Se presenta y en qué contexto se utiliza. Patrón ha sido probado e retirado. Patrones ui más código. El código ha reivado y etemizado.
Plataformas de Documentación de Design System:
Confluence*
Frontify
Zeroheight
Zeplin
Sistemas de Diseño: Zeroheight
Zeroheight (Ver), es un repositorio para documentar Sistema de diseño. Es un manual de normas gráficas más digitales. Lo guardas ahí, en «foundation» es el manual de marca.
Un sistema de diseño es la única fuente de verdad que agrupa todos los elementos que permitirán a los equipos definir, prototipar y desarrollar un producto. Por lo tanto, un sistema de diseño no es una entrega, sino un conjunto de entregables. Evolucionará constantemente con el producto, con las herramientas y con las nuevas tecnologías.
Para crear un Design System nos basamos en el concepto Atomic Design. Este método, inspirado en los principios de la química, fue ideado por Brad Frost y nos permite construir productos complejos en base a:
Introducción al Atomic Design
Se parte diseñando los componentes, elementos que cumplen una función, por ese se le denominan átomos. Un organismo es una sección que se comportan e la misma forma y se vuelve un patrón. Después vienen las plantillas y se transforma en lay out.
Ejemplo de Átomo a Página.
Figma
Adobe XD
Sketch
Comienzo de Branding
El branding se compone de los elementos tradicionales de diseño, pero contemplando el ámbito digital y las buenas prácticas de este. Elementos a considerar:
Logotipo y sus aplicaciones
Arquetipo de marca
Paleta de colores
Tipografía
Texturas
Imagenes o ilustraciones
Iconografía
Voz y tono
Arquetipo de marca: Brand Archetype test. Ejemplo es Match y cómo construyó su marca. Y Material design. Personalidad de marca. «Voice and tone principles».
Video tutorial creado por Figma, que explica cómo crear Sistemas de DIseño.
En conclusión…
Aside from implementing design systems into your workflow, design systems are a tremendous untapped resource for learning how to create better user experiences and interfaces just by studying them! What better way to understand how to design an e-commerce user flow than from Shopify?!? These are what we call Design Patterns and smart designers know how use these to inform the decisions they make with their own designs. No need to reinvent the UX wheel when the best companies in the world have already paved the way, tested them with actual users and published their UI/UX and product design methodologies online!
Charla de Shaun Bent, «Re-imaginando Sistemas de diseño en Spotify«, en la conferencia de Design Systems London.