Tenke som en frontendutvikler
Mine tanker 🤓
- Skjermstørrelser
- Nettleserstøtte
- Komponenter
- Lokalisering og internasjonalisering
- Animasjon
- Universell utforming
- Tekniske begrensninger
Min tankeprosess 🤓
- Virker det på mobil og desktop?
- Støttes ulike nettlesere?
- Hvilke komponenter brukes?
- Brukes elementer til forskjellig kontekst?
- Skal noe animeres?
- Ivaretas universell utforming?
- Finnes det tekniske begrensninger?
Skjermstørrelser
📱🖥
liten
768px
medium
992px
stor
1200px
ekstra stor
1600px
Gå til lanekassen.no og se hvordan layouten endrer seg for ulike skjermstørrelser.
Oppgave 🏆
Nettleserstøtte
🤹
Komponenter
🏗
Hvordan kan den tekniske inndelingen i komponenter påvirker designvalg?
Spørsmål 🙋♀️🙋♂️
Gå til bekk.no og se om du finner forskjellige komponenter. Er de gjenbrukbare, skalerbare og kan tilpasses?
💡Bytt mellom mobil- og desktopvisning.
Oppgave 🏆
Lokalisering og internasjonalisering
🌍
Sammenlign nettsidene til Hurtigruten eller Yr på norsk og engelsk. Kan du se for deg utfordringer knyttet til design og utvikling?
Oppgave 🏆
Animasjon
🎬
Finnes det andre måter man kan formidle animasjon til en utvikler på?
Spørsmål 🙋♀️🙋♂️
Universell utforming
👀
WCAG – kort oppsummert 🦾
- Prinsipp 1: Mulig å oppfatte
- Prinsipp 2: Mulig å betjene
- Prinsipp 3: Forståelig
- Prinispp 4: Kompatibel
WCAG for designere 🎨
- Farge (fargeblindhet, kontrast)
- Tekst (tekst i bilde, overskrifter og labels)
- Layout (rekkefølge, skjermretning, forstørrelse, navigering, instruksjoner, gjenkjennbarhet)
Bruk et nettlesertillegg (f.eks. Chromes Lighthouse eller Wave) for å teste universell utforming på forskjellige nettsider. Finner du to nettsider som får ganske ulike resultater?
Oppgave 🏆
Tekniske begrensinger
🚨
Bonus: designsystem
🧭
Designsystem 🛠
- Her møtes design og utvikling
- Dokumentasjon:
- Design (fontstørrelser, farger, layout, animasjon, ikoner, illustrasjoner etc.)
- Utvikling (komponenter,