Et lite designsystem som holder nettsiden samlet
Du trenger ikke et stort bibliotek for å få en helhetlig nettside. Begynn med tekst, avstand, farger og noen få komponenter som fungerer godt.
Dette tar du med deg
- Samle de valgene som går igjen.
- Beskriv også feil, fokus og tomme tilstander.
- Prøv komponentene med ekte innhold.
Velg et lite felles språk
Et designsystem er et sett valg som gjør at nye sider føles som del av samme nettsted. For en liten bedrift kan starten være enkel: bakgrunn, tekstfarge, aksentfarge, tekststørrelser, avstander og to knappevarianter.
Skriv kort hva valgene er til for. En tydelig hovedknapp kan brukes når siden ber om én viktig handling. En roligere lenke kan brukes for fordypning. Hvis alle elementer roper like høyt, blir det vanskeligere å velge.
Bygg det dere faktisk bruker
Ta utgangspunkt i eksisterende sider. Samle toppmeny, bunntekst, tjenestekort, prisvisning, spørsmål og skjema. Unngå å bygge tjue varianter fordi dere kanskje trenger dem senere. Flere valg gir også flere ting å holde ved like.
Et godt priskort må tåle en lang beskrivelse og en pris som består av både oppsett og abonnement. Et godt skjema trenger forståelige felt og feilmeldinger. Felles uttrykk må ikke være avhengig av at innholdet er kunstig kort.
Ta med tilstandene som ofte glemmes
Hvordan ser knappen ut med tastaturfokus? Hva skjer når et søk ikke gir treff? Hvordan forteller skjemaet at meldingen er sendt? Disse tilstandene er en del av designet, selv om de ikke vises i det første skjermbildet.
Lag eksempler med ugyldig e-post, en lang overskrift og en mobilmeny som er åpen. Da finner dere problemer før de spres til mange sider. Bruk samme ord og oppførsel for samme type handling.
Hold systemet lett å endre
Gi farger og avstander meningsfulle navn i koden. Endre en felles komponent når forbedringen gjelder alle brukssteder, men kontroller resultatet på de faktiske sidene etterpå. Ett globalt stilgrep kan få uventede følger i et skjema eller en artikkel.
Avtal hvem som godkjenner nye varianter. Et kort notat om hvorfor en løsning ble valgt, er ofte nok. Se også hvordan du velger tekststørrelser og linjelengde for et bedre utgangspunkt.