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 |
|---|
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
Interpretado comoTrustWeb / UI
554
Carbon Design System / 2015– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
El sistema de IBM para productos empresariales con muchos datos combina una retícula estricta, la tipografía IBM Plex y componentes compactos para mantener legible el trabajo complejo.
IBM Plex y una jerarquía tipográfica marcada / Superficies de trabajo blancas o gris oscuro / Tablas densas, filtros y navegación lateral / Azul reservado para acción y foco
118
フルーエント2 / 2022– / Estilo / Microsoft UI
Por qué se acercaTrustWeb / UITechniqueCalm
Convierte en tokens el color, la tipografía, el espaciado, el radio y la profundidad, desplegando los materiales Solid, Acrylic, Mica y Smoke según su función en los productos de Microsoft.
Mica y Acrylic / Jerarquía tonal neutra / Radios de esquina suaves / Profundidad tokenizada
494
.png)
GOV.UK デザインシステム / 2012– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
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
480
アップル・デスクトップ・インターフェース / 1984–1997 / Estilo / Apple UI
Por qué se acercaCoincide el nombreTrustWeb / UITechnique
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
539
スケルトン・スクリーン / 2013– / Técnica / Estilos de interfaz
Por qué se acercaTrustWeb / UITechniqueCalm
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
42
ベントーグリッド / 2020s / Composición / Diseño de información
Por qué se acercaTrustWeb / UITechniqueCoincide el texto
Divide informaciones de distinta naturaleza en cajas independientes, ofreciendo el panorama completo de un vistazo.
Tarjetas grandes y pequeñas / Calles alineadas / Resumen en una pantalla / Módulos
1
スイス・スタイル / 1950s– / Estilo / Funcionalismo
Por qué se acercaTrustWeb / UICalmCoincide el texto
Pone el orden en primer plano y convierte la información misma en protagonista.
Retícula estricta / Tipografía sans serif / Asimetría / Fotografía objetiva
472
マテリアルデザイン / 2014– / Estilo / Google UI
Por qué se acercaTrustWeb / UITechniqueCoincide el texto
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
7
%201%E2%80%935%20(1987)%2C%20Tate%20Modern%2C%20London%2C%20UK.jpg)
ミニマリズム / 1960s– / Estilo / Funcionalismo
Por qué se acercaTrustWeb / UICalmCoincide el texto
Elimina elementos para maximizar el significado y la tensión de lo que queda.
Amplio espacio en blanco / Pocos elementos / Color contenido / Espaciado preciso
568
GitLab Pajamas / 2018– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
El lenguaje visual de GitLab conecta código, incidencias, revisión, CI/CD y seguridad dentro de un único producto DevSecOps mediante GitLab Sans y Mono, navegación persistente, listas densas y una paleta neutra matizada de morado.
GitLab Sans junto a GitLab Mono para el código / Estructura en capas con navegación izquierda y cromo de aplicación / Listas densas de incidencias, solicitudes de fusión y pipelines / Superficies blancas o carbón con morado como foco de marca
400
ルナ / 2001–2006 / Estilo / Microsoft UI
Por qué se acercaCoincide el nombreTrustWeb / UI
El aspecto de Windows XP: barra de tareas azul, botón Inicio verde, ventanas redondeadas y un fondo de pradera que repintan la gris máquina de oficina como optimismo doméstico.
La barra de tareas azul / El botón Inicio verde / Marcos redondeados / Optimismo de pradera y cielo
566
PatternFly / 2012– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
El lenguaje visual de código abierto de Red Hat para productos empresariales mantiene manejable una infraestructura compleja mediante navegación densa, vistas de datos y colores de estado estrictamente controlados.
Cabecera oscura y navegación izquierda / Tablas y formularios densos sobre superficies blancas o gris pálido / Azul para la acción principal y rojo, naranja o verde para el estado / Lista, detalle y acción mostrados en paneles coordinados
80
アスキーアート / 1960s– / Técnica / Lettering
Por qué se acercaCoincide el nombreWeb / UITechniqueCoincide el texto
Usa caracteres limitados sobre una retícula monoespaciada como píxeles, construyendo imagen y tono solo con texto.
Caracteres monoespaciados / Densidad de caracteres / Pantallas de terminal / Color único
684
秩序への回帰 / 1918–1930s / Estilo / Figurative Painting
Por qué se acercaCoincide el nombreTrustWeb / UICalm
Una tendencia internacional posterior a la Primera Guerra Mundial que retrocedió desde la fragmentación y velocidad vanguardistas hacia contorno clásico, figuras estables, naturaleza muerta y espacio legible. Conservó la simplificación moderna mientras recuperaba peso y orden sin reconstruir literalmente el pasado.
Grandes figuras estables y naturalezas muertas de contorno claro / Triángulos, horizontales y equilibrio frontal / Campos contenidos de tierra, azul y gris lima / Simplificación vanguardista conservada mientras los fragmentos vuelven a cuerpos y objetos
571
Canonical Vanilla / 2013– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
El lenguaje visual de Canonical basado en CSS unifica Ubuntu, MAAS, Juju y sus sitios y aplicaciones mediante la tipografía Ubuntu, retículas divididas, secciones con filetes y espacio generoso, optimizados para recorrer contenido técnico extenso.
Títulos grandes y finos junto a subtítulos menores en negrita con tipografía Ubuntu / Divisiones asimétricas 25/75 y 50/50 / Filetes finos sobre las secciones y amplio espacio vertical / Superficies blancas, texto oscuro y foco naranja o berenjena
534
ブリーズ / 2014– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
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
229
スキーマティック路線図 / 1933– / Composición / Diseño de información
Por qué se acercaTrustWeb / UITechniqueCalm
Renuncia a la exactitud geográfica en favor de líneas horizontales, verticales y a 45 grados con estaciones equidistantes. El diagrama del metro de Londres de Beck (1933) lo estableció como lengua común de los planos de transporte del mundo.
Líneas limitadas a 45 grados / Estaciones equidistantes / Líneas codificadas por color / Independencia de la geografía
556
SAP Fiori / 2013– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
El lenguaje de diseño de SAP basado en roles reduce los procesos empresariales a la información y las acciones que necesita cada persona y las mantiene coherentes en todos los dispositivos.
Mosaicos del launchpad organizados por rol / Barra de shell y páginas de objeto / Tablas compactas y estados semánticos / Azul sereno sobre superficies de trabajo pálidas
479
プラチナ / 1997–2001 / Estilo / Apple UI
Por qué se acercaTrustWeb / UITechniqueCoincide el texto
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
489
アドワイタ / 2011– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
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
538
.png)
ソラライズド / 2011– / Estilo / Estilos de interfaz
Por qué se acercaTrustWeb / UITechniqueCalm
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
403
ブラシドメタル / 1999–2007 / Estilo / Apple UI
Por qué se acercaTrustWeb / UITechniqueCoincide el texto
Las ventanas de metal cepillado de iTunes y Safari: una rama esqueuomórfica que expresa el propósito de una aplicación a través del material, llevando la confianza del equipo profesional al escritorio.
Superficies de metal cepillado / Detalles a modo de remaches / Metáforas de equipo técnico / Gamas tonales de gris
485
オープンルック / 1988–1990s / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCoincide el texto
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
543
GitHub Primer / 2017– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
El sistema de diseño de GitHub convierte flujos de desarrollo densos en reglas compartidas de color, tipografía, iconos, espaciado y componentes. Da prioridad al avance del trabajo frente al adorno y mantiene muchos estados y acciones en poco espacio sin renunciar a la accesibilidad ni a la adaptación entre pantallas.
Superficies neutras con enlaces azules y colores de estado contenidos / Octicons acompañados de etiquetas de acción breves / Bordes finos que separan listas, pestañas y barras laterales / Escalas constantes de tipografía y espaciado incluso con alta densidad
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