Läs resonemanget bakom en designsystemkomponent

Röda modulära paneler och återkommande skuggor på en byggnadsfasad

Om dette utvalget

Fyra offentliga referenser för att studera komponenter som beslut om innehåll, beteende och åtkomst snarare än ett galleri med attraktiva kontroller.

En knappskärmbild berättar lite om validering, tangentbordsnavigering eller vad som händer när en etikett blir längre. Bra komponentdokumentation förklarar de omgivande besluten. Dessa system och artiklar erbjuder olika förklaringsskalor, från public service-mönster till produktgrunder och detaljerat gränssnittsbeteende. Studera ett problem över dem innan du lånar en visuell behandling.

Prova detta först

Välj ett mönster som ditt projekt faktiskt behöver, till exempel ett felmeddelande eller ett avslöjande. Jämför dess syfte, formulering, fokusbeteende och smalskärmsbehandling. Skriv en kort acceptanschecklista och testa sedan din egen implementering med tangentbord och realistiskt innehåll. Håll källdokumentationen bredvid det beslut du fattar.

Kom ihåg

Ett statligt eller produktspecifikt mönster bär på sitt ursprungliga sammanhang. Kopiera inte dess ordalydelse eller varumärke i blindo. Äldre artiklar förblir användbara förklaringar, men verifiera implementeringsdetaljer mot nuvarande webbläsarbeteende och tillgänglighetsvägledning.

4 lenker/I kuratorens valgte rekkefølge

Lenke 1engelsk

GOV.UK Design System

Studera stilar, komponenter och servicemönster tillsammans med användningsvägledning. Läs när ett mönster är lämpligt innan du kopierar dess exempel.

design-system.service.gov.uk

Lenke 2engelsk

USA:s webbdesignsystem

Jämför vägledning och tillgänglighetsöverväganden inom den offentliga sektorn. Leta efter innehållet och interaktionsreglerna bakom en välbekant kontroll.

designsystem.digital.gov

Lenke 3engelsk

Inklusive komponenter

Läs detaljerade diskussioner om mönster som meddelanden, tabeller och menyer. Använd resonemanget för att granska beteendet samtidigt som du kontrollerar äldre kod mot nuvarande praxis.