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 | 598 |
|---|
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
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
554
Carbon Design System / 2015– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible.
IBM Plex and strong type hierarchy / White or deep-gray work surfaces / Dense tables, filters and side navigation / Blue reserved for action and focus
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
.jpg)
スイス・スタイル / 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
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
568
GitLab Pajamas / 2018– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
GitLab's screen language connects code, issues, review, CI/CD and security inside one DevSecOps product through GitLab Sans and Mono, persistent navigation, dense lists and a purple-inflected neutral palette.
GitLab Sans paired with GitLab Mono for code / Layered structure built from left navigation and application chrome / Dense issue, merge-request and pipeline lists / White or charcoal surfaces with purple as brand focus
571
Canonical Vanilla / 2013– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
Canonical's CSS-based screen language unifies Ubuntu, MAAS, Juju and related sites and applications through Ubuntu type, split grids, ruled sections and generous space, optimized for scanning long technical content.
Thin large headings paired with bold smaller headings in Ubuntu type / Asymmetric 25/75 and 50/50 splits / Fine rules above sections and generous vertical space / White surfaces, dark text and orange or aubergine focus
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
566
PatternFly / 2012– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
Red Hat's open-source screen language for enterprise products keeps complex infrastructure manageable through dense navigation, data views and tightly controlled status color.
Dark masthead and left navigation / Dense tables and forms on white or pale-gray work surfaces / Blue for primary action and red, orange or green for status / List, detail and action shown in coordinated panes
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
544
Adobe Spectrum / 2013– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
Adobe's cross-application design system. Under the principles Rational, Human and Focused, it changes density between desktop and mobile while keeping tool-heavy interfaces from pulling attention away from the work itself.
Neutral surfaces with vivid color reserved for selection / Icons, type and borders scaling together / Toolbars and property panels joined by fine divisions / The creative work stays stronger than the interface
556
SAP Fiori / 2013– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCalm
SAP's role-based design language reduces enterprise processes to the information and actions each person needs, then carries them consistently across devices.
Role-based launchpad tiles / Shell bar and object pages / Compact tables and semantic status / Calm blue on pale work surfaces
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
GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior.
Neutral surfaces with blue links and restrained status colors / Octicons paired with short action labels / Thin borders separating lists, tabs and sidebars / Consistent steps of type and spacing even at high density
546
Ant Design / 2015– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCoincide el texto
A design system that keeps enterprise web applications at low entropy through reusable components and page patterns. Its values — Natural, Certain, Meaningful and Growing — systematize tables, forms, hierarchy and state without reducing information density.
Dense tables set in small type and fine rules / Blue primary actions with explicit semantic colors / Consistent forms, pagination, trees and tables / Readability achieved through alignment and repetition, not generous space
495
スクロールテリング / 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
532
ゼロックス・スター・インターフェース / 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
558
NHSデザインシステム / 2016– / Estilo / Diseño público
Por qué se acercaTrustWeb / UICalmCoincide el texto
The NHS system makes urgent health information and services calm, direct and consistent through plain language, strong focus states and tested clinical patterns.
NHS blue and generous white space / Large headings and short paragraphs / Callouts for warning and care advice / Visible focus and simple forms
580
CDEインターフェース / 1993–2000s / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCoincide el texto
The Common Desktop Environment unified UNIX workstations through Motif-derived bevels, a persistent Front Panel, workspace switching and low-color icons, making different hardware feel like one workplace.
Box-like Front Panel along the lower edge / Raised buttons and recessed fields made from paired light and dark borders / Low-color pixel icons with dark outlines / Persistent buttons for switching among workspaces
230
案内用ピクトグラム / 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
482
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
484
モチーフ / 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
491
ワン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
582
GNOME Clearlooks / 2005–2011 / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UICalmCoincide el texto
GNOME 2.12's standard theme made GTK applications friendly and simple through pale-gray windows, blue selection, restrained gloss and firm boundaries.
Pale-gray surfaces with blue selection bars / A quiet highlight only along button tops / Tabs and fields with restrained rounding / Small GNOME icons and a concise two-level hierarchy
6
モダニズム / 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
59
アイソタイプ / 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
298
企業モダニズム / 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
402
メトロ / 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
409
.jpg)
無印良品 / 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
490
メタル（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
537
リボン / 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
570
Ubuntu Yaru / 2018– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechniqueCoincide el texto
Ubuntu's community-built default theme overlays Adwaita-based GTK and GNOME Shell with Ubuntu orange, dark header bars and Suru-derived icons, distributing windows, shell, icons, cursors and sound as one suite.
Light window body contrasted with a dark header bar / Ubuntu orange for selection and focus / Suru-derived icons based on circles, squares and vertical or horizontal oblongs / One-pixel icon edge, restrained gradient and lower shadow
545
Atlassian Design System / 2012– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechnique
A system that translates the complexity of Jira and Confluence into shared tokens, content rules, spacing, grids and components. Consistency builds trust while keeping large sets of issues, documents and states navigable.
White and pale gray layers with blue primary actions / Rounded cards and lozenge-shaped status labels / Clear divisions among sidebar, table and detail pane / Color, spacing, radius and elevation controlled by tokens
557
米国Webデザインシステム / 2015– / Estilo / Diseño público
Por qué se acercaTrustWeb / UICalm
A shared system for accessible, mobile-friendly and trustworthy U.S. federal web services, built from tested public-service patterns.
White, navy and restrained federal red / Large plain headings and readable body text / Official-site banner / Clear forms, alerts and step indicators
559
BBC GEL / 2010– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechnique
BBC's global experience language unifies news, video, audio and children's products through readable hierarchy, accessible media controls and reusable editorial components.
Black header over white content / Short bold headlines / News cards with consistent image ratios / Highly visible focus, captions and playback controls
498
エクスプローラブル・エクスプラネーション / 2011– / Técnica / Lectura en la web
Por qué se acercaTrustWeb / UITechniqueCoincide el texto
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
24
スキューモーフィズム / 2000s–2010s / Estilo / Estilos de interfaz
Por qué se acercaTrustWeb / UICoincide el texto
Toma prestadas señales de materiales y herramientas reales para hacer comprensibles interacciones desconocidas. Nombra un principio, de modo que tanto Aqua como el metal cepillado son la forma que ese principio adoptó al implementarse en un producto concreto.
Cuero, metal, papel / Sombras con volumen / Metáforas del mundo real / Texturas finas
547
Shopify Polaris / 2017– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechnique
Shopify's UI framework for giving products, orders, payments and customers one commerce language. Cards and sections separate decisions, while short status and action language helps a merchant keep the store moving.
White cards stacked on a pale ground / Green used as success or forward motion / Title, status and primary action gathered at the top / Compact badges for product, order and payment states
555
Salesforce Lightning / 2015– / Estilo / Lenguajes de pantalla
Por qué se acercaTrustWeb / UITechnique
Salesforce's interface language for record-centered business work, organizing objects, actions and status into repeatable workspace patterns.
Object headers with compact metadata / Tabs, cards and activity timelines / Cloud blue with semantic status colors / Dense forms and record tables
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