Dos peluquerías en la misma cuadra de Cali abren landing pages el mismo mes. Las dos ofrecen exactamente lo mismo: corte + tratamiento, con 20% de descuento para nuevos clientes.
La primera página tiene un logo enorme arriba, después tres párrafos de historia del negocio, y al final — después de hacer scroll varias veces — un botón pequeño que dice "Contacto".
La segunda página tiene, en los primeros 3 segundos sin hacer scroll: una foto real del salón, el título "Corte + Tratamiento con 20% OFF — Agenda hoy", y un botón grande de WhatsApp.
Mismo negocio, mismo mensaje, mismo descuento. La segunda convierte muchas más visitas en citas.
No porque "se vea más bonita" — sino porque está estructurada para que el visitante entienda y actúe rápido.
En el Módulo 1 aprendiste qué secciones necesita una landing page. En este módulo aprenderás cómo organizarlas: el wireframe, la regla de los 3 segundos (above the fold), por qué el diseño debe pensarse primero para celular, y dónde conseguir plantillas gratuitas para no empezar desde una hoja en blanco.
2.1. El wireframe: el esqueleto antes que la decoración
Un wireframe es un boceto simple — cajas y texto, sin colores ni imágenes finales — que define dónde va cada cosa antes de preocuparte por cómo se ve. Es el plano de la casa antes de elegir la pintura.
Para una landing page de PYME, el wireframe vertical más efectivo sigue este orden (retomando la anatomía del Módulo 1):
┌─────────────────────────────┐
│ HERO │ ← Título + subtítulo + CTA + imagen
│ (above the fold) │
├─────────────────────────────┤
│ PROPUESTA DE VALOR │ ← 3 razones para elegirte
├─────────────────────────────┤
│ PRUEBA SOCIAL │ ← Reseñas, calificación, fotos
├─────────────────────────────┤
│ CÓMO FUNCIONA │ ← 3 pasos simples
├─────────────────────────────┤
│ OFERTA / PRECIO │ ← Claridad total
├─────────────────────────────┤
│ PREGUNTAS FRECUENTES │ ← Objeciones resueltas
├─────────────────────────────┤
│ CTA FINAL │ ← Repite la acción
├─────────────────────────────┤
│ FOOTER (contacto) │ ← Dirección, WhatsApp, horario
└─────────────────────────────┘Cada caja de este wireframe se convierte en un bloque <section> o <div> en el HTML de la página. El orden vertical que ves arriba es literalmente el orden del código — por eso el wireframe es tan importante: estructura la lógica antes que la decoración.
Cuando usas Google Sites, Wix o Canva, arrastras y sueltas esos bloques visualmente. Cuando llegas al Nivel 4 del Módulo 4 (Next.js + código propio), los escribes directamente en HTML. En ambos casos, el wireframe en papel que hagas hoy es la misma estructura.
Cada bloque del wireframe responde una pregunta del visitante, en orden: "¿Qué es esto?" → "¿Por qué debería importarme?" → "¿Esto le funcionó a alguien como yo?" → "¿Cómo lo obtengo?" → "¿Cuánto cuesta?" → "¿Y si tengo dudas?" → "Listo, hazlo ahora".
2.2. Above the fold: la regla de los 3 segundos
"Above the fold" es todo lo que el visitante ve sin hacer scroll — la primera pantalla. En esa pantalla tienes, en la práctica, unos 3 segundos para que la persona decida si sigue leyendo o se va.
Para que esos 3 segundos funcionen, tu sección hero debe responder de un solo vistazo:
- ¿Qué es esto? — un título claro, no un eslogan vago ("Bienvenido a nuestra empresa" no dice nada).
- ¿Para quién es? — el subtítulo conecta con la necesidad específica del visitante.
- ¿Qué hago ahora? — un botón de acción visible, con contraste, sin necesidad de scroll.
Ejemplo concreto — taller mecánico en Bucaramanga:
Título: "Bienvenidos a Taller Don Andrés"
Subtítulo: "Más de 12 años de experiencia"
CTA: (no hay, o está abajo del scroll)
Título: "Tu carro listo el mismo día — Taller Don Andrés, Bucaramanga"
Subtítulo: "Diagnóstico gratuito · Garantía de 30 días · Abierto sábados"
CTA: Botón grande: "Escríbenos por WhatsApp"
El hero efectivo no es "más bonito" — es más específico, y la acción está disponible de inmediato.
El "fold" es el viewport del navegador: el área visible en pantalla sin hacer scroll. En un celular típico, el viewport tiene entre 600-900 píxeles de alto. Tu sección hero completa debe caber ahí — si el botón de WhatsApp queda debajo del viewport, el visitante tiene que scrollear antes de poder actuar, y muchos no lo hacen.
Al elegir o adaptar tu plantilla en Figma o Canva, activa la vista móvil y verifica que el título, el subtítulo y el botón de acción queden todos dentro de esa primera pantalla.
2.3. Diseño mobile-first: por qué empezar por el celular
La mayoría de las visitas a una landing page de un negocio local llegan desde el teléfono — alguien buscando "abierto ahora cerca de mí" casi nunca está frente a un computador. Por eso el diseño debe pensarse primero para celular, y después adaptarse a pantallas grandes (no al revés).
Principios prácticos de mobile-first:
- Una sola columna. En celular, el contenido se lee de arriba hacia abajo. Evita columnas lado a lado: en pantallas pequeñas se aplastan y se vuelven ilegibles.
- Botones grandes. Un botón de acción debe ser fácil de tocar con el pulgar — ni tan pequeño que falles, ni tan junto a otro botón que toques el equivocado.
- Texto legible sin zoom. Si alguien tiene que hacer zoom para leer tu título, perdiste antes de que lea una palabra.
- Imágenes livianas. Una foto de varios megabytes puede tardar varios segundos en cargar con datos móviles — exactamente los 3 segundos que tienes para captar la atención.
- WhatsApp como CTA principal. Para negocios locales en LatAm, un botón que abre WhatsApp directamente suele convertir mejor que un formulario de contacto tradicional — es el canal donde la gente ya está.
Desde 2019, Google usa Mobile-First Indexing: cuando su robot (Googlebot) analiza tu página para posicionarla en los resultados de búsqueda, analiza primero la versión móvil, no la de escritorio. Si tu landing se ve mal en celular, Google la penaliza en el ranking — aunque el visitante la abra desde un computador.
Esto significa que mobile-first no es solo una buena práctica de diseño: es la diferencia entre aparecer o no en Google. Lo verás aplicado directamente en el Módulo 5 (SEO on-page).
2.4. Plantillas gratuitas: no empieces de cero
No necesitas ser diseñador para tener un wireframe sólido. Existen bancos de plantillas gratuitas que ya siguen los principios de las secciones anteriores — tu trabajo es adaptarlas con tu contenido, no inventar el diseño desde cero.
| Herramienta | Qué encontrarás | Cómo usarla |
|---|---|---|
| Figma Community | Miles de plantillas de landing page gratuitas, editables | Busca "landing page mobile" en la Community, duplica el archivo a tu cuenta gratuita y reemplaza textos e imágenes |
| Canva | Plantillas de "sitio web" listas para personalizar con arrastrar y soltar | Busca "landing page" en la categoría Sitios web, elige una con estructura vertical de una sola columna |
Cómo elegir bien una plantilla:
- Verifica que tenga las secciones de la anatomía del Módulo 1 (o que sea fácil agregarlas).
- Pruébala en la vista móvil de la herramienta antes de elegirla — no todas las plantillas "bonitas" en escritorio funcionan bien en celular.
- Prefiere plantillas con poco texto de relleno y mucho espacio en blanco: es más fácil quitar que reorganizar.
Objetivo: tener un boceto — en papel, Figma o Canva — con cada sección de tu landing page definida, usando los insumos que reuniste en el Módulo 1.
- Dibuja el esqueleto — En una hoja de papel o plantilla vacía, dibuja 8 cajas verticales (una por sección). No escribas el contenido final todavía — solo etiqueta cada caja: "Hero", "Propuesta de valor", etc.
- Llena el hero primero — Usando la tabla de antes/después de la Sección 2.2 como guía, escribe: Título (beneficio + dónde), Subtítulo (2-3 razones), CTA (una sola acción), Imagen (foto real de tu negocio).
- Prueba la regla de los 3 segundos — Muéstrale tu hero a alguien que no conozca tu negocio, durante 3 segundos exactos. Pregúntale: "¿qué ofrece esto y qué se supone que haga ahora?" Si no puede responder ambas preguntas, ajusta el hero.
- Elige y adapta una plantilla — Con tu wireframe en papel como guía, busca una plantilla en Figma Community o Canva (Sección 2.4) que se parezca a tu estructura. Duplícala y empieza a reemplazar los textos de relleno del hero — el resto lo llenarás en el Módulo 3.
- Revisión mobile-first — Cambia la plantilla a vista móvil. Verifica: una sola columna, botones grandes, texto legible sin zoom, botón de WhatsApp visible sin scroll.
- Si todavía no tienes wireframe: dedica 30 minutos a dibujar el esqueleto de 8 secciones y completar el hero (Pasos 1-2 del ejercicio). Es la base de todo lo demás.
- Si ya tienes una landing page: aplica la "prueba de los 3 segundos" (Paso 3) a tu página actual con alguien que no la haya visto. Anota qué no entendió.
- En cualquier caso: elige tu plantilla de Figma o Canva esta semana, para que en el Módulo 3 ya tengas dónde escribir el copy definitivo.
- El wireframe es el esqueleto antes que la decoración — define el orden de las secciones antes de elegir colores o fuentes.
- Los primeros 3 segundos (above the fold) son los más importantes: título claro + subtítulo + CTA visible, todo sin hacer scroll.
- Diseña mobile-first — no por tendencia, sino porque Google indexa la versión móvil y la mayoría de tus visitantes llegan desde el celular.
- No empieces de cero: usa plantillas gratuitas de Figma Community o Canva como punto de partida y adapta con tu contenido.
- Un botón de WhatsApp visible above the fold, sin formulario, es el CTA con menor fricción para negocios locales en LatAm.
- ✅ Antes de avanzar al Módulo 3
- Dibujé el esqueleto de 8 secciones del wireframe (aunque sea en papel)
- Escribí mi hero completo: título con beneficio + subtítulo + CTA
- Apliqué la prueba de los 3 segundos con alguien externo y ajusté según su respuesta
- Elegí una plantilla de Figma o Canva compatible con la estructura de 8 secciones
- Revisé la plantilla en vista móvil: una columna, botones grandes, texto legible
- El botón de WhatsApp está visible above the fold en la versión móvil
| Criterio | No Aprobado (0) | Aprobado (1) | Sobresaliente (2) |
|---|---|---|---|
| 1. Wireframe completo | No tienes un esqueleto de secciones definido | Tienes las 8 secciones esbozadas, sin contenido | Tienes las 8 secciones esbozadas y el hero ya redactado |
| 2. Pasa la prueba de los 3 segundos | Nadie externo entendió el hero en 3 segundos | Entendieron el "qué", pero no el "qué hago ahora" | Entendieron qué es, para quién es, y qué hacer — todo en 3 segundos |
| 3. Plantilla mobile-first elegida | No has elegido plantilla | Elegiste una plantilla, sin revisar vista móvil | Elegiste plantilla, la revisaste en móvil y cumple una columna + botones grandes |
Aprobación: 2 de 3 criterios en "Aprobado" o superior.
Para avanzar al Módulo 3: necesitas tu wireframe con las 8 secciones definidas y una plantilla elegida — en el Módulo 3 vas a escribir el texto definitivo de cada sección.
Kit: Plantilla de Wireframe
| Archivo | Descripción |
|---|---|
| ⬇ plantilla-wireframe.md | Plantilla de wireframe en 8 secciones con guía de contenido por bloque, la prueba de los 3 segundos y enlaces a bancos de plantillas gratuitas en Figma y Canva. |