Estilos visuales de UI: flat, glassmorphism, neumorphism, neubrutalism y bento grids

Cada cierto tiempo, alguien llega al estudio con un moodboard sacado de Dribbble o de Behance, y casi siempre sabemos de qué año es. Hace unos años eran tarjetas con relieve suave, como moldeadas en plastilina gris. Después, paneles de cristal esmerilado flotando sobre degradados de colores. Luego, bordes negros gruesos, sombras duras y amarillos chillones. Y últimamente, rejillas de cajas de distintos tamaños, como una fiambrera japonesa.

No hay nada de malo en enamorarse de un estilo. Los estilos visuales son una forma de lenguaje, y cada uno dice algo distinto: cercanía, tecnología, descaro, orden, lujo. La pregunta interesante no es cuál está de moda, sino cuál de ellos habla como tu marca y cómo aplicarlo para que la interfaz siga siendo cómoda de leer y usar.

En esta guía repasamos los estilos que más vemos en proyectos y moodboards, con su origen, lo que transmiten, cómo se construyen en CSS y en qué fijarse para que funcionen.

01Un estilo visual es una decisión de marca

Los estilos de interfaz no aparecen de la nada: suelen responder a un cambio tecnológico o cultural. El esqueuomorfismo de los primeros iPhone imitaba materiales reales (cuero, madera, papel) para que una pantalla táctil resultara familiar. Cuando la gente ya sabía usarlas, el diseño plano de iOS 7 y del lenguaje Metro de Microsoft retiró todo ese decorado. Material Design, en 2014, recuperó la profundidad con sombras basadas en la elevación. Y desde entonces, los estilos se suceden con bastante rapidez, empujados en buena parte por las redes de diseñadores.

Cuando trabajamos la interfaz de una marca, el estilo sale de su personalidad y de sus valores, no del moodboard. Una firma de abogados y una marca de zapatillas pueden usar los mismos componentes, pero no deberían vestirlos igual. Por eso empezamos por la identidad de marca y, a partir de ahí, decidimos cuánto relieve, cuánta transparencia y cuánto contraste necesita su voz.

02Flat y sus herederos: la base que casi siempre funciona

El diseño plano, en su versión actual, no es tan plano. Lo que hoy vemos en la mayoría de productos bien resueltos es un flat matizado: superficies de color sólido, una o dos sombras muy suaves para indicar elevación, radios moderados y una tipografía con mucho peso en la jerarquía. Es la base de sistemas como Material 3 y de casi todas las interfaces de software profesional.

Su gran virtud es la claridad. Al no depender de efectos, el contraste es fácil de controlar, el rendimiento es excelente y la interfaz envejece despacio. Su riesgo es la falta de personalidad: muchos productos flat se parecen entre sí. La forma de darle carácter está en la tipografía, en un color con intención, en la fotografía y en el movimiento, más que en los efectos. Con un buen sistema de diseño debajo, el flat es el lienzo sobre el que cualquier otro estilo puede añadirse en dosis.

03Glassmorphism: profundidad con transparencias

El glassmorphism, bautizado así hacia 2020, imita paneles de vidrio esmerilado. Su elemento clave es el desenfoque de lo que hay detrás, que hace que el panel parezca flotar en una capa superior. Apple lo usó durante años en barras y menús de macOS e iOS, y en 2025 lo llevó mucho más lejos con Liquid Glass, un material translúcido que refracta y refleja el contenido y que hoy recorre todos sus sistemas operativos.

En CSS se construye así:

.glass {
  background: rgb(255 255 255 / 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgb(255 255 255 / 0.92); }
}

Lo que hace que el cristal funcione

• →Un fondo que merezca la pena difuminar. El efecto luce sobre fotografías, degradados o contenido con color. Sobre un fondo blanco liso, el panel parece simplemente gris.
• →Suficiente opacidad para el texto. El contenido de detrás cambia mientras se desplaza la página, y con él el contraste. Un tinte del 55 al 75 % y un desenfoque generoso mantienen el texto por encima del 4,5:1 que pide WCAG en casi cualquier situación. Conviene comprobarlo sobre la zona más clara y la más oscura del fondo.
• →Pocas capas. Un panel de cristal sobre otro panel de cristal enturbia la jerarquía y es costoso de pintar para el navegador, sobre todo en móviles modestos.
• →Una alternativa sólida. El bloque @supports del ejemplo y la preferencia de transparencia reducida de los sistemas operativos (que CSS empieza a exponer con prefers-reduced-transparency) permiten ofrecer una versión opaca a quien la necesita.

Donde más nos gusta usarlo es en elementos que flotan sobre contenido visual: una barra de navegación sobre la fotografía de un hotel, una ficha sobre un mapa, los controles de un reproductor de vídeo.

04Neumorphism: el relieve suave y su reto de contraste

El neumorphism (de new y skeuomorphism) se popularizó en Dribbble hacia 2019 y 2020. Los elementos parecen moldeados en el mismo material que el fondo, con una sombra clara arriba a la izquierda y otra oscura abajo a la derecha. El resultado es muy táctil y sereno, casi como un objeto de diseño industrial.

Su gran reto es el contraste. Como el botón y el fondo comparten color, el límite del elemento depende solo de sombras suaves, y el criterio 1.4.11 de WCAG pide un contraste de al menos 3:1 para los componentes de interfaz y sus estados. Además, un botón pulsado y uno sin pulsar se distinguen solo por invertir las sombras, algo difícil de percibir para muchas personas.

Lo que funciona es usarlo en dosis y reforzarlo:

.neu {
  background: #e6e9ef;
  border-radius: 16px;
  box-shadow: 6px 6px 12px #c3c7cf, -6px -6px 12px #ffffff;
}
.neu--pressed { box-shadow: inset 4px 4px 8px #c3c7cf, inset -4px -4px 8px #ffffff; }
.neu:focus-visible { outline: 3px solid #2f5bd3; outline-offset: 3px; }
.neu .label { color: #1f2430; }

En nuestros proyectos, si una marca pide este lenguaje, lo reservamos para piezas decorativas o controles muy concretos (un selector, un mando de volumen, una tarjeta de producto en una landing) y acompañamos cada estado con un cambio de color, icono o texto, además del cambio de sombra.

05Neubrutalism: contraste, bordes y descaro

El neubrutalism es lo contrario del cristal y del relieve: todo es franco. Bordes negros de 2 o 3 px, sombras duras desplazadas sin desenfoque, colores planos muy saturados, tipografías grandes y a veces un punto de humor. Marcas como Gumroad lo popularizaron a principios de esta década, y desde entonces lo han adoptado muchas herramientas y marcas jóvenes que quieren sonar cercanas y un poco irreverentes.

.brutal {
  background: #ffe14d;
  color: #111;
  border: 3px solid #111;
  border-radius: 8px;
  box-shadow: 5px 5px 0 #111;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.brutal:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #111; }
.brutal:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #111; }

Su gran ventaja es la accesibilidad de partida: bordes oscuros y fondos planos dan contrastes muy altos y límites claros. El trabajo está en la armonía: con tantos elementos de alto contraste, la jerarquía depende de usar el color de acento con disciplina, mantener una retícula firme y dejar suficiente espacio en blanco. Bien ordenado, transmite energía y honestidad; sin orden, puede cansar enseguida.

Un truco que usamos para domarlo: limitar la paleta a un neutro muy oscuro, un fondo claro y dos colores de acento como mucho, y reservar la sombra dura para los elementos interactivos. Así, cuando algo «salta» de la página, el usuario aprende enseguida que se puede pulsar, y el estilo se convierte en una pista de uso además de en una seña de identidad.

06Bento grids: composición modular que resume

El bento grid toma su nombre de las fiambreras japonesas con compartimentos de distintos tamaños. Es una rejilla de cajas, cada una con un contenido (una cifra, una imagen, una funcionalidad, una cita), donde el tamaño de cada caja indica su importancia. Apple lo usa a menudo para resumir las novedades de un producto, y se ha extendido a portadas, páginas de funcionalidades y paneles.

Más que un estilo visual, es un patrón de composición, y combina bien con cualquiera de los anteriores. En CSS, Grid lo resuelve de forma natural:

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; }
.bento > .hero { grid-column: span 2; grid-row: span 2; }
.bento > .wide { grid-column: span 2; }
@media (max-width: 720px) { .bento { grid-template-columns: 1fr 1fr; } .bento > .hero { grid-row: span 1; } }

Para que un bento se lea bien: una caja protagonista claramente mayor, un orden de lectura lógico (que también es el orden del HTML, para lectores de pantalla y teclado), contenido breve en cada caja y un tratamiento común de radios, rellenos y fondos. Cada caja funciona como una pequeña tarjeta, y le aplican las mismas reglas de jerarquía.

07Cómo elegir el estilo de tu interfaz

En el estudio seguimos un proceso sencillo para pasar del moodboard a una decisión:

1. 01Partir de la marca. Tres o cuatro rasgos de personalidad («sereno, experto, cercano») y comprobar qué estilos hablan así. El neubrutalism difícilmente sonará sereno; el cristal difícilmente sonará artesanal.
2. 02Pensar en el contenido. El cristal necesita imágenes ricas detrás; el bento, contenido modular; el neumorphism, superficies amplias y tranquilas.
3. 03Probar con componentes reales. Un botón, una tarjeta, un formulario y una cabecera con contenido de verdad. Ahí se ve enseguida si el estilo aguanta el uso diario o solo luce en una imagen de portada.
4. 04Medir contraste y rendimiento. Contraste de texto y de componentes según WCAG, y fluidez en un móvil de gama media.
5. 05Documentarlo como capa. Recoger el estilo en design tokens (opacidades, desenfoques, sombras, bordes), de modo que se pueda ajustar o retirar sin rehacer la interfaz.

Para tener una visión más amplia de lo que se mueve este año y de qué merece la pena adoptar, tienes también nuestra guía de tendencias de diseño web con criterio.

08La moda pasa, el criterio queda

Los estilos visuales son una herramienta expresiva maravillosa, y jugar con ellos es parte de lo que hace que el diseño de interfaces sea tan estimulante. La clave está en usarlos como una capa de expresión sobre una base sólida de tipografía, retícula, color y espacio, y en elegirlos por lo que dicen de una marca. Así, cuando el gusto cambie, la interfaz podrá renovarse sin empezar de cero.

En SIMA ayudamos a marcas a encontrar su lenguaje visual en pantalla dentro de nuestros proyectos de diseño web y experiencia digital, desde la identidad hasta el último componente de su web o su app, y siempre probando cada decisión con contenido real y personas reales. Si tienes un moodboard que te ilusiona y quieres convertirlo en una interfaz con carácter propio, escríbenos y lo exploramos juntos.