Gränssnittsdesign · område 2

Guide – Illustrator för webb

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. Guiden är komplett för området: alla sex passen har sitt avsnitt.

1. Vektor och pixel

En pixelbild är ett rutnät av färgvärden. En vektor är en uppsättning instruktioner: punkter, linjer och regler för hur de förbinds.

Skillnaden märks först när du förstorar. Pixelbilden har inget mer att ge — den kan bara göra rutorna större. Vektorn räknas om, och kanten blir lika skarp i 400 % som i 100 %.

2. Banor och ankarpunkter

En bana är punkter förbundna med linjer. Varje punkt har ett läge, och kan ha handtag som bestämmer hur linjen kröker sig in i och ut ur punkten.

• Hörnpunkt — linjen byter riktning tvärt
• Mjuk punkt — linjen fortsätter i samma riktning genom punkten

Med pennverktyget ger ett klick en hörnpunkt, och klicka och dra ger en mjuk punkt med handtag.

3. Pathfinder och justering

De flesta ikoner byggs av enkla former som kombineras, inte av banor ritade för hand. Pathfinder-panelen har fyra knappar du behöver:

En molnikon är tre cirklar och en rektangel, förenade. Det tar trettio sekunder och ger en renare form än samma moln ritat för hand.

Justeringspanelen centrerar mot artboarden och fördelar jämnt. Det är den som gör att ett set ser ordnat ut i stället för nästan ordnat.

4. Artboards

En artboard är en rityta i dokumentet, och ett dokument kan ha många.

5. Ikonrutnätet

Allt börjar här. Ett ikonrutnät är en kvadrat med marginaler, och alla ikoner i ett set ritas innanför samma.

• 24 × 24 px är storleken i uppgiften. Andra vanliga: 16, 20, 32
• Marginal runt om, ofta 2 px. Ikonen fyller alltså 20 × 20
• Optisk yta — en cirkel måste ritas något större än en kvadrat för att se lika stor ut

Varför marginalen finns: ikonen ska kunna sitta intill text eller inuti en knapp utan att nudda kanten. Utan marginal måste varje användning kompensera för sig.

6. Streckbredd och hörnradie

Två tal som ska vara desamma i hela setet. Det är de som gör att ikonerna ser ut att höra ihop.

Streckbredd. På ett 24-rutnät är 2 px en trygg start. 1,5 ger ett finare uttryck, 3 ett kraftigare. Vilket du väljer spelar mindre roll — att det är samma i alla ikoner spelar all roll.

Hörnradie. Skarpa hörn ger ett tekniskt uttryck, rundade ett mjukare. Samma radie i hela setet, också på insidan av former.

7. Vad en ikon kan säga

Det här är det svåraste i uppgiften, och det som avgör hur den går.

En ikon fungerar när den avbildar ett föremål eller en handling som är allmänt känd. Den fungerar inte när den ska avbilda ett begrepp.

Fundera på hur du skulle rita hållbarhet. Löv, jordglob, återvinningspil — alla betyder något annat också, och ingen av dem betyder hållbarhet utan en text bredvid.

Du ska lista tolv möjliga ikoner och välja sex. Arbetet ligger i bortvalet — de sex som blir kvar ska vara de som klarar testet.

8. Optisk balans

Matematiskt centrerat och optiskt centrerat är inte samma sak.

En triangel som centreras med justeringspanelen ser ut att ligga för långt åt höger, eftersom tyngdpunkten sitter till vänster. Flyttar du den några pixlar ser den centrerad ut — fast den inte är det.

Samma sak gäller storlek. En cirkel med samma bredd som en kvadrat ser mindre ut, och måste ritas något större för att väga lika.

9. Typografi

Läsbarhet är teknik, inte tycke. Fyra mått avgör om en text går att läsa, och alla fyra går att mäta.

Typsnittsklasser

Ett typsnitt för rubriker och ett för brödtext räcker. Tre är nästan alltid ett för mycket, och två som liknar varandra ser ut som ett misstag. Serif rubrik och sans brödtext fungerar; två olika sans-serifer gör det sällan.

X-höjd

X-höjd är höjden på ett gement x — bokstäverna utan uppstaplar. Två typsnitt i samma storlek kan se helt olika stora ut om x-höjden skiljer.

Stor x-höjd ser större ut och läses lättare i små storlekar. Liten x-höjd ser elegantare ut och tappar i 12 px.

Radlängd och radavstånd

Radlängd mäts i tecken, inte i centimeter. 60 till 75 tecken per rad är det spann ögat klarar utan att tappa raden.

• För kort rad — ögat hoppar hela tiden, texten blir hackig
• För lång rad — ögat tappar bort vilken rad det ska tillbaka till

Radavstånd hänger ihop med radlängden: längre rader behöver mer luft för att ögat ska hitta tillbaka. Ungefär 1,4 till 1,6 gånger textstorleken är en rimlig brödtext.

Den typografiska skalan

Fem storlekar som hör ihop — och de hör ihop för att de bygger på ett förhållande, inte för att någon tyckte att de såg bra ut.

Börja i brödtexten och multiplicera med en faktor. Med 16 som bas och faktorn 1,25:

Avrunda till hela tal. Räknar du ut skalan så här kan du alltid lägga till ett steg till. 1,2 ger en tät skala som passar gränssnitt med mycket innehåll, 1,5 en dramatisk skala för en enkel sida med få nivåer.

Hierarki

Fyra sätt att göra något viktigare: storlek, vikt, färg och avstånd.

Licenser

Att ett typsnitt går att ladda ner betyder inte att det får användas på en sajt. Ett typsnitt som följde med Photoshop får sällan bäddas in. För uppgiften räcker det att du vet vilken licens ditt typsnitt har och kan säga det.

10. Ordmärke

Ett ordmärke är sajtens namn satt som logotyp. De flesta logotyper du känner igen är ord och inte symboler, och det är av tre skäl: ordet säger namnet direkt medan en symbol måste läras in, ett ordmärke går att göra bra på en lektion medan en symbol tar veckor, och ord i vektor skalar rent från 16 pixlar till en vepa.

Ett ordmärke är inte ett typsnittsval. Det är ett typsnittsval plus justering. Typsnittet gör ungefär åttio procent av jobbet. De sista tjugo procenten gör du själv, och det är de som skiljer ett ordmärke från ett rubrikord.

Välja typsnitt

Utgå från sajtens rubriktypsnitt. Samma typsnitt som rubrikerna är det enklaste valet och nästan alltid rätt — ordmärket ska höra ihop med typografin du satte i avsnitt 9, inte konkurrera med den.

Tre saker avgör om ett typsnitt håller som ordmärke:

• Ordets längd. Ett namn på tre bokstäver klarar ett display-typsnitt. Ett namn på fjorton gör det inte.
• Sajtens ton. Samma fråga som i avsnitt 9, men svaret syns tydligare här eftersom ordmärket är det första någon ser.
• Bokstävernas form. Vissa typsnitt tål att justeras, andra faller isär så fort du rör avstånden.

Spärrning och kerning

Ett ordmärke behöver båda. Tre regler räcker långt:

• Stora storlekar tål mindre avstånd. Namnet satt i 80 pixlar ser luftigt ut med samma spärrning som fungerar i 14. Det är därför värdet måste sättas om för varje version.
• Versaler behöver mer spärrning än gemener. Ett ordmärke i versaler utan spärrning ser hopklämt ut. Det är det vanligaste felet.
• Vissa bokstavspar öppnar sig av sig själva. AV, To, Ya och LT glipar. De måste dras ihop för hand, och det är just det kerning är till för.

Optisk justering

Matematiskt lika avstånd mellan tecknen ser ojämna ut. Bokstäverna har olika form: ett V lutar undan upptill, ett L öppnar sig nedtill, ett O buktar ut. Sätter du samma tal överallt blir vissa gap synligt större än andra.

Tre versioner

Uppgiften kräver tre storleksversioner, och de ska skilja sig i mer än storlek. Ett märke som bara förminskas blir grått och tätt. Ett som bara förstoras blir glest och håligt.

Märket ska också fungera mörkt på ljust och ljust på mörkt. Det är samma fil med ombytta färger, inte två olika märken.

Arbetsgången

Skissa för hand först. Det är inte en pedagogisk omväg — det är snabbare.

1. Skissa tre ordmärken på papper. Tio minuter, tjock penna, inga linjaler. Skisserna ska visa proportioner och tyngd, inte vara fina.
2. Välj ett och skriv en mening om varför just det.
3. Sätt ordet i Illustrator i ditt typsnitt.
4. Justera spärrningen tills det ser jämnt ut. Kerna paren som glipar.
5. Gör om steg 4 för varje storleksversion, med egna värden.

11. SVG och export

En SVG är inte en bild. Det är text — en instruktion som råkar rita något. Öppnar du din exporterade ikon i en textredigerare i stället för att dubbelklicka på den ser du banorna du ritade, uttryckta i tal.

Det är därför du kan städa i filen, och det är därför kravet på en rensad export finns: en fil du aldrig öppnat vet du inte vad den innehåller.

Vad filen innehåller

Rensningen

Illustrator lägger till saker ingen bad om. Så här ser en orensad export ut — det du ser här ska du känna igen i din egen fil, inte skriva av:

<svg id="Lager_1" data-name="Lager 1" viewBox="0 0 24 24">
  <defs><style>.cls-1 { fill: #1b3a5c; }</style></defs>
  <title>ikon-fyr</title>
  <g id="Lager_2"></g>
  <path class="cls-1" d="M12 2 L22 20 L2 20 Z"/>
</svg>

Samma fil rensad. Ikonen ser exakt likadan ut — det är beviset på att skräpet var skräp:

<svg viewBox="0 0 24 24">
  <path d="M12 2 L22 20 L2 20 Z" fill="#1b3a5c"/>
</svg>

Färg som ärvs

En exporterad ikon har färgen fast i filen. Byt ut färgvärdet mot detta:

fill="currentColor"

Nu tar ikonen färg från texten omkring sig i stället för att bära sin egen. Ett set med inbränd färg måste exporteras om varje gång sajten byter färgtema. Ett med currentColor behöver aldrig röras igen.

Samma sak med storleken: ta bort width och height ur <svg>-taggen, men låt viewBox stå kvar.

<svg viewBox="0 0 24 24">

currentColor går inte att sätta i Illustrators färgväljare. Den skrivs in i filen, för hand.

När SVG inte är svaret

SVG vinner på ikoner, logotyper och enkla illustrationer: ritat material med skarpa kanter och få färger. SVG förlorar på foton — alltid — och på illustrationer med tusentals banor, där filen blir både större och långsammare än en PNG av samma bild.

Tumregeln är att ju fler banor, desto sämre affär. En ikon på tolv banor är självklar. En detaljerad karta på tolvtusen är det inte. Resten av formatvalet står i guiden till område 1.

Mappar och filnamn

Så här ska det ligga när du lämnar in:

ikonset/
  arbetsfiler/     ikoner.ai, ordmarke.ai
  svg/             ikon-fyr.svg, ikon-karta.svg, ordmarke-liten.svg
  typografi.md     din skala

Filnamn i gemener, bindestreck i stället för mellanslag, inga å ä ö. Det märks inte förrän filen ligger på en server, och då är det för sent.

12. Felsökning