Skip to main content

Grafisk design

Principer för grundläggande webbdesign

Luft och mellanrum

Luft, eller tomma ytor, gör att innehållet känns lugnt och lätt att läsa. När du ger element mer utrymme runt sig blir sidan renare och enklare att förstå. Det hjälper också användaren att se vad som hänger ihop och vad som är skilt åt.

Kontrast

Kontrast gör att viktiga delar syns bättre. Det kan handla om färg, storlek eller form. Hög kontrast mellan text och bakgrund gör texten lätt att läsa. Använd kontrast när du vill lyfta fram något, till exempel en knapp eller en rubrik.

Storlek och proportioner

Olika storlekar hjälper användaren att förstå vad som är viktigast. Större element drar mer uppmärksamhet. Mindre element visar att något är mer detaljerat eller mindre viktigt. Håll proportionerna enkla och konsekventa så att sidan känns harmonisk.

Justering och linjer

Element som ligger i linje skapar ordning och tydlighet. När text, bilder och knappar följer samma osynliga linjer blir sidan lättare att läsa. Oreda i justeringen gör att designen känns rörig. Håll dig till några få tydliga linjer.

Färger

Färger påverkar känslan på sidan. Använd få färger och låt dem ha tydliga roller. En färg kan vara huvudfärg, en annan stödjande och en tredje till knappar eller viktiga delar. Se till att färgerna fungerar bra tillsammans och att kontrasten är tillräcklig.

Typografi

Typografi handlar om typsnitt, storlek, radavstånd och stil. Välj ett typsnitt som är lätt att läsa. Använd få olika typsnitt för att skapa lugn. Se också till att texten har bra luft mellan raderna och tillräckligt stor storlek.

Visuell hierarki

Visuell hierarki hjälper användaren att snabbt förstå vad som är viktigast på sidan. Det handlar om hur du ordnar rubriker, text, bilder och knappar. Större, fetare eller färgstarka element hamnar högre i hierarkin. Mindre och svagare element hamnar lägre.

Tydlig struktur

Ett tydligt och logiskt adminläge gör webbplatsen enklare att arbeta med. När sidor, innehållstyper och inställningar är organiserade på ett genomtänkt sätt blir det lättare att förstå hur webbplatsen fungerar. Det sparar tid och minskar risken för fel.

Namn och begrepp

Bra namn på sidor, fält och innehållstyper gör administrationen mer självklar. Redaktören ska snabbt förstå vad olika delar används till utan att behöva gissa. Tydliga begrepp gör också att flera personer enklare kan arbeta tillsammans i webbplatsen.

Enkla redigeringsflöden

Ett bra redigeringsflöde gör det enkelt att uppdatera innehåll steg för steg. Det ska vara lätt att förstå var text, bilder och länkar ändras. När redigeringsläget känns tydligt vågar fler själva hålla webbplatsen uppdaterad.

Begränsa onödiga val

För många inställningar och alternativ kan göra webbplatsen svår att använda. Genom att bara visa det som faktiskt behövs blir administrationen lugnare och mer överskådlig. Det hjälper redaktören att fokusera på innehållet istället för tekniken.

Återanvändbarhet

Återanvändbara block gör det enklare att skapa nya sidor med ett enhetligt utseende. Genom att använda färdiga sektioner för exempelvis kontaktuppgifter, bildblock eller informationsrutor blir arbetet snabbare och mer konsekvent. Det minskar också risken att designen bryts.

Tydlig koppling

Det ska vara enkelt att förstå hur innehållet i adminläget visas på den färdiga webbplatsen. När redigeringsläget speglar den visuella strukturen blir det lättare att arbeta självständigt. Det skapar trygghet och gör att förändringar känns mer förutsägbara.

Dynamiskt innehåll

Dynamiskt innehåll gör att information kan återanvändas automatiskt på flera ställen på webbplatsen. Det kan till exempel vara kontaktuppgifter, öppettider eller länkar som bara behöver uppdateras på ett ställe. Det sparar tid och gör webbplatsen enklare att hålla korrekt och uppdaterad.

Lätt att hitta rätt

En webbplats med tydlig struktur gör det enklare att hitta rätt innehåll i adminläget. När menyer, kategorier och sidhierarkier är genomtänkta går det snabbare att arbeta och enklare att förstå webbplatsens uppbyggnad. Det blir särskilt viktigt när webbplatsen växer över tid.

Minska risken att förstöra

Ett genomtänkt redigeringsläge hjälper redaktören att göra rätt från början. Genom tydliga mallar, begränsade val och smart struktur minskar risken att layout, färger eller typografi förändras av misstag. Det gör att webbplatsen håller en jämn och professionell kvalitet över tid.