hur man väljer webbplats färgscheman

i branding och webbdesign, färger verkligen viktigt.

varför?

forskning visar att 62-90% av snap köpbeslut drivs enbart av uppfattningen av färger.

att välja rätt webbplats färgschema är det som gör det minnesvärt, trovärdigt, attraktivt och lönsamt. Det första intrycket är allt.

När du bygger en webbplats bör du noga överväga vilka färger som ska läggas till ditt färgschema och varför., Olika färger kommer att skicka olika meddelanden till dina besökare, ändra deras förståelse för din webbplats, även när det inte var avsett.

Clueless var ska man ens börja? Följ dessa steg för att skapa en webbplats färgschema och undvika att göra de största design misstag.

en genomsnittlig användare har en uppmärksamhetsomfång på 8 sekunder. Det är hur länge du måste övertyga dem att fortsätta surfa på din webbplats.

att välja rätt färgschema för din webbdesign hjälper dig att engagera användarna med färgaccenter, skarpa navigeringselement och minnesvärd branding.,

Så här börjar du…

7 steg för att skapa ditt eget Webbplatsfärgschema

hitta din primära färg

chansen är att du redan har valt din primära färg. Om du har en logotyp eller någon befintlig branding på plats, det finns förmodligen en huvudfärg som dominerar mönster. Det här är den färg som ditt varumärke kommer att associeras med-din primära varumärkesfärg.

om du inte är nära det slutliga beslutet, ta det här testet för att räkna ut dina alternativ, utföra marknadsundersökningar och använda webbplatser som Dribbble eller Behance för lite inspiration.,

Du kan också bläddra i den här listan över Hex-kodpaletter av några av världens mest kända varumärken för att bredda din idépool.

När du stöter på en särskilt ögonvänlig design eller bild, tveka inte att använda en färgväljare för att ta tag i hex-koden och lägga till den i din favoritlista. ColorZilla verkar vara ett populärt verktyg.

Bestäm antalet färger (rekommenderas: 3)

När du har den primära färgen spikad ner, nästa steg är att bestämma hur många andra färger du kommer att lägga till mixen.

det rekommenderas vanligtvis att använda en trefärgskombination., Ett triadiskt färgschema, som består av tre färger fördelade jämnt runt färghjulet, är en bra utgångspunkt. En triadisk palett kan vara ganska dramatisk om den har tre primära levande färger, så designers väljer ofta en kombination av sekundära toner.

det finns också en gammal designerregel som kan vara till hjälp när du använder ditt färgschema till webbdesignen. Det är känt som 60-30-10-regeln.

60-30-10-regeln rekommenderar att du inte använder lika stora mängder av de valda färgerna, utan dela dem i procent och tillämpa dem i enlighet därmed., Ett bra exempel på denna regel i praktiken är en mans kostym: blazer och slacks tar upp cirka 60% av utseendet, skjortan representerar ytterligare 30% och slipsen 10%.

använd sekundära färger när det behövs

matchande sekundära färger till din huvudsakliga varumärke färger kan vara en kamp, men misströsta inte! Det finns gott om smarta gratis verktyg tillgängliga online som kommer att göra denna uppgift mycket lättare. Du kan till exempel bege dig till ColorSpace, ange hex-koden för din valda färg och luta dig tillbaka! (Fler verktyg för färgpalett generator nedan…)

vad är poängen med att lägga till sekundära färger ändå?, Ibland kräver en design mer än bara några primära färger. Detta gäller särskilt för webbplatser som är fyllda med innehåll och målsidor-produkter, möjliggörande material, nedladdningsbara tillgångar etc.

möjligheten att visuellt separera rubriker, sidofält, bildtexter, knappar och andra element ökar omvandlingsfrekvensen och förbättrar användarupplevelsen.

om du är i den här båten är det värt att överväga att lägga till olika nyanser och nyanser av dina huvudfärger istället för att leta efter ytterligare. Ibland är enkelhet den bästa strategin.,

glöm inte dina neutrala färger (vit, svartgrå)

du behöver neutrala färger för text, för att skapa kontrast för viktiga element eller som bakgrundsfärger.

funktionen av neutral färg i modern webbdesign är ungefär som för vitt utrymme – för att ge användarna en paus och ge dem tid att bättre smälta och prioritera information på sidan.

det är en bra idé att ha en mörk och en ljus neutral färg för olika användningsfall. De vanligaste neutrala färgerna är vita, svarta och gråa., Du kan också använda nyanser av dina dominerande färger som neutrala, även om det är lite svårare att harmonisera.

om du har fastnat för idéer, gå tillbaka till Dribbble eller Designspiration och använd färgsökningen för att se vad andra gör.

Lägg till primära, sekundära och neutrala färger på följande ställen:

hur går det för dig att tillämpa webbplatsens färgschema? Vilka färger går vart, och varför?

  • primära färger går till ”hot spots” på din webbsida., Du bör använda dessa djärva, levande färger för att locka användarnas uppmärksamhet och uppmana dem att vidta åtgärder. CTA knappar, rubriker, fördelar ikoner, ladda ner formulär och annan viktig information bör markeras med hjälp av primära färger.
  • sekundära färger används för att markera mindre viktig information på webbplatsen, såsom sekundära knappar, underrubriker, aktiva menyalternativ, bakgrunder, eller stödja innehåll som vanliga frågor och vittnesmål.,
  • neutrala färger kommer sannolikt att användas för text och bakgrund men kan komma till nytta i särskilt färgglada delar av webbplatsen, bara för att hjälpa tona ner det och fokusera ögat.

gå igenom processen flera gånger

När du äntligen utarbetar din färgpalett, sätt den på provet i olika scenarier. Kommer det att fungera i tryck? Vad händer om du bestämmer dig för att starta en handelslinje? Har det en effekt på Besökare som du förväntade dig att ha?

det är bäst att gå igenom denna process ett par gånger och skapa några olika färgpaletter., Om man inte uppfyller alla dina krav har du en plan B.

Brainstorm när det behövs

vackra färgscheman är inte så svåra att komma med när du vet var du ska leta. Här är en lista över användbara verktyg som guidar dig i din sökning efter de bästa webbplats färgkombinationer.

användbara verktyg för brainstorming färgscheman (expanderar)

  1. ColorSpace – den här webbplatsen kan generera ett helt färgschema baserat på hex-koden för en vald färg.,
  2. Adobe Color – detta Adobe-verktyg är byggt runt begreppet färghjulet och låter dig utveckla någon form av webbplats färgschema i ett par klick. Du kan också ladda upp en bild för att extrahera färgkoder genom att dra och släppa filen i verktyget.
  3. Paletton – Paletton är ett annat användarvänligt verktyg för att generera vackra färgscheman utan någon teknisk eller design kunskap.
  4. Coolors – detta verktyg är verkligen praktiskt för att testa hur olika färger fungerar tillsammans., Med sin dra-och-släpp-gränssnitt, kan du flytta färgerna runt och se om de kolliderar eller arbeta fint tillsammans.
  5. ColorSpire – en annan webbplats färgschema generator.
  6. Canvas färghjul – detta gratis verktyg är super användarvänligt och kan hjälpa dig att förstå vilka färger som ser bra ut tillsammans och vilka färgkombinationer är ett nej. Dessutom finns det mycket pedagogiskt innehåll för att svara på några frågor du kanske har om färgteorin och färghjulet.

vanligaste frågorna:

Varför är webbplatsens färgschema viktigt?,

påverkan av färg på den mänskliga hjärnan är ett verkligt fenomen. Oavsett om vi medvetet känner effekterna av det eller inte, färger har en stor inverkan på hur vår hjärna behandlar information och världen runt omkring oss.

vetenskapen har visat att rött kan öka cirkulationen, medan blått ger en lugnande effekt.

till exempel 2000 introducerade Glasgow blå gatubelysning för att förbättra stadens landskap, vilket av misstag ledde till en märkbar minskning av antalet brott i områden som belystes av de blå lamporna., På samma sätt valde Tokyos Yamanote-järnvägslinje att installera blåljus i slutet av tågplattformarna för att minska antalet självmord. Som ett resultat minskade självmord vid dessa stationer med 74%.

det förklarar förmodligen varför de flesta medicinska och farmaceutiska märken väljer blå som sin primära färg.

en sak är klar: när den används korrekt kan färgerna ha stor makt över oss. Och det är just därför att välja rätt färgschema för din webbplats är så viktigt.,

genom att kombinera olika färger och nyanser kan vi skapa färgpaletter som ger harmoni till designen, framkalla önskade känslor, påverka användarnas humör och forma deras uppfattning om varumärket.

vilka känslor är förknippade med olika färger?

det finns ett helt vetenskapsområde som är dedikerat till att studera effekterna av färg på mänskligt beteende – det kallas färgpsykologi., Genom många experiment och forskning har forskare fastställt att färger verkligen framkallar känslor: vissa gör oss glada, alert eller avslappnad, medan andra knackar på mörkare känslor och kan göra oss oroliga eller ledsna.

faktum är att 85% av shopparna har sagt att de köper produkter baserade på färg ensam.

genom att välja rätt färgpalett för din webbplats kan du ändra hur människor tänker på ditt varumärke och generera varaktiga känslor som kommer att driva konsumenternas köpbeslut.

men var ska man börja?,

här är sex huvudfärger som framkallar ett unikt känslomässigt svar hos tittarna:

röd

röd symboliserar betydelse, passion och aggression. Tänk på den röda mattan, hjärtat som en kärlekssymbol eller stoppskylten. Det kräver uppmärksamhet och, när det gäller design, bör användas sparsamt för att inte överväldiga eller trötta betraktaren.

Orange

Orange är förknippad med energi, lekfullhet och låga priser. Att använda orange i webbdesign kan hjälpa till att ta fram varumärkets ungdomlighet och till och med fånga impulsköparnas öga.,

gul

som solens färg kan Gul spela på lycka och roliga aspekter. Men det aktiverar också ångestområdet i hjärnan, så det bör användas försiktigt och i olika nyanser.

grön

naturens färg, grön har en stark koppling till hälsa, välstånd och miljövänliga initiativ. Det lämpar sig vackert för alla typer av ekologiska eller naturliga produkter och varumärken fokuserade på utomhus och natur.,

blå

färgen blå inspirerar omedelbart förtroende och framkallar en känsla av säkerhet. Dessutom har det visat sig ha en lugnande effekt på hjärnan, så det kommer också över som inbjudande och vänlig. Att vara så mångsidig och levande, blå är en av de mest populära färgval bland webbdesigners.

lila

lila är färgen på royalty., Ofta förknippas med elegans, mystik och kreativitet, det är en go-to färg för varumärken som jagar high-end eller lyx överklagande eller vill skapa en mer sensuell lockelse med sin webbdesign.

Tänk på vilka primära och sekundära färger som ska användas för din webbplats färgschema gör att du kan påverka hur människor känner om din webbplats och ditt varumärke.

Vad ska jag veta om färgskillnader mellan kön och ålder?

de bäst presterande webbplatserna har en sak gemensamt-de känner till sin målgrupp., Vare sig genom marknadsundersökningar eller års erfarenhet i din bransch, bör du kunna berätta vem du vill vädja till. Varför? Eftersom färger, designval, typografi och saker som tonfall påverkar olika demografi annorlunda.

och det är inte bara olika demografi som visar färger annorlunda. Det visar sig att män och kvinnor föredrar olika färger också.

i en 2012 studie fick nästan 2000 män och kvinnor frågan om de föredrog Lila, Blå, Grön, Gul, orange, röd eller rosa.,

cirkeldiagram: mänsklighetens favoritfärger.

även om det är subtilt kan skillnaden i färgpreferenser mellan män och kvinnor ha en betydande inverkan på ett varumärkes framgång. Det är inte allt. När du skapar en webbplats färgschema som tilltalar båda könen, är det också viktigt att överväga de minst favoritfärger.

Så vilka färger föredrar de olika könen? Viss forskning har gjorts i den riktningen.,

enligt denna forskning ogillar både män och kvinnor brunt och orange. 17% av kvinnorna lägger också Grå på sin lista över de tre minsta favoritfärgerna. Intressant anser båda könen samma färger som” billiga ”eller” billiga.”

vilka färger tar mest uppmärksamhet?

rätt färgkombinationer är viktiga i webbdesign eftersom de hjälper designers att skapa visuell hierarki. Visuell hierarki tillåter i sin tur användare att skilja kärnelementen nästan omedelbart och upptäcka den viktigaste informationen först.,

men det är inte bara olika färgkombinationer som ger designstruktur. Färger har naturligtvis sin egen hierarki, som bäst definieras av effekten varje färg gör på våra känslor, sinnen och beteende.

det finns djärva färger, som rött, gult eller orange, som är praktiskt taget otänkbara och kräver vår odelade uppmärksamhet. Och det finns svagare färger, såsom grå, vit eller ljusblå, som bidrar till att skapa kontrast och göra viktiga element pop.,

Designers älskar att använda djärva färger för att skärpa navigering och skapa en mer intuitiv användarupplevelse. Dessutom kan djärva färger användas för att skapa konsekvens på olika sidor och hjälpa användare att hitta vad de behöver snabbare. Till exempel, med hjälp av röd färg för call-to-action knappar på din webbplats kan öka din omvandlingsfrekvens och göra UI-designen mer intuitiv.

vilka branscher gynnar olika färger?,

Vi har redan diskuterat hur viktig färgpsykologi är för branding, identitet och logotypdesign och hur varje nyans har en annan psykologisk inverkan på kunden.

så det är inte överraskande att lära sig att olika branscher gynnar olika färger, eftersom de försöker framkalla speciella känslor och skapa branschrelevanta föreningar.

en studie analyserade 520 logotyper i en rad branscher för att bestämma vilken sektor som gynnar vilken färg. Resultaten sammanställdes i ett färgstarkt diagram, som representerar de 20 bästa varumärkena i varje bransch och deras dominerande färger.,

Hur förbättrar jag varumärkeskännedom?

färg är en av de viktigaste delarna av ett minnesvärt varumärke – tillsammans med typografi, varumärke och grafik.

vi vet att våra hjärnor längtar efter visuell information. Crafting övertygande visuellt innehåll som använder rätt färger och ögat tilltalande design piques användarnas intresse och låser i deras uppmärksamhet långt innan informationen faktiskt behandlas. Det tar en fjärdedel av en sekund för hjärnan att bearbeta visuella signaler, medan den genomsnittliga konsumenternas uppmärksamhet span är bara 8 sekunder.

låt oss göra ett snabbt experiment., Blunda och tänk på dessa tre märken: Milka Chocolate, IKEA och Carlsberg. Såg du deras märkesfärger? Jag slår vad om att din hjärna duschades direkt med lila, blå-med-gul och gröna bilder.

forskning har visat att färgen ökar varumärkeskännedom med 80%. Att bygga bättre varumärkeskännedom hjälper i sin tur företag att skapa förtrogenhet. Och ju mer bekant något är desto mer litar vi på det.,

att studera färgpsykologi kan också hjälpa dig att se till att ditt varumärke är förknippat med rätt känslor och skapa en positiv känsla hos konsumenterna.

detta kan verka som en hel del arbete för något så grundläggande som en webbplats färgschema, men det är ett viktigt steg i webbdesign processen. För att kunna påverka hur användare ser och känner för ditt varumärke måste vi bättre förstå sambandet mellan färger och känslor.

Vad är neutrala färger?

kan du skapa en tilltalande webbdesign utan att använda någon färg?, Svaret är ja, men det kräver en god förståelse för andra designelement, såsom typografi, rutnät och layout, för att locka besökarnas uppmärksamhet.

svartvitt webbdesign är känt som ett monokromatiskt färgschema. Kombinationen av svarta och vita färger är en säker satsning-det här är de två färgerna som aldrig kommer att gå ur mode. Ett monokromatiskt färgschema kan dock baseras på vilken färg som helst, så länge det härrör från en enda nyans och förlängs med hjälp av nyanser, nyanser och toner.,

en väl utförd monokromatisk design säkerställer att en webbplats sticker ut som sofistikerad, elegant och tidlös.

på nackdelen kan det vara en utmaning att få ett känslomässigt svar från dina besökare. Saknar färg, är monokromatiska webbdesign också saknar personlighet och känslor. Designers måste tänka kreativt om att utveckla en övertygande webbupplevelse när de väljer ett monokromatiskt färgschema.,

forskning om minimalism i webbdesign visar att med hjälp av en accentfärg avsiktligt och konsekvent över designen bidrar till att lyfta fram den viktigaste informationen och motiverar användarna att vidta åtgärder.

Blå, röd och grön är de tre dominerande färgerna som dyker upp i nästan alla branscher.

det finns dock ett undantag som gäller för färgen blå. Enligt matforskare, när människor sökte efter mat, lärde de sig att undvika giftiga eller bortskämda föremål, som ofta var blå, svart eller lila. När matfärgad blå serveras för att studera ämnen, förlorar de aptit.,

om alla andra märken i din bransch använder samma färger kan det tyckas omöjligt att sticka ut och bygga ett igenkännligt varumärke. Därför är det viktigt att sammanställa ett bredare färgschema som gäller för alla varumärkes-och marknadsföringsmaterial, istället för att gå med bara en enkel kombination av primära och sekundära färger.

finns det några exempel på bra webbplats färgscheman?

det finns! Här är 20 exempel för att inspirera din webbplats färgschema.

1., Bright accentfärg

att använda en accentfärg på din webbplats färgschema är ett av de mest effektiva sätten att rikta besökarens uppmärksamhet på de viktigaste bitarna av information på sidan. I exemplet ovan används de djärva färgerna-gul-för att utesluta kärntjänsterna och skapa ett minnesvärt koncept.

2. Ett ljust men balanserat färgschema

denna webbplats färgschema balanserar två livfulla färger, med hjälp av den ljusa röda som en accentfärg.

3., Färskt och organiskt utseende färgschema

ordstävet att vi äter med våra ögon först är spot-on. Vår hjärna får en signal från ögonen långt innan våra smaklökar kommer till jobbet. Färg är ofta det första elementet som våra ögon märker om en livsmedelsprodukt, som förutbestämmer hur vi uppfattar smaken och smaken av vad vi ska äta. I exemplet nedan ser vi hur man använder ett naturligt färgschema, dominerat av gula, vita och gröna färger, skapar ett organiskt och friskt utseende.

4., Earthy Tones

denna webbplats färgschema använder en neutral färg bakgrund för att ta fram den peachy färgen på produkten.

5. Lugn och minimalistisk färgschema

denna enkla kombination av jordnära, lugna färger skapar en avkopplande atmosfär och sätter rätt ton för meddelandet på webbplatsen – övervinna stress och ångest. Det är också ett exempel på hur en begränsad färgpalett fortfarande kan vara kraftfull för att påverka en besökares humör och beteende.

6., Elegant och avslappnad färgschema

Parning olika nyanser av blått med matchande pasteller, skapar denna eleganta webbplats färgschema en lugn och drömmande atmosfär.

7. Pastell och dämpad färgschema

med ett mjukt pastellfärgschema lyckas denna webbdesign skapa ett intryck av organiskt flöde och visuell struktur. Det är ögat tilltalande och välbalanserad, lockande besökaren att stanna kvar och fortsätta surfa.

8., Mjukt och inbjudande färgschema

denna webbplats färgschema kombinerar flera pastellfärger för att skapa en mjuk och inbjudande utseende.

9. Pulserande och djärvt färgschema

spricker med färg och energi, sammanför denna levande färgpalett ljusgul och levande blå, vilket skapar en kraftfull kombination. Med levande färger och intressanta designelement lämnar webbplatsen ett långvarigt intryck och en citrusy smak burst.

10., Pulserande kontrast

i det här färgschemat används två livfulla färger för att skapa en ögonhäftande kontrast.

11. Färgrikt och modernt färgschema

den här webbplatsen drar av en sofistikerad och modern design genom att kombinera färgglada produkter med neutrala bakgrunder. Med en accentfärg för CTA-knappar fungerar webbdesignen briljant för att styra besökaren till önskad åtgärd.

12., Roligt och lekfullt

denna webbplats kombinerar många olika färger och nyanser och drar av ett lekfullt färgschema som använder färg för att skapa informationskategorier.

13. Monokromatiskt färgschema

att spela med textur och olika nyanser av svart och grått, bidrar denna färgpalett till att skapa en mystisk men lättillgänglig webbdesign. Bristen på färg i denna webbdesign tvingar besökaren att fokusera på andra element, inklusive kopia, former och grafik.

14., Elegant och fridfullt

att leka med några nyanser av grönt skapar denna webbdesign djup och använder ett lugnt, rent färgschema för att hålla besökarna engagerade.

15. Levande och skarpt färgschema

kanalisera ett skarpt färgschema, gör denna webbdesign ett starkt första intryck. Orädd att leda med levande färger, webbdesign kombinerar olika nyanser för att skapa en skarp kontrast och locka besökarens öga – från djupt rosa till kricka grön och rik blå, färgschema är eklektisk men balanserad.,

16. Inte rädd för djärva färger

med en hög kontrast och tre levande färger på spel, gör denna webbplats färgschema ett djärvt intryck.

17. Elegant och lyxigt färgschema

detta vackra färgschema drar av ett kungligt, elegant utseende genom att kombinera djupblå med guld nyanser. Det är ett klassiskt färgschema med en modern twist som ger en kraftfull visuell upplevelse och omedelbart placerar varumärket som en high-end spelare.

18., Med en Touch av guld

exemplet nedan visar hur kasta i en färg som har starka kulturella föreningar – i det här fallet; guld – kan ändra dynamiken i hela designen och få den att se mer majestätisk ut.

19. Corporate yet Energetic Color Scheme

att förlita sig på en levande men ganska traditionell färgpalett lyckas denna webbdesign framkalla förtroende samtidigt som man skapar ett intryck av ett framåttänkande, modernt varumärke., Med stark kontrast och stor läsbarhet ger kombinationen av rött och blått webbplatsen en dynamisk och kraftfull vibe.

20. Traditionell men intressant

den klassiska kombinationen av rött och blått kommer till liv i denna coola webbdesign.

nu vet du hur du designar ett färgschema på webbplatsen själv

Sanningen är att du inte behöver vara designer för att sammanställa ett vackert färgschema på webbplatsen., Med en bred förståelse för färgpsykologi, grunderna i färgteorin och en arsenal av användbara verktyg kan du utveckla en färgpalett som ger ditt varumärke en kraftfull visuell identitet.

ta dig tid att utforska kreativa exempel, testa olika färgkombinationer och hitta kompletterande färger som fungerar fint tillsammans. Bra design är relativ – om det fungerar för ditt varumärke, driver engagemang och ökar varumärkeskännedom, det är allt som verkligen betyder något.

sätt Nu på din designhatt och börja experimentera med dina färgpaletter.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *