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érminos	776

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.

PruebaBauhaus un sitio de empleo premium una app financiera fiable

Buscar Tipo Familia Efecto Orden 24/48 mostradas

Interpretado comoTrustWeb / UI

683

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

Pictures Generation

ピクチャーズ・ジェネレーション / late 1970s–1980s / Estilo / Arte estadounidense de posguerra

Por qué se acercaCoincide el nombreTrustWeb / UICoincide el texto

Una tendencia de finales de los setenta y los ochenta que desplazó imágenes ya familiares de publicidad, cine, revistas y televisión mediante refotografía, actuación, recorte y texto superpuesto, exponiendo sistemas de autoría, deseo, género y consumo.

Imágenes refotografiadas o recreadas con familiaridad publicitaria o cinematográfica / Recorte agresivo que elimina el contexto original / Texto breve declarativo sobre fotografía monocroma o de color limitado / Figuras, poses o mercancías repetidas cuyas diferencias emergen como serie

design.md prompt de imagen

570

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

Ubuntu Yaru

Ubuntu Yaru / 2018– / Estilo / Lenguajes de pantalla

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

El tema predeterminado de Ubuntu, creado por la comunidad, superpone al GTK y GNOME Shell basados en Adwaita el naranja Ubuntu, barras de título oscuras e iconos derivados de Suru, y distribuye ventanas, shell, iconos, cursores y sonido como una sola suite.

Cuerpo de ventana claro frente a una barra de título oscura / Naranja Ubuntu para selección y foco / Iconos derivados de Suru basados en círculos, cuadrados y óvalos verticales u horizontales / Borde de icono de un píxel, degradado contenido y sombra inferior

design.md prompt de imagen

559

BBC Global Experience Language — interpretación generada por IA — Interpretación de IA, no una referencia

BBC Global Experience Language

BBC GEL / 2010– / Estilo / Lenguajes de pantalla

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

El lenguaje de experiencia global de la BBC unifica noticias, vídeo, audio y productos infantiles mediante una jerarquía legible, controles multimedia accesibles y componentes editoriales reutilizables.

Cabecera negra sobre contenido blanco / Titulares breves y gruesos / Tarjetas de noticias con proporciones de imagen constantes / Foco, subtítulos y controles de reproducción muy visibles

design.md prompt de imagen

544

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

Adobe Spectrum

Adobe Spectrum / 2013– / Estilo / Lenguajes de pantalla

Por qué se acercaTrustWeb / UITechniqueCalm

El sistema de diseño de Adobe para todas sus aplicaciones. Bajo los principios Racional, Humano y Enfocado, cambia la densidad entre escritorio y móvil mientras evita que las interfaces cargadas de herramientas resten atención a la obra.

Superficies neutras y color vivo reservado para la selección / Iconos, tipografía y bordes que cambian de escala juntos / Barras de herramientas y paneles de propiedades unidos por divisiones finas / La obra creativa conserva más presencia que la interfaz

design.md prompt de imagen

495

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

Scrollytelling

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

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

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.md prompt 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

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

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.md prompt de imagen

558

NHS Design System — NHS.UK frontend — official error-summary component snapshot — Copyright (c) 2019 NHS England / MIT

NHS Design System

NHSデザインシステム / 2016– / Estilo / Diseño público

Por qué se acercaTrustWeb / UICalmCoincide el texto

El sistema del NHS vuelve serenos, directos y coherentes los servicios y la información sanitaria urgente mediante lenguaje llano, estados de foco fuertes y patrones clínicos probados.

Azul NHS y espacio blanco generoso / Títulos grandes y párrafos breves / Destacados para avisos y consejos de atención / Foco visible y formularios sencillos

design.md prompt de imagen

560

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

Mozilla Protocol

Mozilla Protocol / 2017– / Estilo / Lenguajes de pantalla

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

El sistema web flexible de Mozilla antepone el contenido y la accesibilidad global a la decoración, sin perder una personalidad viva ligada a la web abierta.

Títulos negros y gruesos con amplios blancos / Grandes campos de color vivo / Billboards y tarjetas flexibles / Texto breve y llamadas a la acción explícitas

design.md prompt de imagen

580

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

CDE Interface

CDEインターフェース / 1993–2000s / Estilo / Lenguajes de pantalla

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

Common Desktop Environment unificó las estaciones UNIX mediante relieves derivados de Motif, un Front Panel persistente, cambio de espacios de trabajo e iconos de pocos colores, haciendo que hardware distinto pareciera un mismo lugar de trabajo.

Front Panel en forma de caja a lo largo del borde inferior / Botones elevados y campos hundidos creados con pares de bordes claros y oscuros / Iconos de píxel de pocos colores con contornos oscuros / Botones persistentes para cambiar de espacio de trabajo

design.md prompt de imagen

599

Palm OS Interface — interpretación generada por IA — Interpretación de IA, no una referencia

Palm OS Interface

Palm OSインターフェース / 1996–2009 / Estilo / Lenguajes de pantalla

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

Palm OS convirtió una diminuta pantalla monocroma, un lápiz y límites estrictos de memoria en una herramienta de bolsillo coherente mediante el título, el menú Category, la Command Bar, botones físicos y el área de escritura Graffiti.

Pantalla monocroma de baja resolución, aproximadamente 160 por 160 / Título arriba a la izquierda y selector Category arriba a la derecha / Command Bar que asciende desde el borde inferior y cuatro botones de aplicación / Iconos y reglas finos de un bit y área de entrada Graffiti

design.md prompt de imagen

230

Pictogram System — Símbolo AIGA/DOT «Restaurante» — Wikimedia Commons / Public domain

Pictogram System

案内用ピクトグラム / 1964– / Estilo / Diseño de información

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

Sistemas unificados de símbolos que nombran instalaciones y acciones sin necesidad de idioma. Tokio 1964 sistematizó los símbolos deportivos y de orientación; el repertorio de transporte AIGA/DOT se convirtió en el estándar mundial de dominio público.

Figuras humanas geometrizadas / Grosor de trazo uniforme / Coherencia como sistema / Independencia del idioma

design.md prompt 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

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

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.md prompt de imagen

484

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

Motif

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

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

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.md prompt 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

Por qué se acercaTrustWeb / UICalmCoincide el texto

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.md prompt de imagen

582

GNOME Clearlooks — Clearlooks 2.20, Nautilus and gedit interface — screenshot: KiddoKiddo (historical software example) — Wikimedia Commons / CC0

GNOME Clearlooks

GNOME Clearlooks / 2005–2011 / Estilo / Lenguajes de pantalla

Por qué se acercaTrustWeb / UICalmCoincide el texto

El tema estándar de GNOME 2.12 hizo las aplicaciones GTK amables y sencillas mediante ventanas gris pálido, selección azul, brillo contenido y límites firmes.

Superficies gris pálido con barras de selección azules / Un reflejo discreto solo en la parte superior de los botones / Pestañas y campos con redondeo contenido / Iconos GNOME pequeños y jerarquía concisa de dos niveles

design.md prompt de imagen

600

OS/2 Workplace Shell — interpretación generada por IA — Interpretación de IA, no una referencia

OS/2 Workplace Shell

OS/2 Workplace Shell / 1992–2001 / Estilo / Lenguajes de pantalla

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

OS/2 trató carpetas, impresoras, unidades y ajustes como objetos operables, no como iconos sueltos. Bordes dimensionales, iconos sombreados, ajustes en Notebook y arrastre directo hicieron del escritorio un único lugar de trabajo orientado a objetos.

Superficies gris pálido con dobles bordes dimensionales claros y oscuros / Iconos de objeto de pocos colores dibujados en vista oblicua / Ajustes Notebook con pestañas apiladas en el borde / Arrastre directo entre carpetas, trituradora y unidades

design.md prompt de imagen

546

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

Ant Design

Ant Design / 2015– / Estilo / Lenguajes de pantalla

Por qué se acercaTrustWeb / UITechnique

Un sistema de diseño que mantiene las aplicaciones web empresariales con baja entropía mediante componentes y patrones de página reutilizables. Sus valores —Natural, Cierto, Significativo y Creciente— sistematizan tablas, formularios, jerarquía y estados sin reducir la densidad de información.

Tablas densas compuestas con texto pequeño y filetes finos / Acciones principales azules y colores semánticos explícitos / Formularios, paginación, árboles y tablas coherentes / Legibilidad lograda con alineación y repetición, no con espacio abundante

design.md prompt de imagen

6

Modernism — Mies van der Rohe, silla Barcelona y el Pabellón de Barcelona — Wikimedia Commons / CC BY-SA 4.0 · © Cl3phact0

Modernism

モダニズム / 1920s–1970s / Estilo / Funcionalismo

Por qué se acercaTrustWeb / UICalmCoincide el texto

Sustituye el ornamento por la forma razonada y aspira a la universalidad.

Simplificación / Jerarquía clara / La función primero / Formas universales

design.md prompt de imagen

59

Isotype — Otto Neurath y Gerd Arntz, Gesellschaft und Wirtschaft, 1930 — vía gerdarntz.org

Isotype

アイソタイプ / 1920s–1940s / Composición / Diseño de información

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

Traduce la cantidad en símbolos repetidos de igual tamaño, haciendo la comparación legible antes que el lenguaje.

Pictogramas unificados / Repetición de signos / Ejes de comparación / Color restringido

design.md prompt de imagen

298

Corporate Modernism — Paul Rand, logotipo de IBM de ocho franjas, 1972 — Wikimedia Commons / Public domain

Corporate Modernism

企業モダニズム / 1950s–1970s / Estilo / Branding contemporáneo

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

La edad de oro de la identidad corporativa establecida por Rand, Chermayeff y sus pares: marcas geométricas, manuales de normas reticulados y aplicación disciplinada hablando por las corporaciones en el lenguaje abstracto del modernismo.

Marcas geométricas abstractas / Manuales de normas / Disciplina de aplicación reticular / La fuerza de un solo color

design.md prompt de imagen

402

Metro — Pantalla de radio del Microsoft Zune HD — Wikimedia Commons / CC BY-SA 2.0 · © Manimecker

Metro

メトロ / 2010–2015 / Estilo / Microsoft UI

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

El lenguaje plano de Windows Phone dio el papel protagonista a la tipografía en lugar de a los iconos. Tipografía grande, live tiles de color plano y composiciones que se salen del borde de la pantalla trasplantaron a la interfaz la claridad de la señalética de transporte, y abrieron la era flat antes que iOS 7.

La tipografía como protagonista / Tiles de color plano / Composiciones que desbordan la pantalla / El chrome eliminado

design.md prompt de imagen

409

MUJI — Mori Masahiro, vajilla japonesa de MUJI, 2004 — Wikimedia Commons / CC BY 3.0 · © 森正洋デザイン研究所 (Mori Masahiro Design Studio, LLC.)

MUJI

無印良品 / 1980– / Estilo / Branding contemporáneo

Por qué se acercaTrustWeb / UICalmCoincide el texto

Un modo de dejar que el color crudo del material sea el acabado de un producto industrial. Papel sin blanquear, plástico sin colorear y madera sin teñir quedan como el exterior de la cosa, y el nombre del producto sale de esa superficie y pasa a una etiqueta colgante.

Papel sin blanquear y plástico translúcido sin colorear que dan su color al envase / Ni nombre ni marca impresos sobre el producto, con la denominación solo en la etiqueta colgante y en la del precio / Varias líneas de letra pequeña en la etiqueta colgante que explican el material y su elaboración / Publicidad que deja el producto pequeño, con un paisaje o el vacío ocupando casi todo el encuadre

design.md prompt 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

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

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.md prompt 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

Por qué se acercaTrustWeb / UITechniqueCoincide el texto

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.md prompt 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

Las imágenes de referencia son siempre obras reales: fotografías y reproducciones custodiadas por museos, bibliotecas y archivos, o documentos oficiales. Nunca las creamos ni las retocamos.
Cuando no puede mostrarse una imagen de referencia legal, legible y suficientemente representativa, la entrada puede añadir una o más interpretaciones generadas por IA. Siempre se etiquetan como tales y nunca entran en la galería de referencia, en la imagen para compartir ni en la evidencia de la fuente. Hoy las llevan 151 de 776 entradas.
Cada entrada indica la fuente de la que se registró y enlaza a ella; cada URL se comprueba al añadir la entrada y en las revisiones posteriores.
Estilos, técnicas y estéticas de internet se clasifican, nunca se confunden.
Las entradas relacionadas se pueden recorrer en ambos sentidos.
Sobre los derechos de imagen, véase Sobre citas e imágenes de referencia.