Gränssnittsdesign · område 3

Uppgift 3 – Stilguide, komponentbibliotek och mockup

Färgskala med kontrastvärden, typografi, avståndssystem, sex komponenter med tillstånd och varianter, samt mockup av två sidor i två bredder. Plus en skriftlig analys av två gränssnitt.

5 nov Deadline kl 23:59 Torsdag. Passet den dagen är ett arbetspass — inlämningen sker på kvällen.

1. Uppdraget

Du ska bygga en stilguide, ett komponentbibliotek och en mockup av din sajt i Figma. Tillsammans är de ritningen som sajten byggs efter.

Det här är det du själv ska bygga efter

Det du lämnar in den 5 november är underlaget du stilsätter mot i Webbutveckling. Färgerna blir CSS-variabler. Avstånden blir gap och padding. Komponenternas tillstånd blir :hover och :focus-visible. Saknas ett värde här får du hitta på det mitt i kodningen, och då blir sajten aldrig lika genomtänkt som den kunde ha blivit.

Kravet som ligger under alla andra: det ska gå att bygga efter. Någon som inte var med när du ritade ska kunna öppna din stilguide och veta vilket blått, hur många pixlar, och vad som händer när man för musen över knappen. Kan de inte det är stilguiden en samling bilder, inte ett designsystem.

Bilderna från område 1, ikonerna och ordmärket från område 2 och den typografiska skalan går alla in här. Ingenting av det du gjort hittills kastas — det får en plats i systemet.

Området byggs i en egen Figma-fil

Inte i designportföljen. Ett designsystem är något man delar och lämnar över, medan portföljen är ditt eget arkiv. I november öppnar du designsystemfilen bredvid koden och arbetar ur den — då vill du inte ha bildpaketet i vägen. Länken till filen lägger du på portföljens sida 03 Stilguide, så att allt fortfarande går att hitta från ett ställe.

2. Ska-krav

Är alla ikryssade och kontrollerade ligger du på E.

3. Bör-krav

Skillnaden mellan ett system som finns och ett system som håller. Nivå C.

Bör-krav — nivå C

Du kan motivera färgerna som roller, inte som färger du tyckte om. Varför är den primära primär?
Avståndssystemet används konsekvent i mockupen. Inga lösa värden som 13 eller 27
Komponenterna är byggda med varianter, inte som sex separata komponenter med snarlika namn
Mockupen är byggd av komponenter ur ditt eget bibliotek, inte av lösa rektanglar som råkar se likadana ut
Fokusmarkeringen är egen och synlig — du har bestämt hur den ser ut i stället för att låta webbläsaren göra det
Analysen säger vad du tar efter och vad du låter bli, med ett skäl till varje

4. Utmaningar

Nivå A. Ta dem du kan motivera, inte alla.

Utmaningar — nivå A

Stilguiden är testad på en klasskamrat: hen har byggt om en av dina komponenter efter den, utan att fråga dig något
Komponenterna fungerar i två teman — ljust och mörkt — utan att ritas om
Brödtexten klarar 7:1, inte bara 4.5:1
Varje komponent har en användningsregel: när den ska användas och när den inte ska det
Du kan namnge var du kompromissade — ett värde du ändrade för systemets skull trots att det såg bättre ut på egen hand

Kryssen sparas i din webbläsare.

5. Tekniska krav

Krav	Vad som gäller
Var det lämnas	En egen Figma-fil: `Designsystem – förnamn efternamn`, med sidorna `01 Grunder`, `02 Komponenter`, `03 Mockup` och `04 Analys`
Länken	Läggs på designportföljens sida `03 Stilguide`, så att allt går att hitta från ett ställe
Ikoner och ordmärke	Kopieras in i designsystemfilen från portföljens `02 Ikoner`. De ska ligga i den fil som stilsätts efter
Bredder	Mobil 360 px, desktop 1280 px. Samma innehåll, olika layout
Kontrast	Minst 4.5:1 för brödtext, 3:1 för stora rubriker och gränssnittselement
Träffytor	Minst 44 × 44 px för allt som går att trycka på
Komponentnamn	Snedstreck för hierarki: `knapp/primar/normal`, `knapp/primar/hover`
Avståndssystem	Bygg på 4 eller 8. Skriv ut stegen: 4, 8, 16, 24, 32
Färgvärden	Hex, angivna i stilguiden. Inte bara färgrutor att pipettera från
Analysen	Minst 400 ord, i en textram på sidan `04 Analys`

6. Bedömningsmatris

Kriterium	E	C	A
Färg och kontrast	Färgskalan finns och kontrastvärdena är redovisade	Färgerna har roller du kan motivera, och kontrasten är löst utan att färgerna tappar karaktär	Färgsystemet bär två teman, och du kan förklara vilka val som gjordes för tillgänglighetens skull
System och konsekvens	Typografisk skala och avståndssystem finns	Systemet används konsekvent genom hela mockupen, utan lösa värden	Systemet är så tydligt att någon annan kan lägga till en ny sida utan att fråga
Komponenter och tillstånd	Sex komponenter med sina tillstånd	Komponenterna är byggda med varianter och namngivna så att de går att hitta	Komponenterna har dokumenterade användningsregler, och fokusmarkeringen är medvetet utformad
Mockup och byggbarhet	Startsida och undersida finns i båda bredderna	Mockupen är byggd av det egna biblioteket, och skillnaden mellan bredderna är genomtänkt	Mockupen går att bygga efter utan följdfrågor — det är prövat på någon annan
Analys	Två gränssnitt är beskrivna	Analysen jämför och drar slutsatser för den egna sajten	Analysen skiljer på konvention och enskilt val, och motiverar vad du inte tar efter

7. Kom igång

Skapa filen först. Designsystem – förnamn efternamn, med de fyra sidorna. Kopiera in ikonerna och ordmärket från portföljen medan du ändå är där.
Bestäm avståndstalet innan du ritar något. 8 är en trygg start: 8, 16, 24, 32, 48. Allt du sedan placerar hamnar på de talen. Att införa systemet i efterhand betyder att flytta varje element i mockupen.
Bygg färgskalan före komponenterna, och kontrastkontrollera direkt. En knappfärg som underkänns när komponenten är klar tvingar fram omritning av alla sex tillstånden.
Gör analysen tidigt, gärna i oktober. Den är skriftlig och tar en kväll. Den som sparar den till november gör den slarvigt, och det syns.
Bygg en komponent hela vägen först — knappen, med alla sex tillstånden — innan du börjar på de andra. Då upptäcker du vad systemet saknar medan det bara kostar en komponent att rätta.
Rita mobilen först. 360 px tvingar fram prioritering. Att gå från 1280 till 360 betyder att välja bort, och det är svårare än att lägga till.

8. Vanliga misstag

Färgerna väljs som färger och inte som roller. Fem blå nyanser utan uppgift är ingen färgskala. Fråga vad varje färg gör.
Kontrasten kontrolleras på slutet. Då är komponenterna redan ritade, och en underkänd textfärg betyder att allt görs om.
Komponenterna kopieras i stället för att varieras. Sex nästan likadana komponenter går inte att ändra på ett ställe, och det är hela poängen med ett bibliotek.
Tillstånden hoppas över utom hover. Fokus saknas oftast, och det är det enda tillstånd som någon är beroende av för att kunna använda sajten alls.
Mockupen ritas med lösa rektanglar som ser ut som komponenter. Det syns direkt när något ska ändras.
Desktop ritas först och mobilen kläms ihop efteråt. Resultatet blir en desktopsida i smalt fönster, inte en mobilsida.
Analysen blir en beskrivning i stället för en jämförelse. Frågan är inte hur de två sajterna ser ut, utan vad du tar med dig och varför.