Entras en una web. Cinco segundos. Si no sabes qué venden, para quién es y qué tienes que hacer, el scroll no te va a salvar. El resto de la página existe para quien ya decidió quedarse. La mayoría no decide.
Above the fold no es una moda de 2009. Es el trozo de pantalla que se ve sin mover el pulgar. En móvil son 600–750 píxeles de altura útil, no el hero de 100vh con un titular poético y un vídeo de fondo a 4 MB. El diseño UX/UI de esa franja decide si hay sesión o hay rebote.
Este artículo concreta qué tiene que pasar above the fold web en esos primeros cinco segundos: jerarquía, prueba y un CTA que no sea teatro. Sin recetas de «impacto visual». Con el criterio que usamos en Truman cuando una home o una landing tiene que trabajar.
Qué tiene que pasar above the fold web en cinco segundos
Tres respuestas, en este orden: qué es esto, para quién, qué hago ahora. Si fallas la primera, las otras dos no se leen. Si aciertas las tres y el botón está a un tap, has comprado los siguientes treinta segundos.
10 s
ventana crítica: si la propuesta de valor no queda clara, la probabilidad de salir es muy alta
Nielsen Norman Group, How Long Do Users Stay on Web Pages? (Jakob Nielsen)
Nielsen lo documentó hace años y sigue siendo cierto: la gente hace un triaje brutal en los primeros 10–20 segundos. Lindgaard y su equipo midieron además que el juicio estético se forma en 50 milisegundos. No contradice los cinco segundos de este título: primero te aceptan o te rechazan a nivel visceral; luego deciden si el contenido les sirve. El fold tiene que ganar las dos partidas: no parecer un desastre y decir la cosa correcta.
«Above the fold» no es una línea sagrada. Cambia con el móvil, con el notch, con la barra del navegador, con si vienes de Google o de un anuncio. Diseña para el peor fold razonable (un iPhone en vertical, barra visible), no para el artboard de 1440 que enseñas en la presentación.
Jerarquía: qué se lee y qué se ignora
El ojo no lee el hero. Escanea. Titular, primer párrafo, botón, y un ancla de confianza (logo de cliente, cifra, ubicación). Todo lo demás es decorado hasta que esas cuatro piezas están resueltas.
El titular tiene que poder decirse en voz alta en una mesa. «Diseñamos experiencias memorables» no se puede decir en una mesa. «Webs y apps a medida para empresas en València» sí. En Clínica Eleya el fold no puede sonar a agencia: tiene que sonar a clínica. Especialidad, tono médico y un siguiente paso (cita, llamada, WhatsApp) que no pida fe. En Pulso Studio el fold tiene que enseñar oficio: qué tipo de trabajo, para quién, y por qué mereces seguir bajando a ver el reel.
| Elemento en el fold | Prioridad | Error habitual |
|---|---|---|
| Titular de oferta | Crítico | Slogan de marca sin verbo ni destinatario |
| Un CTA principal | Crítico | Tres botones del mismo peso: «Ver más», «Demo», «Contacto» |
| Prueba (logo, cifra, dato) | Alta | Carrusel de 20 logos que no se lee en móvil |
| Navegación | Media | Mega menú que empuja el titular fuera de pantalla |
| Vídeo de fondo / slider | Cara y rara vez útil | Autoload, texto ilegible, LCP destrozado |
Si el titular necesita un subtítulo de cuatro líneas para entenderse, el titular está mal. El subtítulo aclara; no traduce. Y el copy del botón es un verbo concreto: «Pedir cita», «Ver proyecto», «Pedir presupuesto». «Saber más» es rendirse. Si quieres profundizar en cómo se escribe eso, está en cómo escribir copy para una web que convierte.
Prueba sin teatro: un dato, no un desfile
La prueba above the fold no es un wall of fame. Es una razón para no irte. Un número que puedas defender. Un cliente reconocible. Una ubicación si el negocio es local. Una acreditación si el sector la pide.
En una clínica, «más de X pacientes» solo vale si es cierto y si el tono no parece de marketplace. A veces gana más un «equipo médico propio» o el nombre del centro bien escrito que un contador animado. En un estudio creativo, un fotograma del último encargo dice más que «+200 proyectos». No inventes métricas. Un logo bien elegido gana a una cifra hinchada.
Un CTA, no un comité de botones
El fold admite un primario y, como mucho, un secundario de menos peso («Ver trabajos», «Llamar»). Dos primarios es no haber decidido qué es una conversión. Cinco iconos de redes encima del titular es un fold diseñado por el departamento de marketing de 2014.
Si quitas el botón, ¿el visitante sabría qué se espera de él? Si la respuesta es no, el CTA no está claro: está decorando.
El destino del botón importa tanto como el texto. Un formulario de doce campos mata el click. Una landing de contacto con tres campos y contexto («te respondemos en 24 h laborables, desde València») lo sostiene. El fold promete; la página siguiente tiene que cumplir. Por eso el above the fold no se diseña aislado: se diseña con el recorrido de la landing que convierte.
El fold en móvil no es un recorte del desktop
Recortar el hero de escritorio y esperar que «ya se verá» es el error más caro. En móvil el logo, el menú hamburguesa y el padding se comen 120–160 píxeles antes de que empiece el mensaje. Si tu titular tiene 18 palabras, no cabe. Punto.
Orden de trabajo en Truman: primero el fold móvil, luego el de escritorio. No al revés. En escritorio puedes permitirte una imagen de apoyo o un segundo ancla de prueba. En móvil, cada línea extra empuja el botón a un lugar que nadie ve. El slider, además, suele ser un anti-fold: el segundo slide no existe para casi nadie y el primero tarda en pintar.
Tip técnico: el fold y el LCP son el mismo problema
El elemento LCP casi siempre vive above the fold: imagen de hero o el propio H1. Un WebP de 400 KB, un vídeo o una fuente que bloquea el titular tardan más que los cinco segundos de los que hablamos. Prioriza el LCP: imagen dimensionada, fetchpriority en el hero, texto del titular en una fuente que no llegue tarde. Un fold «bonito» que pinta a los 4,5 s ya ha perdido la partida de Nielsen antes de que el CSS termine. Velocidad no es un extra de SEO: es el prerrequisito del mensaje.
Cómo lo revisamos en un rediseño
Imprimimos (o capturamos) el fold de móvil y de desktop. Se lo enseñamos a alguien que no ha estado en las reuniones, cinco segundos, y preguntamos las tres cosas. Si falla una, se reescribe antes de tocar el resto de la home. Es más barato que un test formal y más honesto que discutir «si queda premium».
Si necesitas un vídeo de fondo para que el fold funcione, el fold no funciona. El movimiento tapa un titular que no se atreve a decir qué vendes.
En València vemos muchas homes de servicios —clínicas, estudios, despachos— que parecen campañas de marca y no un sitio al que se llega desde Google. Si estás eligiendo quién te diseña eso, el criterio no es el moodboard: cómo elegir una agencia de diseño web en Valencia empiece por si saben explicar el fold en una frase. El resto de la web se puede pulir. Los cinco segundos no.
Antes de dar por bueno un fold, verifica esto
- ¿En cinco segundos se entiende qué ofreces y para quién?
- ¿El titular se puede decir en voz alta sin explicar el subtítulo?
- ¿Hay un solo CTA primario, con verbo, visible en móvil sin scroll?
- ¿La prueba (logo, dato, ubicación) se ve sin bajar?
- ¿Has diseñado el fold en un iPhone estrecho, no solo en 1440?
- ¿El hero no es un slider ni un vídeo que retrasa el LCP?
- ¿Alguien ajeno al proyecto ha pasado el test de cinco segundos?
Preguntas frecuentes sobre el above the fold
¿Qué es el above the fold en una web?
La parte de la página visible sin hacer scroll. Cambia según el dispositivo y el navegador. En la práctica, diseña para el fold móvil más estrecho que te importa: ahí se decide si el mensaje cabe o solo cabe la decoración.
¿Cuántos segundos tiene de verdad el visitante?
El juicio visual es casi inmediato (del orden de 50 ms). La decisión de quedarse o irse se concentra en los primeros 10–20 segundos. Por eso hablamos de cinco segundos para el mensaje: es el margen honesto para entender oferta, destinatario y acción antes de que el triaje se cierre.
¿El above the fold tiene que incluir el formulario entero?
Casi nunca. Tiene que incluir el motivo para pedirlo y el botón que lleva a un formulario corto. Meter ocho campos en el hero suele bajar conversiones en móvil y ensucia la jerarquía. Excepción: búsquedas o reservas donde el campo es la acción (un hotel, un vuelo).
¿Sigue importando el fold si la gente hace scroll?
La gente hace scroll cuando ya decidió que merece la pena. El fold no sustituye al resto de la página: la habilita. Si fallas arriba, el footer perfecto no se ve. Si aciertas arriba, el resto puede argumentar con calma.
