IndexStyle

Un dictionnaire des styles du design, écrit à partir des œuvres elles-mêmes.

C'est du HTML nu. Il s'ouvre dans n'importe quel navigateur et sur n'importe quel appareil, sans application ni compte, et les machines lisent la même page.

Termes776

Dictionnaire

Cherchez un style ou décrivez ce que vous voulez créer. Les noms passent en premier ; l’usage, l’effet et le support ajoutent des alternatives.

EssayerBauhausun site de recrutement premiumune app financière fiable

24/48 affichées

Interprété commeTrustWeb / UI

482

Windows 95 Interface — Windows 95 en polonais, bureau et menu Démarrer — Wikimedia Commons / CC0

Windows 95 Interface

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

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Le langage d'écran que Microsoft a consigné dans son livre officiel de directives de 1995. Les surfaces grises sont creusées par un liseré extérieur et un liseré intérieur, si bien que la seule direction de l'ombre indique ce qui se presse. Une barre reste postée au bord inférieur de l'écran et tous les logiciels s'assemblent avec les mêmes pièces.

Des surfaces grises encadrées d'un double liseré, une ligne claire et une ligne sombre, à l'extérieur et à l'intérieur / Une barre postée au bord inférieur de l'écran, avec un bouton carré à son extrémité gauche / Une barre de titre en bleu marine uni, avec trois petits carrés groupés à son extrémité droite / Un petit texte bitmap sans lissage, une seule lettre soulignée signalant le raccourci clavier

design.mdprompt d’image

484

Motif — Écran par défaut du Motif Window Manager (mwm), 2014 — Wikimedia Commons / CC0

Motif

モチーフ / 1989– / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Motif est le langage d'interface des stations de travail UNIX, maintenu par The Open Group, normalisé sous le nom d'IEEE 1295 et porté sur plus de deux cents machines. Sa documentation officielle parle elle-même d'une apparence biseautée en trois dimensions, autrement dit chaque pièce repose sur une face grise dont les bords reçoivent une couleur claire et une couleur sombre qui la font saillir.

Une face grise éclairée sur ses bords supérieur et gauche, assombrie sur ses bords inférieur et droit, si bien que chaque pièce paraît soulevée / Tant que le contrôle est maintenu enfoncé, les deux couleurs de bord s'échangent et la pièce semble s'enfoncer / Un fin cadre rectangulaire entoure le contrôle qui reçoit à cet instant les frappes du clavier / Les barres de défilement sont des rectangles à angles vifs, avec un bouton fléché triangulaire à chaque extrémité

design.mdprompt d’image

485

OPEN LOOK — Fenêtres et menu de fenêtre de style OPEN LOOK (olvwm), 2016 — Wikimedia Commons / CC BY-SA 4.0 · © Amacbride

OPEN LOOK

オープンルック / 1988–1990s / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Le langage d'écran pour stations de travail UNIX que Sun Microsystems a publié sous forme de spécification. Il définit en parallèle une version pour affichage en noir et blanc et une version en trois dimensions, compose tous les éléments communs dans une seule linéale et pose que la couleur doit rester discrète. La fenêtre surgissante porte une punaise à son épaule gauche, et la planter laisse la fenêtre sur le plan de travail.

Une punaise à l'extrémité gauche de l'en-tête d'une fenêtre surgissante, qui une fois plantée fixe la fenêtre au plan de travail au lieu de la refermer / Trois points à la suite d'un libellé annoncent une fenêtre, un triangle en simple contour annonce un menu / La barre de défilement se divise en un ascenseur, un câble et deux ancrages de câble en haut et en bas, la partie sombre du câble indiquant la proportion visible / Le plan de travail est fait d'une trame à 50 pour cent et l'ombre des menus d'une trame à 75 pour cent

design.mdprompt d’image

491

One UI — Armen777444, écran Maintenance de l'appareil de One UI 7, 2025 — Wikimedia Commons / CC BY 4.0

One UI

ワンUI / 2018– / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UICalmTexte correspondant

Le langage de conception que Samsung a fixé pour les Galaxy. Il coupe l'écran à la hauteur que le pouce atteint le plus facilement et appelle la partie haute zone de lecture et la partie basse zone d'interaction, si bien que les titres restent en haut tandis que les boutons, les onglets et les boîtes de dialogue se rassemblent en bas. Le contenu est réuni dans des blocs aux angles très arrondis, le fond est blanc ou noir absolu et un seul bleu porte tous les accents.

Le haut de l'écran ne contient qu'un titre et du vide, sans aucune commande tactile / Textes et images sont réunis dans des blocs en forme de cartes aux angles fortement arrondis / La barre de titre n'a que deux états, déployé et replié, et ne s'arrête jamais à une hauteur intermédiaire / En thème sombre le fond devient noir absolu et seul l'accent bleu s'y pose

design.mdprompt d’image

582

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

GNOME Clearlooks

GNOME Clearlooks / 2005–2011 / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UICalmTexte correspondant

Le thème standard de GNOME 2.12 a rendu les applications GTK aimables et simples par des fenêtres gris pâle, une sélection bleue, une brillance discrète et des limites fermes.

Surfaces gris pâle et barres de sélection bleues / Reflet calme limité au sommet des boutons / Onglets et champs aux arrondis retenus / Petites icônes GNOME et hiérarchie concise à deux niveaux

design.mdprompt d’image

600

OS/2 Workplace Shell — interprétation générée par IA
Interprétation par IA, pas une référence

OS/2 Workplace Shell

OS/2 Workplace Shell / 1992–2001 / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Les dossiers, imprimantes, disques et paramètres traités avec OS/2 étaient considérés comme des objets opérationnels plutôt que des icônes isolées. Les bordures dimensionnelles, les icônes ombragées, les paramètres de la prise de notes et le glisser-déposer direct ont transformé toute la surface de travail en un environnement orienté objet.

Surfaces grises claires avec des bords dimensionnels doubles (clair et foncé) / Icônes d'objets à faible couleur dessinées depuis une vue oblique / Paramètres de la prise de notes avec des onglets empilés / Glisser-déposer direct entre les dossiers, le destructeur et les disques

design.mdprompt d’image

683

Pictures Generation — interprétation générée par IA
Interprétation par IA, pas une référence

Pictures Generation

ピクチャーズ・ジェネレーション / late 1970s–1980s / Style / Art américain d'après-guerre

Pourquoi ce choixNom correspondantTrustWeb / UITexte correspondant

Une tendance des années 1970 et 1980 qui a remplacé les images publicitaires, cinématographiques, de magazines et télévisées déjà familières grâce à la photographie, à la performance, au découpage et au texte superposé, révélant ainsi les systèmes d'auteur, de désir, de genre et de consommation.

Images photographiées ou réinterprétées avec une familiarité publicitaire ou cinématographique / Découpes agressives qui suppriment le contexte source / Texte déclaratif court sur une photographie en noir et blanc ou à couleurs limitées / Figures, poses ou produits répétés dont les différences émergent dans une série

design.mdprompt d’image

298

Corporate Modernism — Paul Rand, logo IBM à huit bandes, 1972 — Wikimedia Commons / Public domain

Corporate Modernism

企業モダニズム / 1950s–1970s / Style / Branding contemporain

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

L’âge d’or de l’identité d’entreprise établi par Rand, Chermayeff et leurs pairs : sigles géométriques, chartes graphiques sur grille et application disciplinée parlant au nom des entreprises dans la langue abstraite du modernisme.

Sigles géométriques abstraits / Chartes graphiques / Discipline d’application sur grille / La force d’une couleur unique

design.mdprompt d’image

490

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

Metal (Java Look and Feel)

メタル(Java ルック&フィール) / 1998– / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

L'apparence par défaut que Sun a conçue pour Swing, faite pour qu'un programme s'affiche de la même façon sur tous les systèmes d'exploitation. Metal était le nom de projet interne chez Sun et il est resté comme nom public. Ses marques sont les aplats bleu violet, les bordures droites d'un pixel et le refus total d'imiter la plateforme hôte.

Des barres de titre de fenêtres internes posées comme un bandeau bleu violet foncé sur un fond bleu violet pâle / Une texture fine de points et de hachures obliques imprimée dans les barres de titre et les séparateurs / Des boutons rectangulaires sans arrondi, cernés d'un filet d'un pixel bleu violet foncé / Le système hôte dessine le cadre extérieur de la fenêtre alors que tout ce qui se trouve à l'intérieur suit un autre langage visuel

design.mdprompt d’image

537

Ribbon — Ruban de style Office 2007 et onglets contextuels — Wikimedia Commons / CC BY-SA 4.0 · © Halil Şimşek P

Ribbon

リボン / 2007– / Mise en page / Microsoft UI

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

C'est un bandeau de commandes qui les range en une série d'onglets en haut de la fenêtre et remplace à la fois la barre de menus et les barres d'outils. Introduit avec Office 2007, il a reçu de Microsoft un vocabulaire officiel, onglets, groupes, onglets contextuels et galeries. Chaque commande porte un libellé et sa taille dépend de la fréquence d'usage.

Un bandeau à onglets occupe en permanence le haut de la fenêtre, sur une hauteur fixée à 48 pixels / Le bandeau est découpé en groupes nommés, le nom de chaque groupe courant le long de son bord inférieur / Les icônes de commande existent en deux tailles, 32 par 32 et 16 par 16, et seules les commandes fréquentes prennent la grande et ouvrent le groupe / Des onglets contextuels colorés apparaissent selon le type d'objet sélectionné, et le nom de cet ensemble d'onglets se termine par Tools

design.mdprompt d’image

570

Ubuntu Yaru — interprétation générée par IA
Interprétation par IA, pas une référence

Ubuntu Yaru

Ubuntu Yaru / 2018– / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Le thème par défaut d'Ubuntu, construit par la communauté, superpose aux bases Adwaita de GTK et GNOME Shell l'orange Ubuntu, des barres d'en-tête sombres et des icônes issues de Suru, distribuant fenêtres, shell, icônes, curseurs et sons comme une suite.

Corps de fenêtre clair face à une barre d'en-tête sombre / Orange Ubuntu pour sélection et focus / Icônes issues de Suru fondées sur cercles, carrés et oblongs / Contour d'un pixel, dégradé retenu et ombre inférieure

design.mdprompt d’image

559

BBC Global Experience Language — interprétation générée par IA
Interprétation par IA, pas une référence

BBC Global Experience Language

BBC GEL / 2010– / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Le langage d'expérience global de la BBC unifie actualité, vidéo, audio et produits jeunesse par une hiérarchie lisible, des contrôles médias accessibles et des composants éditoriaux réutilisables.

En-tête noir au-dessus d'un contenu blanc / Titres courts et gras / Cartes d'actualité aux ratios d'image constants / Focus, sous-titres et commandes de lecture très visibles

design.mdprompt d’image

544

Adobe Spectrum — interprétation générée par IA
Interprétation par IA, pas une référence

Adobe Spectrum

Adobe Spectrum / 2013– / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UITechniqueCalm

Le système de design transversal d'Adobe. Suivant les principes Rationnel, Humain et Ciblé, il fait varier la densité entre ordinateur et mobile tout en empêchant les interfaces riches en outils de détourner l'attention de l'œuvre.

Des surfaces neutres, la couleur vive réservée à la sélection / Icônes, typographie et bordures changeant d'échelle ensemble / Barres d'outils et panneaux de propriétés reliés par de fines séparations / Le travail créatif reste plus présent que l'interface

design.mdprompt d’image

498

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

Explorable Explanations

エクスプローラブル・エクスプラネーション / 2011– / Technique / Lecture sur le web

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Le nom que Bret Victor a donné, dans un article de mars 2011 portant ce titre, à une écriture qui enchâsse un modèle en marche dans la prose. Les nombres du texte courant portent un soulignement pointillé et, quand on les saisit pour les faire varier, la suite de la phrase et la figure d'à côté se réécrivent en même temps. Le lecteur peut ainsi secouer lui-même ce sur quoi l'argument repose.

Les nombres à l'intérieur du texte reposent sur un soulignement pointillé et passent au bleu quand on les touche / Faire glisser l'un de ces nombres réécrit d'un coup la phrase qui suit et la figure voisine / Les figures ne sont pas isolées dans un bac à sable séparé, elles se tiennent dans la continuité des paragraphes / Sans rien toucher, le texte se lit tout de même, car les valeurs par défaut donnent déjà du sens aux figures

design.mdprompt d’image

495

Scrollytelling — interprétation générée par IA
Interprétation par IA, pas une référence

Scrollytelling

スクロールテリング / 2012– / Mise en page / Lecture sur le web

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Une forme de page web où la position de lecture donne le tempo du récit. Les graphiques, les cartes et la vidéo se relaient au fil du défilement et reviennent dans le même ordre si le lecteur remonte. La recherche la range du côté de la version web du grand reportage, et son fil est soit rectiligne, soit élastique, seuls ceux qui le veulent plongeant plus profond.

Un graphique qui reste immobile à l'écran tandis qu'une seule colonne étroite de texte passe dessus / Les changements se font par l'opacité et par le déplacement de la carte, si bien que remonter les défait dans le même ordre / Photographie, vidéo et graphiques de données réunis dans un même article / Un parcours soit rectiligne, soit ouvert sur un détour facultatif plus profond dont on revient

design.mdprompt d’image

558

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

NHS Design System

NHSデザインシステム / 2016– / Style / Design public

Pourquoi ce choixTrustWeb / UICalmTexte correspondant

Le système du NHS rend l'information et les services de santé urgents calmes, directs et cohérents grâce à un langage simple, des états de focus forts et des modèles cliniques testés.

Bleu NHS et blancs généreux / Grands titres et courts paragraphes / Encadrés pour alertes et conseils de soins / Focus visible et formulaires simples

design.mdprompt d’image

560

Mozilla Protocol — interprétation générée par IA
Interprétation par IA, pas une référence

Mozilla Protocol

Mozilla Protocol / 2017– / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Le système web flexible de Mozilla privilégie le contenu et l'accessibilité mondiale plutôt que la décoration, tout en gardant la personnalité vive du web ouvert.

Grands titres noirs et blancs généreux / Larges champs de couleur vive / Billboards et cartes flexibles / Texte bref et appels à l'action explicites

design.mdprompt d’image

580

CDE Interface — interprétation générée par IA
Interprétation par IA, pas une référence

CDE Interface

CDEインターフェース / 1993–2000s / Style / Langages d'écran

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Le Common Desktop Environment a unifié les stations UNIX par des biseaux issus de Motif, un Front Panel permanent, le changement d'espace de travail et des icônes peu colorées, donnant à des matériels différents l'allure d'un même bureau.

Front Panel en boîte le long du bord inférieur / Boutons saillants et champs creux formés de doubles bords clairs et sombres / Icônes pixel peu colorées aux contours sombres / Boutons permanents pour changer d'espace de travail

design.mdprompt d’image

230

Pictogram System — Symbole AIGA/DOT « Restaurant » — Wikimedia Commons / Public domain

Pictogram System

案内用ピクトグラム / 1964– / Style / Design d'information

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Des systèmes de symboles unifiés qui nomment équipements et actions sans recourir à la langue. Tokyo 1964 systématisa les symboles du sport et de l’orientation ; la série AIGA/DOT des transports devint le standard mondial du domaine public.

Figures humaines géométrisées / Épaisseur de trait uniforme / Cohérence de système / Indépendance vis-à-vis de la langue

design.mdprompt d’image

6

Modernism — Mies van der Rohe, fauteuil Barcelona et le pavillon de Barcelone — Wikimedia Commons / CC BY-SA 4.0 · © Cl3phact0

Modernism

モダニズム / 1920s–1970s / Style / Fonctionnalisme

Pourquoi ce choixTrustWeb / UICalmTexte correspondant

Remplace l’ornement par la forme raisonnée et vise l’universalité.

Simplification / Hiérarchie claire / La fonction d’abord / Formes universelles

design.mdprompt d’image

59

Isotype — Otto Neurath et Gerd Arntz, Gesellschaft und Wirtschaft, 1930 — via gerdarntz.org

Isotype

アイソタイプ / 1920s–1940s / Mise en page / Design d'information

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Traduit la quantité en symboles répétés de taille égale, rendant la comparaison lisible avant la langue.

Pictogrammes unifiés / Répétition des signes / Axes de comparaison / Couleur restreinte

design.mdprompt d’image

225

Ulm School (HfG Ulm) — Max Bill, tabouret d'Ulm (CC BY-SA 3.0) · © Christos Vittoratos

Ulm School (HfG Ulm)

ウルム造形大学 / 1953–1968 / Style / Design industriel d'après-guerre

Pourquoi ce choixTrustWeb / UITechniqueCalm

Fondée par Max Bill en héritière du Bauhaus, l’école redéfinit le design comme science, méthode et système. Sa collaboration avec Braun fit du visage fonctionnaliste un standard mondial.

Méthode et système / Grilles et modules / Ornement exclu / Le design comme science

design.mdprompt d’image

344

Typology Photography — Bernd et Hilla Becher, Typologie (chevalements) — Wikimedia Commons / CC BY-SA 4.0 · © Vidar00

Typology Photography

タイポロジー写真 / 1959– / Style / Mouvements photographiques

Pourquoi ce choixTrustWeb / UITechniqueCalm

La méthode des Becher consiste à photographier un même type de construction dans des conditions identiques, puis à accrocher les résultats en grille. La répétition sous un ciel couvert, de face et sans personne, change les individus en types, et l’école de Düsseldorf en a fait une grammaire de la photographie contemporaine.

Présentation en grille / Lumière égale de ciel couvert / Frontalité stricte / Typification par la répétition

design.mdprompt d’image

402

Metro — Écran radio du Microsoft Zune HD — Wikimedia Commons / CC BY-SA 2.0 · © Manimecker

Metro

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

Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant

Le langage plat de Windows Phone confiait le premier rôle au caractère plutôt qu’à l’icône. Grande typographie, tuiles dynamiques en aplats et compositions qui filent hors de l’écran ont transplanté dans l’interface la clarté de la signalétique des transports, ouvrant l’ère du flat avant iOS 7.

La typographie en héros / Tuiles en aplats de couleur / Compositions filant hors champ / Le chrome éliminé

design.mdprompt d’image

Ligne éditoriale

IndexStyle ne rassemble pas tous les termes du design. Une entrée autonome doit décrire un langage visuel reconnaissable, reproductible et distinct de ses voisins. Critères éditoriaux

Revenir en haut