«Quiero algo moderno» es probablemente la frase que más veces he escuchado en una primera reunión. El problema es que moderno significa cosas distintas para cada persona: para unos es un degradado de colores, para otros una animación al hacer scroll, para otros simplemente que no se parezca a la web que tienen ahora.
Merece la pena separar dos cosas que se confunden a menudo. Una es la moda: recursos que hoy están en todas partes y dentro de tres años datan un proyecto con una precisión incómoda. Otra es el diseño web moderno de verdad, que tiene que ver con cómo está construida la página y aguanta bastante mejor el paso del tiempo.
Este artículo va de lo segundo.
Los cinco rasgos de un diseño web moderno
1. Una retícula que se nota aunque no se vea
Lo primero que separa un diseño trabajado de una plantilla rellenada es la retícula. No los colores: la retícula.
Un diseño moderno usa una estructura clara de columnas y un sistema de espaciado coherente, de modo que los márgenes, los saltos entre bloques y las alineaciones responden a una lógica y no a lo que quedaba bien en esa pantalla concreta. El resultado es una página que se lee con calma aunque el visitante no sepa explicar por qué.
Cuando esa estructura no existe, se nota enseguida: los bloques parecen pegados unos debajo de otros, los espacios cambian sin motivo y el conjunto transmite improvisación.
2. Tipografía con jerarquía real
La tipografía hace la mayor parte del trabajo en un diseño contemporáneo. Y no se trata de elegir una fuente bonita, sino de construir una escala.
- Pocos tamaños, con saltos claros entre ellos.
- Contraste de peso entre titular y cuerpo, no solo de tamaño.
- Un ancho de línea que permita leer sin cansarse: entre 60 y 75 caracteres funciona bien en escritorio.
- Interlineado generoso en el cuerpo de texto.
Una web con dos familias tipográficas bien usadas se ve más actual que una con seis y varios tamaños arbitrarios.
3. Espacio en blanco tratado como material
El espacio vacío no es espacio desaprovechado: es lo que da aire al contenido y dirige la mirada. En los proyectos que mejor envejecen, el espacio se decide igual que se decide un color.
Aquí aparece una tensión habitual. La tentación es llenar la primera pantalla con todo lo importante por miedo a que nadie baje. En la práctica, una primera pantalla que dice una sola cosa con claridad funciona mejor que una que intenta decir cinco.
4. Movimiento con intención
La animación es el rasgo que más rápido se degrada cuando se usa por decoración. Un diseño moderno la emplea para explicar algo: dónde estoy, qué acaba de cambiar, qué relación tiene este elemento con el anterior.
Tres reglas que aplico en cualquier proyecto con animación y 3D:
- Si al quitar la animación la página se entiende igual, probablemente sobra.
- Duraciones cortas. Por encima de medio segundo el movimiento se percibe como lentitud.
- Respetar
prefers-reduced-motion. Hay personas para las que el movimiento es un problema real, no una preferencia estética.
5. Velocidad, que también es diseño
Una web que tarda cuatro segundos en pintar el titular no es moderna, por mucho cuidado que se haya puesto en la retícula. El rendimiento forma parte de la percepción de calidad, y hoy es además un factor de posicionamiento.
Los tres puntos que más peso tienen en la práctica son el tamaño de las imágenes, la cantidad de tipografías cargadas y el número de scripts de terceros. Sobre esto escribí con más detalle en optimización de velocidad web.
Lo que envejece mal
Por contraste, estos recursos suelen datar un proyecto en poco tiempo:
- Carruseles automáticos en la portada, que además casi nadie mira más allá del primer panel.
- Efectos de paralaje aplicados a todo el documento.
- Sombras y biseles pronunciados en botones y tarjetas.
- Vídeos de fondo pesados que compiten con el texto que tienen encima.
- Fotografía de banco genérica, que hace que dos empresas del mismo sector parezcan la misma empresa.
Ninguno es un error en sí mismo. Lo que los convierte en problema es usarlos como sustituto de una idea.
Cómo saber si tu web necesita actualizarse
Una comprobación rápida, sin herramientas:
- Abre la portada en el móvil y cuenta cuántos gestos necesitas para entender a qué se dedica la empresa.
- Lee el titular en voz alta. Si podría estar en la web de cualquier competidor, el problema no es visual.
- Mira la página en una pantalla grande. Si el contenido se estira hasta ocupar todo el ancho sin control, falta retícula.
- Cronometra cuánto tarda en aparecer el primer texto legible.
Si al hacer este repaso aparecen dos o más señales, el trabajo probablemente no sea un lavado de cara sino un rediseño con la estructura revisada.
Un apunte final
Los proyectos que mejor aguantan no son los que incorporaron más recursos del momento, sino los que tenían una idea clara de qué querían decir y usaron el diseño para decirlo. Se puede comprobar en cualquier recopilación de webs premiadas de hace cinco años: las que siguen funcionando son las que apostaron por una estructura sólida y una voz propia.
Si estás valorando renovar la web de tu empresa y quieres una lectura honesta de por dónde empezar, en el diagnóstico revisamos juntos la estructura, el mensaje y las decisiones técnicas antes de hablar de diseño.
