Cómo trabajo un proyecto de diseño web: de la estrategia al lanzamiento

La mayoría de los problemas de un proyecto web no son de diseño ni de código: son de proceso. Plazos que se estiran porque los contenidos no llegan, rediseños a mitad de desarrollo porque nadie aprobó nada por escrito, webs que se lanzan sin que nadie haya comprobado cómo se miden.

Después de años trabajando como freelance, mi proceso es la herramienta que más problemas me ha evitado. No es una metodología con nombre registrado: son cinco fases, cada una con entregables concretos, un hito de aprobación y responsabilidades claras para las dos partes. Este artículo lo explica entero, con lo que incluye y lo que exijo, para que sepas exactamente qué pasa entre “hola, necesito una web” y el día del lanzamiento.

Por qué el orden importa más que las técnicas

Antes de las fases, la idea que las sostiene: cada fase existe para que la siguiente no se haga dos veces.

Diseñar sin estrategia obliga a rediseñar cuando aparece el objetivo real. Maquetar sin contenidos obliga a remaquetar cuando llegan los textos de verdad. Lanzar sin QA convierte a tus primeros visitantes en tu equipo de pruebas. Todo lo que mi proceso tiene de rígido está ahí para proteger el presupuesto de la repetición de trabajo, que es donde los proyectos se encarecen de verdad.

Esa forma de pensar no es exclusiva de este proceso; es la misma que explico en Norte operativo: diseñar para decidir, construir y sostener.

Fase 1 — Estrategia: qué tiene que conseguir esta web

Duración habitual: 1–2 semanas.

Ningún proyecto empieza con pantallas. Empieza con una sesión de trabajo donde respondo tres preguntas contigo:

• ¿Qué tiene que conseguir la web? Un objetivo principal, medible. “Más solicitudes de presupuesto cualificadas” es un objetivo; “modernizar la imagen” es una consecuencia.
• ¿Quién tiene que conseguirlo? Los dos o tres perfiles de visitante que importan y qué necesita cada uno para dar el paso.
• ¿Qué te hace distinto y cómo se demuestra? No qué dices de ti: qué puedes probar.

Entregables: documento de estrategia con objetivo, audiencias, propuesta de valor, arquitectura de información (qué páginas existen y por qué) y criterios de éxito medibles.

Qué necesito de ti: acceso a las personas que conocen el negocio y honestidad sobre lo que funciona y lo que no. Esta fase se estropea cuando el interlocutor responde lo que le gustaría que fuera verdad.

Hito de aprobación: el documento de estrategia, por escrito. Todo lo que viene después se evalúa contra él, no contra gustos.

Fase 2 — Contenido y UX: qué dice cada página y cómo se recorre

Duración habitual: 2–3 semanas.

Aquí es donde mi proceso difiere más del habitual: el contenido va antes que el diseño visual. No maqueto con lorem ipsum, porque una página diseñada sobre texto falso es una promesa que los textos reales nunca cumplen.

En esta fase defino la estructura de mensajes de cada plantilla —qué se dice, en qué orden y con qué prueba— y los esquemas de página (wireframes) que fijan jerarquía, recorridos y comportamiento responsive. Si hay que escribir o reescribir textos, es el momento: con redacción propia o con un colaborador especializado, según el proyecto.

Entregables: mapa de contenidos, wireframes de cada plantilla y textos definitivos o casi definitivos.

Qué necesito de ti: los contenidos que ya existen (textos, fotos, datos, casos) y revisiones con criterio de negocio: ¿esto es verdad?, ¿esto es lo importante?, ¿esta prueba es la mejor que tenemos?

Hito de aprobación: wireframes y contenidos aprobados. Es la aprobación más importante de todo el proyecto, porque cambiar estructura en un wireframe cuesta minutos y cambiarla en desarrollo cuesta días.

Fase 3 — Interfaz: cómo se ve y cómo se siente

Duración habitual: 2–3 semanas.

Con la estructura fijada, la dirección visual tiene un terreno donde jugar sin romper nada. Empiezo por un sistema de diseño —tipografía, color, espaciado, componentes— y no por pantallas sueltas, porque el sistema es lo que garantiza que la web entera parezca hecha por la misma cabeza, incluida la página que se añada dentro de un año.

Sobre ese sistema diseño las plantillas clave con contenido real, en escritorio y móvil, incluyendo los estados que casi nadie diseña: formularios con errores, listados vacíos, versiones con poco contenido.

Entregables: sistema de diseño, plantillas clave diseñadas en alta fidelidad y especificación de las interacciones y animaciones que aportan algo.

Qué necesito de ti: reacciones concretas en las rondas de revisión (incluyo dos por fase). “No me gusta” no es accionable; “este bloque no transmite solidez porque…” sí.

Hito de aprobación: diseño visual aprobado sobre las plantillas clave.

Fase 4 — Desarrollo: construir lo que se aprobó

Duración habitual: 3–5 semanas según alcance.

Desarrollo con un stack moderno —habitualmente Astro, con Svelte donde hay interactividad real— priorizando tres cosas que se pactan desde la fase 1: rendimiento, accesibilidad y facilidad de edición para tu equipo. El porqué de ese stack lo explico en por qué el stack tecnológico importa, pero la versión corta es: la velocidad y la estabilidad de tu web se deciden aquí, no en el diseño.

Durante esta fase tienes acceso a un entorno de pruebas desde la segunda semana. No hay una “gran revelación” final: ves la web crecer, y los ajustes se hacen sobre lo real.

Entregables: web funcionando en entorno de pruebas, CMS configurado con tus contenidos y documentación de edición.

Qué necesito de ti: los flecos de contenido que siempre quedan (la foto que faltaba, el texto legal, los datos de contacto verificados) y una revisión honesta del entorno de pruebas.

Hito de aprobación: visto bueno sobre la web completa en entorno de pruebas.

Fase 5 — QA y lanzamiento: que salga bien y se pueda medir

Duración habitual: 1 semana.

La última semana no es “subir la web”. Es una lista de comprobación que incluye, entre otras cosas:

• pruebas en dispositivos y navegadores reales, no solo en el simulador;
• revisión de rendimiento con métricas (Core Web Vitals) y corrección de lo que no cumpla;
• accesibilidad: navegación por teclado, contraste, textos alternativos;
• metadatos, datos estructurados y, si hay migración, mapa de redirecciones URL por URL;
• analítica configurada y verificada: si el objetivo de la fase 1 no se puede medir, el proyecto no está terminado;
• formularios probados de punta a punta, incluido dónde llega cada correo.

Entregables: web en producción, informe de lanzamiento y un periodo de garantía de 30 días para corregir cualquier incidencia derivada del desarrollo.

Hito: el lanzamiento, con una revisión conjunta a las dos semanas para ver los primeros datos.

Qué pasa después del lanzamiento

Una web que no se toca después de lanzarse empieza a caducar el mismo día. Con los primeros datos de uso aparecen los ajustes que ningún diseño anticipa: un CTA que nadie ve, una página que recibe tráfico inesperado, un formulario donde la gente se atasca.

Por eso todos mis proyectos terminan con una conversación sobre continuidad: desde un mantenimiento mínimo hasta evolución mensual con mejoras medidas. La lógica de esos sistemas la conté en los 5 sistemas que garantizan el éxito de tu web; la continuidad es el quinto y el que más se subestima.

Lo que este proceso te pide a ti

Un proceso solo funciona si las dos partes cumplen su parte. La mía está descrita arriba. La tuya, resumida:

1. Un interlocutor con capacidad de decisión. Los proyectos donde cada aprobación pasa por un comité duplican su plazo.
2. Contenido a tiempo. Es la causa número uno de retrasos en proyectos web, con diferencia.
3. Feedback sobre objetivos, no sobre gustos. El documento de la fase 1 existe para eso: para que “no me convence” se convierta en “esto no cumple lo que definimos”.

A cambio, sabes en todo momento en qué fase está el proyecto, qué se ha aprobado, qué falta y qué pasa si algo se retrasa. Sin sorpresas en la factura ni en el calendario.

Si estás pensando en un proyecto

Este proceso es el que aplico como diseñador web freelance en cada proyecto, ajustando la profundidad de cada fase al alcance: una landing no necesita la misma fase de estrategia que un producto digital, pero ninguna fase desaparece del todo. Si dudas entre trabajar así o con una estructura más grande, en freelance o agencia comparo ambas opciones sin trampas.

Y si tienes un proyecto en la cabeza y quieres saber cómo encajaría en estas fases, cuéntamelo. La primera conversación es, precisamente, el principio de la fase 1: entender qué tiene que conseguir tu web antes de hablar de nada más.