Un visitante entra en tu web, la mira tres segundos y decide. No decide tu producto: decide si tu página merece otros diez segundos de su atención. Ese juicio relámpago lo gana o lo pierde el diseño, no el producto.
Hay siete principios de diseño web para conversiones que cambian ese juicio a tu favor. Ninguno es nuevo y casi todos se ignoran. Vamos con ellos, sin adornos.
1. Enfoque: una acción principal por página, no diez
Cuando el visitante tiene diez opciones claras, no elige ninguna. Se llama parálisis por decisión y se cumple cada día en tiendas, landings y homes con menú triple.
La plataforma de landings Unbounce publicó datos de más de 40.000 páginas: las que tenían un único enlace de acción convertían, de media, más del doble que las que ofrecían cinco o seis. No es magia, es que cada enlace extra compite con el que sí genera venta.
La regla práctica para tu web:
- Cada página tiene una única acción principal. Reservar, pedir presupuesto, comprar, apuntarse. Una.
- Lo demás (menú, enlaces secundarios, redes sociales) cede visualmente ante esa acción.
- Si una sección no empuja al clic principal, sobra o va a otra página.
Abre tu home y cuenta los botones por encima del fold. Si pasan de tres, ya sabes por dónde empezar.
2. Flujo: un camino de convencimiento, no un folleto
Pocas compras serias ocurren en el primer scroll. El visitante pasa por tres estados: ¿esto es para mí? → ¿puedo fiarme? → ¿lo hago ahora?. Tu página necesita una sección por cada uno.
Fíjate en cómo lo resuelve PandaDoc. Su home empieza con el botón principal (“Start free trial”), pero no lo repite una y otra vez. Justo debajo ofrece vídeo demostrativo para quien dude, después beneficios concretos, después casos de uso por sector y solo entonces vuelve al cierre. Cada sección tiene un foco propio y empuja al siguiente bloque.
Tres reglas que lo hacen funcionar:
- Orden lógico de arriba a abajo: promesa → prueba → detalle → cierre. No mezcles objeciones con beneficios.
- Una idea por sección. Si una sección intenta vender, educar y dar confianza a la vez, no hace ninguna bien.
- Anclas de acción intermedias. En páginas largas, repetir el CTA principal cada dos o tres bloques recoge a quien ya está convencido sin forzar al que no.
3. Confianza: el diseño que dice “no soy un susto”
La confianza en web es una decisión rapidísima y casi siempre inconsciente. El visitante no piensa “me fío”, simplemente no siente alarma y sigue leyendo. Eso lo construye el diseño antes que el copy.
Las piezas que más pesan:
- Prueba social concreta: testimonios con nombre y foto, reseñas externas con estrellas, logos de clientes reconocibles, menciones en prensa.
- Coherencia visual: mismo tipo de letra, mismo estilo de botón, mismo tono de fotografía en todas las páginas. Una web con tres tipografías y cuatro paletas comunica improvisación, aunque cada elemento suelto sea bonito.
- Datos verificables: “140 entregas en Valencia durante 2025” pesa más que “Amplia experiencia”. Cualquier número concreto gana a cualquier adjetivo.
Un diseño desordenado no sólo se ve peor: activa la misma alarma que un comercial que no te mira a los ojos. Y esa alarma gana siempre al argumento.
4. Atención: diseña para que el ojo vaya donde tú quieres
En cada pantalla hay una cosa más importante que las demás. El trabajo del diseño es que se note sin que el visitante tenga que buscarla.
Las palancas de jerarquía visual que tienes a mano son cuatro: tamaño, color, contraste y espacio. Los estudios clásicos de Nielsen Norman Group llevan dos décadas confirmando que el ojo sigue esas cuatro señales antes de leer cualquier palabra.
El test del ojo entornado
Coloca tu página al 25% de zoom, entorna los ojos hasta que las formas se vuelvan borrosas y mira: ¿qué destaca?. Si lo primero que ves no es el botón de acción principal, tu jerarquía visual no está funcionando. Es el truco más barato para auditar una home.
Errores típicos que matan la atención
- Botón de CTA en el mismo color del fondo o de un hero decorativo.
- Todo en negrita: si todo pesa igual, nada pesa.
- Imágenes de gran tamaño que compiten con el mensaje en vez de acompañarlo.
- Menús con diez opciones del mismo tamaño.
El CTA principal debe ser la única pieza roja en un mar azul — metafóricamente y, muchas veces, también literalmente.
5. Fricción: cada paso quitado, una venta ganada
Fricción es todo lo que el visitante tiene que hacer antes de obtener lo que venía a buscar. Y cada campo, cada paso, cada clic extra es una excusa silenciosa para cerrar la pestaña.
Reducir fricción tiene dos frentes:
- Menos campos. Si para pedir presupuesto pides teléfono, email, empresa, sector, presupuesto mensual y comentario, estás filtrando en exceso. Empieza con email y una pregunta. El resto se obtiene en la respuesta.
- Menos pasos visibles. Un formulario de tres pantallas parece “serio” al que lo diseñó; al usuario le parece una oposición. Divide solo cuando el proceso es genuinamente largo, y entonces enseña el progreso (“paso 2 de 3”) para que el visitante sepa cuánto queda.
Una variante que funciona bien para captación: ofrece un punto de entrada mínimo (“deja tu email y te enviamos el caso completo”) y pide el resto después, cuando el usuario ya ha dado el primer sí. Cada sí adicional cuesta la mitad que el primero.
6. Escasez y urgencia: el empujón al visitante dudoso
La escasez (“solo quedan 3 plazas”) y la urgencia (“oferta hasta el domingo”) son motores psicológicos que mueven al visitante que ya estaba casi convencido. No convencen al que dudaba desde el principio; rematan al que estaba a un clic.
Cuándo usarlas:
- Escasez real: stock limitado, plazas por agenda, capacidad semanal. Si los números son verdad, enséñalos sin dramatizar.
- Urgencia real: campañas con fecha de cierre, ofertas estacionales, lanzamientos con ventana corta.
- Evidencia visible del tiempo o la cantidad: temporizador de cuenta atrás, contador de plazas, barra de progreso.
La línea que no se cruza: no inventes urgencia. Un temporizador que se reinicia cada vez que el usuario recarga la página se nota a la tercera visita y destruye más confianza de la que construye cualquier conversión puntual. Si tu negocio no tiene escasez o urgencia reales, no las fabriques — trabaja el resto de principios y ya.
7. Velocidad: el principio técnico que empieza en el diseño
Un sitio que no carga no convierte, y casi nadie lo cuenta como decisión de diseño. Pero lo es: cada imagen pesada, cada vídeo autoplay, cada fuente externa extra es una decisión que toma el diseñador antes que el programador.
Los datos de Think with Google son incómodos: cuando una página móvil pasa de 1 a 3 segundos de carga, la probabilidad de abandono sube un 32%; de 1 a 5 segundos, un 90%. A partir de ese umbral, el resto de principios ya no tiene a quién convencer.
Lo que puedes hacer desde el diseño, sin reescribir el backend:
- Imágenes al peso justo: WebP o AVIF en vez de JPG pesados, dimensiones reales, nunca subir una foto de 4000 píxeles para mostrarla a 400.
- SVG para iconos y gráficos lineales: ligeros, nítidos a cualquier tamaño y sin peticiones extra.
- Menos elementos decorativos: animaciones continuas, vídeos en bucle de fondo, carruseles infinitos. Cuanto menos haya corriendo en segundo plano, antes se ve tu mensaje.
- Fuentes autoalojadas y acotadas: dos familias como máximo, solo los pesos que se usan.
La velocidad conecta con el resto: una web rápida puede permitirse ser más ambiciosa en mensaje, prueba social y urgencia. Una web lenta no, porque nadie se queda a verla. Lo desarrollamos en detalle en por qué tu web no vende aunque tenga visitas.
Los siete trabajan juntos o no trabajan
Estos principios no son siete atajos independientes. Son un sistema: si fallas en uno, los otros seis pierden fuerza.
Un CTA perfecto encima de una página que carga en ocho segundos no existe, porque nadie llega a verlo. Un titular enfocado en una web llena de tipografías distintas no convence, porque el visitante ya dudó antes del primer párrafo. Una urgencia honesta sobre un formulario de quince campos no vende, porque la fricción gana a la motivación.
El orden útil para aplicarlos, de mayor a menor impacto en la mayoría de webs:
- Velocidad — si no cargas, nada más importa.
- Enfoque — una acción principal por página.
- Atención — jerarquía visual que la señale.
- Confianza — pruebas que desactiven el miedo.
- Flujo — secciones que acompañen la decisión.
- Fricción — el menor número de pasos para llegar al sí.
- Urgencia — solo cuando es real y el resto ya está.
Si aplicas solo tres, elige los tres primeros. El retorno es inmediato y desbloquea todo lo demás. La mayoría de webs que “no venden” no tienen un problema de producto — tienen siete decisiones de diseño pendientes.