Grundläggande principer för harmonisk webbdesign

Sonja Hoffmann 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 webbplats och inom några sekunder kommer du att bedöma om denna sida är "bra" eller "dålig". Speciellt med dina egna skapelser är det oändligt svårt att göra en objektiv analys. Lyckligtvis finns det beprövade 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 du är djupt rotad i designprocessen är det lätt att se skogen för träden. Resultatet kan vara en design som vi tycker är "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 medan du 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 komplicerat nog, vi är också begränsade av vad webbläsarna för våra potentiella användare kan representera i första hand. Om det behövs, de tekniska färdigheterna hos utvecklaren 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 aktuella trenderna med hänsyn till de tekniska villkoren.

Att skapa en webbsida är ett ganska stort projekt. Inte undra på att det brukar vara 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 ingen alls – uppmärksamhet. Detta skapar en obalans som kan göra att du hittar en webbplats sämre och oharmonisk.

"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 tillämpningsområdet för denna artikel, Idag ägnar jag 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 blanksteg i kompositionen. Blanktecken betyder dock inte nödvändigtvis att utrymmet lämnas vitt. Snarare hänvisar det 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 att konsekvent ta bort allt från layouten som är onödig och inte ger något märkbart mervärde till designen. Oavsett om det är text, dekorativa element eller en flod av CTAs.

Tips

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

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

Ett framgångsrikt 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 ett kontrastproblem, 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. Lyckligtvis finns det också möjliga verktyg som gör att vi snabbt kan testa olika kombinationer - innan vi tillbringar mycket tid att skapa en kostsam layout.

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

Färgverktyg för materialdesign

Färgverktyg för materialdesign Skapar Low Fidelity Wireframes med två primära färger.

material-design-färg-verktyg

Adobe färg hjul

Adobe färg hjul inte bara hjälper dig att skapa olika färgpaletter, men också extraherar färgpaletter du använder från befintliga mönster. 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å kundens varumärke: 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 kan en färg med lämplig psykologisk effekt väljas. Det är ingen tillfällighet att blått ofta används i mer välrenommerade grenar - såsom försäkring, rådgivning och jämförelse webbplatser. Blå har en förtroendeinspirerande och lugnande effekt. Men man får inte bli alltför allmän här, eftersom även nyanser av samma färg kan provocera 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öjdpunkter med 10 procent. Detta arrangemang har en särskilt balanserad effekt på användaren.

Symmetrisk eller asymmetrisk arrangemang av konstruktionselement

I sin artikel "Principerna för design och deras betydelse" författaren och designern Cameron Chapman förklarar sina två viktigaste metoder för att balansera i webbdesign. Således skiljer det innehåll beroende på dess iögonfallande - det vill, oavsett om det är mer iögonfallande eller mindre framträdande. 

Följande utmaning är därför 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 metoderna?

I det symmetriska tillvägagångssättet arrangeras element tillsammans med en liknande kändis. Den asymmetriska metoden, å andra sidan, ordnar ofta mer framträdande och mindre iögonfallande innehåll. 

Layouten kan till exempel hållas ren. På så sätt är elementen tydligt åtskilda från varandra, vilket är fallet med Couro Azul fallet. 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

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

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 separerade, inter-arrangerade moduler.

Definiera och fastställa prioriteringar

Innan vi börjar utforma en webbsida, bör det vara tydligt definierade vilket budskap att kommunicera. Tydlighet i marknadsföringskonceptet ger ofta också klarhet i designlayouten.

När de viktigaste budskapen har fastställts är det viktigt att markera dem med hjälp av 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 det. Eftersom innehållet kan markeras inte bara av fet typografi och färg. Även genom bilder - som med Jamie Olivers restaurang – och genom ett samspel mellan 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 på toppen. 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 bara ytterligare information? 

Detta är också anledningen till att navigeringsmenyn är högst upp i de flesta fall. Bortsett från att vara ett gränssnitt mönster, är det helt enkelt en av de viktigaste aspekterna av en sida. När allt kommer runt är menyn inget annat än en översikt över det kärninnehåll du erbjuder där. Så att säga, innehållet på din webbplats.

Visuell hierarki: Vad är verkligen viktigt

Hierarki kan också skapas av så kallad rörelse. På så sätt arrangerar vi innehållet på sidan på ett sådant sätt att ögat passerar. Detta kan till exempel uppnås genom former och arrangemang. Detta Portfölj är ett intressant exempel på hur en sådan sak kan se ut:

Portfölj

Ögat guidas 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 har samma storlek och verkar likvärdiga för tillfället. 

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

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

  1. enhetliga former används för alla bilder,
  2. alla bilder harmoniserar i färg, 
  3. Totalt används endast två olika teckensnitt och storlekar, 
  4. för stavfel och separatorer används endast en färg,
  5. Avgränsarna är ett återkommande designelement – och de kombinerar bilden och de två rubrikerna visuellt.

Grundläggande principer i webbdesign - Slutsats

Trots alla ovanstående grundläggande principer, regler är 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 kortfattat har presenterat här är naturligtvis inte nya. Snarare är det varianter av vetenskaplig och/ eller psykologisk forskning som har överförts till våra moderna kommunikationsmedier. Personligen tycker jag 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 tillvägagångssätt i design till att utvärdera dina egna projekt. Ser 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 sitt eget projekt 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 anser du 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å TwitterFacebook eller via vår 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ändarnas motivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Liknande artiklar

Kommentarer om den här artikeln

Skriv en kommentar

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