Tenke som en frontendutvikler
… have a good design sense and understand the fundamentals/design principals
… know all the major design software including the entire Adobe Creative Suite
… know HTML, CSS, and JavaScript.
… know enough about server-side languages to understand how they work, what they do, and the possibilities of their use.
… know about servers and hosting.
… are quick to adapt to new software and new technologies.
… can train clients on the use of their websites.
… are good at user experience and user testing.
… know about and how to handle web accessibility
(and the laws surrounding it)
… can design for mobile devices.
… are good typographers.
Designer these days…
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
📱🖥
Mobil vs. desktop 📱🖥
- Skjermstørrelser
- Mange størrelser, ikke bare to
- Hvordan skal layout brytes?
- Interaksjon
- Knappestørrelser
- Berøring vs. museklikk
- Illustrasjoner
- Mobil først eller desktop først?
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
🏗
Hvilke komponenter brukes?
- Gjenbrukbar?
- Skalerbar?
- Kan komponenten tilpasses?
- Flytte et element til et annet sted? Hvordan påvirker det komponenten?
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
🌍
Brukes elementer i forskjellig kontekst?
- Trenger ikke kun handle om oversetting => kontekstbasert tekst
Internasjonalisering og lokalisering 🌍
- Trenger ikke kun handle om oversetting => kontekstbasert tekst
Sammenlign nettsidene til Hurtigruten eller Yr på norsk og engelsk. Kan du se for deg utfordringer knyttet til design og utvikling?
Oppgave 🏆
Animasjon
🎬
Animasjon og overganger ▶️
- Ofte usynlig på skisser (prototyper av skissene kan være til hjelp)
Finnes det andre måter man kan formidle animasjon til en utvikler på?
Spørsmål 🙋♀️🙋♂️
Universell utforming
👀
Universell utforming 🦾
- WCAG 2.0
- Semantisk HTML og skjermlesere
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
🚨
Tekniske begrensninger 🚨
- Designsystem som har forhåndsdefinerte avstander/skriftstørrelser/farger etc.
- Avhengigheter til andre systemer (via et API), tredjepartsbiblioteker
Ytelse ⚡️
- Når skal innhold hentes?
- Hvordan påvirker lastetid brukeren? (jo lengre tid det tar før brukeren får noe informasjon, desto større sannsynlighet er det for at brukeren stikker av)
Bonus: designsystem
🧭
Designsystem 🛠
- Her møtes design og utvikling
- Dokumentasjon:
- Design (fontstørrelser, farger, layout, animasjon, ikoner, illustrasjoner etc.)
- Utvikling (komponenter,
Å tenke som en frontendutvikler
By Markus Rauhut
