Estructura y wireframes
Por qué: El contenido va antes que el diseño. Decida qué va dónde antes de decidir cómo se ve. Los wireframes en gris simple invitan a criticar la estructura; en cuanto algo parece terminado, la gente solo comenta los colores. Los constructores de sitios con IA que dan buenos resultados (Relume, Google Stitch) también siguen mapa del sitio → wireframe → estilo, por la misma razón.
Necesita: 01-facts/facts.md, 01-facts/inventory.md (rediseños), 02-personas/personas.md, 03-brand/brand.md.
Produce: 04-structure/sitemap.md (árbol de páginas, navegación, reglas de URL, redirecciones, orden de mensajes), 04-structure/wireframes/r<round>/*.html.
Este paso tiene dos partes con una revisión cada una, porque la estructura y los wireframes son demasiado para una sola ronda: la parte 1 resuelve el árbol de páginas, la parte 2 muestra los wireframes.
1. Árbol de páginas
Empiece desde las preguntas de las personas, no desde el sitio antiguo ni el organigrama. Cada página responde una pregunta principal para una persona principal.
En sitemap.md, para cada página: URL, título, pregunta principal, persona principal, acción principal, estado (lanzamiento / posterior). Luego:
- Navegación: elementos de nivel superior (apunte a 5–7), qué va en el pie de página, si se necesita un mega menú.
- Reglas de URL: prefijo de idioma, barra inclinada final o no, minúsculas, palabras no IDs.
- Redirecciones: URL antigua → URL nueva para cada página marcada en el inventario.
- Alcance del lanzamiento: el conjunto más pequeño de páginas que responde las preguntas de la persona principal. Las secciones vacías ("Blog – próximamente") se quedan fuera.
Manténgalo tan pequeño como lo permita la oferta. Cada página tiene que ser escrita, diseñada y mantenida.
Revisión, parte 1 (review/04-structure-r1.html): árbol de páginas, navegación, reglas de URL, redirecciones, alcance del lanzamiento. Deténgase: espere las decisiones antes de construir wireframes.
2. Orden de mensajes por página clave
Escríbalo en sitemap.md, un bloque por página. Para la página de inicio y cada tipo de página (producto, precios, acerca de, contacto, artículo, …): enumere las secciones de arriba a abajo. Para cada sección: la pregunta del visitante en ese punto, la respuesta en una línea, la prueba de facts.md, y qué lleva a la siguiente sección. La primera pantalla establece la promesa y la acción principal.
3. Wireframes
Construya un wireframe HTML por tipo de página clave, primero para móvil, también verificado a ancho de escritorio. En la primera ronda de wireframes muestre como máximo cuatro: la página de inicio y los tres tipos de página más importantes. Los tipos adicionales siguen en la siguiente ronda. Guarde cada ronda en su propia carpeta (wireframes/r2/, …) y comparta una hoja de estilo.
- Solo grises, una fuente del sistema, cajas con una cruz para imágenes, sin colores de marca, sin conjuntos de iconos, sin sombras.
- Borrador de contenido real de
brand.mdyfacts.md, nunca lorem ipsum. Los titulares pueden ser aún aproximados; márquelos comodraft. - Longitudes reales: si una lista tendrá 12 elementos, muestre 12.
- Etiquete cada sección con la pregunta que responde, en texto gris pequeño encima.
- Renderice y mire cada wireframe a 390 px y 1440 px antes de mostrarlo.
Revisión, parte 2
Muestre el orden de mensajes y los wireframes como capturas de pantalla lado a lado (móvil y escritorio), cada una enlazada a su archivo HTML. Decisiones típicas: orden de secciones por página, tipos de página que faltan o son redundantes, qué debe contener la primera pantalla.
Terminado cuando el árbol de páginas, la navegación, las reglas de URL, las redirecciones y el orden de secciones de las páginas clave estén decididos. El texto se refina en el paso 8; los detalles de maquetación pueden cambiar en el paso 9.