En la entrada anterior, hable de las ventajas de tener un sistema de diseño y enumere los elementos de los que se suelen componer.
En esta nueva entrada pongo el foco en las secciones que típicamente los componen y dejaremos el gobierno (lo que llame sistema) para el próximo, al tratarse del que requiere más cariño.
Esto es mi interpretación, es mejorable, pero ojalá alguien me lo hubiera contado así cuando me enfrente al primero.
Recordando, un sistema de diseño debería estar compuesto por las siguientes secciones:
Principios
Deberemos definir unos valores o fundamentos que en todo momento deberá de cumplir nuestro sistema. Todas las decisiones que se tomen deberán estar alienadas a estos principios, de esta forma estaremos centrados en la filosofía que seguimos, proporcionando una visión holística y seremos más consistentes.
Enumero algunos para que nos hagamos una idea de por donde van los tiros, pero cada organización matizará los que les represente o desee transmitir:
Consistencia: Todos los elementos serán diseñados desde el principio para trabajar en conjunto y garantizar experiencias de usuario coherentes y cohesivas.
Accesibilidad: Nuestros productos deberán ser diseñados maximizando el uso por cualquier usuario, independientemente de sus capacidades y el dispositivo desde el que acceda.
Deberemos enlazar a la sección de guías, donde se describirá como diseñar e implementar las medidas de accesibilidad para usuarios con alguna discapacidad. Así como la guía para implementar un diseño que se adapte, en la medida de lo posible a todos los tamaños de dispositivo.
Público: El sistema de diseño será compartido completamente con la comunidad, pudiendo ser utilizable por cualquiera.
Enlazaremos la licencia de uso que proceda. Así como las guías para colaborar o generar variaciones a partir de este.
Y así con el resto de los principios que nos interesen. Otras muy típicas son Mobile first (Todos los diseños se comienzan por su versión para dispositivos móviles), Reusability (Debemos diseñar pensando en la reutilización), User Control (el usuario debe tener la sensación de control sobre el producto), Forgiveness (debemos permitir que el usuario pueda cambiar de opinión o volver a empezar algún proceso)…
Fundamentos
En este apartado se definirán las partes base y comunes del diseño visual, es la anatomía, los cimientos sobre los que se fundamentará todas las interfaces de usuario y otros tipos de diseño.
Muchos de estos fundamentos suelen estar ligados a la marca que representan. Algunos apartados comunes son:
Tipografías: Enumeraremos las fuentes y sus usos en las diferentes situaciones. Es común plantear una paleta que muestre como utilizarlas para presentar títulos, textos comunes, notas, etc.
Colores: Una paleta con los colores, sus usos y combinaciones posibles. Es muy normal que esté relacionada con la identidad de la marca del producto.
Retícula: Facilita la organización de la disposición de los elementos dentro del diseño. Cuando diseñas un interface para la web se suele utilizar una disposición de 12 columnas. Mientras que los dispositivos móviles se apoyan en estructuras con muchas menos columnas
Espaciados: Definiremos las reglas de espaciado entre los distintos elementos. Se describen los padding, borders, margins…
Animaciones: Si nuestro sistema va a disponer de elementos animados, describiremos sus reglas de uso; como son las transiciones, los cambios de estado, los tiempos, etc.
Iconos: Nos guiará en la creación o incorporación de nuevos iconos, nos mostrará como construirlos para respetar los estilos establecidos
Sombras: Como es el sombreado de los componentes.
Hitos: son características muy particulares o incluso personales de nuestros productos, Guiños a la marca a través de ciertas licencias visuales o en el comportamiento. Ejemplo típico son las pantallas de éxito donde se refuerza la presencia de marca, jugando con el logo
Y muchos más.
Gobierno (sistema)
Este punto lo dejo para la siguiente entrada, es clave, o tienes un buen gobierno o solo tienes buenas intenciones. ? Hablaremos de roles, procesos, métricas, herramientas, etc.
Componentes
Esta es la sección que es la más popular, la que encontramos en todos los sistemas de diseño y la más agradecida, con menos interpretaciones posibles.
Es normal disponer de una colección de componentes, ya sabes, botones, cajas de texto, tarjetas, barras de herramientas, menús emergentes… ¡Pueden ser cientos! y las instrucciones para utilizarlos, en el sentido del diseño, sus diferentes estados y comportamientos.
Es común que esta sección se apoye en herramientas que permitan experimentar con los componentes en tiempo real.
Así que su organización es primordial, existen varías formas de llevarla a cabo, pero es muy popular utilizar Atonic Design. Con esta filosofía organizaremos los componentes según su complejidad en su composición, facilita la reutilización y disminuye la complejidad. Distinguiremos entre:
Átomos: Son los más elementales, componentes básicos que nos ayudarán a modelar más complejos: Por ejemplo, un botón o una etiqueta o una caja de texto.
Moléculas: Son varios átomos formando un componente un poco mayor, típicamente, si unimos una caja de texto con un botón y un icono de lupa, obtenemos un componente que podremos utilizar para realizar búsquedas
Organismos: Y más de lo mismo, si agrupamos componentes anteriores iremos formando componentes más complejos que aporten una funcionalidad mayor. No olvidemos que la gracia de esto reside es que los componentes que los constan son autónomos, si cambiamos un átomo, cambiará el organismo. No tendremos que recorrerlos todos para cambiarlos uno a uno.
Un ejemplo típico es una cabecera, con un logo, un menú, el organismo de búsqueda anteriormente citado, etc.
Plantillas: Son elementos estructurales, soluciones completas pero sin especificar el contenido de los elementos. Lo normal son disponer de varios tipos de componentes capa que presenten distintas anatomías de una página. Por ejemplo, la estructura para una página de landing, de contactos, para mostrar datos, de configuración…
Páginas: Estos con instancias concretas de las plantillas, le daremos el contenido específico a una plantilla.
Y con permisos de los genios que nos proporcionaron esta clasificación, yo añadiría Aplicaciones y Marco (contenedor de aplicaciones). Pero esto es otra historia.
Guías y Patrones
Es la sección que nos ayudará a desenvolvernos por el sistema de diseño y a adoptar las mejores prácticas para su uso. Encontraremos muchas pautas, tanto para los recién llegados, como para los que tengan que implementar situaciones más complejas.
Por ejemplo, encontraremos la guía de bienvenida para los desarrolladores, donde se les muestra como iniciar un proyecto básico e incorporar un par de páginas que le sirvan para la comprensión del sistema.
También hallaremos, guías de voz y tono para situaciones como un chatbot, de visualización de datos, de marcaje para las búsquedas, etc.
Es esta sección existirá una sección especial de patrones, resolución a problemas en problemas de diseño visuales comunes, momentos de inicio de sesión, de carga de páginas… Aunque esta sección también es posible sacarla como una unidad independiente o incluso dentro de componentes.
Por su naturaleza, hay que jerarquizar muy bien esta sección y dotarla de un buen sistema de búsqueda.
Descargables (UI Kits, UI Starters)
Esta sección contendrá, los recursos o assets, es donde, ubicaremos todo los artefactos para su descarga y utilización por los diseñadores y programadores.
Encontraremos los archivos de diseño, o las referencias a las ubicaciones donde están las librerías de elementos de diseño, típicamente archivos Sketch o Adobe Xd o enlaces a una librería Figma.
También encontraremos las librerías de código con los componentes o con plantillas para iniciar una nueva aplicación de forma rápida.
Además, es el sitio donde se ubicarán el resto de recursos; las fuentes, iconos, logos, imágenes comunes…
Bueno, la próxima semana, hablaremos del gobierno.
¡A darle caña!?