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.
| Termes | 776 |
|---|
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
Interprété commeTrustWeb / UI
118
フルーエント2 / 2022– / Style / Microsoft UI
Pourquoi ce choixTrustWeb / UITechniqueCalm
Tokenise couleur, typographie, espacement, rayon et profondeur, déployant les matériaux Solid, Acrylic, Mica et Smoke selon leur rôle à travers les produits Microsoft.
Mica et Acrylic / Hiérarchie tonale neutre / Rayons d’angle doux / Profondeur tokenisée
554
Carbon Design System / 2015– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueCalm
Le système d'IBM pour les produits d'entreprise riches en données associe une grille stricte, la police IBM Plex et des composants compacts afin que les tâches complexes restent lisibles.
IBM Plex et forte hiérarchie typographique / Plans de travail blancs ou gris profond / Tableaux denses, filtres et navigation latérale / Bleu réservé à l'action et au focus
539
スケルトン・スクリーン / 2013– / Technique / Styles d'interface
Pourquoi ce choixTrustWeb / UITechniqueCalm
Un traitement du chargement qui renonce à l'indicateur rotatif et montre d'abord l'écran vide, puis y verse l'information peu à peu. Luke Wroblewski l'a présenté sous ce nom en 2013, en tirant les leçons de sa propre application Polar. Il montre que quelque chose avance, plutôt que le fait de faire attendre.
Pendant le chargement, ni indicateur rotatif ni barre de progression / Là où viendront textes et images se trouvent déjà des plages unies à la dimension qu'ils occuperont / La mise en page est arrêtée avant l'arrivée des données, et rien ne bouge quand elles arrivent / L'information ne surgit pas d'un coup, chaque zone se remplit à son tour
494
.png)
GOV.UK デザインシステム / 2012– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueCalm
Le langage de conception que le Government Digital Service du gouvernement britannique publie et maintient pour les services publics. Tout tient dans une seule colonne alignée à gauche et sans ornement, composée en GDS Transport, et le bouton vert garde ses angles droits en tirant son épaisseur d'un bandeau de vert plus sombre sur son bord inférieur, s'enfonçant exactement de cette épaisseur quand on le presse. Ce qui porte le focus clavier passe au jaune avec un filet noir dessous.
Une seule colonne alignée à gauche, sans ornement, presque sans cadres et sans ombres / Un bouton vert aux angles droits avec un bandeau de vert plus sombre en bord inférieur, qui s'enfonce exactement de cette épaisseur quand on le presse / Ce qui porte le focus clavier passe au jaune, avec un filet noir tracé dessous / Les corps sautent de 48 à 36, 24, 19 puis 16px, sans rien entre eux
480
アップル・デスクトップ・インターフェース / 1984–1997 / Style / Apple UI
Pourquoi ce choixNom correspondantTrustWeb / UITechnique
Le langage d'écran de la première génération de Macintosh, qu'Apple a elle-même nommé The Apple Desktop Interface dans son livre de directives paru en 1987. Sous la contrainte d'un seul bit de noir et de blanc, il met par écrit un répertoire de formes, les demi-teintes en trame de points, les fenêtres à coins arrondis, la barre de titre faite de filets horizontaux superposés et une police bitmap grasse.
Deux valeurs seulement, le blanc et le noir, le gris étant simulé par des points noirs en damier / Les quatre coins de la fenêtre sont arrondis et plusieurs filets horizontaux fins parcourent la barre de titre / Une barre de menus fixée au bord supérieur de l'écran, la pomme d'Apple installée à son extrémité gauche / Chicago, une police bitmap grasse dont les lettres sont comprimées dans une cellule de 9×7 points
42
ベントーグリッド / 2020s / Mise en page / Design d'information
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
Répartit des informations de natures différentes en boîtes indépendantes, offrant la vue d’ensemble d’un seul regard.
Cartes grandes et petites / Gouttières alignées / Synthèse en un écran / Modules
1
スイス・スタイル / 1950s– / Style / Fonctionnalisme
Pourquoi ce choixTrustWeb / UICalmTexte correspondant
Place l’ordre au premier plan et fait de l’information elle-même le protagoniste.
Grille stricte / Caractères sans serif / Asymétrie / Photographie objective
472
マテリアルデザイン / 2014– / Style / Google UI
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
Système de conception qui ramène la métaphore physique du papier et de l'encre à des règles d'ombre et de superposition. Les éléments reçoivent une hauteur, l'ombre dit la hiérarchie, le mouvement porte une causalité physique. Il est devenu le modèle d'une conception d'interface distribuée comme système.
Hiérarchie et ombre exprimées par la hauteur / Surfaces superposées comme des feuilles de papier / Mouvement montrant la cause et l'effet / Unité d'espacement normalisée
7
%201%E2%80%935%20(1987)%2C%20Tate%20Modern%2C%20London%2C%20UK.jpg)
ミニマリズム / 1960s– / Style / Fonctionnalisme
Pourquoi ce choixTrustWeb / UICalmTexte correspondant
Retire des éléments pour maximiser le sens et la tension de ce qui reste.
Vaste espace blanc / Peu d’éléments / Couleur discrète / Espacements précis
568
GitLab Pajamas / 2018– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueCalm
Le langage d'écran de GitLab relie code, tickets, revue, CI/CD et sécurité dans un produit DevSecOps unique grâce à GitLab Sans et Mono, une navigation persistante, des listes denses et une palette neutre teintée de violet.
GitLab Sans associé à GitLab Mono pour le code / Structure en couches par navigation gauche et chrome applicatif / Listes denses de tickets, merge requests et pipelines / Surfaces blanches ou charbon avec le violet comme focus de marque
534
ブリーズ / 2014– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueCalm
Le style visuel par défaut que KDE a introduit avec Plasma 5. L'annonce le décrit elle-même comme un thème plat et très contrasté, et les figures y sont simplifiées et rapprochées du monochrome. Au lieu d'ornement, la composition typographique sert à distinguer les éléments, et une version claire et une version sombre sont livrées en paire dès le départ.
Des surfaces planes sans modelé, où la limite entre éléments tient au seul écart de couleur et de contraste / Icônes et figures ramenées vers le monochrome, avec un nombre de couleurs restreint / Le contraste entre titre et texte remplace l'ornement, et la composition typographique porte l'écran / Les mêmes figures existent en version claire et en version sombre, appariées
566
PatternFly / 2012– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueCalm
Le langage d'écran open source de Red Hat pour les produits d'entreprise rend les infrastructures complexes gérables par une navigation dense, des vues de données et une couleur d'état strictement maîtrisée.
Bandeau sombre et navigation à gauche / Tableaux et formulaires denses sur blanc ou gris pâle / Bleu pour l'action principale et rouge, orange ou vert pour l'état / Liste, détail et action dans des panneaux coordonnés
229
スキーマティック路線図 / 1933– / Mise en page / Design d'information
Pourquoi ce choixTrustWeb / UITechniqueCalm
Il abandonne l’exactitude géographique pour des lignes horizontales, verticales et à 45 degrés, aux stations régulièrement espacées. Le diagramme du métro de Londres de Beck (1933) l’imposa comme langue commune des plans de transport du monde entier.
Lignes limitées à 45 degrés / Stations régulièrement espacées / Lignes codées par couleur / Indépendance vis-à-vis de la géographie
684
秩序への回帰 / 1918–1930s / Style / Figurative Painting
Pourquoi ce choixNom correspondantTrustWeb / UICalm
Une tendance internationale post-Première Guerre mondiale qui s'est éloignée de la fragmentation et de la rapidité de l'avant-garde vers un contour classique, des figures stables, une nature morte et un espace lisible. Elle a conservé la simplification moderne tout en récupérant le poids et l'ordre plutôt qu'en reconstruisant littéralement le passé.
Figures et natures mortes stables avec un contour clair / Triangles, horizontaux et équilibre frontal / Champs de terre, bleu et gris clair / Simplification avant-gardiste conservée tout en permettant aux fragments de revenir vers les corps et les objets
489
アドワイタ / 2011– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueCalm
Adwaita est le nom que GNOME donne à son apparence par défaut, et ses directives posent qu'un même jeu de composants doit tenir en version claire, en version sombre et en version à contraste élevé. Une barre d'en-tête traverse le bord supérieur de la fenêtre, et les boutons qui s'y posent n'ont ni fond ni bordure. Les icônes sont unifiées en symboles monochromes de 16x16px.
Une seule barre d'en-tête traversant le bord supérieur de la fenêtre, organisée sur trois points d'alignement, le titre de la fenêtre occupant le centre / Les boutons de la barre d'en-tête n'ont ni fond ni bordure, seuls le symbole et le mot flottent sur la surface / Des icônes symboliques monochromes dessinées en 16x16px, aux traits principaux de 2px et aux formes vues de face, sans perspective / Une palette publiée offrant cinq paliers par teinte, dont le Blue 3 en #3584e4
543
GitHub Primer / 2017– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueCalm
Le système de design de GitHub transforme les flux de développement denses en règles communes de couleur, de typographie, d'icônes, d'espacement et de composants. Il privilégie l'avancement du travail plutôt que l'ornement et maintient de nombreux états et actions dans peu d'espace sans renoncer à l'accessibilité ni à l'adaptation aux écrans.
Des surfaces neutres, des liens bleus et des couleurs d'état retenues / Des Octicons accompagnés de libellés d'action courts / De fins filets séparant listes, onglets et barres latérales / Des degrés constants de typographie et d'espacement même à forte densité
571
Canonical Vanilla / 2013– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueCalm
Le langage d'écran CSS de Canonical unifie Ubuntu, MAAS, Juju et leurs sites et applications par la police Ubuntu, des grilles divisées, des sections réglées et de grands espaces, optimisés pour parcourir de longs contenus techniques.
Grands titres fins et sous-titres plus petits en gras dans Ubuntu / Partages asymétriques 25/75 et 50/50 / Filets fins au-dessus des sections et grand espace vertical / Surfaces blanches, texte sombre et focus orange ou aubergine
546
Ant Design / 2015– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
Un système de design qui maintient les applications web d'entreprise à faible entropie grâce à des composants et des modèles de page réutilisables. Ses valeurs — Naturel, Certain, Significatif et Évolutif — systématisent tableaux, formulaires, hiérarchie et états sans réduire la densité d'information.
Des tableaux denses composés en petit corps et filets fins / Des actions principales bleues avec des couleurs sémantiques explicites / Des formulaires, paginations, arborescences et tableaux cohérents / Une lisibilité obtenue par l'alignement et la répétition, non par un espace généreux
556
SAP Fiori / 2013– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueCalm
Le langage de conception par rôle de SAP réduit les processus d'entreprise à l'information et aux actions nécessaires à chaque personne, puis les maintient cohérents sur tous les appareils.
Tuiles de launchpad organisées par rôle / Barre de shell et pages d'objet / Tableaux compacts et états sémantiques / Bleu calme sur des surfaces de travail pâles
479
プラチナ / 1997–2001 / Style / Apple UI
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
C'est le nom qu'Apple a donné à l'apparence par défaut de Mac OS 8, livrée avec l'Appearance Manager, le cadre logiciel qui permettait de remplacer plus tard toute l'apparence. Tout est construit en gris désaturés, ce qui peut être pressé reçoit un biseau et se soulève, ce qui ne peut pas s'aplatit et se fond dans le fond. Le cadre de fenêtre devenu épais annonçait que la fenêtre se déplaçait désormais en la saisissant par n'importe quel bord.
Des fenêtres et des contrôles bâtis uniquement avec des gris désaturés / Les contrôles actifs portent un biseau et se soulèvent, les contrôles désactivés s'aplatissent et se fondent dans le gris du fond / Des cadres de fenêtre épais et moulurés cohabitent avec des boîtes de dialogue modales presque sans cadre / Une case de repli à l'extrémité droite de la barre de titre, et des menus surgissants relevés en boutons portant un double triangle
532
ゼロックス・スター・インターフェース / 1981–1990s / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
Le langage d'écran fixé par le Xerox 8010 de 1981. Dossiers, corbeilles d'arrivée et de départ, tiroirs de classement et autres fournitures de bureau apparaissent en figures munies d'un libellé, et la brochure de l'époque appelait cela un bureau électronique. Les objets à l'écran se déplacent, se copient et se jettent librement à la souris.
Chaque figure à l'écran porte un libellé, si bien que le sens ne repose jamais sur la seule image / Les figures représentent des objets d'un bureau, dossiers, corbeilles d'arrivée et de départ, tiroirs de classement / On saisit les objets avec la souris, et déplacer, copier et supprimer forment une même famille de gestes / Le tableur se présente en grille de lignes et de colonnes, les commandes qui agissent dessus étant réunies dans des menus
599
Palm OSインターフェース / 1996–2009 / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
Palm OS a transformé un petit écran monochrome, un stylet et des limites de mémoire strictes en un outil de travail de poche cohérent grâce au titre, au menu Catégorie, à la barre de commande, aux boutons matériels et à la zone d'écriture Graffiti.
Un écran monochrome à basse résolution d'environ 160 x 160 / Titre dans le coin supérieur gauche et catégorie pop-up dans le coin supérieur droit / Une barre de commande s'étendant du bord inférieur et quatre boutons d'application / Icônes, règles et zone d'entrée Graffiti à un bit
538
.png)
ソラライズド / 2011– / Style / Styles d'interface
Pourquoi ce choixTrustWeb / UITechniqueCalm
Seize couleurs pour terminal et éditeur qu'Ethan Schoonover a publiées avec toutes leurs valeurs. Elles se composent de huit tons de fond et de huit accents, et les écarts de clarté CIELAB entre les tons de fond sont symétriques, si bien que passer du fond clair au fond sombre ne change pas le régime de lecture. L'écart de luminosité est abaissé et ce sont les écarts de teinte qui distinguent les mots.
Les fonds ne sont ni noir pur ni blanc pur, l'un tire vers le bleu vert, l'autre vers la crème / L'écart de clarté entre le texte et le fond reste faible, plus doux que du noir sur blanc / Les huit accents ont une clarté presque égale et ne se distinguent que par la teinte / En passant du fond sombre au fond clair, le même accent revient avec le même rôle
403
ブラシドメタル / 1999–2007 / Style / Apple UI
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
Les fenêtres en métal brossé d’iTunes et de Safari : une branche skeuomorphe qui dit la vocation d’une application par la matière, apportant au bureau la fiabilité du matériel professionnel.
Surfaces de métal brossé / Détails façon rivets / Métaphores d’équipement / Gammes tonales de gris
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