Desgin/Frontend prosess

Slik jobber vi med design og frontendutvikling

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 med tanke på 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