Jeton de conceptionDesign Token
Un Design Token donne un nom à un seul choix de design. Par exemple : une couleur, un espace, une police ou une vitesse d'animation.
Ouvrir le guideStyles de design UI expliqués avec des exemples
Voir à quoi ressemble chaque style, quand il est utile et quand il gêne.
VarianteVariant
Une variante est une version approuvée d'un composant pour une taille, une force ou un paramètre différent.
Ouvrir le guideHiérarchie visuelleVisual Hierarchy
La hiérarchie visuelle guide ce que les gens remarquent en premier, ensuite et en dernier grâce à la taille, le contraste, l’emplacement et l’espace.
Ouvrir le guideContraste des couleursColor Contrast
Le contraste des couleurs est la différence de lumière mesurée entre le contenu et son arrière-plan proche. Il montre si le texte clé et les contours sont faciles à voir.
Ouvrir le guideTypographieTypography
La typographie est la façon dont les styles de texte sont choisis et organisés pour rendre les mots lisibles, ordonnés et conformes à la marque.
Ouvrir le guideTapez l'échelleType Scale
Une échelle de typographie est un petit ensemble planifié de tailles de texte et de hauteurs de ligne.
Ouvrir le guidePalette de couleursColor Palette
Une palette de couleurs est un ensemble de couleurs réfléchi. Chaque couleur a un rôle, un état ou une surface précis.
Ouvrir le guideÉchelle d'espacementSpacing Scale
Une Spacing Scale est un petit ensemble de tailles d'espaces. Elle crée des groupes et garde un rythme visuel régulier.
Ouvrir le guideIconographieIconography
L'iconographie est un ensemble de symboles partagés avec des apparences cohérentes et des significations claires pour les actions et les idées.
Ouvrir le guideMode sombreDark Mode
Le mode sombre modifie les surfaces, le texte, les bordures, les médias et les états pour un paramètre sombre.
Ouvrir le guideDesign ResponsiveResponsive Design
Le Design Responsive permet à la mise en page, au contenu et aux contrôles de changer pour s'adapter à l'espace et à l'appareil disponibles.
Ouvrir le guideScrimScrim
Un scrim est un calque sombre et transparent placé derrière une fenêtre superposée. Il sépare cette fenêtre et montre que la page en dessous est bloquée.
Ouvrir le guideEspacementSpacing
L'espacement est un espace vide placé intentionnellement. Il regroupe les éléments connexes, sépare les idées et donne un rythme à la page.
Ouvrir le guideMargeMargin
La marge est l'espace à l'extérieur de la bordure d'un élément. Elle maintient cet élément à l'écart des éléments de mise en page à proximité.
Ouvrir le guideRembourragePadding
Le rembourrage est l'espace à l'intérieur de la bordure d'un élément, entre son contenu et son bord.
Ouvrir le guideEspaceGap
L'espace est la distance qu'un conteneur place entre ses enfants Flexbox ou Grid. La même règle s'applique à chaque paire.
Ouvrir le guideColonne centréeCentered Column
Une colonne centrée a une largeur maximale confortable à lire et un espace qui paraît égal des deux côtés.
Ouvrir le guideGrille BentoBento Grid
Une grille bento range des blocs de différentes tailles dans un seul ensemble. Les plus grands blocs montrent ce qui compte le plus.
Ouvrir le guideTroncature de texteText Truncation
La troncature de texte coupe le texte pour gagner de l'espace. Des points de suspension montrent qu'une ou plusieurs lignes manquent.
Ouvrir le guideFormat d’imageAspect Ratio
Le format d’image indique la largeur d’un élément par rapport à sa hauteur.
Ouvrir le guideFlou de l'arrière-planBackdrop Blur
Le flou d’arrière-plan adoucit ce qui se trouve derrière une surface claire. Il ne floute pas le contenu de la surface elle-même.
Ouvrir le guideGlassmorphismeGlassmorphism
Le Glassmorphisme est un style visuel avec des surfaces claires et superposées. Il utilise le flou, les bordures lumineuses et une petite sensation de profondeur.
Ouvrir le guideVerre LiquideLiquid Glass
Le Verre Liquide est un style de matériau clair et en mouvement. Il utilise des effets de lentille, des reflets et des formes qui semblent se joindre ou se plier.
Ouvrir le guideSkeuomorphismeSkeuomorphism
Le skeuomorphisme copie des objets réels familiers pour expliquer un contrôle numérique. Il peut également copier leurs matériaux.
Ouvrir le guideNeumorphismeNeumorphism
Le neumorphisme est un style doux et à faible contraste. Les ombres claires et foncées donnent aux contrôles l'apparence d'être en relief ou enfoncés dans une surface d'une seule couleur.
Ouvrir le guideNéobrutalismeNeobrutalism
Le néobrutalisme est un style numérique audacieux à fort contraste. Il utilise des formes simples, des bordures épaisses, des couleurs directes et une disposition mécanique claire.
Ouvrir le guideMinimalismeMinimalism
Le minimalisme supprime ce dont un design n'a pas besoin. Il garde néanmoins le produit clair, utile et distinct.
Ouvrir le guideDesign platFlat Design
Le design plat utilise des formes simples, des couleurs unies et des zones plates claires, avec peu de profondeur factice.
Ouvrir le guideClaymorphismeClaymorphism
Le claymorphisme est un style ludique avec des formes gonflées et des coins arrondis. Des ombres douces et des surfaces pastel donnent l'impression d'argile.
Ouvrir le guideEsthétique numérique Y2KY2K Digital Aesthetic
Cette esthétique numérique est un style rétro-futuriste issu de la culture numérique de la fin des années 1990 et début des années 2000. Elle utilise souvent le chrome, les pixels, les dégradés vifs et des détails informatiques ludiques.
Ouvrir le guideFrutiger AeroFrutiger Aero
Frutiger Aero est un style optimiste des années 2000. Il mélange des interfaces brillantes avec des ciels bleus, de l'eau, des plantes vertes, des bulles et une technologie au look amical.
Ouvrir le guideBrutalisme WebWeb Brutalism
Le brutaliste web est un style web brut. Il montre la structure, les paramètres par défaut du navigateur, une typographie simple et une rugosité planifiée plutôt que le polissage habituel.
Ouvrir le guideWeb vernaculaireVernacular Web
Le web vernaculaire copie les sites quotidiens que les communautés créent. Il diffère des systèmes soignés réalisés par de grands groupes.
Ouvrir le guideAquaAqua
Aqua est un style d'interface brillant lié aux premières versions de macOS. Il utilise des contrôles lumineux, de la profondeur comme du gel, des rayures fines et des accents bleu vif.
Ouvrir le guideWindows AeroWindows Aero
Windows Aero est un style de bureau de la fin des années 2000. Il utilise des cadres de fenêtres translucides, du verre flouté, une lueur douce et des bordures superposées.
Ouvrir le guideStyle suisseSwiss Style
Le style suisse utilise des grilles claires et des mises en page inégales mais équilibrées. Il utilise également des polices sans-serif, des photos et un ordre visuel strict.
Ouvrir le guideDesign éditorialEditorial Design
Le design éditorial organise une histoire à travers le rythme de lecture, la typographie, les images, les légendes et les motifs de page qui se répètent.
Ouvrir le guideDesign matérielMaterial Design
Le design matériel est un système pour composants et interactions. Il utilise des surfaces superposées, un mouvement avec un objectif, des mises en page flexibles et des tokens de design partagés.
Ouvrir le guideDégradéGradient
Un dégradé est un changement tout doux entre des couleurs ou de la transparence. Il peut suivre une ligne, un cercle, un angle ou une grille (mesh).
Ouvrir le guideOmbre & ÉlévationShadow & Elevation
Une ombre est un effet visuel. L'élévation est la profondeur que l'ombre peut expliquer entre les surfaces.
Ouvrir le guideRayon de bordure & Squircle — Pack d'apprentissageBorder Radius & Squircle — Learning Bundle
Ce guide sépare trois idées. Ce sont le border-radius standard en CSS, la forme de coin brouillon : squircle, et d'autres formes semblables au squircle ou des masques de plateforme. Le bundle n'est pas un terme de design standard unique.
Ouvrir le guideOpacitéOpacity
L'opacité indique à quel point un élément et ses enfants semblent solides. Elle peut aller de transparent à solide.
Ouvrir le guideRègles de design d'AppleApple Human Interface Guidelines
Les règles de design d'Apple expliquent la conception pour les systèmes Apple. Elles couvrent les actions, le visuel, les contrôles, la saisie, l'accessibilité et les différences entre systèmes.
Ouvrir le guideEspace de travail style NotionNotion-style Workspace
Un Workspace de style Notion utilise un look de document calme. Il privilégie du texte lisible, des blocs de contenu, des contrôles discrets et de l'espace ouvert.
Ouvrir le guideSite marketing SaaSSaaS Marketing Site
Un SaaS Marketing Site explique un problème et un service logiciel à un public. Il aide les visiteurs à juger si ça leur convient et à choisir la prochaine étape.
Ouvrir le guideSite d'entreprise B2BB2B Corporate Site
Un site corporate B2B aide les entreprises à vérifier les compétences, les règles, la fiabilité et la compatibilité d'une autre entreprise. Il aide aussi pour les achats ou les partenariats.
Ouvrir le guideE-commerce Direct au ConsommateurDTC E-commerce
Le commerce électronique DTC permet à une marque de vendre directement aux consommateurs. Il couvre la découverte, le choix des produits, le paiement, la livraison et l'assistance après-vente.
Ouvrir le guideIllustration ludiquePlayful Illustration
L'illustration ludique utilise des personnages, des formes, des couleurs et des blagues visuelles animés. Elle peut ajouter de la chaleur, du sens ou du caractère à une marque.
Ouvrir le guideDesign OrganiqueOrganic Design
Le design organique suit des formes que l'on trouve dans la nature. Il utilise des courbes irrégulières, des textures tactiles, des couleurs naturelles et des mises en page moins mécaniques.
Ouvrir le guideStyle MemphisMemphis Style
Le style Memphis est un look postmoderne audacieux. Il utilise des formes fortes, des couleurs contrastées, des motifs, un équilibre inégal et une énergie ludique.
Ouvrir le guideEsthétique du terminalTerminal Aesthetic
L'esthétique Terminal emprunte aux écrans de ligne de commande. Elle utilise un texte à espacement fixe, une hiérarchie serrée, des marques d'invite, peu de couleurs et un statut clair.
Ouvrir le guideWabi-sabiWabi-sabi
Wabi-sabi est une vision japonaise de la beauté. Elle valorise les limites, le changement, la forme irrégulière, l'âge et les matériaux authentiques plutôt que la perfection polie.
Ouvrir le guidePropriétés logiques CSSCSS Logical Properties
Les propriétés logiques CSS décrivent les côtés selon le flux d'écriture, comme bloc et en ligne. Elles remplacent les directions fixes comme haut, droite, bas et gauche. Cela aide les mises en page à suivre la direction d'écriture de la langue.
Ouvrir le guideSous-grilleSubgrid
Une sous-grille est une grille à l’intérieur d’une autre grille qui partage les tailles de lignes ou de colonnes de son parent. Elle peut partager une direction ou les deux.
Ouvrir le guidedimensionnement intrinsèqueIntrinsic Sizing
Le dimensionnement intrinsèque permet au contenu d'un élément d'aider à déterminer sa taille au lieu d'utiliser uniquement une taille fixe définie de l'extérieur.
Ouvrir le guidecontenu minimummin-content
`min-content` est la plus petite taille que le contenu peut utiliser après s’être renvoyé à la ligne à chaque point de rupture autorisé.
Ouvrir le guidecontenu maxmax-content
`max-content` est la taille que le contenu aimerait avoir s’il ne se renvoyait pas à la ligne aux points de rupture normaux.
Ouvrir le guideminmax()minmax()
`minmax()` est une fonction CSS Grid qui donne à une ligne ou une colonne une taille minimale et maximale.
Ouvrir le guideclamp()clamp()
`clamp()` choisit une valeur CSS préférée mais la garde entre un minimum et un maximum.
Ouvrir le guideobject-fitobject-fit
`object-fit` contrôle comment une image, une vidéo ou un élément similaire s'adapte à sa boîte.
Ouvrir le guideUnités de la fenêtre d'affichageViewport Units
Les unités de la fenêtre d'affichage sont des longueurs CSS basées sur la zone visible du navigateur. Les versions petite, grande et dynamique gèrent les barres du navigateur qui apparaissent ou disparaissent.
Ouvrir le guidePseudo-classePseudo-class
Une pseudo-classe fait partie d'un sélecteur CSS. Elle trouve un élément selon une condition, comme l'état, le lieu, la langue ou l'action de l'utilisateur.
Ouvrir le guidePseudo-élémentPseudo-element
Un pseudo-élément permet au CSS de styliser une partie ou une boîte sans élément normal dans le HTML source. Des exemples incluent la première lettre et la décoration générée.
Ouvrir le guideRayon de bordure CSSCSS Border Radius
La propriété border-radius CSS transforme les coins des boîtes en quarts d'ellipse en utilisant des rayons horizontaux et verticaux. Elle modifie la peinture et le masquage, mais pas la taille de la boîte dans la mise en page, et ne crée pas un squircle mathématique.
Ouvrir le guideCoin Squircle CSSCSS Squircle Corner
Dans le projet de CSS Borders Level 4, squircle est une valeur de forme de coin pour une superellipse convexe entre rond et carré. Elle équivaut à superellipse(2), nécessite un rayon de bord non nul, et nécessite toujours une vérification de compatibilité navigateur.
Ouvrir le guideMode couleurs forcéesForced Colors Mode
Le mode couleurs forcées utilise une palette système choisie par l'utilisateur au lieu de nombreuses couleurs de page. Cela peut rendre les contrôles et le texte plus faciles à distinguer.
Ouvrir le guideVisual Effect MaterialVisual Effect Material
Le matériau d’effet visuel est un style de surface macOS qui mélange et floute ce qui se trouve derrière lui. Il change selon l’état de la fenêtre et le thème clair ou sombre.
Ouvrir le guide