DIW

Appearance

Guía de estilo ​

Una guía de estilo define las reglas visuales y de comunicación que deben utilizarse en una aplicación.

Su objetivo principal es conseguir que todas las vistas y componentes mantengan una apariencia coherente.

Comunicación visual ​

Una interfaz no solo presenta información. También debe comunicar qué elementos son importantes y cómo debe interactuar el usuario con ellos.

Para establecer una jerarquía visual podemos utilizar:

  • tamaño;
  • color;
  • contraste;
  • posición;
  • alineación;
  • espacios;
  • agrupación de elementos.

Los elementos relacionados deben percibirse como pertenecientes al mismo grupo y las acciones importantes deben distinguirse de las secundarias.

Color ​

La guía debe definir una paleta de colores.

Habitualmente encontramos:

  • color principal;
  • colores secundarios;
  • colores de fondo;
  • colores del texto;
  • colores funcionales.

Los colores funcionales pueden utilizarse para comunicar estados:

  • éxito;
  • información;
  • advertencia;
  • error.

El color debe utilizarse de forma consistente y mantener un contraste suficiente entre texto y fondo.

Tipografía ​

La tipografía influye directamente en la legibilidad y en la personalidad visual de la aplicación.

La guía puede definir:

  • familia o familias tipográficas;
  • tamaños;
  • pesos;
  • interlineado;
  • estilos para títulos;
  • estilos para texto;
  • estilos para elementos auxiliares.

Debe existir una jerarquía clara entre títulos, subtítulos y contenido.

Iconos e imágenes ​

Los iconos permiten representar visualmente acciones o conceptos.

Es recomendable utilizar iconos pertenecientes a una misma familia para mantener la consistencia.

También deben establecerse criterios para:

  • logotipo;
  • fotografías;
  • ilustraciones;
  • imágenes de producto;
  • avatares.

Espaciado y formas ​

La utilización consistente del espacio contribuye a ordenar visualmente la interfaz.

Podemos establecer reglas para:

  • separación entre elementos;
  • márgenes;
  • rellenos;
  • anchuras;
  • bordes;
  • radios de las esquinas;
  • sombras.

Lenguaje y mensaje ​

La guía de estilo también puede determinar cómo se comunica la aplicación con el usuario.

Debemos mantener criterios comunes para:

  • nombres de acciones;
  • etiquetas;
  • instrucciones;
  • confirmaciones;
  • advertencias;
  • mensajes de error.

El lenguaje debe adaptarse al objetivo de la aplicación y a sus usuarios.

Ejemplo mínimo ​

Una guía sencilla podría establecer:

text
Color principal: #2563EB
Color de error: #DC2626
Fondo: #FFFFFF

Tipografía: Inter
Título principal: 32 px / Bold
Título secundario: 24 px / Semibold
Texto: 16 px / Regular

Botones:
- radio: 6 px
- texto en semibold
- botón principal con color principal

Espaciado:
8 / 16 / 24 / 32 px

TIP

La guía de estilo se define una vez y debe aplicarse posteriormente a todas las vistas de la aplicación.