Apuntes DAM
Tema 1 de 7DIW · 2º DAW

Diseño de Interfaces Web

Planificación y Diseño Visual

De la investigación al prototipo: UX y UI, mapa web y wireframes, principios visuales (jerarquía, rejilla, proximidad), color y tipografía, guías de estilo, sistemas de diseño y design tokens.

45 min lecturaPrincipiante

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.
UX y UI explicado | ¿Qué hacen los expertos en usabilidad? | Platzi Cursos — Platzi

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.

Cuatro principios que ordenan una página

Jerarquía
Lo importante se ve primero: más grande, más contraste o más arriba. El ojo necesita saber por dónde empezar.
Alineación y rejilla
Cada elemento se alinea con algo. Una rejilla invisible hace que la página parezca ordenada.
Proximidad
Lo que está relacionado se agrupa; lo que no, se separa con espacio en blanco, que no es espacio perdido.

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.

tokens.css
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}
HerramientaPara qué
Figma / PenpotWireframes, diseño visual, prototipos y sistemas de diseño colaborativos (Penpot es libre)
Excalidraw, papel y lápizBocetos rápidos al principio, cuando todo puede cambiar
Coolors, Realtime ColorsGenerar paletas y probarlas sobre una página de ejemplo
Google Fonts, FontsourceTipografías libres para la web

Diseña con contenido real

Los diseños con «Lorem ipsum» y fotos perfectas engañan: el nombre real de un producto puede ocupar tres líneas y el usuario subirá fotos torcidas. Diseña con textos e imágenes parecidos a los reales desde el principio.

4. Reto y ejercicios

CSSAplica la guía de estiloFácil

La guía de estilo define unos tokens como variables CSS. Estila .boton usándolos (no escribas los valores a mano): fondo --color-primario, texto blanco, relleno de --espacio-s en vertical y --espacio-m en horizontal, bordes redondeados --radio, sin borde, peso de letra 600 y tamaño --texto-base. .boton--secundario tiene fondo transparente, texto --color-primario y un borde de 2px sólido de ese color.

index.htmlsolo lectura
estilos.css
Vista previa
Ejercicio Práctico
Medio

Del mapa web al prototipo

Planifica la web de una academia de idiomas: define dos tipos de usuario con sus objetivos, dibuja el mapa web, haz los wireframes de la portada y de la ficha de un curso en versión móvil y escritorio, y crea en Figma (o Penpot) un prototipo navegable entre ambas pantallas.

Ejercicio Práctico
Medio

Crea la guía de estilo

Para la academia del ejercicio anterior, elabora una guía de estilo de una página: paleta (primario, secundario, neutros y semánticos con su código), dos tipografías con su escala, espaciados, radio de bordes y el aspecto de los botones en sus estados (normal, hover, foco y deshabilitado). Tradúcela después a un fichero tokens.css.

¿Has terminado este tema?

Crea una cuenta gratis para guardar qué temas has terminado, subir de nivel y ganar medallas.

Guardar mi progreso