Läs resonemanget bakom en designsystemkomponent

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

Over deze selectie

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 links/In de volgorde van de curator

Link 1Engels

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

Link 2Engels

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

Link 3Engels

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.