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
- Definition of Prepared før neste trinn:
- 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
- Definition of Prepared før neste trinn:
Implementere skisser
- Gjennomgang av skisse mellom - UX og frontend
- Implementere skisser i frontend
- Review av implementasjon – annen frontendutvikler