booombaclot

Av Niklas Sidhu Koskela

– INLEDNING –

Det gyllene snittet är en välkänd matematisk formel för harmoniska visuella uttryck.
I den här artikeln kommer jag att fokusera på dess påverkan inom webbdesign och hur man kan applicera den.
Jag kommer utöver detta också att titta närmare på grids och olika typer av layouter som kan påverka en hemsidas harmoni och användarens informationsintag.

 

– THE GOLDEN RATIO –

golden-ratio
(bild från: livescience.com)

Matematik ses ofta som något tråkigt, främst för oss som befinner oss i design-industrin eller andra kreativa områden. Vissa påstår dock att konst, arkitektur och design har mer matematik gemensamt än vad man skulle kunna tro och att detta undermedvetet påverkar vår känsla av harmoni och perfektion i ett visuellt uttryck.

Detta anses ha att göra med det gyllene snittet (också känt som the Golden Ratio eller the Divine Proportion) (Remick, 2008).

Man har dock inte kunnat reda ut vad det är i det gyllene snittet som tilltalar oss på det sättet som den påstås göra (Pentago, 2012). Detta har resulterat i att vissa ifrågasätter dess funktion och verkan och anser att den enbart är matematiskt elegant. Detta, tillsammans med det faktum att den återfinns i olika former i naturen anses av oppositionen vara anledningen till att människor ger den tilltro (Lieveld, 2012).

Det finns alltså inga konkreta bevis för gyllene snittets påverkan. Dock hindrar detta inte faktumet att det i stor mån är något av en standard och något man, som designer, kan ha stor nytta av.

Det hela bygger på att man har två delar, och b. Dessa två ska sedan förhålla sig till varandra genom att ta ytans bredd på det man önskar designa, dela det med numret 1,618 och på så vis får man ut a. Genom att sedan ta den totala ytans bredd minus får man fram storleken på b.

Förhållandet är a/b = a+b/a = 1.618, 1.618 representerar det gyllene snittet.

matematiskt

Hur man applicerar det gyllene snittet

Så för att skapa en harmonisk uppbyggnad på en hemsida där förhållandet mellan sektionerna följer det gyllene snittets formel tar man den totala ytan av sidan, t.ex. 900 pixlar, delar detta med 1,62 (eftersom webbläsare gillar jämna nummer är det inga problem att runda av siffor och resultat).
Detta ger oss 555.55 px ≈ 555 px vilket blir huvudinnehållets (main content) storlek i bredd. Genom att ta 900–555 får vi fram bredden på vår eventuella sidebar, 345 pixlar. (Remick, 2008).

För att sedan applicera det gyllene snittet på de olika sektionernas höjd tar man sidans bredd och delar det med 1.62. Exempelvis 760/1.62 = 469.135802 ≈ 470. Sektion blir alltså 555×470 pixlar.

Sektion b räknas ut på samma sätt och blir då 345×470 pixlar.

Tar man sedan bort 470 från 760 så får man 290, vilket då blir den nedre sektionen.

gd_yo

Samma ekvation fungerar även för procentbaserade layouter, byt bara ut 900 px till 100% (Kyrnin).

Dessa sektioner kallas för Golden Rectangles (Pentago, 2012).

För att kontinuerligt följa det gyllene snittet kan man skapa mindre golden rectangles inuti de större (Kyrnin).

Om man vill skapa andra element som följer gyllene snittet eller golden rectangles så kan man skapa ett så kallat Golden Rectangle Grid.

Detta gör man enligt Fibonaccis spiral som är den båge som man ser på bilden för det gyllene snittet. Bågen ökar i storlek med 1.618 per fjärdedel i sin rotation.

För att skapa detta gör man 2 rutor som är exempelvis 5×5 pixlar, en som är 10×10, en som är 15×15 och en som är 25×25 och ställer upp dem på följande vis:

fibonacci

Man baserar storleken på de olika rutorna enligt Fibonaccis sekvens där numren adderas med det föregående numret för att ge nästkommande nummer:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 osv

Alltså; 1×1, 1×1, 2×2, 3×3, 5×5

När man sedan skapar olika element för sin sida så kan man justera storleken efter de olika rutorna.

– GRIDS –

grid(bild från: tuts+)

Grids är, precis som i exempelvis Photoshop, ett rutnät som ligger ovanpå bilden.
Man kan säga att detta är ett enklare sätt att åstadkomma något som påminner om det gyllene snittet på så sätt att man placerar den information som man vill att användaren ska ta del av på rätt platser för att skapa en undermedveten känsla av struktur och harmoni.

Enligt ”tredjedelsregeln” (Rule of Thirds) ska man dela upp en yta i tre lika delar, både vertikalt och horisontellt, där linjerna korsar varandra är de ideala platserna för den ovannämnda typen av information.
Risken är större att användarna fokuserar på dessa punkter och de ska vara behagligare att titta på.

 

Genom att dela upp dessa tredjedelar i ytterligare tredjedelar kan man också utnyttja principen i mer komplexa gränssnitt.

Med hjälp av denna typ av layout kan hjärnan slappna av och ögonen dras automatiskt till den information som man vill ska framhävas.

Hur man applicerar grids

I sin artikel The Principles of Beautiful Web Design” skriver Jason Beaird om ett tillvägagångssätt för att skapa ett bra rutnätssystem:

  1. Börja med att dra upp en rektangel, i dator eller med papper och penna
  2. Dela upp rektangeln i tredjedelar, horisontellt och vertikalt.
  3. Dela upp den övre delen av din layout i ytterligare tre delar för din header.
  4. Dela samtliga av dina kolumner på mitten för att skapa ett mer detaljerat rutnät.

Placera sedan den information eller de element som du anser viktigast på de platser där linjerna korsar varandra.

Fördelar med grids

Om man har en väldigt innehållsrik hemsida så kan det vara till fördel att dra nytta av grids. Hemsidor som tillhandahåller mycket information kan framstå som mer iögonfallande.

Grids kan också underlätta skapandet av responsiva webbplatser.

Den mest avgörande punkten är att man till viss del kan styra användarens fokus, eller snarare öka synligheten hos de element som man vill framhäva genom att placera dem där användarens fokus kommer att vara.

(Jones, 2012)

Nackdelar med grids

Genom att använda sig av grids skulle man kunna säga att man begränsar kreativiteten. När man valt vart man vill placera viss information så kan designern eventuellt känna sig limiterad av de tydliga gränserna som grids medför.

Metoden har en relativt brant inlärningskurva. Det finns mycket information kring grids och en hel del kan vara missvisande.

Det funkar inte för alla typer av hemsidor utan ämnar sig bäst på sidor som har mycket information.

(Jones, 2012)

– Z-LAYOUT & F-LAYOUT –

Z-Layout

Z-layout är ett utmärkt sätt att skapa en hemsida på då man tar hänsyn till de huvudsakliga kraven på en effektiv sida; varumärket, hierarkin, strukturen och uppmaning till handling.
För att använda sig av z-layout drar man helt enkelt ett stort ”Z” över det dokument där man tänkt skapa en hemsida i.
De element som man vill att besökaren ska se först placerar man i den övre kanten av z:et.
Då ögonen naturligt följer mönstret av z:et vill man placera uppmaningen till handling i slutet, när användaren tagit del av den information som värmer upp för handlingen.

z(Bild från: tuts+)

Varför det fungerar:

Det fungerar bra för oss västerlänningar för att vi kan skumma igenom sidan på samma sätt som vi skummar igenom en bok, uppifrån och ned, från vänster till höger. Dessutom följer denna layout hierarkin kring prioriteten kring de olika beståndsdelarna på en sida:

  • Varumärket
  • Hierarkin
  • Strukturen
  • Uppmaning till handling

Viktigt att tänka på när man använder sig av denna typen av layout är att om man vill att besökaren ska följa z:et så som man tänkt sig så ska man undvika att placera objekt som t.ex. är stora och färgglada på platser utanför z-formen.

(Jones, 2010a)

F-layout

Den här metoden försöker inte dra besökarens uppmärksamhet och få denne att följa en viss form utan fungerar genom att man, likt grids, med största sannolikhet följer besökarens naturliga sätt att bemöta en hemsida. Detta backas dessutom upp av vetenskapliga undersökningar.

Dessa vetenskapliga undersökningar har gjorts kring människor som surfar på internet och deras ögonrörelser där det kommit fram att de flesta tar in en hemsida i en F-formad ögonrörelse.

Undersökningarna påvisar med detta att sidans viktigaste element bör placeras på vänster sida.

heatmap

 

(Bild från: tuts+)

Precis som i Z-layouten börjar användaren i det övre vänstra hörnet och skannar av hela övre delen (navigationen, logo osv).
Sedan kollar de på innehållet nedanför och skannar av ända fram till sidans sidebar.
Efter detta går de över innehållet på ett snabbare och kortare sätt.

Liksom Z-layouten så baseras detta på hur man läser en bok; vänster till höger, uppifrån och ned. Sidebars avfärdas mer eller mindre.

F-layouten fungerar eftersom den låter besökarna läsa av innehållet på ett naturligt sätt.

Fördelar och nackdelar

Fördelen med båda dessa typer av layouter är att man lägger fokus på innehållet ”content is king”.

Man kan dock se att de båda är mest relevanta i marknadsföring då de har en uppmaning till handling. Denna uppmaning till handling kan vara att skriva upp sig för ett nyhetsbrev, köpa något eller anmäla sig.

(Jones, 2010b)

– SLUTSATS –

Oavsett vilken av de förhållningsregler som jag presenterat ovan man väljer att använda sig av så är det viktigt att tänka på i vilket avseende man skapar en sida. Man ska heller inte låta sig begränsas av de olika metoderna, de är endast riktlinjer som har olika effekter på besökarens/användarens upplevelse och/eller informationsintag.
Genom att använda sig av detta kan man uppnå försäljning, känslan av harmoni och struktur, en fördelaktig informationsarkitektur men man kan också hämma sin kreativitet och gå miste om viktiga lärdomar som kan medföras av att man provar sig fram, utanför lådan.
Jag tror att det är viktigt att vara medveten om dessa olika riktlinjer och när de passar att användas då vissa av dem har bevisat positiva resultat.
Med en kunskap kring detta, balanserad med kreativitet tror jag att man kommit en bra bit på vägen till att bli en duktig UX/UI/Webb/Interaktions-designer.

 

– KÄLLFÖRTECKNING –

Beaird, Jason (2007) The Principles of Beautiful Web Design [Elektronisk] Sitepoint, 2 apr.
Tillgänglig: http://www.sitepoint.com/principles-beautiful-web-design/3/
[12-02-2014].

Jones, Maria (2012) Pros and Cons of Using Grids in Web Design [Elektronisk] Bloom Web Design, 29 nov. Tillgänglig: http://bloomwebdesign.net/2012/11/pros-and-cons-of-using-grids-in-web-design/ [12-02-2014].

Jones, Brandon (2010a) Understanding the Z-Layout in Web Design [Elektronisk] Tuts+,
19 okt. Tillgänglig: http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design–webdesign-28 [12-02-2014].

Jones, Brandon (2010b) Understanding the F-Layout in Web Design [Elektronisk] Tuts+,
19 okt. Tillgänglig: http://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design–webdesign-687 [12-02-2014].

Kyrnin, Jennifer Mathematcis, Seashells and Web Design [Elektronisk] About.com
Tillgänglig: http://webdesign.about.com/od/webdesignbasics/a/aa071607.htm
[12-02-2014].

Lieveld, Jerry (2012) Forget the Golden Ratio [Elektronisk] lieveld.com, 13 sep.
Tillgänglig: http://www.lieveld.com/forget-the-golden-ratio/ [12-02-2014].

Pentago, Chris (2012) Applying the Golden Ratio in Modern Designs
[Elektronisk] Hongkiat.com
Tillgänglig: http://www.hongkiat.com/blog/golden-ratio-in-moden-designs/
[12-02-2014].

Remick, Jarel (2008) The Golden Ratio in Web Design [Elektronisk] Tuts+, 29 dec.
Tillgänglig: http://code.tutsplus.com/tutorials/the-golden-ratio-in-web-design–net-2272 [12-02-2014].