Gränssnittsdesign · område 2

Uppgift 2 – Ikonset och ordmärke

Sex ikoner i samma manér, ett ordmärke i tre storleksversioner och en typografisk skala om fem steg. Ritat med banor och exporterat som rensad SVG.

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

1. Uppdraget

Du ska rita ett ikonset, ett ordmärke och en typografisk skala till den sajt du håller på att bygga. Allt ska höra ihop: ikonerna med varandra, ordmärket med ikonerna, och typografin med båda. Någon ska kunna se delarna bredvid varandra och förstå att de kommer från samma hand.

Temat är detsamma som i bildpaketet. Ikonerna ska handla om det din sajt handlar om, och ordmärket är sajtens namn.

Det här är inte en engångsuppgift heller

Ikonerna, ordmärket och den typografiska skalan går rakt in i stilguiden du bygger i område 3, och den stilguiden är det som Webbutveckling stilsätter sajten mot i november. Ritar du ikoner du inte står ut med nu får du se dem till jul.

Vektor är hela poängen med det här området. En ikon som ritats med banor kan skalas från 16 pixlar till en affisch utan att tappa en enda kant. Samma ikon som pixelbild går sönder vid första förstoringen.

2. Ska-krav

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

3. Bör-krav

Det här är skillnaden mellan att rita något som ser rätt ut och att kunna säga varför det ser ut som det gör. Nivå C.

Bör-krav — nivå C

Du kan motivera streckbredden och hörnradien som ett val, inte som ett förval
Ikonerna är testade på någon annan utan text bredvid. Minst fem av sex förstods
Ordmärkets tre versioner skiljer sig i mer än storlek — spärrning eller detaljer är justerade för varje storlek
Den typografiska skalan är prövad på en riktig brödtext, inte bara på rubrikord
Du kan säga vilken typsnittsklass du valde och varför den passar sajtens ton
Typsnittets licens är redovisad: fritt, köpt eller webbtypsnitt med villkor

4. Utmaningar

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

Utmaningar — nivå A

Ikonsetet fungerar i både 16 och 32 px utan att någon ikon behövde ritas om
Du har ritat en ikon som ingen förstod, gjort om den, och kan förklara vad du ändrade
Du har läst igenom SVG-koden och kan peka ut vad som är onödigt i den
Ikonerna använder currentColor så att färgen ärvs från sammanhanget
Du kan namnge var du kompromissade — en ikon som blev otydligare för att passa in i setet, eller tvärtom

Kryssen sparas i din webbläsare.

5. Tekniska krav

Krav	Vad som gäller
Mappstruktur	`ikonset/arbetsfiler/` för `.ai`, `ikonset/svg/` för exporten
Filnamn	`ikon-namn.svg`, till exempel `ikon-fyr.svg`. Ordmärket: `ordmarke-liten.svg`
Rutnät	24 × 24 px, en artboard per ikon
Färgläge	RGB. Inte CMYK
SVG-export	Rensad: inga `<title>`-rester, ingen inbäddad rasterbild, inga tomma grupper
Typografisk skala	Tabell i `ikonset/typografi.md`: steg, storlek, radavstånd, användning
Var det lämnas	Designportföljen i Figma, sidan `02 Ikoner`, plus filerna i mappen

6. Bedömningsmatris

Kriterium	E	C	A
Vektorhantverk	Ikonerna är ritade med banor och går att skala	Banorna är rena och konsekventa: samma streckbredd, samma hörnradie genom hela setet	Formerna är byggda så att någon annan kan ändra i dem utan att de faller isär
Ikonspråk och budskap	Ikonerna hör till temat och går att känna igen	Ikonerna förstås utan text, och setet håller ihop som ett manér	Du vet vad en ikon klarar och inte klarar, och har valt bort de motiv som kräver text
Typografi	En skala om fem steg finns och används	Skalan är prövad på riktig text, och typsnittsvalet är motiverat	Typografin bär sajtens ton, och licensfrågan är genomtänkt snarare än avbockad
Anpassning och export	Filerna är exporterade som SVG i rätt mappar	Exporten är rensad och filerna fungerar i de storlekar de är tänkta för	Filerna är förberedda för kod: färg som ärvs, storlek som följer sammanhanget

7. Kom igång

Lista tolv ikoner du skulle kunna behöva, redan i veckan. Sajtens navigering, funktioner, kategorier. Sex ska överleva — välj bort de som kräver text för att förstås.
Bestäm rutnätet och streckbredden innan du ritar den andra ikonen. Att ändra dem i efterhand betyder att rita om allt. Två pixlar streck på ett 24-rutnät är en trygg start.
Rita fyra ikoner på passet den 10 september. Då har du något att testa i 16 px medan det fortfarande går att ändra.
Skissa ordmärket för hand innan du öppnar Illustrator. Tre förslag på papper tar tio minuter och sparar en timme.

8. Vanliga misstag

Ikonerna ritas var för sig och får olika streckbredd. Sätt rutnätet först, kopiera det till varje ny artboard.
Ikonen ser bra ut i 200 % och blir en grå fläck i 16 px. Testa i den storlek den ska användas, inte i den du ritar i.
Ordmärket görs i en enda storlek. Ett märke som fungerar stort blir ofta oläsligt smått — det är därför tre versioner krävs.
Den typografiska skalan blir fem godtyckliga tal. Bygg den på ett förhållande, till exempel att varje steg är 1,25 gånger det föregående.
SVG:n exporteras direkt ur Illustrator utan att öppnas. Öppna filen i en textredigerare en gång — du kommer att se varför kravet finns.
Motivet kräver text för att förstås. En ikon för hållbarhet är svår. En ikon för karta är det inte.