Lisez le raisonnement derrière un composant de système de conception

Panneaux modulaires rouges et ombres répétées sur une façade de bâtiment

Over deze selectie

Quatre références publiques pour étudier les composants en tant que décisions concernant le contenu, le comportement et l'accès plutôt qu'une galerie de contrôles attrayants.

Une capture d'écran d'un bouton vous en dit peu sur la validation, la navigation au clavier ou ce qui se passe lorsqu'une étiquette s'allonge. Une bonne documentation des composants explique les décisions environnantes. Ces systèmes et articles offrent différentes échelles d'explication, depuis les modèles de service public jusqu'aux fondements des produits et au comportement détaillé des interfaces. Étudiez un problème à travers eux avant d’emprunter un traitement visuel.

Essayez ceci d'abord

Choisissez un modèle dont votre projet a réellement besoin, comme un message d'erreur ou une divulgation. Comparez son objectif, sa formulation, son comportement de mise au point et son traitement sur écran étroit. Rédigez une courte liste de contrôle d'acceptation, puis testez votre propre implémentation avec un clavier et un contenu réaliste. Conservez la documentation source à côté de la décision que vous prenez.

Gardez à l'esprit

Un modèle gouvernemental ou spécifique à un produit porte son contexte d'origine. Ne copiez pas aveuglément son libellé ou sa marque. Les articles plus anciens restent des explications utiles, mais vérifient les détails de mise en œuvre par rapport au comportement actuel du navigateur et aux conseils d'accessibilité.

4 links/In de volgorde van de curator

Link 1Engels

Système de conception GOV.UK

Étudiez les styles, les composants et les modèles de service ainsi que des conseils d'utilisation. Lisez quand un modèle est approprié avant de copier son exemple.

design-system.service.gov.uk

Link 2Engels

Système de conception de sites Web américain

Comparez les orientations des composantes du secteur public et les considérations en matière d’accessibilité. Recherchez le contenu et les règles d’interaction derrière un contrôle familier.

designsystem.digital.gov

Link 3Engels

Composants inclus

Lisez des discussions détaillées sur des modèles tels que les notifications, les tableaux et les menus. Utilisez le raisonnement pour revoir le comportement, tout en comparant l’ancien code à la pratique actuelle.

inclusive-components.design

Link 4–

Spectre Adobe

Explorez les fondements et la documentation spécifique à la plate-forme du système de conception d'Adobe. Comparez les principes partagés avec les exigences de votre propre produit.