4. Sistemas de diseño

Product Design Handbook
mendesaltaren
Search…
0. Introducción
1. Cómo nos organizamos
2. Proceso
3. Branding
4. Sistemas de diseño
5. Conversion Rate Optimization
i. Herramientas
4. Sistemas de diseño
Esta es la herramienta central en torno a la que gira nuestra metodología. Por ello, hemos creído oportuno dedicar un capítulo entero a explicar: qué entendemos por sistema de diseño, qué principios de diseño nos guían a la hora gestionarlo, y qué elementos componen nuestros sistemas a nivel morfológico.
1. ¿Qué es un sistema de diseño?
Esta herramienta permite al equipo establecer patrones y contar con una serie de elementos que se pueden, y deben, reutilizar para crear funcionalidades. La modularidad del sistema es lo que permite crear desde una unidad mínima hasta componentes más complejos. Establece reglas que nos ayudan a trabajar en equipo de forma alineada a través de principios.
Además, el sistema de diseño refleja el punto de unión entre el equipo de diseño y el de desarrollo. Gracias a él, conseguimos implementar un lenguaje claro y consistente a partir del cual crear y evolucionar productos.
Un sistema de diseño podría entenderse como:
Un lenguaje común.
Una balanza entre el control estricto y el caos que produce la libertad.
Una colección de elementos reutilizables guiados por una documentación clara.
Un conjunto de patrones y prácticas que se comparten dentro de un equipo de forma coherente y organizada.
Cada patrón describe un problema que ocurre con frecuencia y describe y propone una solución para este.
El sistema de diseño tiene que ser flexible y mantenerse vivo a largo plazo. Un sistema de diseño no es estático, sino dinámico. Evoluciona con el producto y su diseño.
1.1 ¿Qué valor aporta?
Utilizar un sistema de diseño garantiza la consistencia de nuestros productos. Esto repercute de manera positiva en la experiencia del usuario y acorta significativamente los tiempos de ideación, desarrollo y elaboración de productos. Por otra parte, los sistemas de diseño son una herramienta especialmente útil para conseguir crear productos digitales capaces de escalar y crecer rápidamente de una forma controlada. Por último, pero no menos importante, un valor que aporta es que permite dedicar menos tiempo a pensar en detalles superfluos y más a pensar en producto.
Si bien presenta algunas similitudes, el sistema de diseño no es ni un manual de marca ni una guía de estilos, ni sustituto de los mismos. Puede convivir con ellos y cada uno aporta valores distintos. La principal diferencia, es que el sistema de diseño no es un documento estático de consulta que se limita a explicar cómo debe ser el aspecto de los elementos. Como ya hemos mencionado, el sistema de diseño es una entidad viva que contiene un lenguaje común, principios y herramientas que ayudan a construir productos coherentes.
2. Principios
A la hora de tomar decisiones relacionadas con la gestión de sistemas de diseño, nos guiamos por una serie de principios que compartimos todos los miembros del equipo. Gracias a ellos conseguimos sentar las bases de lo que consideramos un buen producto. En nuestra opinión, el diseño de sistemas debe ser:
Sistémico. El diseño visual se sirve de patrones y reutiliza elementos. Esto da coherencia y cohesión al producto y agiliza los procesos de creación y mantenimiento.
Reticular. El diseño debe utilizar un sistema de proporciones definido, para armonizar y organizar el conjunto.
Racional. El diseño visual se debe basar en decisiones lógicas y razonadas.
Estético. La calidad estética del diseño repercute directamente en la utilidad y usabilidad de los productos.
Comprensible. Nuestro reto es realizar productos autoexplicativos.
Estos principios tienen también una influencia clara a lo largo de nuestro proceso productivo.
2.1 Principios específicos
Más allá de las reglas generales que nos sirven como premisa a la hora de utilizar un sistema de diseño, también dotamos a cada uno de una serie de principios particulares. Estos tienen el fin de proporcionar una personalidad única y propia al sistema. Por ejemplo, un sistema de diseño para una entidad pública podría establecer como principio la imparcialidad. Quien maneje este sistema debería ceñirse a esta máxima a la hora de crear funcionalidades que no influencien la toma de decisiones del usuario.
3. Estilos
3.1 Color
El color es un elemento muy importante de la comunicación visual, por ello, es necesario hacer un uso inteligente e intencional del mismo. A la hora de crear sistemas de diseño distinguimos los siguientes tipos de colores: **
De marca. Colores normalmente asociados al branding, que definen y dan personalidad a la marca del producto. La función principal de estos colores es acentuar.
Todos los colores primarios se agruparan en la paleta primaria.
Complementarios. Grupos de colores con la riqueza suficiente como para funcionar a la hora de crear aplicaciones tales como ilustraciones, fotografías o generar colores de fondo.
Todos los colores secundarios definidos se agruparan en la paleta secundaria.
Tipográficos. Como mínimo se deben establecer un color oscuro y otro claro para utilizar en la tipografía. También se pueden establecer otros estilos de texto que tengan un color distinto a los mencionados.
Todos los colores tipográficos se agruparan en la paleta secundaria, excepto cuando el color del texto corresponda con algún color primario.
3.2 Layout
Para organizar el espacio nos servimos de la retícula o *grid.* Esta es una herramienta de trabajo que nos ayuda a distribuir los elementos documentados en el sistema de diseño. Se debe utilizar de forma estructurada para crear los componentes funcionales que articularán el producto.
Esta retícula debe definirse matemáticamente proporcionando, así, las reglas que definen el tamaño y la posición de los elementos colocados sobre ella. De este modo, acotamos las posibilidades y agilizamos la toma de decisiones en base a un armonioso sistema de medidas proporcionales. En nuestro caso, establecemos dos variables que definen la retícula:
Columnas. Nos ayudan a estructurar el espacio horizontalmente. En función de las necesidades del proyecto, suele establecerse un número par de columnas entre 2 y 12. Es necesario establecer: el ancho de cada columna, el espacio entre estas, y el margen del grupo de columnas respecto a los bordes.
Línea base. Sirve para organizar el espacio verticalmente. Debe ser equivalente a la altura del interlineado del cuerpo de texto principal. De este modo, todos los elementos estarán alineados al mismo y transmitiremos sensación de orden.
3.3 Regla del 8
Si bien la unidad mínima de una retícula digital es el píxel individual, nuestro sistema se basará en una cuadrícula de incrementos verticales y horizontales de 8 píxeles. Debido a la importancia que tiene para nosotros esta forma de organizar la retícula, hemos decidido dedicarle su propio apartado.
Cada medida de la página debe ser múltiplo de 8. Eso incluye tanto anchos de columna, márgenes, textos, iconos, imágenes, etc. Sólo procediendo rigurosamente de esta manera lograremos que todos los elementos estén perfectamente alineados.
Al aplicar la regla del 8 a la tipografía, hacemos una excepción y nos tomamos la licencia de establecer la línea base en múltiplos de 4. De este modo ganamos versatilidad a la hora de establecer interlineados acordes al tamaño de la tipografía que generen una mancha de texto cómoda de leer. Por ejemplo, si nos ceñimos a múltiplos de 8, para una tipografía con un tamaño de 12 píxeles, 16 de interlineado podría ser insuficiente y 24 demasiado.
Hay casos puntuales en los que no es fácil tener claro cómo utilizar el grid de 8 puntos. Por ejemplo: en los elementos con una línea en el borde. En este caso, esta línea deberá estar definida de tal manera que ocupe espacio hacia el interior del botón. No contabilizaremos su grosor a la hora de medir el espaciado.
Excepciones a la regla
Hay proyectos y situaciones en las que la retícula de 8 es demasiado grande. En estos casos, el equipo estudia la posibilidad de utilizar una retícula global de 4 píxels. De este modo disponemos de más versatilidad a la hora de definir espaciados, proporciones y jerarquías en interfaces con mucha densidad de información.
3.4 Tipografía
Puesto que la letra escrita es la principal forma de comunicación visual, el buen uso de la tipografía es muy importante. Este buen uso facilita el proceso de lectura y hace fluida la experiencia del usuario. Además, la tipografía es una herramienta genial para dotar de una personalidad concreta a los diferentes proyectos y para establecer un tono comunicativo acorde a esa personalidad.
Cada tipografía tiene sus particularidades, y establecer dogmas sobre los valores numéricos que deben seguir no siempre funciona. Sin embargo, unas premisas generales que nos pueden ayudar a estructurar la información y componer los textos podrían ser las siguientes:
Establece jerarquías bien diferenciadas entre los distintos tipos de información. Para ello, puedes valerte de diferentes tipografías, pesos, tamaños, colores, etc. Una interesante forma de definir las distintas jerarquías para un sistema, es establecer en primer lugar los valores del cuerpo de texto, para a partir de ahí definir el resto.
Un interlineado entre 1,4 y 1,6 veces el tamaño de la tipografía suele funcionar para cuerpos de texto. Para destacados y titulares reducimos ese rango a 1,2-1,4.
Controla el largo de la línea del cuerpo de texto. Lo recomendable para una buena experiencia de lectura, son entre 45 y 75 caracteres. Puedes encontrar más información sobre este tema aquí.
Cíñete a una o dos tipografías y utiliza la menor cantidad de variaciones posibles de pesos de la misma. Esto es principalmente por cuestiones de rendimiento en webs y apps.
3.5 Iconografía
La iconografía representa de forma visual conceptos complejos que, de un vistazo, trasladan información útil al usuario. Debe ser usada con mesura y de forma clara, sin dar lugar a mensajes ambiguos.
Dentro del sistema de diseño, agrupamos los iconos en función de su tamaño. Partimos de unas medidas mínimas de 16px y escalamos hacia arriba en múltiplos de 8px en función de las necesidades de cada sistema. Para asegurar que todos los iconos de un tamaño determinado tienen las mismas proporciones, los insertamos sobre un fondo cuadrado transparente con esas medidas totales.
Es importante definir las propiedades formales de los iconos para que exista un código de unidad visual entre ellos. Pueden existir tanto iconos a línea, como creados a partir de formas sólidas. Ambos comparten propiedades visuales que se pueden definir:
Grosor de línea. Es importante establecer un grosor estandarizado para todo el grupo de iconos. Incluso aquellos creados a partir de formas sólidas podrían llegar a hacer uso de líneas en algún momento.
Terminaciones. Por norma general, pueden ser rectangulares o redondeadas.
Esquinas. Normalmente pueden ser: angulares, redondeadas o con bisel.
3.6 Estilos de capa
Clasificamos dentro de este apartado ciertas características que, por su naturaleza global, están presentes en muchas de las piezas que componen el sistema y ayudan a dotar al mismo de un tono y una voz propias. Como estilos definimos:
Estilos de color. Aquí incluimos tanto colores relacionados con el branding, como aquellos con un carácter más funcional, como aquellos usados en CTAs, mensajes de error, etc.
Estilos de forma. En esta categoría encontramos una miscelánea de valores que podemos aplicar, como por ejemplo la redondez de los bordes de las formas, la opacidad, sombras que proyectan, desenfoques, etc.
4. Tipos de elementos
Todo sistema está por definición compuesto de elementos que lo articulan y le dan sentido. Para hacer viable el trabajo en equipo con los sistemas de diseño, es indispensable utilizar un lenguaje común y autoexplicativo para nombrar los distintos elementos. Basándonos en su naturaleza, nosotros proponemos la siguiente clasificación:
Fragmentos
Componentes
Módulos
Plantillas
Es importante destacar que aunque los nombres aquí los hemos reflejado en español normalmente, en las aplicaciones y a la hora de trabajar con ellos, usaremos siempre su traducción en inglés. Esto lo hacemos porque, así, se adapta mejor a todos los proyectos y porque luego será más sencillo que tengamos un mismo idioma con el equipo de desarrollo (que suelen escribir todo el código en inglés). Por lo tanto, a la hora de diseñar utilizaremos como nombres:
Fragments
Components
Modules
Templates
4.1 01 Fragmentos
Un fragmento, como su nombre indica, es algo incompleto que sólo cobra sentido cuando se asocia con otros fragmentos para generar un significado o con un componente para añadírselo.
Por poner un ejemplo más bajado a tierra, un fragmento podría ser un icono de error dentro de una alerta debido a que en el diseño nunca va a ir solo, siempre irá acompañado por otro elemento, el texto, de ir solo, carecería de sentido o estaría mal aplicado.
Otro ejemplo de fragmentos serían los items que forman parte de un conjunto y no deben nunca incluirse por separado (celdas de una tabla, pestañas de un grupo de pestañas, enlaces de una navegación, opciones de un selector, etc.). Por lo tanto, formarán parte del grupo de fragmentos los siguientes elementos:
Iconos
Contenedores
Items (como lista, tabla o pestañas)
4.2 02 Componentes
Un componente sería un elemento que tiene sentido en sí mismo, es decir, está completo y no necesita acompañarse de otros elementos. Se sirven de ellos mismos para cumplir una función específica.
Es importante que un componente deba cumplir una única función, en el caso de que cumpla más de una función, en el momento en que se incumple esta regla ese componente no debe ser considerado como tal y pasará a ser parte de una categoría de elementos más compleja como módulos o plantillas.
Por poner un ejemplo, un componente sería un botón. Un botón no necesita de otro elemento para cumplir su función y podemos colocarlo en una interfaz y no se vería incompleto o ausente de significado. Los componentes más comunes son:
Bloques de texto
Botones
Links
Campos de texto
Selectores
Barras de navegación
Imágenes
Ilustraciones
Grupos de pestañas
Listas
Tablas
4.3 03 Módulos
Un módulo o sección es un conjunto de componentes que se unen para adoptar una función a un nivel más global, por ejemplo, un campo de texto permite introducir datos (tiene sentido por si mismo) pero en el momento de combinarse con otros datos, botones, etc. puede generar un módulo que adquiere una función más global, como un formulario de registro. Otro ejemplo sería un pie de página, a menudo se conforma de enlaces que en si mismos tienen sentido como links a otras páginas pero en su unión adoptan una funcionalidad más global que es la de navegación. Algunos ejemplos de módulos:
Formularios
Modales
Artículos
Cards
Calendarios
Galerías
Buscadores
5. Nomenclatura
La nomenclatura de nuestro sistema está basada en los grupos diferenciados en el punto anterior. Esto nos permite que los elementos estén ordenados y sean fáciles de encontrar. Tener los mismos principios de nomenclatura en los distintos proyectos del equipo nos ayuda a conseguir consistencia y eficiencia.
A continuación se muestran algunos ejemplos como lista de referencia ante la creación de un nuevo sistema de diseño en un proyecto. Hay proyectos en los que no aparezcan todos los componentes que se listan a continuación, y otros proyectos en los que surjan nuevos. La idea es adaptar las bases, y que producto y sistema de diseño evolucionen juntos.
5.1 01 Fragmentos
Iconos
01 Fragments / Icon / [Tamaño]px / [Nombre del icono]
Nosotros trabajamos con los iconos contenidos en cajas de dimensión cuadrada. Esta dimensión hace referencia al tamaño, que siempre tiene que ser múltiplo de 8px, respetando así nuestra retícula.
Definimos el nombre del icono de forma que describa a este y a su funcionalidad. Esto nos permite encontrar y distinguir un icono sin necesidad de verlo.
Contenedores
01 Fragments / Container / [Tipo de contenedor]
5.2 02 Componentes
Botones
02 Components / Button / [Tipo de botón] / [Estado]
Tipo de botón
Primary → CTA's primarios que deben hacer referencia a la acción principal
Secondary → CTA's secundarios que deben hacer referencia a acciones secundarias
Tertiary
Social → botón Facebook, Google, Twitter, ...
Estado
Siempre deben estar disponibles todos los posibles estados que tiene el botón. Para ello, su nomenclatura debe seguir:
01 Active
02 Hover
03 Pressed
04 Disabled
Un ejemplo seria:
1
- 02 Components / Button / Primary / 01 Active
2
- 02 Components / Button / Primary / 02 Hover
3
- 02 Components / Button / Primary / 03 Pressed
4
- 02 Components / Button / Primary / 04 Disabled
5
- 02 Components / Button / Secondary / 01 Active
Copied!
Links
02 Components / Link / [Estado]
Estado
Encontrando los cuatro tipos de estados que disinguimos para los botones: active, hover, pressed y disabled.
Un ejemplo seria:
1
- 02 Components / Link / 01 Active
2
- 02 Components / Link / 02 Hover
3
- 02 Components / Link / 04 Disabled
Copied!
Campos de texto
02 Components / Text Field / [Estado]
Estado
Para un campo de texto siempre distinguimos cuatro estados, los cuales reflejamos en nuestro sistema como:
01 Empty
02 Focus
02 Focus Typing (Opcional)
03 Filled
04 Error
Un ejemplo seria:
1
- 02 Components / Text Field / 01 Empty
2
- 02 Components / Text Field / 03 Filled
Copied!
Selectores
02 Components / Selection controls / [Tipo] / [Estado]
Tipo
Nosotros solemos distinguir entre cuatro tipos de selectores, que son:
Dropdown
Radio button
Checkbox
Picker
Estado
Es importante, que siempre estén disponibles el estado de elemento seleccionado y del elemento sin seleccionar, para ello utilizamos:
Selected
Unselected
Un ejemplo seria:
1
- 02 Components / Selection Controls / Dropdown / Selected
2
- 02 Components / Selection Controls / Dropdown / Unselected
3
- 02 Components / Selection Controls / Radio button / Unselected
Copied!
Barras de navegación
02 Components / Navigation / [Tipo de navegación]
Tipo de navegación
Los tipos de navegación más comunes que distinguimos en los proyectos son:
Navbar
Tabbar
Footer
Header
Un ejemplo seria:
1
- 02 Components / Navigation / Header
2
- 02 Components / Navigation / Navbar
3
- 02 Components / Navigation / Footer
Copied!
Imágenes
02 Components / Image
Ilustraciones
02 Components / Illustration / [Nombre de la ilustración]
Nombre
Como ocurría anteriormente con los iconos, tener un nombre de ilustración descriptivo nos permite distinguirla fácilmente.
Listas
02 Components / List / [Tipo de lista]
Tipo de lista
El tipo de lista hace referencia a la funcionalidad de la lista, distinguiendo aquella o aquellas características que la diferencia.
Un ejemplo seria:
1
- 02 Components / List / Default
2
- 02 Components / List / Default + Avatar
3
- 02 Components / List / Comment
Copied!
Tablas
02 Components / Tables / [Tipo de tabla]
5.3 03 Módulos
Modales
03 Modules / Overlay / [Tipo de modal]
Tipo de modal
El tipo de modal lo describe de forma funcional, para que sea fácilmente reconocible e identificable.
Cards
03 Modules / Cards / [Tipo de card]
Calendarios
03 Modules / Calendar
5.4 04 Plantillas
Todas las plantillas siguen la misma nomenclatura, no distinguimos en subgrupos o elementos más pequeños. Lo hacemos de esta forma porque únicamente consideramos como plantilla aquellas vistas que se utilizan de forma recurrente.
04 Templates / [Nombre de la vista]
Nombre de la vista
El nombre de la vista es el indicativo de la funcionalidad u objetivo de la misma, el cual nos permite identificarla fácilmente.
Estilos
Color
Color / [Tipo de paleta] / [Tipo] / [Nombre del color]
Tipo de paleta
Los proyectos suelen tener dos tipos de paletas, una paleta primaria y otra secundaria.
Primary → para la paleta primaria. Esta debe contener los colores que definen y dan personalidad a la marca del producto, estos suelen ir asociados al branding. Siendo su función principal acentuar.
Secondary → para la paleta secundaria. Esta contiene tanto los colores complementarios como tipográficos.
Tipo
Distinguimos dos tipos de estilos de color que se puedan aplicar sobre una capa, estilos con relleno y estilos de borde. Diferenciando así entre:
Full
Outline
Nombre color
Cada color debe tener un nombre de referencia. Este nombre no debe ser descriptivo del color, sino de la funcionalidad.
Un ejemplo seria:
1
- Color / Primary / Outline / Primary
2
- Color / Primary / Full / Secondary
3
- Color / Secondary / Outline / Light
4
- Color / Secondary / Outline / Dark
Copied!
Texto
[Tipo de tipografía] / [Tamaño] / [Color] / [Peso] / [Alineación]
Tipo tipografía
Primary → tipografía principal
Secondary → tipografía secundaria.
Utilizar esta nomenclatura, en lugar de utilizar el nombre de la tipografía nos permite que en el caso de que esta cambie no sea necesario renombrar los estilos.
Tamaño
Agrupamos los textos por tamaño. Para que en todos los proyectos, se siga una misma nomenclatura, independientemente los tamaños utilizados, aplicamos la siguiente escala:
XXXL
XXL
XL
L
M
S
XS
XXS
XXXS
Siendo XXXL el grupo que contiene los textos con un tamaño mayor, y XXXS los de menor.
💡 Nosotros tomamos como referencia el tamaño M, siendo el que más se repite y se utiliza en un proyecto. En función de este, definimos cuales son los tamaños mayores y menores que él.
Color
Como mínimo, solemos establecer un color oscuro y otro claro para utilizar en la tipografía. Sin embargo, hay ocasiones en los que también utilizamos estilos de texto que de otros colores definidos en la paleta.
Peso
Corresponde al text weight asociado a la tipografía. Por ejemplo:
Light
Regular
Medium
Semibold
Bold
Extrabold
...
Alineación
Siempre tenemos los estilos de texto alineado al centro, la izquierda y la derecha creados, para que estén disponibles. Utilizamos la siguiente nomenclatura:
Left Aligned
Centered
Right Aligned
1
Un ejemplo sería:
2
​
3
- Primary / M / Dark / Medium / Left Aligned
4
- Primary / M / Dark / Medium / Centered
5
- Secondary / M / Dark / Medium / Right Aligned
6
- Primary / L / Light / Regular / Right Aligned
Copied!
Opacidad
Opacity / [Número de opacidad]
Número de opacidad
Coincidiendo este número con el tanto por ciento de opacidad aplicado.
1
Un ejemplo sería:
2
​
3
- Opacity / 10
4
- Opacity / 20
5
- Opacity / 30
6
- Opacity / 40
7
- ...
Copied!
6. Documentación
Para documentar los elementos que forman el sistema de diseño, es necesario ordenar los componentes para crear una documentación visual de los mismos. Estos componentes se deben ordenar clasificados en diferentes mesas de trabajo, de forma que se separen estilos y elementos.
En algunos proyectos puede suceder que haya muchos elementos y sea imposible organizarlos todos en un mismo sitio, en ese caso se podrá dividir los elementos según al grupo al que pertenezcan en fragmentos, componentes y módulos.
A continuación se muestra un ejemplo visual de cómo se organizarían esos estilos y elementos.
Estilos
Los componentes perceptibles hacen referencia a aquellos que reflejan la identidad y personalidad de la marca. Los componentes mínimos de esta mesa de trabajo deben ser:
Color → paletas de colores utilizadas en el producto
Tipografía → de la tipografía es necesario documentar:
Pesos tipográficos utilizados
Estilos de textos utilizados → se deben documentar las características de cada estilo de texto: altura, espaciado entre caracteres y pesos en los que se utiliza.
Espaciado → debe mostrar el grid utilizado para el producto concreto
Estilos del sistema de diseño
De manera interna, hemos desarrollado un plugin que complementa nuestro software de trabajo automatizando la creación de la estructura de un sistema de diseño. Esta extensión ahorra el trabajo mecánico de creación de estilos de color y texto.
Elementos
La organización visual de los elementos debe respetar y ser un reflejo de las reglas que seguimos para dividirlos en grupos de tal forma que estén separados según su naturaleza. La perspectiva general del sistema de diseño debería ser similar a la mostrada en el siguiente diagrama:
Visualización global de los elementos de un sistema de diseño
Una vez hemos dado por concluida la documentación visual, es interesante reflejar en un documento adjunto, o en el mismo archivo del sistema, aquellos elementos que requieren de un nivel de detalle más minucioso. Esta documentación adjunta debe hacer una breve descripción de estos y de su uso.
3. Branding
5. Conversion Rate Optimization
Last modified 8mo ago