Grundläggande principer för harmonisk webbdesign

Sonja Hoffmann Senast uppdaterad den 21 oktober 2020
7 Min.
Webbdesign Grundläggande principer
Senast uppdaterad den 21 oktober 2020

Som ordspråket säger, det finns ingen andra chans för det första intrycket. Du går till en okänd hemsida och inom några sekunder kommer du att bedöma om denna sida är "bra" eller "dålig". Särskilt med era egna skapelser är det oändligt svårt att genomföra en objektiv analys. Lyckligtvis finns det tidstestade designprinciper som du kan följa. En översikt.

Vad är "bra" webbdesign?

Webbdesign är ganska komplex: det tar mer än bara ett öga för bra typografi och en känsla av en tilltalande visuell arrangemang. Webbdesign erbjuder ett otroligt mångsidigt sätt att uttrycka dig kreativt. Men samtidigt erbjuder det minst lika många möjligheter att komma bort från designprocessen. Speciellt när man är djupt rotad i designprocessen är det lätt att se skogen för träden. Resultatet kan bli en design som vi finner "dålig".

Vårt betyg är ofta intuitivt, så det är svårt att förklara varför samma designelement passar perfekt på en webbplats samtidigt som man ser vilse och på sin plats på en annan.

Vad gör en framgångsrik webbplats?

Bra webbplatser ger information tydligt och effektivt, så att användarna intuitivt hitta sin väg genom webbplatsen. I de flesta fall lyckas en användarorienterad webbplats genom ett välbalanserat samspel mellan typografi, interaktiva element och en hel del visuell finjustering. 

Och eftersom detta inte är tillräckligt komplicerat, är vi också begränsade av vad webbläsarna hos våra potentiella användare kan representera i första hand. Vid behov utvecklarens tekniska färdigheter eller det verktyg vi använder för att skapa respektive webbplats. 

Dessutom bör du ta hänsyn till aktuella trender och även företagets identitet för din kund. Webbdesign är i grunden summan av UX, UI och grafisk design, CI och de nuvarande trenderna med hänsyn till de tekniska förutsättningarna.

Att skapa en webbsida är ett ganska stort projekt. Inte undra på att det brukar ligga ett helt team bakom. Ofta individer (och, tyvärr, team) tenderar att ägna mer uppmärksamhet åt de områden där de är särskilt starka. Medan andra områden får mindre – eller i extrema fall inga alls – av uppmärksamhet. Detta skapar en obalans som kan göra att du hittar en webbplats sämre och oharmoniska.

"Bra" webbdesign är resultatet av en balans mellan de olika designområdena och de tekniska förutsättningarna.

Eftersom en detaljerad undersökning av alla områden skulle gå utöver omfattningen av denna artikel, Idag jag ägna mig främst till visuell design. 

Kontrast, Blanktecken och Färg

Kontrast kombineras ofta med valet av de primära färgerna i designen samt blanktecken i kompositionen. Men, Blanktecken betyder inte nödvändigtvis det utrymme som lämnas vitt. Snarare hänvisar den till mellanslag mellan elementen. Detta utrymme kallas också "negativt utrymme" och kan fortfarande färgas.

På grund av en hel del blanktecken, en sida verkar oftast renare och tydligare. Detta tillvägagångssätt går också ofta hand i hand med minimalism. Detta innebär konsekvent ta bort allt från layouten som är onödig och inte tillför något märkbart mervärde till designen. Var det text, dekorativa element eller en flod av CTAs.

Tips

Tänk på följande när du planerar kontrast och färg: Svårt att läsa innehåll kan leda till att personer med synnedsättningar (till exempel färgigenkänning) slutar att höra det.

Speciellt med trenden att fylla hemsida rubriker med stora panoramabilder, finner vi ofta text överlägg som är svåra att dechiffrera.

Ett lyckat exempel på mycket blanktecken och kontrast

Grundläggande principer för harmonisk webbdesign
Grundläggande principer för harmonisk webbdesign

https://aiven.io/

Ett svagt exempel på kontrast

Här är ett exempel som är en kontrast problem, särskilt i den mobila versionen. Uppmaningen är helt nedsänkt mot den rastlösa bakgrunden.

varför-ux-misslyckas
https://www.opitz-consulting.com/

Ibland är det inte så lätt för designers att filtrera bort rätt färger för en design. Som tur är finns det också möjliga verktyg som låter oss snabbt testa olika kombinationer – innan vi lägger ner mycket tid på att skapa en kostsam layout.

färgteori: dessa verktyg hjälper dig att välja din färg

Färgverktyget för materialdesign

Material Design Color Tool skapar Low Fidelity wireframes med två primära färger.

material-design-färg-verktyg

Adobe färghjul

Adobe Color Wheel hjälper dig inte bara att skapa olika färgpaletter, utan extraherar även de färgpaletter du använder från befintliga teman. Nyligen är detta också möjligt från färggradienter.

adobe-färg-hjul

När du väljer lämpliga färger är det värt att ta en intensiv titt på varumärket hos kunden: Vilka färgpaletter används redan? I vilken utsträckning kan jag avvika från detta?

Grunderna i färgteori är också oundvikliga: Enligt din kunds respektive bransch, en färg med lämplig psykologisk effekt kan väljas. Det är ingen tillfällighet att blått används ofta i mer välrenommerade grenar - såsom försäkring, konsulttjänster och webbplatser jämförelse. Blue har en förtroendeingivande och lugnande effekt. Men man får inte bli alltför allmänt här, eftersom även nyanser av samma färg kan framkalla mycket olika känslor.

Känner du till 60-30-10-regeln?

Detta rekommenderas som en gyllene regel för användning av färgpaletter. Här är den tillämpade principen: huvudfärgen utgör cirka 60 procent av layouten, en kompletterande färg innehåller 30 procent och en tredje färg ställer ytterligare högdagrar med 10 procent. Detta arrangemang har en särskilt balanserad effekt på användaren.

Symmetrisk eller asymmetrisk ordning av konstruktionselement

I sin artikel "The Principles of Design and Their Importance" förklarar författaren och designern Cameron Chapman sina två viktigaste tillvägagångssätt för balans i webbdesign. Således skiljer det innehåll efter dess iögonfallande – det vill säga om det är mer iögonfallande eller mindre framträdande. 

I enlighet med detta är följande utmaning att ordna innehållet på ett sådant sätt att det förmedlar en känsla av balans. Designbeslutet kan bidra till att "ordna symmetriskt eller asymmetriskt".

Hur fungerar båda tillvägagångssätten?

I det symmetriska tillvägagångssättet arrangeras element tillsammans med en liknande kändis. Det asymmetriska tillvägagångssättet arrangerar däremot vanligen mer framträdande och mindre iögonfallande innehåll. 

Layouten kan till exempel hållas ren. Elementen är tydligt åtskilda från varandra, vilket är fallet med Couro Azul. Ofta placeras sådant innehåll något decentraliserat för att ge det svagare elementet lite mer utrymme och skapa en balans.

Couro Azu

Zero använder däremot samma princip, men med ett friare arrangemang. Tack vare den höga användningen av Whitespace, det ser elegant och samtida.

Detta tillvägagångssätt fungerar mycket bra på större skärmar (från tablettstorlek). Mindre enheter, såsom smartphones, å andra sidan, dra nytta av tydligt åtskilda, inter-arrangerade moduler.

Att definiera och fastställa prioriteringar

Innan vi börjar utforma en webbsida bör det tydligt definieras vilket budskap som ska kommuniceras. Tydlighet i marknadsföringskonceptet ger ofta också klarhet i designlayouten.

När nyckelbudskapen har fastställts är det viktigt att markera dem genom att använda färg och/eller typografi.

Du kan se hur båda kan se kombinerade ut i det här exemplet:

Cowboy
https://cowboy.com

Det finns dock många sätt att genomföra den. Eftersom innehåll kan markeras inte bara av Fet typografi och färg. Även genom bilder – som med Jamie Olivers restaurang – och genom ett samspel av olika principer fokuserar du på valt innehåll.

Jamie Olivers restaurang

Proportion, Samhörighet och Hierarki

Innehållet på en sida bör presenteras på ett sådant sätt att det är meningsfullt i sin hierarki. Det viktigaste är att placera dig högst upp. Med minskande betydelse, bör du arbeta dig ner. Så du bör fråga dig själv: Vilken information är viktigast för besökaren på min webbplats? Vad är endast ytterligare information? 

Detta är också anledningen till att navigeringsmenyn är överst i de flesta fall. Bortsett från att vara ett UI mönster, är det helt enkelt en av de viktigaste aspekterna av en sida. När allt kommer om hand är menyn inget annat än en översikt över det centrala innehåll du erbjuder där. Så att säga, innehållet på din webbplats.

Visuell hierarki: Vad är verkligen viktigt

Hierarki kan också skapas genom så kallad rörelse. Därvid ordnar vi innehållet på sidan på ett sådant sätt att ögat förs igenom. Detta kan till exempel uppnås med hjälp av former och arrangemang. Denna portfölj är ett intressant exempel på hur en sådan sak kan se ut:

Portfölj

Ögat styrs genom skärmen från vänster till höger. Punkt 01 har helt klart den största hierarkin här – även om alla element är lika stora och verkar likvärdiga tills dess. 

Andelen spelar också en roll: element av samma storlek, färg, form ger oss i princip känslan av att tillhöra tillsammans och har samma funktion. Detta är särskilt viktigt för interaktiva element.

Exemplet ovan illustrerar att en konsekvent design till stor del kan bidra till visuell harmoni: 

  1. enhetliga former används för alla bilder,
  2. alla bilder harmonierar i färg, 
  3. totalt används endast två olika typsnitt och storlekar, 
  4. för stavfel och avgränsare används endast en färg,
  5. avgränsarna är ett återkommande designelement – och de kombinerar visuellt bilden och de två rubrikerna.

Grundläggande principer i Webbdesign - Slutsats

Trots alla ovanstående grundprinciper är regler där för att brytas. Detta är det enda sättet att skapa en intressant, ny design!

De tillvägagångssätt som jag kort har presenterat här är naturligtvis inte nya. Det är snarare variationer av vetenskaplig och/eller psykologisk forskning som har överförts till våra moderna kommunikationsmedier. Jag tycker personligen att det är viktigt att känna till dessa teorier och metoder. Ofta genomför vi regler intuitivt ändå, eftersom vårt kreativa öga har "lärt" det så mycket.

Dessutom bidrar kunskap om olika förhållningssätt inom design till att utvärdera dina egna projekt. Se ut som en checklista du kan falla tillbaka på när du inser att något inte riktigt fungerar visuellt ännu. Ofta finner man inte det nödvändiga avståndet till det egna projektet för att bedöma det objektivt. 

De designprinciper som anges här är långt ifrån fullständiga. Om du vill gräva djupare i ämnet, är du välkommen att ta en titt på dessa artiklar och e-böcker: 

Vad är din åsikt om designprinciper? Vilka frågor har du till Sonja? Använd kommentarsfunktionen. Du vill bli informerad om nya bidrag till webbdesign och utveckling för byråer och frilansare? Följ oss sedan på Twitter, Facebook eller via vårt nyhetsbrev.

Efter att ha studerat speldesign och kreativt skrivande i lummiga Auckland, Sonja Hoffmann specialiserar sig på webb- och appdesign och dess utveckling. Hennes fokus ligger på gamification och utforska användarmotivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Liknande artiklar

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.