Hitta den perfekta färgen för din webbplats

Författare: Louise Ward
Skapelsedatum: 10 Februari 2021
Uppdatera Datum: 18 Maj 2024
Anonim
Hitta den perfekta färgen för din webbplats - Kreativ
Hitta den perfekta färgen för din webbplats - Kreativ

Innehåll

När jag var ungefär tio år turnerade jag i Disney MGM-studiorna. Jag såg en enorm färgvägg i burkar i alla färger och i alla nyanser. Konstnärerna använde dessa burkar för att få liv till animering. Jag borde ha insett i det ögonblicket att mitt öde var förseglat: Jag var en designfärgnörd.

Jag älskar att omge mig med färg eftersom det stimulerar min hjärna. Det är fascinerande att färg kan påverka dig att känna en känsla; den lycka du ser på människors ansikten när de ser blå himmel, eller den tillgivenhet som omger någon när de får ett rött kuvert på Alla hjärtans dag. Var det genom associering eller kulturella influenser, färg har betydelse.

Tänker på färg

När jag designar tar jag mig tid att tänka på varför jag använder en viss färg. Jag tänker på de kulturella influenser som är associerade med det och om det har konsekvenser förbi vårt eget samhälle. Jag tänker på dessa saker eftersom jag designar för webben och vet att mina val kan ses av tusentals eller miljoner människor. Många webbplatser tar sig tid att internationalisera språket på sina sidor, men har de verkligen tänkt på färgen? Färg kommunicerar en mening och våra egna antaganden kan ofta vara felaktiga.


Ta till exempel en bröllopswebbplats. I västerländska kulturer är det vanligt att ha bruden i en vit klänning och att införliva den ljusa renheten i webbplatsens design. I Kina är det dock mer lämpligt att välja rött eftersom vit är färgen på sorg. För kinesiska kulturer betyder rött lycka, tur och kärlek. Strö i ett stänk av gult så föreslår du royalty och rikedom.

Med alla kulturella skillnader för färgbetydelser kanske du undrar vad Rosettasten med färgval är. Generellt sett är blå och lila de säkraste färgerna att använda när du designar. Blå används vanligtvis för att förmedla ett positivt budskap - optimism, lycka och självförtroende. Men även om detta är sant för de flesta kulturer tillämpar länder som Indien och Japan en helt annan betydelse. I Indien är blå färgen på sorg, medan det i Japan betyder skurk.

En annan färg som anses vara säker är lila. Vanligtvis är lila associerad med kungligheter och rikedom - ett arv från det förflutna där det användes som en symbol för status i samhället. Historien berättar att detta berodde på att det lila färgämnet som skördats från havssnigeln inte bleknade på grund av solljus utan istället blev ljusare och mer intensivt från väderförändring. Thailand tror emellertid annorlunda och använder istället lila som sin färg för sorg.


Det förvånar mig att så många länder använder olika färger för att representera sorg för en älskad som passerar. I USA och Storbritannien är det traditionellt svart, men vi har sett här hur många variationer det finns runt om i världen. Jag har utarbetat ett diagram som ger en praktisk fördelning av dessa skillnader (ovan).

Känn din publik

Med all denna tvetydighet kanske du tänker att det är säkrare bara för att undvika färg, men så är inte fallet. Omfatta skillnaderna och använd dem för att marknadsföra ditt budskap. Känn din målgrupp och skräddarsy webbplatsen efter den. Om du har flera målgrupper försök att lokalisera din webbplats, antingen via en anpassad portal eller någon riktad CSS.

Att använda blandade färger kommer också med sina egna överväganden. Ta aktiemarknaden som ett exempel. I USA, Storbritannien och Japan är en positiv indikator grön eller blå i färg och en negativ indikator är röd. I Taiwan och Korea är det dock motsatsen. Detta är inte ett designval, utan istället en kulturell förståelse. I dessa två länder representerar rött välstånd och tur - båda positiva saker. Det är viktigt att känna till dessa subtila, men ändå mycket viktiga detaljer, för att undvika att förvirra dina besökare och eventuellt skicka fel meddelande.


Det är också klokt att komma ihåg att en av tolv personer har färgblindhet. Så, som foton och illustrationer, bör färg användas för att stödja meddelandet, inte vara meddelandet i sig. Ett bra test är att se om samma information är tillgänglig när färgen tas bort.

En designers verktygslåda innehåller många verktyg som ska användas med omtanke och eftertanke. Jag har sett webbplatser med ljusröda bakgrunder som du kan se över hela rummet - den typ som skulle få en persons ögon att blöda. Den typen av bakgrund skulle vara ett dåligt val för en hälsowebbplats. Den mycket mättade färgen tenderar att stressa människor och det sista du vill ha när du är på sjukhus är att skjutas över kanten. Det är ett extremt exempel, men det illustrerar poängen.

Nästa gång du möter sjukhuspersonal, ta en titt på vad de har på sig. Du kommer att finna att deras uniformer tenderar att vara mer dämpade pastellfärger, som lila, gröna eller blå. Detta är inte av misstag: deras avsikt är att vara lugnande, lugnande och rena. De mjukare pastellfärgerna bidrar till det målet. När du utformar en hälsowebbplats, använd färger som lugnar publiken, inte sådana som uppmuntrar dem.

Enkel färgförändring kan påverka webbplatsens känsla. Gå till University College London Hospital. Jag har tagit den ursprungliga designen och skapat fyra nya med olika färgaccent (nedan).

Varje design har en annan känsla. Den svarta innebär professionell / juridisk, men föreslår också död. Den röda ser inte så dålig ut, men är för nära blod och föreslår personskada, inte rehabilitering. De två sista exemplen är gröna och blå. Jag tror att båda dessa skulle kunna fungera, men av de två skulle jag välja blått. Anledningen är att greenen är ganska ljus och distraherar från webbplatsens verkliga syfte - att lugna och lugna dig.

Lyser upp

Kontrastera sjukhusexemplet med webbplatser riktade till små barn. Barn drar nytta av ljusa, mättade färger. Dessa stimulerar deras sinnen och fångar deras uppmärksamhet. Genom att använda mycket färg håller du dem intresserade och uppmuntrar dem att utforska designen. I synnerhet tenderar en tung dos varma färger som röda och gula, tillsammans med några mer svalande blå och gröna toner, att fungera bra. Om du väljer en färgpalett för en barns design, hämta inspiration från deras leksaker och observera den livlighet som leksakstillverkaren väljer - de målas medvetet med solida, ljusa och enkla färger.

Det sista exemplet jag ger är matwebbplatser. När du designar för den här branschen bör du använda färger som uppmuntrar hunger. Eftersom maten finns i olika färger kan en bra palett ofta vara svår att välja. Generellt sett utlöser färger som rött, orange, gult och grönt hunger och ger en varm, hemtrevlig känsla. Det är ingen slump att Burger King, La Tasca, Sainsbury's och Waitrose använder dessa färger i sitt varumärke eller på sina webbplatser. Deras färgpaletter finns för att locka dig och göra dig så hungrig som möjligt. Blue, å andra sidan, tjänar till att undertrycka din aptit.

Med lycka till kommer det att hjälpa dig att välja dina framtida färgpaletter och du har lärt dig lite historia om färgteori och de föreningar som följer med den. Kom ihåg att använda din makt som designer klokt och noggrant.

Fallstudie: Twitter

När du först stöter på Twitter-webbplatsen kommer du att märka att dess design huvudsakligen är blå. Vi vet att blått är en säker färg att använda på webben, så det är ingen överraskning att Twitter använder den på sin webbplats, särskilt eftersom den stöder språk inklusive engelska, franska, tyska, italienska, japanska, koreanska och spanska. Att stödja så många språk innebär att din publik består av många olika kulturer.

Vi vet att en av 12 personer är färgblind, så vad händer med webbplatsen om vi tittar på den genom deras ögon istället?

Om kontrasten och färgkombinationerna är för lika kan en del av din publik inte se innehållet. Det finns många sätt att efterlikna effekterna av färgblindhet. Ett program jag gillar att använda är Color Oracle, en gratis färgblindhetssimulator för Windows, Mac och Linux skapad av Bernhard Jenny och Nathaniel Vaughn Kelso.

Som webbdesigners har vi hört talas om progressiv förbättring, men hur är det med graciös nedbrytning? Graciös försämring är när en webbplats designas och utvecklas med de senaste och bästa tillgängliga funktionerna, men sedan kontrolleras mot gamla webbläsare för att säkerställa att när de nya funktionerna inte finns, fungerar webbplatsen fortfarande. Denna idé kan tillämpas på färganvändning. Designa webbplatsen med all färg du behöver och leta efter färgblindhetsstöd med verktyg som Color Oracle eller Photoshop.

Färg är inte det enda verktyget i din verktygslåda. Välj färger som betonar men ändå tillåter användare att läsa ditt innehåll. Testa färgkombinationen med hjälp av verktyg som Color Oracle och gör ändringar om du behöver. Kom ihåg att du vill att din webbplats ska vara synlig för en så bred publik som möjligt så att de alla kan njuta av din design.

Deuteranopia

Detta är en typ av färgblindhet som drabbar fem procent av männen och 0,35 procent av kvinnorna. Det hindrar de drabbade att se rött och grönt.

Protanopia

Denna färgvisionsbrist gör att röda ser väldigt mörka ut. Det är mindre vanligt, könsrelaterat och drabbar en procent av männen och är ärftligt.

Tritanopi

Den sällsynta typen av färgblindhet, påverkar mindre än 0,3 procent av män och kvinnor. Det begränsar din förmåga att se ett spektrum av blågula färger.

Ord: Cindy Li Bild: Mike Chipperfield

Cindy Li är heltidsanställd på Yahoo Applications. Den här artikeln dök ursprungligen upp i nätmagasinet - världens bästsäljande tidskrift för webbdesigners och utvecklare.

Fler Detaljer
INTERVJU: Depthcore-grundaren Justin Maller
Upptäck

INTERVJU: Depthcore-grundaren Justin Maller

Ju tin Maller är en frilan ande illu tratör och art director var 10-åriga karriär har ett honom arbeta med några av världen tör ta tryckta reklamklienter, inklu ive ...
Skapa en rymdvarv implosion i Photoshop
Upptäck

Skapa en rymdvarv implosion i Photoshop

När du pratar om Photo hop-kon tverk är de aker om kommer att tänka på kompo itioner uppbyggda av olika trukturer, till amman med lju - och tran paren effekter. Oav ett om du g...
Hur man snabbt prototyper en webbplats och testar den online
Upptäck

Hur man snabbt prototyper en webbplats och testar den online

Adobe Mu e CC är ett webbde ign- och prototypverktyg om främ t riktar ig till grafi ka eller tryckta de igner om nabbt vill de igna webbplat er eller få en idé till en utvecklare e...