Planificación y Diseño Visual

1. Diseñar antes de maquetar

Una interfaz web no empieza en el editor de código, sino con preguntas: ¿quién la va a usar?, ¿qué quiere conseguir?, ¿desde qué dispositivo? Saltarse este paso lleva a rehacer pantallas enteras cuando alguien se da cuenta de que falta un botón importante o de que el menú no cabe en el móvil. Planificar es más barato que corregir.

Dos siglas resumen el trabajo. La UX (experiencia de usuario) se ocupa de que el producto sea útil y fácil de usar: qué pantallas hay, qué contiene cada una y cómo se pasa de una a otra. La UI (interfaz de usuario) se ocupa de cómo se ve: colores, tipografía, espaciado e iconos. Una web bonita pero confusa fracasa, y una útil pero descuidada transmite poca confianza. Hacen falta las dos.

1. Investigar: objetivos del cliente, tipos de usuarios (a veces descritos como «personas»), la competencia.
2. Organizar el contenido: el mapa web con las secciones y su jerarquía.
3. Wireframes: bocetos en blanco y negro de cada pantalla que muestran qué va en cada sitio, sin distraer con colores.
4. Diseño visual y prototipo: la versión con estilo, normalmente en Figma, que se puede recorrer haciendo clic.
5. Probar con usuarios y corregir antes de programar.

2. Principios de diseño visual

No hace falta talento artístico para diseñar interfaces correctas: basta con aplicar unos pocos principios con disciplina. Casi todos los diseños que «se ven raros» incumplen alguno de estos.

Color

Una paleta de interfaz suele tener un color primario (la marca, los botones principales), uno o dos secundarios, una escala de neutros (grises para textos, fondos y bordes) y colores semánticos para éxito, aviso y error. La regla 60-30-10 ayuda a equilibrarla: 60 % de un color dominante (normalmente neutro), 30 % de uno secundario y 10 % de acento para lo que debe llamar la atención. Y el contraste entre texto y fondo no es una cuestión de gusto: es un requisito de accesibilidad que verás en su tema.

Tipografía

Con una o dos familias tipográficas es suficiente. Define una escala de tamaños con una proporción constante (por ejemplo, multiplicando por 1,25) en lugar de tamaños al azar, cuida el interlineado (1,5 para textos largos) y limita el ancho de las líneas a unos 60-75 caracteres: las líneas demasiado largas cansan y hacen perder el renglón.

3. La guía de estilo y los sistemas de diseño

Cuando varias personas trabajan en una web, o cuando la web crece, la coherencia se pierde con facilidad: tres azules casi iguales, botones con cinco radios distintos… La guía de estilo lo evita recogiendo las decisiones de diseño: logotipo y sus usos, paleta, tipografías y escala, espaciados, iconos, tono de los textos y el aspecto de cada componente.

Un paso más allá es el sistema de diseño: la guía de estilo más una librería de componentes ya programados y documentados. Material Design (Google), Carbon (IBM) o el sistema del Gobierno de Reino Unido son ejemplos públicos. Su base son los design tokens: las decisiones de diseño con nombre (--color-primario, --espacio-m), que en la web se implementan como variables CSS. Si mañana cambia el color de la marca, se cambia un token y se actualiza todo.

1:root {
2  /* Color */
3  --color-primario: #4f46e5;
4  --color-texto: #1f2937;
5  --color-fondo: #ffffff;
6  --color-error: #b91c1c;
7  /* Tipografía: escala 1,25 */
8  --texto-s: 0.8rem;  --texto-base: 1rem;  --texto-l: 1.25rem;  --texto-xl: 1.563rem;  --texto-2xl: 1.953rem;
9  /* Espaciado: múltiplos de 4px */
10  --espacio-xs: 4px;  --espacio-s: 8px;  --espacio-m: 16px;  --espacio-l: 24px;  --espacio-xl: 40px;
11  --radio: 10px;
12}

4. Reto y ejercicios