Gränssnittsdesign · område 3

Guide – Layout och designsystem i Figma

Här står det du behöver för uppgiften, och guiden fungerar utan att du varit på lektionen. Slå upp i den när du fastnar.

1. Filen och sidorna

Område 3 byggs i en egen Figma-fil, inte i designportföljen. Ett designsystem är något du delar och lämnar över; portföljen är ditt eget arkiv. I november öppnar du designsystemfilen bredvid koden och arbetar ur den.

Filen heter Designsystem – förnamn efternamn och har fyra sidor:

01 Grunder        färg, typografi, avstånd
02 Komponenter    knapp, fält, kort och de andra
03 Mockup         360- och 1280-ramarna
04 Analys         den skriftliga jämförelsen

Lägg länken till filen på designportföljens sida 03 Stilguide. Då går allt fortfarande att hitta från ett ställe, och du slipper leta i november.

2. Ramar

En ram är inte en rektangel. En rektangel är en form: den har färg och storlek och kan inte innehålla något. En ram är en behållare — den kan klippa sitt innehåll, den kan ha autolayout, och den kan vara en skärm.

Skillnaden syns på ikonen i lagerpanelen. Det är värt att lära sig känna igen, för det förklarar hälften av de fel du kommer att stöta på.

Mockupen byggs i två ramar:

360 × 800     mobil
1280 × 900    desktop

Figma föreslår färdiga storlekar i panelen till höger när du skapar en ram. Använd dem, men skriv in 360 om den föreslagna mobilen är bredare — 360 är uppgiftens krav och den smalaste bredd som är rimlig idag.

Varför två bredder och inte en: en design som bara finns i en bredd är en gissning om alla andra. Två tvingar dig att ta ställning till vad som händer däremellan.

3. Autolayout

Autolayout gör att en ram placerar sitt innehåll efter regler i stället för efter koordinater. Det är skillnaden mellan en design som spricker när texten blir längre och en som växer.

De fyra inställningarna

Storleksreglerna

Det här är hela poängen, och det som förväxlas oftast. Varje element i en autolayout kan vara:

Avstånd

Avstånd görs med gap och padding, aldrig med tomma rutor. En osynlig rektangel som skapar luft fungerar tills något ändras, och sedan aldrig mer. När du sätter avståndssystemet i uppgiften ska varje avstånd vara ett tal du kan ändra på ett ställe.

4. Constraints

Constraints bestämmer vad som händer med ett element när ramen omkring ändrar storlek: fäst mot vänster, höger, båda, eller centrerat. Det gäller element som inte ligger i en autolayout.

Regeln som skiljer dem åt:

Du behöver inte behärska constraints för uppgiften. Du ska veta att inställningen finns och vad den heter, så att du känner igen den när något beter sig oväntat.

5. Rutnät och spalter

Ett rutnät är en osynlig struktur som allting linjerar mot. Tre begrepp räcker:

En rimlig utgångspunkt för uppgiften, som du ställer in under Layout grid i Figma:

desktop 1280    12 spalter    ränna 24    marginal 80
mobil    360     4 spalter    ränna 16    marginal 16

Tolv spalter är standard, och skälet är aritmetik: tolv går jämnt ut i två, tre, fyra och sex. Innehållet kan alltså vara halvt, en tredjedel eller en fjärdedel brett utan att något hamnar snett.

På mobilen räcker fyra spalter, eller ingen alls — i 360 px ligger nästan allt i full bredd ändå.

6. De fyra principerna

När en sida ser rörig ut är det nästan alltid någon av de här fyra som är bruten. Att kunna namnge dem är skillnaden mellan att laga sidan och att rita om den.

Närhet är den vanligaste och den billigaste att laga. Nio gånger av tio är en rörig sida bara en sida utan grupper.

7. Vitrum

Vitrum är inte tom yta som blivit över. Det är verktyget som skapar grupperna.

• Litet vitrum — mellan rader, mellan etikett och fält, inuti en knapp. Gör innehåll läsbart.
• Stort vitrum — mellan sektioner, runt en rubrik. Gör strukturen synlig.

Regeln som gör mest nytta: avståndet inuti en grupp ska vara mindre än avståndet till nästa grupp. Är de lika stora finns inga grupper, bara en lista.

Vitrum är gratis, och det är därför det försvinner. Den som får plats över fyller den. Tom yta är ett val, inte ett misslyckande.

8. Hierarki och läsmönster

Hierarki är vad ögat ser först, sedan, sist. Den byggs av fyra signaler — samma som i typografin, fast på hela sidan:

Storlek. Vikt. Färg. Avstånd.

Läsmönster

• F-mönstret — textbundet innehåll. Ögat läser översta raden, sedan kortare svep nedåt längs vänsterkanten.
• Z-mönstret — sidor med lite text. Ögat går från övre vänstra hörnet till övre högra, diagonalt ner, och ut åt höger.

Det viktiga är inte bokstaven utan slutsatsen: överst till vänster är den dyraste ytan på sidan. Det som ligger där ska förtjäna sin plats.

Mönstren är tumregler, inte lagar. Riktiga användare tittar dit något rör sig, är färgstarkt eller ser ut som en knapp.

9. Färgskalan och kontrast

En färgskala är inte fem färger du tycker om. Det är ett antal uppgifter som råkar ha färg. Varje färg i skalan har en roll, och rollen är det den heter.

Testet på om en färg hör hemma i skalan: peka på den och säg vad som händer om du tar bort den. Kan du inte svara har den ingen roll. Fler än sju roller betyder nästan alltid att två av dem är samma roll.

Namnge färgerna efter rollen, inte efter nyansen. bla-3 säger ingenting om vad färgen är till för; primar-mork går inte att använda fel. Namnen blir variabler i Webbutveckling i november, så de ska hålla.

Neutralerna

Nästan allt du ritar är neutralt: bakgrunden, korten, linjerna, texten. Primärfärgen hamnar på ett par knappar. Tre neutraler är minimum, med var sin uppgift:

• Bakgrund — sidans botten.
• Yta — kort och paneler som ligger på bakgrunden. Måste gå att skilja från den.
• Text — brödtexten, och gärna en ljusare för sekundär text.

En fjärde för ramar och avdelare är nästan alltid rätt. Neutraler är sällan rent grå: en aning av primärfärgens nyans i det grå binder ihop gränssnittet.

Kontrast: vad 4.5:1 betyder

Kontrast är ett förhållande mellan två ljusheter. En färg har ingen kontrast — ett par har. Därför mäts kontrasten alltid mot det färgen faktiskt ligger på: samma textfärg kan klara sig på ytan och underkännas på bakgrunden.

Så mäter du. Använd WebAIM Contrast Checker i webbläsaren: webaim.org/resources/contrastchecker. Klistra in hex-värdet för texten och hex-värdet för det den ligger på. Du får ett tal direkt. Det tar fem sekunder per par, och det är därför du gör det nu och inte när komponenterna redan är ritade.

Uppgiften vill ha kontrastvärdet redovisat för varje kombination av text och bakgrund du använder — alltså en rad per par, inte ett värde per färg. Hex-värdena ska stå i stilguiden, inte bara som färgrutor att pipettera från.

Att laga en kombination som underkänns

Byt inte färg. Det är den dyra lösningen — då tappar skalan sin karaktär och nästa komponent stämmer inte längre. Ta vägarna i den här ordningen:

1. Ändra ljusheten på texten eller på bakgrunden. Behåll nyans och mättnad, dra L i HSL tills talet passerar gränsen. Färgen är samma blå, bara mörkare.
2. Byt vilken av de två som är text och vilken som är yta.
3. Sist: byt färgen.

Statusfärgerna fastnar oftast. Gult som varning är nästan alltid för ljust för vit text. Lös det med mörkare gult och svart text — inte genom att göra gult till orange.

10. Analys av liknande gränssnitt

Uppgiften kräver en skriftlig analys av två gränssnitt som löser samma uppgift som din sajt: minst 400 ord i en textram på sidan 04 Analys i designsystemfilen. Den är det enda i uppgiften som är text i stället för form, och det enda som går att göra klart utan att något annat är färdigt. Gör den i oktober.

Steg 1 – Välj två

De ska lösa samma uppgift som din egen sajt: två bokningssajter, två butiker, två bibliotekskataloger. Två sajter som gör olika saker går inte att jämföra, och då finns inget att skriva. Välj inte två du tycker om — välj två som liknar det du ska bygga.

Steg 2 – Kartlägg båda, i samma ordning

Gå igenom raderna nedan för den första sajten och sedan samma rader i samma ordning för den andra. Gör du inte det blir det två beskrivningar efter varandra i stället för en jämförelse.

Tillstånd är raden de flesta hoppar över, och den som ger mest tillbaka: du ska själv rita sex tillstånd per komponent. Klicka runt med enbart tangentbordet i trettio sekunder — det du ser då tittar nästan ingen på. Språk är raden de flesta underskattar: orden på knapparna är valda, och de säger olika saker om vad som händer sedan.

Steg 3 – Skilj på konvention och enskilt val

En konvention är det nästan alla gör: logotypen uppe till vänster som länk till startsidan, varukorgen uppe till höger, krysset som stänger. Den behöver inte motiveras när du tar efter den — den behöver motiveras när du bryter mot den.

Ett enskilt val är det som skiljer de två sajterna åt. Där ligger informationen, för där har någon bestämt sig.

Testet: hittade du samma lösning på båda? Då är det förmodligen en konvention. Hittade du två olika lösningar på samma problem? Då har någon valt, och då är det värt att fråga varför.

Steg 4 – Skriv slutsatserna

Varje del av analysen ska sluta i din egen sajt. Formen:

• De gör X. Jag tar efter det, därför att …
• De gör Y. Det tar jag inte efter, därför att …

Att låta bli är lika mycket värt som att ta efter, men bara med skäl. Jag gillar det inte är inget skäl. Min sajt har fyra sidor och deras har fyrtio, så deras meny löser ett problem jag inte har är ett skäl.

Fyrahundra ord är ungefär fem påståenden med skäl. Du ska alltså hitta fem saker att ta ställning till, inte skriva en uppsats.

11. Element och tillstånd

Ett gränssnitt består av ett litet antal element som återkommer. Att välja rätt är en fråga om vad som ska hända: ska något utföras, ska något matas in, eller ska något bara läsas?

Meddelanden är tre saker: bekräftelse säger att det gick bra, varning att något kan bli fel, fel att något blev det. De använder statusfärgerna ur din skala. Överlägget stoppar allt annat och kräver ett svar — har innehållet inget svar att kräva hör det hemma på sidan.

De sex tillstånden

Ett element utan tillstånd är en bild av ett element. Skillnaden mellan en ritning och ett gränssnitt är att gränssnittet svarar när man rör vid det. Uppgiften kräver att varje komponent har sina tillstånd där de är relevanta:

• Hover finns inte på pekskärm. Ungefär hälften av användarna ser aldrig det tillståndet. Hover är en bekräftelse, aldrig det enda som säger något viktigt.
• Inaktiv utan förklaring är en återvändsgränd. Skälet ska synas bredvid, annars ska knappen inte vara där.
• Fel ska säga hur man kommer vidare. Något gick fel är inget meddelande. Fyll i din e-postadress är ett.

Sex tillstånd låter mycket. Det är sex rutor på rad, och fyra av dem skiljer sig bara i ljushet — hämta dem ur din färgskala.

Varför konventioner slår påhittighet

Alla som besöker din sajt har använt hundra andra först. Förväntningarna är redan byggda, och de byggdes någon annanstans. Ett element som ser ut som något annat än det är kostar ett ögonblicks tvekan varje gång, av varje användare.

Originalitet i formen märks och uppskattas: färg, typografi, ton, bildspråk, rörelse. Originalitet i beteendet märks också — som att något är trasigt. Det betyder inte att inget får brytas; det betyder att ett brott mot en konvention är ett beslut som ska kunna motiveras, precis som i analysen.

12. Komponenter och varianter

En komponent har ett huvudexemplar och ett antal instanser. Ändras huvudexemplaret följer instanserna med. Ändrar du innehållet i en instans — texten på knappen — stannar ändringen där. Formen ärvs, innehållet är ditt.

Poängen med ett bibliotek är inte att spara tid när du bygger. Det är att ändringen bara finns på ett ställe. Sex kopierade knappar är sex tillfällen att missa en.

Varianter och egenskaper

En variant är inte en egen komponent — det är samma komponent i ett annat läge. Alla lägen ligger i ett komponentset, och läget väljs i egenskapspanelen i stället för att du letar rätt på en annan komponent.

En egenskap är en axel att välja längs. Knappen har oftast två:

Två egenskaper med två och sex värden ger tolv varianter i en komponent som heter knapp. Alternativet — tolv komponenter med namn som knapp primär hover och knapp sek hover — går inte att ändra på ett ställe, och uppgiften räknar det som ett fel.

Testet på om något ska vara en egenskap: kan du sätta ord på axeln? Tillstånd är en axel. Knappen på inloggningssidan är ett tillfälle. Egenskaper multipliceras — tre axlar med fyra värden är sextiofyra rutor. Två räcker till den här uppgiften.

Så gör du i Figma

1. Rita tillståndet färdigt först. Komponera inte något vars form inte är bestämd — då byggs det om två gånger.
2. Gör var och en av de sex ramarna till en komponent.
3. Markera alla sex och kombinera dem som varianter. Figma frågar efter egenskapens namn och värden — kalla egenskapen tillstand och kontrollera att de sex värdena stämmer.
4. Lägg ut tre instanser, ändra huvudexemplaret och kontrollera att alla tre följer med.

Namngivning som håller till juni

Uppgiften anger formen: knapp/primar/normal, knapp/primar/hover. Snedstrecket bygger hierarki — namnet blir en mapp i biblioteket — och därför står det gemensamma först. Börjar namnet med tillståndet hamnar alla hover-varianter i samma mapp och alla knappar i olika.

Kursens filnamnsregel gäller: gemener, bindestreck i stället för mellanslag, inga å, ä och ö. Du öppnar den här filen igen i april, i slutprojektet, och då är namnen det enda du minns av idag.

13. Två bredder

Uppgiften kräver startsida och undersida i både 360 och 1280 pixlars bredd, med samma innehåll i olika layout. En mobilsida är inte en desktopsida som fått mindre plats — det är samma innehåll med en annan prioritering, och prioriteringen är designarbetet.

Rita mobilen först

Att gå från 360 till 1280 betyder att lägga till. Att gå från 1280 till 360 betyder att välja bort — och det är mycket svårare, för allt du ska ta bort har du redan ritat och tycker om. 360 pixlar rymmer ungefär en sak i bredd och tvingar fram frågan vad som är viktigast. Svaret gäller i båda bredderna.

Har du redan ritat 1280 är det inte bortkastat. Gå igenom desktopsidan och stryk allt som inte ryms på mobilen. Det som stryks är svaret.

Vad som händer när bredden växer

Fyra saker kan hända med ett block. Gå igenom din startsida block för block och skriv vilken av dem som gäller:

Frågan som gör mest nytta ställs om det som försvinner: om det går att ta bort på mobilen — varför ligger det på desktop? Ibland är svaret att det är en genväg som får plats när det finns plats. Ibland är svaret att det aldrig behövdes. Båda svaren är användbara.

Det som får skilja sig mellan bredderna är ordning, gruppering och hur mycket som visas åt gången — inte vad som står. Två olika texter är två sajter, inte en responsiv.

Navigationen i två bredder

Hamburgerknappen är en konvention, men den döljer. Antalet val avgör: har du fyra sidor får de plats på en rad även i 360. Din sajt har fyra sidor. Att gömma fyra val bakom ett klick gör sajten svårare för att den ska se ren ut.

Tumzon och träffytor

Med en hand når tummen nederkanten och mitten av skärmen bekvämt. Det övre motsatta hörnet är det svåraste stället — det är därför appar lägger sina viktigaste knappar längst ned, och därför krysset uppe till höger är svårt att nå men lätt att undvika av misstag.

Träffytan är minst 44 × 44 px för allt som går att trycka på. Det står i kravlistan och det är binärt. Två saker som brukar underkännas:

• En textlänk är hög som sin text. Är texten 16 px är träffytan 16 px, om ingen ger den mer.
• Ikonknappar ritas i ikonens storlek. En ikon på 24 px behöver luft runt sig upp till 44.

Träffytor får inte heller nudda varandra — två knappar som ligger kant i kant ger feltryck även när båda är stora nog. Kontrollen är enkel: rita en ruta på 44 × 44 i Figma och lägg den över det som ska tryckas på.

14. Överlämningen

Stilguiden lämnas in 5 november och är en av kursens överlämningar: det är den som Webbutveckling stilsätter mot i november. Den läses alltså inte av en lärare och läggs undan — den används av någon som sitter med koden, och som inte kan gå vidare förrän en obesvarad fråga fått svar.

Vad byggaren behöver

Regeln som håller ihop tabellen: allt som är ett beslut ska ha ett värde. Har det inget värde uppfinner byggaren ett — och då är det hens design och inte din. Utöver de fyra ska tre saker stå någonstans i guiden, för de är krav och kontrolleras: bredderna 360 och 1280, träffytan 44 × 44, och kontrastvärdena för de kombinationer som används.

Användningsregler

En användningsregel säger när något ska användas och när det inte ska det. Två meningar räcker:

• Primärknappen används en gång per vy, för det man helst ska göra. Finns två lika viktiga handlingar är ingen av dem primär.
• Accentfärgen markerar. Den används aldrig som bakgrund bakom brödtext.
• Kortet är klickbart i sin helhet. Ligger det en knapp inuti är kortet inte klickbart.

Testet på om en regel är värd att skriva: kan två personer göra olika av samma komponent utan att någon gör fel? Då behövs en regel. Reglerna är A-nivån i matrisen, och de kostar tio minuter.

Testet: låt någon annan bygga efter den

Matrisens A-nivå säger prövat på någon annan. Det är ett moment, och det är vad arbetspasset den 2 november är till för:

1. Byt fil med en kamrat.
2. Kamraten väljer en komponent eller en yta i mockupen och försöker beskriva exakt hur den skulle byggas — mått, färger, namn, tillstånd.
3. Varje gång hen måste fråga något antecknas frågan. Inget svar ges muntligt.
4. Byt tillbaka. Frågelistan är din arbetslista.

Frågorna är inte kritik. Varje fråga är ett hål som annars hade dykt upp i november, när personen som frågar sitter med koden och ni inte är i samma rum.

Sidan Överlämning

Lägg en egen sida i designsystemfilen som heter Överlämning, med:

1. Var saker finns i filen — vilken sida är vad.
2. De sju uppgifterna ovan: värden, namn, avstånd, tillstånd, bredder, träffytor, kontrastvärden. På sidan, eller med hänvisning till var de står.
3. Minst tre användningsregler, skrivna som meningar.
4. En rad om vad som inte är bestämt, om något sådant finns.

15. Felsökning