Gränssnittsdesign · område 3

Layout, komponenter och designsystem

Områdets tio pass bygger en enda sak: ritningen till din sajt. Färg, typografi och avstånd blir ett system, systemet blir komponenter, och komponenterna blir en mockup som går att bygga efter — för det är precis vad du gör i Webbutveckling i november.

5 nov Inlämning: Uppgift 3 – Stilguide, komponentbibliotek och mockup Kl 23:59. Överlämnas till Webbutveckling, som stilsätter sajten mot den.

Börja här

Uppgift Stilguide, komponenter och mockup
Kraven, bedömningsmatrisen och en checklista du kan bocka av medan du arbetar.
Guide Layout och designsystem i Figma
Ramar, autolayout, rutnät, principer och felsökning. Slå upp här när något krånglar.
Kom igång Fem steg i rätt ordning
Vad du bestämmer innan du ritar något, och varför ordningen sparar en omritning.
Krav Bredder, kontrast och namn
360 och 1280 px, 4.5:1, träffytor på 44 px och hur komponenterna ska heta.
Fallgropar Vanliga misstag
Sju saker som kostar tid att göra om. Läs dem innan du börjar, inte efteråt.

Vad du ska kunna när området är slut

Bygga en sidmall i Figma med autolayout som håller när innehållet växer
Använda rutnät, vitrum och hierarki som verktyg i stället för på känsla
Sätta en färgskala där varje färg har en roll, och mäta kontrasten mot kravet
Analysera två gränssnitt som löser samma uppgift och dra slutsatser för din egen sajt
Känna igen de vanliga gränssnittselementen och veta vilka tillstånd de behöver
Bygga komponenter med varianter, namngivna så att de går att hitta i juni
Anpassa samma sida till 360 och 1280 px och motivera vad som flyttar eller viks ihop
Lämna över en stilguide som någon annan kan bygga efter utan att fråga dig

Lektionerna i området

Missade du ett pass? Sista kolumnen säger var innehållet står.

Datum	Vad vi gör	Missade du passet?
28 sept	Figma: filer, ramar och autolayout	Guide, avsnitt 1–4
1 okt	Layoutprinciper	Guide, avsnitt 5–8
5 okt	Färgscheman som system	Guide, avsnitt 9
8 okt	Analys av liknande gränssnitt	Guide, avsnitt 10
12 okt	Vanliga gränssnittselement	Guide, avsnitt 11
15 okt	Komponenter och varianter	Guide, avsnitt 12
19 okt	Från mobil till desktop	Guide, avsnitt 13
22 okt	Stilguiden som överlämning	Guide, avsnitt 14
2 nov	Arbetspass med kamratrespons	Uppgift 3 – Stilguide, komponentbibliotek och mockup
5 nov	Arbetspass. Inlämning kl 23:59	Uppgift 3 – Stilguide, komponentbibliotek och mockup

Det viktigaste

Bestäm avståndstalet och färgskalan innan du ritar den första komponenten. Allt annat i uppgiften går att justera i efterhand — det gör inte de två valen, för de sitter i varje komponent och varje sida du redan byggt.

Höstlov

Efter passet den 22 oktober är det höstlov, 26–30 oktober. Passet den 2 november är ett arbetspass med kamratrespons — kom med något att visa, inte med en plan.