Platform System
Los diferentes touchpoints (como web o app) tienen sus propias librerías que comparten elementos comunes para ese touchpoint concreto y que están compartidas con todos los equipos. Recomendamos empezar con un touchpoint y un producto que sea muy importante para tu estrategia de negocio y que pueda representar los mejores patrones de UX y UI.
Estos patrones de diseño se compartirán y se usarán a lo largo de todos tus productos digitales y serán la referencia en cuanto a calidad de diseño de tu compañía. Si necesitas elevar la calidad de diseño, esta es la mejor oportunidad para conseguirlo, al empezar a generar el sistema de diseño. Importante: no añadas nada al sistema que no quieras ver reutilizado por todos los productos de la compañía.
Crea las primeras librerías usando este primer producto, uniendo los diseños al Foundation System usando los Design Tokens.
Tipos de elementos
Como mencionábamos al principio, los sistemas están compuestos por diferentes elementos que, combinados, solucionan un problema concreto. Para que haya un flujo de trabajo claro y eficiente entre equipos, es crítico que haya una nomenglatura y un entendimiento común de los diferentes tipos de elementos que usaremos en el sistema. En función del propósito que tienen, nosotros proponemos la siguiente distribución: fragmentos, componentes, módulos y templates.
Fragmentos (o átomos)
Un fragmento (también conocido como átomo) es un elemento que sólo tiene sentido cuando se une a algo más y entonces, consigue un propósito o un significado.
Por ejemplo, un fragmento podría ser un icono en un tool tip que acompaña a un título o a un copy. Nunca irá sólo porque sin un texto que lo apoye no tiene significado y solo generaría confusión.
Otro ejemplo podrían ser elementos que son parte de un conjunto más grande y que nunca se deberían usar por separado. Links de una barra de navegación, por ejemplo.
Así, los siguientes elementos podrían ser parte de este grupo de fragmentos:
Iconos
Links de un header
(...)
Componentes
Un componente es un elemento que por sí mismo tiene propósito y significado y que cumple una función concreta. Tiene sentido aunque lo aisles de otros elementos con los que conviva.
Como ejemplo, podríamos poner uno de los más usados en cualquier producto digital: un botón. Un botón tiene una función específica y puede colocarse en cualquier composición sin otros elementos que lo acompañen.
Algunos ejemplos de componentes dentro del sistema son:
Botones
Bloques de texto
Links
Listas
Selectores
Imágenes
Ilustraciones
Campos de texto
Pestañas
Tablas
(...)
Módulos
Un módulo es un grupo de componentes que se agrupan para cumplir una función concreta. Un ejemplo podría ser un formulario de contacto. Los componentes individuales (campos de texto, botones, etc) se juntan para crear algo más grande y cumplir un propósito concreto dentro de la experiencia.
Otro ejemplo podría ser una card comercial. Normalmente este módulo tiene componentes individuales (headlines, botones, fondos...) que, agrupados, crean el módulo.
Otros ejemplos de módulos podrían son:
Cards
Formularios
Modales
Barras de búsqueda
Calendarios
Galerías
(...)
Nombrando componentes
A medida que los sistemas de diseño crecen para ir dando cabida a un espectro cada vez más amplio de componentes y plataformas, los design tokens — y sus nombres — son cada vez más importantes. Que tengamos una estructura a la hora de nombrar las cosas crea un lenguaje común entre todos los equipos conforme va evolucionando el sistema (y esto es importantísimo).
Para crear una estructura de nombres que sea sostenible en el tiempo, una propuesta es organizar el naming en 4 niveles, por ejemplo: nombre del espacio, objeto, base y modificador. Es raro que un sistema o un componente use los 4 niveles, pero es una buena base para asegurar que esta estructura de nombres sea escalable. Debajo tienes un ejemplo de cómo creamos una estructura de nombres usando esta metodología para un cliente con 2 target diferentes — retail y corporate.
Nombre del espacio es una combinación del sistema (
material), theme/subbrand (nikeSB), o el dominio (retail).Objeto se refiere a componente (
button), elemento dentro de un componente (left-icon), o grupo de componentes (forms).Base es la columna vertebral de los tokens que combina categoría (
color), concepto (action) y propiedad (size)Modificador se refiere a una o más variantes (
primary), estados (hover), escala (100), y modo (on-dark).
Como ves, estas estructuras de nombres se pueden volver enormes — y algo abrumadoras, sí, lo sabemos — pero no te agobies, quédate con la idea de que existe un gran abanico de posibilidades para definir tu estructura según el alcance de tu sistema. No hay una estructura fija recomendada. Para que te hagas una idea, nosotros trabajamos con cada cliente para entender sus necesidades, ecosistema y objetivos y así poder crear la estructura que mejor encaja para su caso.
Acciones
Define qué proyecto va a ser la punta de lanza para construir la base de las librerías del sistema.
Si necesitas elevar la calidad de diseño de tu compañía, aprovecha esta oportunidad para rediseñar el touchpoint conforme vas construyendo el sistema de diseño.
Trabaja de la mano entre diseño y desarrollo para alinear posturas respecto a la estructura de nombres.
Construye la librería en Figma/Sketch usando esa estructura de nombres.
Documenta todo para compartirlo con el equipo.
Last updated
