El proceso de diseño web, paso a paso
El diseño web no es la parte en la que alguien elige colores. Es una secuencia de decisiones que se estrecha desde «para qué es este sitio» hasta «este botón, este tamaño, esta etiqueta», y cada paso es más barato de cambiar que el siguiente.
Esta guía cubre las fases en orden, qué produce cada una y los dos puntos donde los proyectos de diseño se atascan de forma fiable.
Descubrimiento: qué debe lograr el diseño#
Antes de nada visual, quien diseña necesita lo mismo que quien desarrolla: el objetivo principal, el público, la estructura de páginas y las restricciones. Si empieza sin eso, obtiene un diseño que luce en un portafolio y falla cuando llega el contenido real.
Esta fase produce acuerdo, no artefactos. Un resumen de una página que ambas partes aceptan es suficiente.
- La única acción que el sitio debe impulsar y cómo se medirá.
- Dos o tres grupos de visitantes y la pregunta con la que llega cada uno.
- Restricciones de marca que existan de verdad: logotipo, colores, tipografías, tono.
- Restricciones técnicas: el CMS, la plataforma, los dispositivos que de verdad importan.
- Ejemplos de sitios que le gustan al cliente y, más útil, por qué.
Estructura y wireframes#
Los wireframes resuelven disposición y jerarquía sin la discusión sobre el color. Responden qué hay en cada plantilla, en qué orden y qué se espera que haga el visitante, mientras los cambios todavía cuestan minutos.
Haga wireframes de las plantillas, no de cada página. Casi todos los sitios tienen de cuatro a ocho plantillas distintas y decenas de páginas construidas con ellas.
| Plantilla | Pregunta que responde | Acción principal |
|---|---|---|
| Portada | ¿Qué es esto y es para mí? | Ir a la sección adecuada |
| Centro de sección | ¿Qué hay aquí dentro? | Elegir un elemento |
| Artículo o detalle | La respuesta en sí | Leer y dar el siguiente paso |
| Producto | ¿Es el adecuado y cuánto cuesta? | Añadir a la cesta |
| Contacto o formulario | ¿Cómo empiezo? | Enviar |
| Resultados de búsqueda | ¿Lo encontró? | Abrir un resultado o afinar |
Haga wireframes con longitudes de contenido realistas. Una maquetación diseñada alrededor de un titular de seis palabras se rompe en cuanto uno real llega a catorce.
Diseño visual y sistema de diseño#
El diseño visual aplica la marca a los wireframes: escala tipográfica, color, espaciado, estados y componentes. En cualquier cosa mayor que un sitio de presentación merece la pena producir un sistema pequeño —un conjunto de componentes con estados definidos— en vez de un conjunto de imágenes de páginas inconexas.
El motivo no es el orden. Es que un sistema le dice a quien desarrolla qué pasa en los casos que los mockups no muestran, y esos casos son la mayor parte del sitio.
- Una escala tipográfica y una de espaciado, para que ningún número sea un caso aislado.
- Tokens de color con el contraste comprobado sobre sus fondos reales.
- Estados de componente: normal, hover, foco, activo, deshabilitado, cargando, error, vacío.
- Comportamiento adaptable de cada componente, no solo una versión móvil de la portada.
- Qué ocurre con demasiado contenido y con ninguno.
Dónde se atascan los proyectos de diseño#
Dos fallos explican casi todo el retraso, y ambos son problemas de proceso más que de gusto.
- Comentarios sin responsable. Seis personas comentan, dos se contradicen y quien diseña queda de árbitro. Nombre a una persona que consolide los comentarios y decida.
- Contenido que no existe. Se aprueban diseños contra texto de relleno, luego llega el texto real con el doble de longitud y se rehace la maquetación. Diseñe con contenido real, aunque sea tosco.
- Rondas de revisión ilimitadas. Acuerde el número por adelantado —normalmente dos o tres— y cuánto cuesta una ronda extra. Sin límite, los proyectos derivan en vez de terminar.
- Aprobaciones que no lo son. «Se ve bien» en una reunión no es una aprobación. Consígala por escrito, por plantilla y con fecha.
La pregunta más útil en una revisión no es «¿le gusta?» sino «¿esto ayuda al visitante a hacer aquello para lo que acordamos que existe el sitio?». Las discusiones de gusto no terminan; las de objetivo sí.
Preguntas frecuentes
¿Cuántas rondas de revisión debo esperar?
Dos o tres es lo normal en un proyecto basado en plantillas. Más importante que el número es que esté acordado por escrito junto con el coste de una ronda adicional. Las revisiones ilimitadas suenan generosas y en la práctica significan que el proyecto nunca llega a una decisión, porque nada obliga a nadie a comprometerse.
¿Diseño y desarrollo deben ser la misma persona o equipo?
En proyectos pequeños, una persona haciendo ambas cosas es eficiente y evita un traspaso. En los grandes son habilidades genuinamente distintas y separarlas suele dar mejor resultado, siempre que quien diseñe entregue un sistema con estados y reglas adaptables en vez de un conjunto de imágenes. El riesgo está en el traspaso, no en la separación.
¿Necesito el diseño completo antes de empezar a desarrollar?
Necesita las plantillas diseñadas, no cada página. El desarrollo puede empezar cuando el sistema de diseño y las dos o tres plantillas más complejas estén cerrados; el resto puede terminarse mientras se construye. Empezar sin nada cerrado significa rehacer trabajo, y terminar hasta la última página antes de escribir código significa pagar tiempo muerto.
¿Qué entregables debo recibir al final?
Archivos fuente editables de cada plantilla y componente, una escala tipográfica y de color documentada, recursos exportados en los formatos que necesite la construcción y las reglas adaptables por escrito. Pregunte antes de empezar si recibe los archivos fuente o solo exportaciones: la diferencia importa la primera vez que necesite un cambio pequeño sin quien diseñó originalmente.
proceso de diseño webfases diseño webwireframessistema de diseñomockups webflujo de trabajo diseño web
