Webbutveckling 1 · område 4 · v.46–51
UX, design och mobilanpassning
Femton lektioner om hur en sajt fungerar för den som besöker den. Fyra genomgångar och nio arbetspass – kursens största arbetsblock. Du ritar sajten innan du bygger den, och bygger den så att den fungerar i en telefon och för den som inte använder mus.
- 20 nov Wireframen ska vara klar Ingen inlämning – men härifrån bygger du, och åtta arbetspass återstår.
- 11 dec Inlämning kl 23:59 Projekt 3 – repo-länken och Figma-länken lämnas i itslearning.
- 14 dec Prov 3 – responsivt, UX och tillgänglighet Skriftligt prov utan dator.
Material
Områdets uppslagsbok. Sexton avsnitt från viewport-taggen till WAVE, med felsökning, snabbreferens och ordträning.
Uppgift Projekt 3Områdets projekt. Uppdraget, kraven i tre nivåer och bedömningsmatrisen du stäms av mot. Deadline 11 december.
Wireframen är obligatorisk. Vilken sajt den föreställer bestämmer du: antingen ritar du av sajten du redan har och bygger om den responsiv och tillgänglig, eller så ritar du en wireframe för ett nytt ämne och bygger den från grunden.
Har du inget färdigt Projekt 2 att bygga vidare på är nyspåret din väg – då börjar du där, och du hamnar inte efter. Båda vägarna bedöms med samma matris.
Under område 4 finns en Figma-mall med två tomma ramar, mobil och desktop, plus ett ifyllt exempel. Duplicera den – rita inte från noll.
Lektionerna
Missade du ett pass? Sista kolumnen pekar på det du behöver läsa för att komma ikapp.
| Datum | Vad vi gör | Missade du passet? |
|---|---|---|
| tis 10/11 | Media queries som undantag. Viewport-taggen, mobile first, relativa enheter och brytpunkter som kommer ur innehållet. Uppgiften delas ut. | Guiden 1–3 |
| fre 13/11 | Figma och wireframes. Skiss till wireframe, mobil och desktop sida vid sida. Ramar, komponenter och autolayout. | Guiden 4–6 |
| mån 16/11 | UX. Hierarki, läsmönster, klickbarhet och feedback. Konventioner man inte bör bryta. | Guiden 7–9 |
| tis 17/11 | Tillgänglighet och WAVE. Kontrast, alt, tangentbord och fokusmarkering. WAVE körs live. | Guiden 10–12 |
| fre 20/11 | Arbetspass. Eget projekt med handledning. Wireframen ska vara klar här. | Kraven |
| mån 23/11 | Ledig dag. Ingen lektion. | — |
| tis 24/11 | Arbetspass. Papperet blir kod – HTML:en skrivs efter mobilramen. | Guiden 6 |
| fre 27/11 | Arbetspass. Brytpunkterna sätts där innehållet kräver dem. | Guiden 3 |
| mån 30/11 | Arbetspass. Klickytor, hovring och feedback. | Guiden 8 |
| tis 1/12 | Arbetspass. Kör WAVE första gången – "före"-mätningen. | Guiden 12 |
| fre 4/12 | Arbetspass. Tangentbordstest, kontrast och fokusmarkering. | Guiden 11 |
| mån 7/12 | Arbetspass. Felsökning av det som inte vill fungera. | Felsökning |
| tis 8/12 | Arbetspass. Kamratrespons i par utifrån bedömningsmatrisen. | Matrisen |
| fre 11/12 | Sista finputs. Validera, kör WAVE igen, testa i telefon. Deadline 23:59. | Innan du lämnar in |
| mån 14/12 | Prov 3. Responsivt, UX och tillgänglighet. Skriftligt utan dator. | Snabbreferensen |
Vad du kan efter området
- Få en sida att bete sig som en sida i en telefon, i stället för som en nedzoomad skärm.
- Bygga en layout som håller på varje bredd utan att du skriver en enda brytpunkt.
- Välja brytpunkter utifrån ditt innehåll, och säga varför just där.
- Rita en wireframe i två bredder och koda efter den.
- Säga vad som gör en sajt begriplig – och vilka konventioner du inte bör bryta.
- Köra WAVE och Lighthouse, läsa vad de säger och rätta felen.
- Ta dig igenom hela din sajt med enbart tangentbordet.
- Kontrollera kontrast i stället för att gissa.