Designtjek

1. Headeren skal indeholde de obligatoriske linjer og følge layoutreglerne

Headerens to obligatoriske linjer - med portallogo, NemLog-inoplysninger, løsningens titel og ansvarlig myndighed, samt mulighed for kontakt - skal altid være at finde i alle selvbetjeningsløsninger og hele headeren skal følge retningslinjerne for layout.

2. Fonten skal anvendes

Den angivne font skal anvendes.

3. De typografiske regler skal følges

Overskrifter, manchettekst, brødtekst, links, lister, linjelængde, linjehøjde og fremhævet tekst, skal følge de regler som er beskrevet i afsnittet om typografi.

4. De specificerede farver skal anvendes

Alt efter om din selvbetjeningsløsning skal på borger.dk eller Virk, skal din løsning bruge borger.dks eller Virks primærfarve. Der skal bruges hvid som generel baggrundsfarve. Derudover skal din løsning bruge farverne som anvist på de forskellige komponenter.

5. Hjørner, streger og skygger skal følge retningslinjerne

Runde hjørner er til komponenter brugeren kan interagere med (fx felter og knapper). Lige hjørner er til statiske komponenter (fx beskeder). Der er overordnet set to typer af streger at arbejde med en indre og en ydre streg. Der er også dedikeret skygger til forskellige komponenter, som kan findes i afsnittet om hjørner, streger og skygger.

6. Udvalgte ikoner skal anvendes som angivet

Ikoner til beskeder skal fx altid være de samme alt efter typen af besked.
Accordions bruger et plus-ikon til at vise at den kan åbnes mv. Alle reglerne er at finde i afsnittet om ikoner.

7. Der skal bruges et responsivt grid

Grid-systemet i det Fælles Designsystem er et 12 kolonne grid (desktop), præcist hvilket grid du anvender i teknisk forstand er ikke vigtig så længe det er responsivt og følger reglerne for grid-systemet.

8. De komponenter du bruger skal fungere som beskrevet

For at sikre en konsistent oplevelse på tværs af løsninger og portaler, er det vigtigt at de enkelte komponenter opfører sig ens, således at brugeren ikke skal være nervøs for om en ellers velkendt komponent pludselig opfører sig helt anderledes og dermed skaber utryghed. Reglerne for de enkelte komponenter er beskrevet i afsnittet komponenter.

9. Plugins skal passe visuelt ind i designet

Bruger du en tredjeparts plugin, skal du sikre at de visuelt passer ind i designsystemet. Det vil sige at du skal gøre brug af eksisterende grafiske regler og anvende former og farver som angivet i designsystemet. Vi peger på en række plugins og hvordan disse kan styles så de passer ind.

10. Brug et af de anviste layouts til din footer

Slut din løsning af med en footer og brug et af de anviste layouts til det.