Gå til sidens indhold

Design

Designressourcer

Ved at følge designsystemet er du med til at skabe sammenhæng i og mellem de mange offentlige selvbetjeningsløsninger du ikke selv designer, til gavn for alle brugere.

Dit fokus, som designer af en selvbetjeningsløsning, bør være på brugervenlighed og brugernes effektivitet igennem selvbetjeningsløsningen, ikke på personligt at “shine” ved brug af “krom” og tidens trends.

Figma, Sketch og SVG

Du er velkommen til at bidrage med flere designressourcer eller med opdateringer af eksisterende filer.

Figma

Se komponentbiblioteket i Figma

Sketch

Download sketch-fil (version 3.0.3)

SVG

Download svg-filer (version 4.4.0)

Svg-filerne kan importeres i de fleste design/prototype programmer og arbejdes videre med ved at markere elementerne og opdele grupperne (ungroup).

For at gøre det nemmere at komme i gang stiller vi ovenstående filer til rådighed, men “source of truth”, vores fælles referencepunkt, er dokumentationssiden her og ikke filerne.

Dit ansvar som designer

Følg allerede etablerede standarder og konventioner for placering og gruppering af komponenter og reproducer gængse interaktionsmønstre. Kig gerne vores vejledning til sideopbygning igennem.

Regler og principper for layout

Hav forståelse for dit ansvar for sammenhængen i mellem og på tværs af de mange tusinde selvbetjeningsløsninger, der kan tilgås fra borger.dk og Virk. Ved at tage ansvar, er du med til at gøre brugerne mere effektive, så de ikke skal genlære alle offentlige brugergrænseflader forfra hver gang.

12 punkter til designeren

Når du som designer skal sætte en selvbetjeningsløsning op, skal du være opmærksom på følgende:

  1. Designet (kontrastforhold mm.) skal være tilgængeligt på WCAG 2.1 AA niveau. Brug plugins til dit designprogram, for at efterleve WCAG 2.1 AA eller brug online værktøjerne fra WebAIM.
  2. Anvend gerne et 12-grid layout, evt. med følgende breakpoints: 480px, 768px, 991px og 1200px.
  3. Anvend gerne et 8pt baseline grid.
  4. Layoutet er inddelt i en header, et indholdsområde og en footer på alle sider.
  5. Headeren skal følge den beskrevne struktur.
  6. Venstrestillet én-kolonne-layout er anbefalet.
  7. Knapper bør venstrestilles og primærknappen er altid til venstre.
  8. Anvend fonten “IBM Plex Sans” og følg de typografiske regler.
  9. Anvend ikoner fra eller baseret på Material Design, da de følger 8pt grid og skalerer godt.
  10. Anvend farver og former som beskrevet under “design”.
  11. Hold designet let og luftigt (masser af white space) og brug afstande og luft i designet til at indikere sammenhænge og adskillelse.
  12. Del selvbetjeningsløsningen op i små bidder (trin).

Grundprincipper

Designsystemet følger nogle grundprincipper som du bør kende.

Principperne skal sikre at designsystemets komponenter kan anvendes hver for sig og sammen i uendelige kombinationer i de mange forskellige selvbetjeningsløsninger, som kan tilgås fra borger.dk og Virk. Samtidig med at designet skal passe ind på portalerne, der er to selvstændige brands med hver deres visuelle design.

Det visuelle design er:

  • Neutralt
  • Simpelt
  • Målrettet til selvbetjeningsløsninger

Frontenden-koden er:

  • Minimal
  • Modulær
  • Skalerbar

De to gange tre principper fungerer i tandem således at designsystemet er nemt og effektivt at anvende til at bygge simple og effektive selvbetjeningsløsninger med, der passer ind på både borger.dk og Virk.