Skip to content

Gjøre det enklere å bruke Digdirs profil konsistent på tvers av produkter og tjenester Digdir  #1

@mrosvik

Description

@mrosvik

Problem

Vi har et Digdir-tema som er bygget med Designsystemet og skal brukes i Digdirs digitale løsninger. Temaet består i praksis av en struktur med "design tokens" som definerer blant annet størrelser, avstander, border-radius, typografi og farger for Digdir sine digitale flater, inkludert regler for hvordan disse skal brukes på tekst, bakgrunner, streker og lignende.

Utfordringen i dag er at det mangler et dokumentasjonslag med retningslinjer og veiledning for hvordan Digdir-temaet skal brukes riktig i praksis. Denne informasjonen kan ikke legges på Designsystemet.no fordi den kanalen skal være relevant for alle virksomheter.

Mange etater og virksomheter løser dette ved å ha et eget virksomhetsspesifikt lag på toppen av Designsystemet med profil-spesifikk dokumentasjon og veiledning, samt retningslinjer knyttet til identitet. For eksempel design.mattilsynet.no.

Digdir mangler et slikt lag.

Dagens situasjon

Hvilke utfordringer opplever teamene med dagens situasjon?

  • Vanskelig å vite hvor profil-spesifikke retningslinjer og beslutninger finnes
  • Informasjon er spredt mellom flere verktøy og personer
  • Hvor finnes informasjon om Digdirs farger, typografi og størrelser for web? (Det finnes "design tokens", men ikke dokumentasjon)
  • Ulik praksis på tvers av produkter og team
  • Dobbeltarbeid og gjenoppfinnelse av løsninger
  • Mye personavhengig kunnskap
  • Utfordrende onboarding for nye teammedlemmer og konsulenter

I dag er informasjon om Digdir sine digitale flater spredt mellom Figma, Profilveilederen, Intranett, Illustrasjoner på imageshop.no og muntlig kunnskap hos enkeltpersoner. Dette gjør det vanskelig å vite hvor “fasiten” finnes og bruke profilen konsistent på tvers av produkter og tjenester.

Forslag til løsning

Bygge et dokumentasjonslag på toppen av Designsystemet som fokuserer på det som er unikt for Digdir, som temaer, visuelle retningslinjer, digital profil, anbefalinger for bruk og delte komponenter og mønstre på tvers av Digdir sine produkter og tjenester.

Et samlingspunkt for Digdirs visuelle profil, vil fjerne behovet for spredt informasjon på intranett, profilveileder og figma.

En slik felles inngangsportal for profilrelaterte spørsmål vil også redusere behovet for å svare på enkelthenvendelser.

Mål

Målet er å samle relevant dokumentasjon og retningslinjer på ett sted og gjøre det enklere for designere og utviklere å bygge tjenester som er i tråd med Digdirs visuelle profil.

Målgrupper

Primære målgrupper

  • Designere i Digdir som lager eller videreutvikler Digdir sine digitale tjenester
  • Utviklere i Digdir som implementerer løsningene
  • Innleide konsulenter som trenger å forstå hvordan Digdir sine digitale flater skal bygges og brukes konsistent

Sekundære målgrupper

  • Kommunikasjonsavdelingen i Digdir
  • Produkteiere i Digdir
  • Nye ansatte og konsulenter som trenger onboarding
  • Leverandører og samarbeidspartnere

Innhold

Det profilspesifikke designsystemlaget for Digdir kan inneholde følgende:

  • Guide for hvilke tema som skal brukes
  • Onboarding for nye designere og utviklere
  • Identitet
    • Logo
    • Farger
    • Typografi
    • Form og bevegelse
    • Ikoner
    • Illustrasjoner
    • Bilder
    • Slik skriver vi
    • Infografikk
  • Tokens
  • Komponenter
  • Layout (grid, avstander og størrelser)
  • Profilering
    • Epost-signatur
    • Maler

Fremdriftsplan

Fase 1: Kartlegge felles behov

Fase 2: Verktøy og implementering

Fase 3: Tema og identitet

  • Lage en oversikt over tilgjengelige temaer og definere hvilke produkter og tjenester som skal bruke hvilke temaer
  • Definere ikonstrategi
  • Etablere prinsipper for avstander og layout
  • Definere retningslinjer for bruk av logo, farger og typografi for hvert tema
  • Vurdere å flytte relevant dokumentasjon for visuell identitet fra Digdir sin profilveileder til Digdir sin nye dokumentasjonsplattform for digitale flater, i dialog med kommunikasjonsavdelingen gjennom hele prosessen

Fase 4: Delte komponenter

  • Identifisere komponenter med høy verdi for deling på tvers av Digdir
  • Lage delte Digdir-spesifikke komponenter
  • Lage eksempler og dokumentasjon
  • Definere pakkestruktur (npm)

Metadata

Metadata

Labels

documentationImprovements or additions to documentation

Type

Projects

Status

🏁 Monday commitments

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions