Flujo de trabajo

Un proceso claro hace que el cliente confíe en ti, que tú no te pierdas y que los cambios lleguen en el momento correcto (cuando son baratos) y no al final (cuando son carísimos). En esta lección verás el flujo profesional de un proyecto web, fase por fase, con sus entregables y aprobaciones.

Concepto

Cada fase termina con un entregable y una aprobación por escrito del cliente. Así nunca avanzas sobre algo que el cliente no validó.

Descubrimiento → Wireframe → Diseño → Desarrollo → Revisiones/QA → Entrega → Mantenimiento
      │              │          │          │              │             │
   alcance       estructura   visual    sitio en      lista de      sitio en
   aprobado      aprobada    aprobado   staging       cambios       producción

El costo de un cambio crece en cada fase

Mover un botón en un wireframe toma 2 minutos. En el diseño, 15 minutos. En el sitio ya programado, una hora. Cuando el sitio está publicado y conectado a una base de datos, puede ser un día. Por eso cada aprobación importa.

Fase 1: descubrimiento

Objetivo: entender el negocio y definir el alcance.

• Reunión inicial y cuestionario (ver Requisitos).
• Investigación de competencia y referencias.
• Documento de alcance, cotización y contrato firmados.
• Anticipo recibido.
• Lista de material que debe entregar el cliente (textos, logo, fotos, accesos) con fecha límite.

Entregable: documento de alcance aprobado + calendario.

Fase 2: wireframes

Objetivo: definir la estructura de cada página sin distraerse con colores ni fotos.

Un wireframe es un boceto en escala de grises: dónde va el menú, el título principal, los servicios, el formulario. Puedes hacerlo en papel, en Figma, en Excalidraw o en Balsamiq.

┌──────────────────────────────────────────┐
│ LOGO              Inicio Servicios Contacto│
├──────────────────────────────────────────┤
│                                          │
│   TÍTULO PRINCIPAL (beneficio claro)     │
│   Subtítulo de una línea                 │
│   [ Agenda tu cita ]                     │
│                                          │
├────────────┬─────────────┬───────────────┤
│ Servicio 1 │ Servicio 2  │ Servicio 3    │
├────────────┴─────────────┴───────────────┤
│ Testimonios (3 tarjetas)                 │
├──────────────────────────────────────────┤
│ Mapa + horario     │ Formulario contacto │
├──────────────────────────────────────────┤
│ Footer: redes, aviso de privacidad       │
└──────────────────────────────────────────┘

Entregable: wireframes de las páginas principales (escritorio y móvil) aprobados.

Fase 3: diseño visual

Objetivo: definir cómo se verá: colores, tipografía, imágenes, estilo de botones.

• Prepara una guía de estilo mínima: paleta, tipografías, tamaños de títulos, botones, formularios.
• Diseña primero la página de inicio. Cuando se apruebe la dirección visual, diseña el resto.
• Diseña la versión móvil (la mayoría de los visitantes llegan desde el celular).
• Presenta el diseño en una llamada explicando las decisiones ("el botón de citas es naranja porque es lo que queremos que hagan").

Entregable: diseño en Figma (o similar) aprobado, con enlace de solo lectura para el cliente.

Presenta, no envíes

Un diseño enviado por correo sin contexto recibe comentarios como "no me gusta el azul". Presentado en llamada, explicando el porqué, recibe comentarios útiles y se aprueba más rápido.

Fase 4: desarrollo

Objetivo: convertir el diseño en un sitio funcional.

Buenas prácticas:

• Git desde el día uno, con commits frecuentes y descriptivos.
• Entorno de staging: una URL privada (por ejemplo staging.cliente.com o una vista previa de Vercel/Netlify) donde el cliente ve el avance. Protégela con contraseña o noindex.
• Avances visibles cada semana: el cliente tranquilo no te llena de mensajes.
• Construye de lo general a lo particular: estructura y estilos globales → componentes → páginas → funcionalidades → contenido real.

Estructura de ramas sugerida:
main      → producción (lo publicado)
develop   → staging (lo que revisa el cliente)
feature/* → cada funcionalidad en desarrollo

Entregable: sitio completo en staging con contenido real.

Fase 5: revisiones y QA

Objetivo: pulir y asegurar que todo funcione.

Revisión del cliente

Pide los cambios consolidados en una sola lista por ronda. Herramientas útiles: un documento compartido, un tablero de Trello, comentarios sobre capturas, o herramientas de anotación sobre el sitio.

RONDA DE REVISIÓN 1 — Dental Sonrisa
(Por favor, agrupa todos tus comentarios aquí antes del viernes)

Página    | Qué cambiar                                  | Prioridad
----------|----------------------------------------------|----------
Inicio    | Cambiar foto del hero por la de la recepción | Alta
Servicios | Corregir precio de limpieza: $650            | Alta
Contacto  | Agregar teléfono fijo                        | Media

Tu propio QA (control de calidad)

• [ ] Todas las páginas en Chrome, Firefox, Safari y Edge.
• [ ] Celular real Android y iPhone, en vertical y horizontal.
• [ ] Formularios: envío correcto, validaciones, mensajes de error, correo recibido.
• [ ] Enlaces rotos (ninguno) y botones que llevan a donde deben.
• [ ] Ortografía y datos de contacto.
• [ ] Velocidad (Lighthouse) y accesibilidad básica.
• [ ] Página 404, favicon, títulos y descripciones.

Entregable: lista de cambios resuelta y aprobación final por escrito.

Fase 6: entrega

• Pago final recibido.
• Publicación en producción (ver Checklist de producción).
• Capacitación, documentación y entrega de accesos (ver Entrega y capacitación).

Fase 7: mantenimiento

Ofrece un plan mensual (ver Mantenimiento y soporte).

Cronograma de ejemplo (5 semanas)

Semana  | Tú                                   | Cliente
--------|--------------------------------------|------------------------------
1       | Wireframes + guía de estilo          | Entrega material; aprueba wireframes
2       | Diseño inicio + resto de páginas     | Ronda de revisión de diseño; aprueba
3       | Desarrollo: estructura y páginas     | Revisa avance en staging
4       | Desarrollo: formularios, blog, SEO   | Revisa avance en staging
5       | QA, ronda final, capacitación, publicación | Ronda de revisión; pago final

Comunicación: el reporte semanal

Un mensaje cada viernes evita que el cliente se pregunte "¿en qué va mi sitio?":

Asunto: Avance semanal — Sitio Dental Sonrisa (semana 3 de 5)

Hola, Dra. López:

✅ Esta semana:
- Terminé las páginas Inicio, Nosotros y Servicios.
- El sitio ya se ve correctamente en celular.

🔜 La próxima semana:
- Formulario de citas y blog.

⏳ Pendiente de tu parte:
- Fotos del equipo (las necesito antes del miércoles para no retrasar
  la entrega).

Puedes ver el avance aquí: https://staging.dentalsonrisa.com
(usuario: cliente / contraseña: la que te compartí)

Vamos en tiempo para la entrega del 22 de noviembre.

Saludos,
[Tu nombre]

Manejar el feedback difícil

Situación	Cómo responder
"No me gusta, pero no sé por qué"	Pregunta por partes: ¿colores?, ¿tipografía?, ¿fotos?, ¿la distribución? Muestra dos alternativas concretas.
El cliente pide algo que perjudica al sitio	Explica la consecuencia con datos ("un carrusel automático reduce los clics; ¿qué tal una imagen fija con un botón claro?"). Si insiste, es su decisión: déjalo por escrito.
Comentarios de muchas personas contradictorios	Recuerda que el contrato establece una sola persona que consolida y aprueba.
Cambios fuera de alcance	Solicitud de cambio por escrito con costo e impacto en la fecha (ver Contratos).
El cliente no responde	Recordatorio amable, luego aviso de que la fecha de entrega se moverá según el contrato.

Error común

Saltarse la aprobación de diseño "para avanzar más rápido" y programar directamente. Cuando el cliente vea el sitio y pida cambiar la estructura, tendrás que rehacer horas de trabajo que nadie te pagará.

Ejercicios

1. Dibuja el wireframe (en papel o Excalidraw) de la página de inicio de una cafetería.
2. Escribe el reporte semanal de la semana 2 del proyecto, con un retraso por material no entregado.
3. Haz tu propia checklist de QA con al menos 12 puntos.

Ver solución (orientativa)

1. Debe incluir: menú, hero con beneficio y botón (ej. "Ver menú" o "Pedir por WhatsApp"), productos destacados, ubicación con horario, testimonios y footer.
2. Incluye lo terminado, lo siguiente y, con claridad: "Para mantener la fecha del 22 necesito los textos de Servicios antes del lunes. Si llegan después, la entrega se moverá los mismos días de retraso, como acordamos en el contrato."
3. Ejemplo adicional a la lista de la lección: probar con conexión lenta, revisar el sitio con zoom al 200%, navegar solo con teclado, comprobar que robots.txt no bloquee en producción, revisar consola sin errores JS, probar formularios con datos inválidos.

Resumen

• Fases: descubrimiento → wireframe → diseño → desarrollo → revisiones/QA → entrega → mantenimiento.
• Cada fase termina con un entregable y una aprobación por escrito.
• Usa staging para mostrar avances y Git desde el primer día.
• Rondas de revisión consolidadas, QA propio y reporte semanal.
• Los cambios son baratos al principio y caros al final: valida temprano.
• Siguiente: Herramientas del freelancer.