Resumen rápido: en 2027 el diseño web deja de competir solo por la atención humana. Compite también por la de los agentes de IA que navegan, comparan y deciden por el usuario. A eso se suman tres fuerzas que ya no son opcionales: los Core Web Vitals como restricción real de diseño, la accesibilidad convertida en obligación legal en Europa, y una reacción estética contra la homogeneidad que ha traído la generación automática de webs. Las tendencias que sobrevivirán son las que resuelven una de esas cuatro presiones. El resto son capturas de pantalla bonitas.
Cómo hemos hecho esta lista (y por qué no se parece a las demás)
La mayoría de artículos de tendencias recicla la misma lista desde 2024: blobs orgánicos, gradientes, tipografía cinética, modo oscuro. Nosotros hemos hecho lo contrario: partir de lo que realmente llegó a producción en 2026 y proyectar desde ahí.
El dato que más ordena el panorama viene de una revisión de mitad de 2026 sobre doce tendencias pronosticadas en enero de ese año: la mitad envejeció bien, un cuarto prometió de más y otro cuarto no llegó nunca. Y, sobre todo, las dos tendencias que acabaron definiendo el año —las capas de legibilidad para IA y el brutalismo anti-retícula— no las había predicho nadie.
Por eso, cada tendencia de esta guía lleva tres cosas: la evidencia que la sostiene, un ejemplo real que ya está publicado y un veredicto honesto de si conviene adoptarla, vigilarla o ignorarla. Las fuentes están al final.
El contexto: qué cambió en 2026 y condiciona todo 2027
Tres cifras explican por qué el diseño web de 2027 no puede ser una evolución estética del de 2025:
- Las respuestas de IA se comieron el clic. Las AI Overviews de Google aparecen ya en torno al 48 % de las consultas rastreadas (BrightEdge, febrero de 2026). Un estudio de Pew Research sobre casi 69.000 búsquedas reales encontró que, cuando hay AI Overview, el usuario hace clic en un resultado el 8 % de las veces, frente al 15 % cuando no la hay. Solo el 1 % pincha en los enlaces de cita.
- El tráfico de referencia se desplomó. Para muchos editores, el tráfico procedente de Google cayó alrededor de un 38 % interanual, y en consultas con AI Overview la tasa de cero clics se mueve en el 80-83 %.
- El rendimiento sigue siendo el cuello de botella. Según los datos de campo de CrUX de mayo de 2026, solo el 55,9 % de los orígenes aprueba las tres Core Web Vitals a la vez. INP lo pasa el 86,6 % y CLS el 81,3 %, pero LCP se queda en el 68,6 %: la velocidad de pintado del contenido principal es, con diferencia, lo que más webs suspende.
Traducido a diseño: menos visitas, más exigentes y con menos paciencia. Cada decisión visual de 2027 tiene que justificar su coste.
Bloque 1 · La web ya no se lee solo con ojos
1. Webs diseñadas para dos públicos: personas y agentes
Es la tendencia estructural de 2027. Una parte creciente de las visitas ya no son personas navegando, sino agentes —ChatGPT, Perplexity, Copilot, los navegadores agénticos— que entran a extraer datos, comparar y, cada vez más, ejecutar acciones en nombre del usuario.
Google presentó WebMCP en preview a principios de 2026: un estándar para que una web exponga herramientas estructuradas que un agente pueda invocar, en lugar de obligarle a adivinar la interfaz haciendo ingeniería inversa del HTML. Gartner proyecta que el 40 % de las aplicaciones empresariales integrará agentes específicos a finales de 2026, frente a menos del 5 % en 2025.
Qué implica en la práctica: aparece una capa nueva en el proyecto, la capa de legibilidad máquina, con su propio presupuesto y su propio responsable. En 2026 ya se compone de:
schema.orgen JSON-LD para las entidades importantes (organización, servicio, producto, precio, FAQ, autor).llms.txten la raíz: un mapa en Markdown de qué es el sitio y qué páginas importan.agents.json/agent-card.json: qué acciones permite el sitio a un agente y bajo qué condiciones.- HTML semántico real: un solo
<h1>,<table>para tablas,<button>para botones, datos en texto y no en imagen.
Un ejemplo mínimo de llms.txt:
# Netbrain
> Agencia de diseño web, desarrollo y sistemas en Logroño (La Rioja).
## Servicios
- [Diseño web](https://www.netbrain.es/programacion/diseno-web/logrono/): diseño y desarrollo a medida.
- [Posicionamiento SEO](https://www.netbrain.es/seo-sem/logrono/): SEO técnico y de contenidos.
## Contacto
- Teléfono, dirección y horario en https://www.netbrain.es/contacto/
El criterio que aplica un agente es la confianza de extracción: si no puede localizar limpiamente las entidades y sus atributos —precio, plazo, cobertura, certificación—, marca el sitio como poco fiable y pasa al siguiente. Las webs que en 2026 no montaron esta capa desaparecieron de las AI Overviews y de las citas de ChatGPT y Perplexity.
Veredicto: adoptar ya. Es el equivalente a construir en 2010 sin pensar en Google.
2. Diseñar para ser citado, no solo para ser visitado
Si cuatro de cada cinco búsquedas con respuesta de IA terminan sin clic, el objetivo de una página cambia: ya no basta con atraer la visita, hay que ser la fuente que el modelo cita. Eso tiene consecuencias de diseño muy concretas, no solo de redacción:
- Respuesta extraíble arriba. Un párrafo de 40-60 palabras que responda la pregunta del título, antes de cualquier introducción de marca.
- Bloques autocontenidos. Cada H2 debe poder leerse aislado y seguir teniendo sentido: los modelos citan pasajes, no páginas.
- Datos en tablas y listas, con unidad, fecha y fuente. Una cifra sin fecha no se cita.
- Autoría y experiencia visibles: quién firma, con qué credenciales, cuándo se actualizó. Es E-E-A-T, pero además es lo que decide un modelo al elegir entre dos fuentes equivalentes.
Veredicto: adoptar ya. Es la tendencia con mejor relación entre esfuerzo y retorno de toda la lista.
3. Contenido estructural, no decorativo
Hay una prueba de treinta segundos que separa una web de 2027 de una de 2021: desactiva el CSS y mira la página. Si desaparecen el precio, el nombre del producto, las características o el teléfono —porque vivían dentro de una imagen, un canvas o un pseudo-elemento—, la maquetación es decorativa, no estructural. Ni un buscador, ni un lector de pantalla, ni un agente comparador podrán usarla.
Suena básico y sigue siendo el fallo más caro del comercio electrónico: fichas con la tabla de tallas como JPG, precios renderizados en imagen para «evitar el scraping» y características clave dentro de un carrusel que solo existe cuando se ejecuta JavaScript.
Veredicto: adoptar ya. Coste bajo, impacto en SEO, accesibilidad y agentes a la vez.
Bloque 2 · El rendimiento y la norma dejan de ser negociables
4. Los Core Web Vitals como restricción de diseño, no como tarea de desarrollo
El cambio cultural de 2027 es que los umbrales entran en la fase de diseño y no en la de auditoría posterior: LCP por debajo de 2,5 s, INP por debajo de 200 ms, CLS por debajo de 0,1. Si un diseño no cabe en ese presupuesto, no es un diseño válido: es un boceto.
Dos ejemplos medidos en 2026 de por qué esto mata tendencias:
- Glassmorphism. El
backdrop-filter: blur()provocó caídas de 15 a 30 % de FPS en dispositivos reales, especialmente en la gama media Android. No desapareció: se replegó. Sobrevive en barras de navegación, modales y tarjetas, y se evita en héroes a pantalla completa. - 3D con WebGL. De 800 kB a 2 MB de JavaScript antes de que el usuario vea nada. En móvil con 4G, el usuario abandona antes de que cargue.
La consecuencia práctica: el héroe de la home deja de ser un vídeo autoplay o una escena 3D y vuelve a ser una imagen optimizada y un titular, con el efecto reservado a un segundo scroll ya cargado. Lo hemos comprobado también en casa: al sustituir los vídeos de fondo de una home por imágenes, el peso bajó de unos 35 MB a 1,8 MB.
Veredicto: adoptar ya. Es el prerrequisito de todo lo demás.
5. Animación nativa del navegador: se acabó pagar en JavaScript
Esta es la buena noticia técnica de 2026 que madura en 2027. Las animaciones ligadas al scroll y las transiciones entre páginas ya son CSS nativo y multinavegador: animation-timeline con scroll() y view() alcanzó soporte base tras el respaldo de Firefox y Safari, y las View Transitions entre documentos están disponibles en los grandes motores.
Entre ambas cubren la mayoría de casos que antes exigían de 30 a 50 kB de librería de animación. Un revelado al hacer scroll que antes requería un observador en JavaScript hoy es esto:
.tarjeta {
animation: aparecer linear both;
animation-timeline: view();
animation-range: entry 10% cover 40%;
}
@keyframes aparecer {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.tarjeta { animation: none; opacity: 1; transform: none; }
}
Y una transición suave al cambiar de página, sin convertir el sitio en una SPA:
@view-transition { navigation: auto; }
A esto se suman las Speculation Rules —precargar de forma especulativa la página que el usuario probablemente visitará— y el programa Interop 2026, que ha puesto de acuerdo a los navegadores en View Transitions entre documentos, posicionamiento por anclaje, Popover API, consultas de contenedor, <dialog> y WebGPU.
Veredicto: adoptar ya. Misma sensación, menos JavaScript, mejor INP.
6. Accesibilidad: de buena práctica a obligación legal
Desde el 28 de junio de 2025 se aplica la European Accessibility Act. La referencia técnica es la norma EN 301 549, que incorpora WCAG 2.1 nivel AA, y afecta de lleno a comercio electrónico, banca, transporte, telecomunicaciones y servicios audiovisuales. En España las sanciones van desde 301 € en infracciones leves hasta el millón de euros en las muy graves, y las autoridades pueden ordenar la retirada del servicio.
El dato que convierte esto en oportunidad de negocio y no solo en riesgo: según los barómetros de accesibilidad de 2025 y varias auditorías privadas, apenas un 2 % de las webs privadas españolas analizadas cumple completamente.
Lo que WCAG 2.2 añade y que más se incumple en diseños recientes:
- Foco no oculto (2.4.11): la cabecera fija que tapa el elemento enfocado al navegar con teclado es un incumplimiento, y está en casi todas las plantillas.
- Tamaño del objetivo (2.5.8): mínimo 24 × 24 píxeles CSS. Adiós a los iconos de 16 px pegados unos a otros.
- Movimiento desactivable: toda animación disparada por interacción debe poder desactivarse, y el sistema debe respetar
prefers-reduced-motion. - Reflow con texto ampliado: el diseño debe aguantar que el usuario agrande la tipografía sin que se rompa ni aparezca scroll horizontal.
La consecuencia en el proceso: la entrega de diseño deja de ser un mockup estático. Se entrega cómo se comporta el layout con el texto al 200 %, con áreas seguras, en contenedor estrecho y con el foco visible.
Veredicto: adoptar ya. Es la única tendencia de la lista con multa asociada.
Bloque 3 · La estética: diferenciarse del ruido
7. El bento grid ya es el suelo, no el techo
La retícula modular de tarjetas —el bento— ganó: es el patrón estructural por defecto. Está en las páginas de producto de Apple, en el sitio de Google Pixel, en Microsoft, en Spotify y prácticamente en toda startup que se presentó en 2026. Funciona: se le atribuye en torno a un 23 % más de profundidad de scroll frente a la retícula clásica de doce columnas, porque cada bloque es una unidad legible por sí misma.
Precisamente por eso, en 2027 ya no diferencia a nadie. Úsalo como base sólida y busca la personalidad en otro sitio: tipografía, fotografía propia, microcopy, detalle de interacción.
Veredicto: usar, sin esperar que te distinga.
8. La reacción anti-clon: brutalismo táctil y anti-retícula
Cuando cualquiera genera una web presentable con un prompt, parecer competente deja de ser una ventaja. De ahí la contratendencia más interesante del momento: layouts deliberadamente rotos, estética de HTML crudo, tipografía brutalista a escala de héroe, monoespaciada en todas partes, retículas asimétricas, estructura expuesta y una paleta de acento contenida. Hay ya un movimiento explícito —lo llaman «anti-vibe coding»— contra la mediocridad homogénea generada por IA.
Dónde verlo publicado: la portada de v0.app, la herramienta de generación de interfaces de Vercel —blanco y negro, tipografía monoespaciada y un único campo de texto—, y buena parte de los lanzamientos de SaaS independientes. La idea que lo resume: cuando todos se parecen a Apple, parecer distinto es la diferencia.
Su variante más cara es el brutalismo táctil: geometría cruda, contraste agresivo y texturas físicas simuladas —papel, tinta, grano, imperfección— precisamente para demostrar autoría humana.
Cuándo NO usarlo: en un embudo crítico de conversión, en una tienda con catálogo amplio o con un público poco tecnológico. El brutalismo funciona cuando la marca es el producto y el público es experto; en un ecommerce de gran volumen es una forma elegante de perder pedidos.
Veredicto: adoptar con criterio. Enorme para posicionamiento de marca, peligroso en conversión.
9. Modo oscuro y sistemas de tokens: el trabajo está debajo
Más del 82 % de los usuarios de smartphone usa al menos una aplicación en modo oscuro, y se observan sesiones alrededor de un 18 % más largas en sitios que lo respetan. Ya no es un extra: es una expectativa.
La trampa, comprobada en producción, es que el trabajo real no es el CSS, es el sistema de diseño: hace falta un sistema de tokens que cubra todos los estados de todos los componentes en los dos temas —hover, foco, deshabilitado, error, sobre imagen—. Los equipos que en 2026 lo abordaron como «un par de variables» se encontraron con el doble de esfuerzo del previsto.
La buena noticia es que el navegador ayuda cada vez más: Interop 2026 incluye contrast-color(), que calcula automáticamente un color de texto con contraste suficiente sobre un fondo dado.
Veredicto: adoptar, presupuestando el sistema de tokens, no solo la paleta.
10. Tipografía cinética: espectacular en el portfolio, rara en producción
Lleva tres años encabezando listas de tendencias y sigue sin generalizarse, por razones que no van a desaparecer en 2027: pelea con los lectores de pantalla, pelea con los rastreadores y suele introducir desplazamiento de layout que arruina el CLS.
Lo que sí llega a producción: un titular de héroe animado y alguna transición entre secciones. Nunca en cuerpo de texto ni en navegación. Lo mismo vale para las formas orgánicas y los contenedores asimétricos: viven en landings de campaña y casi nunca en B2B, ecommerce o cualquier flujo crítico de conversión.
Veredicto: vigilar y dosificar. Un acento, no un idioma.
Bloque 4 · Lo experimental: lo que promete y aún no cumple
11. Personalización adaptativa: reordenar sí, reconstruir no
La promesa de 2025 —una interfaz distinta por visitante— chocó en Europa con dos muros. El primero, el consentimiento: personalizar exige flujos de permiso que destruyen la propia premisa de la personalización. Los equipos europeos han acabado en enfoques de primera parte y por cohortes, no individuales.
El segundo muro es de usabilidad y se llama prototipicidad: la investigación sobre primeras impresiones muestra que la baja complejidad visual y una estructura familiar producen valoraciones más favorables. Si cada visita reconstruye el marco, el usuario pierde el mapa mental.
El consenso razonable para 2027: personalizar el orden y el contenido dentro de un marco estable —qué caso de éxito muestro primero, qué CTA, en qué idioma— y dejar quieta la arquitectura.
Veredicto: vigilar. Útil en recomendación, sin probar en estructura.
12. 3D, WebGPU y experiencias espaciales
WebGPU —el acceso moderno a la GPU, equivalente web de Vulkan, Metal o Direct3D 12— alcanzó una base utilizable en todos los navegadores principales durante 2026 gracias a Interop. Eso abre la puerta a configuradores de producto, visores técnicos y visualización de datos pesada de verdad, y no a golpe de librería de 2 MB.
Pero la lección de WebGL sigue vigente: el 3D se queda donde la marca es la experiencia —agencias creativas, moda, portfolios, automoción, configuradores industriales—. Para el resto es coste de carga sin retorno. Y las promesas de «webs inmersivas y VR mayoritaria» que circulan en otras listas de tendencias para 2027 conviene tratarlas como lo que son: proyecciones de venta, no señales de adopción.
Veredicto: vigilar, con casos de uso muy concretos.
13. Web sostenible: se mide, todavía no se compra
Las calculadoras de huella de carbono aparecen en muchas presentaciones, pero a la hora de decidir, el peso de las imágenes, el presupuesto de JavaScript y el alojamiento se siguen eligiendo por coste y velocidad; la sostenibilidad va tercera. La buena noticia es que optimizar por velocidad optimiza por consumo: casi todo lo que hace tu web más sostenible ya lo estás haciendo por los Core Web Vitals. Véndelo como lo que es: un beneficio colateral real, no un argumento principal.
Veredicto: vigilar.
Tabla resumen: adoptar, vigilar o descartar en 2027
| Tendencia | Evidencia | Veredicto |
|---|---|---|
| Capa de legibilidad para agentes (schema, llms.txt, WebMCP) | 48 % de consultas con AI Overview; caída del 38 % en tráfico de referencia | Adoptar ya |
| Diseñar para ser citado | 8 % de clics con AI Overview frente a 15 % sin ella | Adoptar ya |
| Contenido estructural (prueba sin CSS) | Requisito de SEO, accesibilidad y agentes a la vez | Adoptar ya |
| Core Web Vitals como restricción de diseño | Solo el 55,9 % de orígenes aprueba las tres | Adoptar ya |
| Animación nativa (scroll-driven, View Transitions) | Sustituye 30-50 kB de JavaScript; Interop 2026 | Adoptar ya |
| Accesibilidad EN 301 549 / WCAG 2.1 AA | Obligatorio desde el 28-06-2025; solo ~2 % cumple | Adoptar ya |
| Bento grid | +23 % de profundidad de scroll, pero ya es el estándar | Usar como base |
| Brutalismo táctil / anti-retícula | The Browser Company, v0.dev, Toggl | Adoptar con criterio |
| Modo oscuro con sistema de tokens | 82 % de usuarios; +18 % de duración de sesión | Adoptar con presupuesto real |
| Tipografía cinética | Rompe CLS y accesibilidad | Dosificar |
| Personalización individual del layout | Consentimiento en la UE + prototipicidad | Vigilar |
| 3D / WebGPU | Base multinavegador, pero 800 kB-2 MB de coste típico | Vigilar, solo casos concretos |
| Glassmorphism intensivo | -15 a -30 % de FPS en gama media | Descartar salvo en dosis pequeñas |
| Gradientes y formas «de IA» decorativas | Coste de render sin función; además, ya no distinguen | Descartar |
Plan de 90 días para dejar tu web lista para 2027
Si solo vas a hacer una cosa de esta guía, que sea este orden. Está puesto por retorno, no por dificultad.
- Días 1-15 · Mide la realidad. Core Web Vitals de campo (no de laboratorio), rastreo completo del sitio y un repaso de Search Console separando marca de no marca. Sin línea base no sabrás si algo funcionó; si no tienes el hábito, empieza por aquí: cómo medir y analizar el tráfico web.
- Días 15-30 · Arregla el LCP. Es lo que más webs suspende. Fuera vídeos autoplay del héroe, imagen principal optimizada y precargada, JavaScript no usado al banquillo.
- Días 30-45 · Monta la capa máquina. JSON-LD de organización, servicios y FAQ;
llms.txt; y comprobar que precios y datos clave están en HTML, no en imágenes. - Días 45-60 · Auditoría de accesibilidad contra WCAG 2.1 AA, con prioridad en foco visible, tamaño de objetivo, contraste y navegación por teclado. Documenta el resultado: la declaración de accesibilidad también se pide.
- Días 60-75 · Reescribe para ser citado. Respuesta extraíble al principio de cada página importante, bloques autocontenidos, tablas con fuente y fecha, autoría visible.
- Días 75-90 · Ahora sí, la capa estética. Movimiento nativo con
prefers-reduced-motion, transiciones entre páginas y el punto de personalidad de la marca. Al final, porque es lo único que no arregla nada si lo de arriba está roto.
Preguntas frecuentes sobre las tendencias de diseño web en 2027
¿Cuál es la tendencia de diseño web más importante para 2027?
Preparar la web para que la entiendan los agentes de IA. Con las AI Overviews presentes en cerca del 48 % de las consultas y una tasa de cero clics del 80-83 % en ellas, una web que no sea legible por máquinas pierde visibilidad aunque su diseño sea impecable.
¿Sigue siendo necesario rediseñar la web cada tres años?
No por estética. Sí por norma y rendimiento: si tu web no cumple WCAG 2.1 AA ni aprueba los Core Web Vitals, el rediseño no es una cuestión de imagen, es una cuestión de riesgo legal y de visibilidad. Un sitio con un buen sistema de diseño se actualiza por capas, sin tirarlo todo.
¿Es obligatorio que mi web sea accesible en España?
Desde el 28 de junio de 2025, la European Accessibility Act obliga a un amplio conjunto de servicios digitales —comercio electrónico, banca, transporte, telecomunicaciones, audiovisual— a cumplir la norma EN 301 549, que incorpora WCAG 2.1 nivel AA. Las sanciones en España van de 301 € a un millón de euros según la gravedad.
¿El diseño brutalista funciona para cualquier negocio?
No. Funciona cuando la marca es el producto y el público es experto o técnico: software, agencias, medios, proyectos independientes. En un ecommerce de volumen o en un servicio dirigido a un público generalista, la familiaridad convierte mejor que la ruptura.
¿Hay que quitar todas las animaciones para mejorar los Core Web Vitals?
No. Hay que cambiar cómo se hacen. Las animaciones ligadas al scroll y las transiciones entre páginas ya son CSS nativo y multinavegador, y sustituyen entre 30 y 50 kB de JavaScript. El problema no es el movimiento: es pagarlo en JavaScript y en desplazamiento de layout.
¿Merece la pena invertir en 3D o realidad virtual en la web?
Solo si el producto lo exige: configuradores, visualización técnica, moda, automoción. WebGPU ya tiene base en todos los navegadores principales, pero una escena 3D sigue costando entre 800 kB y 2 MB antes de que el usuario vea nada. Fuera de esos casos, resta más de lo que suma.
Conclusión: en 2027 gana el diseño que se justifica
La lectura de fondo de todas estas tendencias es la misma. Durante quince años el diseño web compitió por atención, y el criterio era el impacto visual. En 2027 compite por confianza: la del usuario, que tiene menos paciencia; la del regulador, que ya tiene herramientas; y la de las máquinas que deciden qué fuente merece ser citada.
En Netbrain diseñamos y desarrollamos webs en Logroño con este criterio, y lo mismo aplicamos cuando trabajamos el posicionamiento SEO de un proyecto: primero lo que sostiene el resultado, después lo que se ve.
Todo lo que ayude a esas tres cosas —velocidad, estructura, accesibilidad, claridad y personalidad real— sobrevivirá a 2027. Todo lo que solo quede bien en una captura, no.
Fuentes
- Web Design Trends 2026: What Actually Held Up After Six Months — StudioMeyer
- Web Design Trends 2027: What Will Survive — and What Will Disappear — VITON13 Research
- Interop 2026 — web.dev · Announcing Interop 2026 — WebKit
- An Introduction to CSS Scroll-Driven Animations — Smashing Magazine
- Core Web Vitals Benchmarks 2026 — datos de campo CrUX, mayo de 2026
- Zero-Click Search Statistics 2026 — recopilación con el estudio de Pew Research sobre 68.879 búsquedas reales
- European Accessibility Act: sanciones y empresas afectadas · EN 301 549
- The Rise of Agentic UX — contexto de WebMCP y navegadores agénticos
- Retro and Brutalist UI Design: a 2026 Field Guide — Setproduct