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 | 598 |
|---|
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
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
554
Carbon Design System / 2015– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / 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 / 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
.jpg)
スイス・スタイル / 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
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
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
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
568
GitLab Pajamas / 2018– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / 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– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / 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
566
PatternFly / 2012– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / 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
544
Adobe Spectrum / 2013– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / 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– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / 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 / 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
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
482
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
484
モチーフ / 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é
485
オープンルック / 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
491
ワン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
543
GitHub Primer / 2017– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / 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– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
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
298
企業モダニズム / 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
490
メタル（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
537
リボン / 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
498
エクスプローラブル・エクスプラネーション / 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
495
スクロールテリング / 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
558
NHSデザインシステム / 2016– / Style / Design public
Pourquoi ce choixTrustWeb / UICalmTexte correspondant
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 / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
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– / 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
582
GNOME Clearlooks / 2005–2011 / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UICalmTexte correspondant
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 / 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
59
アイソタイプ / 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
225
ウルム造形大学 / 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
344
タイポロジー写真 / 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
402
メトロ / 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é
409
.jpg)
無印良品 / 1980– / Style / Branding contemporain
Pourquoi ce choixTrustWeb / UICalmTexte correspondant
Une façon de faire du ton brut de la matière la finition même d'un produit industriel. Papier non blanchi, plastique non coloré et bois non teint forment l'extérieur de l'objet, et le nom du produit quitte cette surface pour une étiquette suspendue.
Du papier non blanchi et du plastique translucide non coloré qui donnent sa couleur à l'emballage / Aucun nom ni marque imprimés sur le produit, la dénomination ne vivant que sur l'étiquette suspendue et sur celle du prix / Plusieurs lignes de petits caractères sur l'étiquette, qui expliquent la matière et sa fabrication / Une publicité qui laisse le produit petit, un paysage ou du vide occupant presque tout le cadre
570
Ubuntu Yaru / 2018– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / UITechniqueTexte correspondant
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– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / 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– / Style / Design public
Pourquoi ce choixTrustWeb / 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– / Style / Langages d'écran
Pourquoi ce choixTrustWeb / 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
24
スキューモーフィズム / 2000s–2010s / Style / Styles d'interface
Pourquoi ce choixTrustWeb / UITexte correspondant
Emprunte aux matériaux et aux outils réels leurs repères pour rendre intelligibles des interactions inconnues. Le mot désigne un principe, si bien qu’Aqua comme le métal brossé sont la forme prise par ce principe une fois mis en œuvre dans un produit précis.
Cuir, métal, papier / Ombres en relief / Métaphores du monde réel / Textures fines
58
WPAポスター / 1935–1943 / Style / Design public
Pourquoi ce choixTrustWeb / UITexte correspondant
Porte un message d’intérêt public avec ampleur et force par une imagerie simple et peu de couleurs imprimées.
Paysages simplifiés / Sans-serif grasses / Couleurs de sérigraphie / Un appel à l’action clair
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