IndexStyle

Un diccionario de estilos de diseño, escrito a partir de las obras mismas.

Es HTML puro. Se abre en cualquier navegador y en cualquier dispositivo, sin app y sin cuenta, y las máquinas leen la misma página.

Términos738

Diccionario

Busca por estilo o describe lo que quieres crear. Los nombres tienen prioridad; el propósito, el efecto y el medio añaden alternativas.

PruebaBauhausun sitio de empleo premiumuna app financiera fiable

24/202 mostradas

463

Renaissance — Masaccio, La Santísima Trinidad, 1425–1428 — Wikimedia Commons / Public domain

Renaissance

ルネサンス / 14th–16th century / Estilo / Estilos históricos

Movimiento que redescubrió la proporción antigua y el cuerpo humano y fijó las tres dimensiones sobre el plano mediante la perspectiva lineal. Las matemáticas se convirtieron en lengua común de la pintura y la arquitectura, y aquí quedaron establecidas las normas de los cinco siglos siguientes, la simetría, los órdenes clásicos y la proporción áurea.

Perspectiva lineal de un punto de fuga / Órdenes clásicos y simetría / Composición basada en la proporción del cuerpo / Composición triangular nítida

design.mdprompt de imagen

464

Neoclassicism — Jacques-Louis David, El juramento de los Horacios, 1784 — Wikimedia Commons / Public domain

Neoclassicism

新古典主義 / 1760s–1830s / Estilo / Estilos históricos

Movimiento que, como reacción al exceso decorativo del Rococó y estimulado por las excavaciones de Pompeya, volvió a la sencillez de la Antigüedad. El contorno es duro, el color está contenido y el tema predica la virtud cívica. Los Estados del periodo revolucionario eligieron este estilo como su propio rostro.

Contorno duro y nítido / Paleta de pocos colores / Temas y vestiduras de la Antigüedad / Espacio poco profundo, como un escenario

design.mdprompt de imagen

466

Gothic Revival — Edmund F. Arras, Cámara de los Lores, Parlamento británico, 1913 — Wikimedia Commons / Public domain

Gothic Revival

ゴシック・リヴァイヴァル / 1740s–1900s / Estilo / Estilos históricos

Movimiento que volvió a elegir deliberadamente el arco apuntado y la verticalidad medievales, en objeción a la industrialización y al clasicismo. No fue mera nostalgia. Creó la idea de que elegir un estilo es sostener una tesis sobre la moral y el carácter nacional.

Arco apuntado y énfasis en la vertical / Bóvedas de crucería y pináculos / Piedra empleada junto con hierro / Ornamento tomado de los manuscritos medievales

design.mdprompt de imagen

472

Material Design — Google, componentes de interfaz de Material Design — Wikimedia Commons / Public domain

Material Design

マテリアルデザイン / 2014– / Estilo / Google UI

Sistema de diseño que traduce la metáfora física del papel y la tinta en reglas de sombra y superposición. Los elementos reciben una altura, la sombra indica la jerarquía y el movimiento porta una causalidad física. Se convirtió en el modelo de que el diseño de interfaz se distribuya como sistema.

Jerarquía y sombra expresadas por la altura / Superficies superpuestas como hojas de papel / Movimiento que muestra causa y efecto / Unidad de espaciado normalizada

design.mdprompt de imagen

479

Platinum — Escritorio de Mac OS 8.1 y «Acerca de este Mac» — Wikimedia Commons / CC0

Platinum

プラチナ / 1997–2001 / Estilo / Apple UI

Es el nombre que Apple dio a la apariencia predeterminada de Mac OS 8 y se distribuyó junto al Appearance Manager, el marco que permitía cambiar más adelante toda la apariencia por otra. Trabaja solo con grises sin saturación, biselando y elevando lo que se puede pulsar y aplanando lo que no hasta hundirlo en el fondo. El marco grueso de la ventana era la señal de que ahora bastaba con agarrar cualquier borde para moverla.

Ventanas y controles construidos únicamente con grises sin saturación / Los controles activos llevan bisel y se elevan, mientras que los desactivados se aplanan y se hunden en el mismo gris del fondo / Marcos de ventana gruesos y modelados conviviendo con cuadros de diálogo modales que casi no tienen marco / Una caja de plegado en el extremo derecho de la barra de título, y menús emergentes elevados como botones con un doble triángulo

design.mdprompt de imagen

480

Apple Desktop Interface — Pantalla de Macintosh System 3, 1986 — Wikimedia Commons / CC0

Apple Desktop Interface

アップル・デスクトップ・インターフェース / 1984–1997 / Estilo / Apple UI

El lenguaje de pantalla de la primera generación de Macintosh, al que Apple puso el nombre de The Apple Desktop Interface en su libro de directrices de 1987. Bajo la restricción de un único bit en blanco y negro, dejó por escrito un repertorio formal, los medios tonos de trama de puntos, las ventanas de esquinas redondeadas, la barra de título hecha de filetes horizontales superpuestos y una tipografía de mapa de bits de trazo grueso.

Solo dos valores, blanco y negro, y el gris se finge con puntos negros dispuestos en damero / Las cuatro esquinas de la ventana son redondeadas y por la barra de título corren varios filetes horizontales finos / Una barra de menús fija en el borde superior de la pantalla, con la manzana de Apple en su extremo izquierdo / Chicago, una tipografía de mapa de bits de trazo grueso cuyas letras se comprimen en una celda de 9×7 puntos

design.mdprompt de imagen

482

Windows 95 Interface — Windows 95 en polaco, escritorio y menú Inicio — Wikimedia Commons / CC0

Windows 95 Interface

Windows 95 インターフェース / 1995–2001 / Estilo / Microsoft UI

El lenguaje de pantalla que Microsoft documentó en su libro oficial de directrices de 1995. Las superficies grises se tallan con una línea exterior y otra interior, de modo que solo la dirección de la sombra dice qué se puede pulsar. Una franja queda fija en el borde inferior de la pantalla y todos los programas se montan con las mismas piezas.

Superficies grises enmarcadas por un doble filo, una línea clara y otra oscura, por fuera y por dentro / Una franja fija en el borde inferior de la pantalla con un botón cuadrado en su extremo izquierdo / Una barra de título de azul marino plano con tres cuadraditos agrupados en su extremo derecho / Texto de mapa de bits pequeño y sin suavizado, con una sola letra subrayada para marcar el atajo de teclado

design.mdprompt de imagen

484

Motif — Pantalla predeterminada del Motif Window Manager (mwm), 2014 — Wikimedia Commons / CC0

Motif

モチーフ / 1989– / Estilo / Lenguajes de pantalla

Motif es el lenguaje de interfaz de las estaciones de trabajo UNIX, mantenido por The Open Group, normalizado como IEEE 1295 y llevado a más de doscientas máquinas. Su propia documentación lo llama una apariencia biselada en tres dimensiones, lo que significa que cada pieza descansa sobre una cara gris cuyos bordes reciben un color claro y otro oscuro para que todo parezca elevado.

Una cara gris iluminada por sus bordes superior e izquierdo y oscurecida por el inferior y el derecho, de modo que toda pieza parece elevada / Mientras se mantiene pulsado, los dos colores de borde se intercambian y la pieza parece hundirse / Un fino recuadro rectangular rodea el control que en ese momento recibe el teclado / Las barras de desplazamiento son rectángulos de esquinas vivas con un botón de flecha triangular en cada extremo

design.mdprompt de imagen

485

OPEN LOOK — Ventanas y menú de ventana al estilo OPEN LOOK (olvwm), 2016 — Wikimedia Commons / CC BY-SA 4.0 · © Amacbride

OPEN LOOK

オープンルック / 1988–1990s / Estilo / Lenguajes de pantalla

El lenguaje de pantalla para estaciones de trabajo UNIX que Sun Microsystems publicó como especificación. Define a la vez una versión para pantallas en blanco y negro y otra en tres dimensiones, compone todos los elementos comunes con una sola sans serif y establece que el color se use con moderación. La ventana emergente lleva una chincheta en su hombro izquierdo, y clavarla deja la ventana sobre la superficie de trabajo.

Una chincheta en el extremo izquierdo de la cabecera de una ventana emergente, que al clavarse fija la ventana al espacio de trabajo en vez de cerrarla / Tres puntos detrás de una etiqueta anuncian una ventana, y un triángulo dibujado solo con su contorno anuncia un menú / La barra de desplazamiento se reparte en un ascensor, un cable y sendos anclajes arriba y abajo, y la parte oscura del cable indica qué proporción está a la vista / La superficie de trabajo se hace con una trama al 50 por ciento y la sombra de los menús con una trama al 75 por ciento

design.mdprompt de imagen

489

Adwaita — Nathan Hadley, Configuración de GNOME 48, 2025 — Wikimedia Commons / CC BY-SA 4.0 · © Nathan Hadley (Pigeon)

Adwaita

アドワイタ / 2011– / Estilo / Lenguajes de pantalla

Adwaita es el nombre que GNOME da a su aspecto predeterminado, y sus directrices establecen que un mismo juego de componentes debe sostener la versión clara, la oscura y la de alto contraste. Una barra de cabecera cruza el borde superior de la ventana, y los botones que van sobre ella no llevan ni fondo ni borde. Los iconos se unifican como símbolos monocromos de 16x16px.

Una sola barra de cabecera cruzando el borde superior de la ventana, dispuesta sobre tres puntos de alineación, con el título de la ventana en el centro / Los botones de la barra de cabecera no tienen ni fondo ni borde, así que sobre la superficie solo flotan el símbolo y la palabra / Iconos simbólicos monocromos dibujados a 16x16px, con trazos principales de 2px y formas frontales sin perspectiva / Una paleta publicada con cinco escalones por cada matiz, entre ellos el Blue 3 en #3584e4

design.mdprompt de imagen

490

Metal (Java Look and Feel) — DavidL, aspecto Metal de Swing, 2020 — Wikimedia Commons / CC BY-SA 4.0

Metal (Java Look and Feel)

メタル（Java ルック＆フィール） / 1998– / Estilo / Lenguajes de pantalla

El aspecto predeterminado que Sun creó para Swing, pensado para que un programa se vea igual en cualquier sistema operativo. Metal era el nombre interno del proyecto en Sun y acabó siendo el nombre público. Sus señas son los planos de azul violáceo, los bordes rectos de un píxel y el rechazo total a imitar la plataforma anfitriona.

Barras de título de ventanas internas trazadas como una banda azul violácea oscura sobre un campo azul violáceo pálido / Una textura fina de puntos y trazos diagonales estampada en las barras de título y en los separadores / Botones rectangulares sin radio en las esquinas, rodeados por una línea de un píxel en azul violáceo oscuro / El sistema anfitrión dibuja el marco exterior de la ventana mientras todo lo que hay dentro sigue otro lenguaje visual

design.mdprompt de imagen

491

One UI — Armen777444, pantalla de Mantenimiento del dispositivo de One UI 7, 2025 — Wikimedia Commons / CC BY 4.0

One UI

ワンUI / 2018– / Estilo / Lenguajes de pantalla

El lenguaje de diseño que Samsung definió para los Galaxy. Corta la pantalla a la altura que el pulgar alcanza con más facilidad y llama a la parte de arriba zona de visión y a la de abajo zona de interacción, de modo que los títulos quedan altos mientras los botones, las pestañas y los diálogos se agrupan abajo. El contenido se reúne en cajas de esquinas muy redondeadas, el fondo es blanco o negro puro y un único azul carga con todos los acentos.

La parte superior de la pantalla no contiene más que un título y espacio libre, sin ningún control que se pueda tocar / El texto y las imágenes se reúnen en cajas con forma de tarjeta y esquinas muy redondeadas / La barra de título solo tiene dos estados, desplegado y plegado, y nunca se detiene en una altura intermedia / En el tema oscuro el fondo pasa a negro puro y encima solo se posa el acento azul

design.mdprompt de imagen

494

GOV.UK Design System — GDS Transport compuesto en la página de inicio de GOV.UK, 2025 — Wikimedia Commons / Public domain

GOV.UK Design System

GOV.UK デザインシステム / 2012– / Estilo / Lenguajes de pantalla

El lenguaje de diseño que el Government Digital Service del gobierno británico publica y mantiene para los servicios públicos. Todo va en una sola columna alineada a la izquierda y sin adornos, compuesta en GDS Transport, y el botón verde conserva las esquinas rectas y gana grosor con una banda de verde más oscuro en su borde inferior, hundiéndose exactamente ese grosor al pulsarlo. Lo que tiene el foco del teclado se vuelve amarillo con una raya negra debajo.

Una sola columna alineada a la izquierda y sin adornos, casi sin recuadros y sin sombras / Un botón verde de esquinas rectas con una banda de verde más oscuro en el borde inferior, que se hunde justo esa profundidad al pulsarlo / Lo que tiene el foco del teclado se vuelve amarillo con una raya negra trazada debajo / Los tamaños de letra saltan de 48 a 36, 24, 19 y 16px sin nada intermedio

design.mdprompt de imagen

495

Scrollytelling — interpretación generada por IA
Interpretación de IA, no una referencia

Scrollytelling

スクロールテリング / 2012– / Composición / Lectura en la web

Una forma de página web en la que la posición de lectura marca el avance del relato. Los gráficos, los mapas y el vídeo se relevan a medida que se desplaza la página y vuelven atrás en el mismo orden si el lector sube. La investigación la ha ordenado como la versión web del reportaje largo, y su hilo es o bien recto o bien elástico, de modo que solo baja a mayor profundidad quien lo desea.

Un gráfico que se queda quieto en la pantalla mientras una sola columna estrecha de texto pasa por encima / Los cambios se hacen con la opacidad y con el movimiento del mapa, así que al subir se deshacen en el mismo orden / Fotografía, vídeo y gráficos de datos conviviendo dentro de un mismo artículo / El recorrido es recto o se abre en un desvío opcional más profundo del que se vuelve

design.mdprompt de imagen

498

Explorable Explanations — Vi Hart y Nicky Case, Parable of the Polygons, 2014 — Wikimedia Commons / CC0

Explorable Explanations

エクスプローラブル・エクスプラネーション / 2011– / Técnica / Lectura en la web

El nombre que Bret Victor dio, en un artículo de marzo de 2011 con ese mismo título, a una escritura que incrusta un modelo en marcha dentro de la prosa. Las cifras del texto corriente llevan un subrayado de puntos y, al agarrarlas y moverlas, la frase que sigue y la figura de al lado se reescriben a la vez. Así el lector puede sacudir por sí mismo los fundamentos de lo que se afirma.

Las cifras dentro del texto corriente se apoyan en un subrayado de puntos y se vuelven azules al tocarlas / Arrastrar una de esas cifras reescribe a la vez la frase siguiente y la figura contigua / Las figuras no quedan aisladas en un recuadro aparte, sino que siguen el hilo entre un párrafo y otro / Sin tocar nada la pieza se lee igual, porque los valores iniciales ya dan sentido a las figuras

design.mdprompt de imagen

515

Talavera Poblana — Tibor de Talavera, siglo XVIII, Museo Franz Mayer — Wikimedia Commons / CC BY-SA 3.0 · © AlejandroLinaresGarcia

Talavera Poblana

タラベラ・ポブラーナ / 16th century– / Estilo / Estilos cerámicos

La loza que resultó de rehacer en Puebla la cerámica española de vidriado estannífero, pintada sobre una gruesa capa de vidriado blanco lechoso. Toma prestadas las composiciones en un solo azul de la porcelana china llegada por el Pacífico y les mezcla imágenes locales como el águila bicéfala y el quetzal, y en eso se aparta de la mayólica de la que procede.

Un vidriado blanco lechoso y espeso cubre toda la pieza y forma un resalte allí donde se acumula, en el borde y junto al pie / Un friso de compartimentos pintado en un solo azul divide el borde en secciones menudas y lo recorre entero / Entre flores y rocas de gusto chino se cuela una sola imagen local, un águila bicéfala o un quetzal / Los azulejos repiten un mismo dibujo para cubrir el muro entero, y ninguno lleva la misma presión de pincel

design.mdprompt de imagen

523

Biedermeier — Sofá Biedermeier, Austria, hacia 1815–1825, Montreal Museum of Fine Arts — Wikimedia Commons / Public domain

Biedermeier

ビーダーマイヤー / 1820s–1850s / Estilo / Mobiliario e interiores

Apodo satírico aplicado más tarde al arte y a los interiores de Europa central de la década de 1820 a la de 1850, que acabó quedándose como nombre del estilo. Se lo asocia al gusto de la clase media, y lo caracterizan unas formas francas que evitan el ornamento enrevesado y unos asuntos que retratan con sentimiento a las personas cercanas y a la naturaleza.

Muebles cuyo contorno se queda simple, sin talla ni taracea superpuestas. / En lugar de ornamento, la propia veta de la madera se adelanta al frente. / Los asuntos son personas cercanas y naturaleza, tratados con sentimiento. / Medidas contenidas, hechas para la sala de un ciudadano y no para el salón de un príncipe.

design.mdprompt de imagen

525

Empire Style — Taller Jacob, silla de Joséphine con brazos en forma de cisne, hacia 1804, Château de Malmaison — Wikimedia Commons / CC0

Empire Style

アンピール様式 / 1804–1814 / Estilo / Mobiliario e interiores

Estilo de interiores y muebles que se extendió desde Francia hacia otros países durante el imperio napoleónico, con grandes superficies lisas sobre las que se clavan herrajes dorados como puntos. Patas de león, cabezas de esfinge alada, lotos y rosetones circulares se alinean por parejas, y esa disposición simétrica lo hace parecer más pesado que el neoclasicismo anterior.

Sobre planos lisos de caoba, los herrajes dorados se clavan como puntos a intervalos regulares. / La pata delantera termina abajo en garra de león y arriba en cabeza de esfinge alada que sostiene el brazo. / Una hilera de rosetones circulares recorre a igual distancia el travesaño bajo del respaldo. / Las sillas se colocan por parejas iguales, y el asiento y el muro van cubiertos con la misma seda oscura.

design.mdprompt de imagen

527

Craftsman Style — Gustav Stickley (United Crafts), sillón, 1901, Art Institute of Chicago — Wikimedia Commons / CC BY 3.0 · © Sailko

Craftsman Style

クラフツマン様式 / 1870s–1920s / Estilo / Mobiliario e interiores

Estilo de arquitectura, interiorismo y artes decorativas que se difundió en los Estados Unidos desde alrededor de 1870 hasta alrededor de 1925. Continúa el Arts and Crafts inglés al renunciar a la cita de los estilos históricos y elegir la sencillez, pero sus portadores llegaron a incluir a reformadores sociales, educadores y asociaciones de mujeres. Aparece sobre todo en casas pequeñas como el bungalow, donde el material se muestra tal cual.

Las piezas de la estructura, como vigas y jabalcones, quedan a la vista en lugar de forrarse. / No hay capiteles, volutas ni ninguna otra pieza tomada de los estilos históricos. / Funciona a la escala de una casa pequeña como el bungalow y no en una mansión. / La madera y la piedra no se cubren de pintura, así que las superficies se hacen de veta y de color natural.

design.mdprompt de imagen

532

Xerox Star Interface — Escritorio e iconos del Xerox 8010 Star (ViewPoint) — Wikimedia Commons / CC BY 2.0 · © J R

Xerox Star Interface

ゼロックス・スター・インターフェース / 1981–1990s / Estilo / Lenguajes de pantalla

El lenguaje de pantalla que fijó el Xerox 8010 de 1981. Carpetas, bandejas de entrada y salida, cajones de archivo y otros útiles de oficina aparecen como figuras con rótulo, y el folleto de entonces llamó a ese conjunto un escritorio electrónico. Los objetos de la pantalla se mueven, se copian y se tiran libremente con el ratón.

Cada figura en pantalla lleva un rótulo de texto, de modo que el sentido nunca recae solo en el dibujo / Las figuras representan cosas de un escritorio de oficina, carpetas, bandejas de entrada y salida, cajones de archivo / Los objetos se agarran con el ratón, y mover, copiar y borrar forman una misma familia de gestos / La hoja de cálculo aparece como una retícula de filas y columnas, con las órdenes que actúan sobre ella reunidas en menús

design.mdprompt de imagen

534

Breeze — Breeze en KDE Plasma 6 (Debian Trixie) — Wikimedia Commons / CC0

Breeze

ブリーズ / 2014– / Estilo / Lenguajes de pantalla

El estilo visual por omisión que KDE introdujo junto con Plasma 5. El propio anuncio lo describe como un tema plano y de alto contraste, y ordena las figuras hacia formas simples y casi monocromas. En lugar de ornamento se apoya en la composición tipográfica para distinguir los elementos, y ofrece desde el principio una versión clara y otra oscura formando pareja.

Superficies planas sin sombreado, donde el límite entre elementos lo marcan solo la diferencia de color y el contraste / Iconos y figuras reducidos hacia el monocromo, con un recuento de colores muy corto / El contraste entre titular y texto hace el trabajo del ornamento, y la composición tipográfica sostiene la pantalla / Las mismas figuras existen en una versión clara y otra oscura formando pareja

design.mdprompt de imagen

537

Ribbon — Cinta de opciones al estilo de Office 2007 con pestañas contextuales — Wikimedia Commons / CC BY-SA 4.0 · © Halil Şimşek P

Ribbon

リボン / 2007– / Composición / Microsoft UI

Es una banda de órdenes que las dispone en una serie de pestañas en la parte superior de la ventana y sustituye a la vez a la barra de menús y a las barras de herramientas. Se introdujo con Office 2007, y Microsoft definió en sus directrices oficiales el vocabulario de pestañas, grupos, pestañas contextuales y galerías. Toda orden lleva rótulo, y su tamaño cambia según la frecuencia de uso.

En lo más alto de la ventana vive una banda que cambia por pestañas, con una altura fija de 48 píxeles / La banda se corta en grupos con nombre, y el nombre de cada grupo corre por su borde inferior / Los iconos de las órdenes vienen en dos tamaños, 32 por 32 y 16 por 16, y solo las órdenes frecuentes toman el grande y abren el grupo / Según el tipo de objeto seleccionado aparecen pestañas contextuales de color, y el nombre de ese conjunto de pestañas termina en Tools

design.mdprompt de imagen

538

Solarized — Xcode 4 con Solarized Light aplicado, 2011 — Wikimedia Commons / CC BY 2.0 · © Jason Brennan from Ottawa, Canada

Solarized

ソラライズド / 2011– / Estilo / Estilos de interfaz

Son dieciséis colores para terminal y editor que Ethan Schoonover publicó con todos sus valores a la vista. Se componen de ocho tonos de base y ocho colores de acento, y las diferencias de claridad CIELAB entre los tonos de base son simétricas, de modo que cambiar el fondo claro por el oscuro no altera el tono de la lectura. Baja la diferencia de luminosidad y distingue las palabras por la diferencia de matiz.

Los fondos no son ni negro puro ni blanco puro, uno tira a verde azulado y otro a crema / La diferencia de claridad entre texto y fondo es pequeña, y el texto se lee con un golpe más suave que el negro sobre blanco / Los ocho acentos tienen una claridad casi igual y se distinguen solo por el matiz / Al cambiar entre fondo claro y oscuro, el mismo acento reaparece con el mismo papel

design.mdprompt de imagen

539

Skeleton Screen — interpretación generada por IA
Interpretación de IA, no una referencia

Skeleton Screen

スケルトン・スクリーン / 2013– / Técnica / Estilos de interfaz

Es una forma de tratar la carga que renuncia al indicador giratorio y muestra antes la página vacía, para ir vertiendo la información poco a poco. Luke Wroblewski la presentó con este nombre en 2013, a partir de lo aprendido con su propia aplicación Polar. Enseña que algo avanza en lugar de enseñar que se está esperando.

Durante la carga no aparece ni indicador giratorio ni barra de progreso / Donde irán el texto y las imágenes ya hay campos lisos con la medida que van a ocupar / La composición queda fijada antes de que lleguen los datos, y nada se mueve cuando llegan / La información no sale de una vez, cada zona se rellena por turno

design.mdprompt de imagen

Política editorial

IndexStyle no reúne cualquier término de diseño. Una entrada independiente debe describir un lenguaje visual reconocible, reproducible y distinguible de los vecinos. Criterio editorial

Volver arriba