Designgrid: därför ser bra webbplatser lugna ut

När en webbplats ser rörig ut är det sällan färgerna eller bilderna som är boven. Problemet är att elementen inte står i någon ordning i förhållande till varandra. En rubrik börjar några pixlar längre in än texten under, varje sektion har egna avstånd och korten i en rad har olika bredd. Var för sig är det detaljer. Tillsammans gör de att ögat inte har någonstans att vila.

En designgrid är ett antal osynliga linjer som allt på sidan riktas in efter. Den begränsar inte kreativiteten. Den är anledningen till att det gör intryck när man bryter den, till exempel med en stor bild över hela skärmens bredd.

Vad en grid består av

• Kolumner. Oftast 12 på datorn, eftersom tolv går att dela i 2, 3, 4 och 6. Innehållet tar upp ett valt antal kolumner, inte en godtycklig bredd i pixlar.
• Mellanrum mellan kolumnerna, alltid lika stora.
• Marginaler, alltså avståndet mellan innehållet och skärmens kant.
• En vertikal avståndsskala. I stället för godtyckliga värden några fasta, oftast multiplar av 4 eller 8 pixlar. Det ger sektionerna rytm.

Griden i mobilen och på datorn

En och samma grid passar inte alla skärmar. En vanlig konvention är 4 kolumner i mobilen, 8 på surfplattan och 12 på datorn. Ett kort som tar 4 av 12 kolumner på datorn, en tredjedel av bredden, tar alla 4 i mobilen och fyller hela bredden.

Det viktiga är att marginalerna i mobilen är desamma på hela webbplatsen. Om en sektion går ut i kanten och en annan har 24 pixlars avstånd ser webbplatsen genast hopplockad ut.

Radlängd

Griden avgör också hur långa textraderna blir. Klassiska typografiska råd talar om 45–75 tecken per rad. Längre rader tröttar, eftersom ögat tappar bort sig när det hoppar till nästa. Därför ska en artikeltext inte sträckas ut över hela bredden på en stor skärm, även om bilderna bredvid gör det.

Avstånd betyder mer än man tror

Element som står nära varandra uppfattar vi som sammanhörande. Om avståndet mellan en rubrik och dess text är lika stort som mellan texten och nästa rubrik vet läsaren inte vad rubriken hör till. En enkel regel: avståndet inom en grupp ska vara tydligt mindre än avståndet mellan grupper.

En fast avståndsskala hjälper också teamet. Designern och utvecklaren diskuterar inte 22 eller 24 pixlar, utan väljer nästa steg på skalan.

Griden och designsystemet

Griden är grunden i ett designsystem. Komponenter som kort, formulär eller sektioner med text och bild formges så att de tar hela kolumner och använder avståndsskalan. Då byggs en ny sida av färdiga delar som passar ihop utan justeringar. Det är ett av skälen till att en webbplats byggd på ett system är billigare att vidareutveckla.

Så kollar du din webbplats på fem minuter

1. Vänsterkanter. Håll en linjal mot skärmen eller dra en lodrät linje i valfritt verktyg. Börjar rubriker, text och knappar på samma ställe?
2. Antal olika avstånd. Räkna hur många olika avstånd mellan sektioner du ser. Tre eller fyra är ordning, tio är slump.
3. Radlängd. Öppna en artikel på en stor skärm. Har en rad fler än hundra tecken är texten för bred.
4. Mobilen. Scrolla igenom webbplatsen och titta bara på marginalerna vid sidorna. Är de lika överallt?
5. Kort i en rad. Har de samma bredd, och börjar innehållet på samma höjd?

Ordning i griden är halva intrycket av en ”professionell” webbplats. Den andra halvan är enhetliga färger och kontrast, som vi skrev om i artikeln om varumärkets färger. Se hur vi förenar de två i vårt arbete med webbplatser.