:
Last modified: Dec 19, 2022

Desgin/Frontend prosess

Slik jobber vi med design og frontendutvikling

On this page:

Bli enig om hovedfunksjonalitet og konsept

  • Oppstart – tverrfaglig (backend, frontend, funksjonell)
    • Skaffe innsikt
    • Presentere case
    • Lande «rammer» for utvikling. Diskutere tverrfaglig:
      • utvikling i Altinn2 eller Altinn 3?
      • kartlegge begrensninger i forhold til migrering?
      • skal funksjonalitet i Altinn 2 videreføres i Altinn 3?
  • UX – konseptskisser
  • Diskutere tverrfaglig
  • Brukerteste konsept

Prototype

  • Skissere i Figma - UX
  • Tegne brukerflyt - UX
  • Diskutere tverrfaglig – (teksnisk, frontend, test, funksjonell)
  • Lage prototype - UX
  • Brukerteste prototype – UX

Detaljskisse

  • Tegne «ferdig» skisser i figma
  • Diskutere tverrfaglig
  • Identifisere nye komponenter i Designsystemer
  • Oppdatere skisser
    • Definition of Prepared før neste trinn:
      • Overordnet beskrivelse av UI som skal utvikles foreligger
      • Alle designelementer er skissert
      • Beskrive avhengigheter mellom elementer som skal brukes
      • Detaljert beskrivelse av hva som skal utvikles gjennom skjermdumper og beskrivende tekst (funksjonelt design)
      • Beskrive eventuelle uavklarte punkter
      • Feilmeldinger skal være beskrevet
  • QA av skisser opp mot Designsystem – Marianne/Lasse (ansvarlig designsystem)
    • I henhold til overordnet Altinn-design (designsystem-team)

Komponenter i Designsystem

  • Lage skisser i Figma av enkelskomponenter til designsystem - UX
  • QA av skisser opp mot Designsystem – Marianne/Lasse (ansvarlig designsystem)
  • Definition of Prepared før neste trinn:
  • Farge, font, navngivning av komponent, hoverover, ikoner, ?, ?
  • Gjennomgått med ansvarlig for designsystem
  • Implementere i Designsystem - frontend
  • Review av kode designkomponenter - annen frontend utvikler

Ferdigstille skisser som skal implementeres i frontend

  • Oppdatere skisser
  • Diskutere tverrfaglig – UX, frontend, test, teksnisk
  • Ferdigstille skisser
    • Definition of Prepared før neste trinn:
      • Alle designelementer finnes i skisser
      • Alle komponenter i skissen er designimplementert
      • Forklaring på skisser hvordan de skal fungere, hva skjer når man gjør ulike ting
      • Feilsitusajoner og feilmeldinger skal være beskrevet

Implementere skisser

  • Gjennomgang av skisse mellom - UX og frontend
  • Implementere skisser i frontend
  • Review av implementasjon – annen frontendutvikler