Designing för webben Finns det färger du bör undvika?

Webben är en regnbåge med färgalternativ. Färg är ett utmärkt verktyg för att fånga uppmärksamheten hos användarna, vilket ger visuellt intresse och påverkan och skapar kontrast för läsbarhet. Färgen ligger också i centrum för många designtrender, inklusive platta och materiella stilar.

Men kan du gå fel med färg? Finns det nyanser eller kombinationer som du ska bli avskräckta från? I ett ord? ja! Idag tittar vi på färger eller färgkombinationer som du bör undvika när du utformar webbplatser och appar. (Och med chansen att du redan har gjort ett av dessa misstag, erbjuder vi alternativa förslag också.)

neons

Neonfärger kan vara roliga, spunkiga och lägga till mycket pop till en design. Tyvärr är de otroligt svåra på ögonen, vilket ger användarna det? känner var allt gör ont för att titta på.

Problemet med neoner är att de är för lätta att läsa med lätthet och orsaka problem ihop med mörka eller ljusa bakgrunder. När den används med text tenderar neonhänvisningar om läsbarhet som skrivning tenderar att blöda i bakgrunden. Neonbakgrund är ofta överväldigande och distraherar från huvudbudskapet i designen.

Prova här istället: Ta bort lite av ljusstyrkan från neonfärger så att de har en mörkare, mer subtil look på skärmarna.

Orange Du Glad gör ett bra jobb med? Nästan? neonfärger in i utformningen av deras hemsida på ett antal sätt. Det vanliga temat är att neonerna används för mindre element och med subtila färgförändringar som gör pinks, gula och gröna lättare på ögonen.

? Vibrerande? Färger

När mycket mättade färger är parade skapar de en "vibrerande effekt"? där färger verkar nästan flytta i en suddig eller glödande rörelse. Du vill inte göra det här.

Denna vibration kan vara oroande för användarna, som skisseras av färgteoretiker Josef Albers i sin klassiska guide? Interaktion av färg :? ? Denna initialt spännande effekt känns också aggressiv och ofta obehaglig för våra ögon. Man finner det sällan används förutom en skrikande effekt i reklam, och som ett resultat är det obehagligt, ogillar och undviks.

Du kan nästan förutsäga vad som kommer att göra färgerna vibrerar innan de sätts ihop sida vid sida.

  • Hög mättnad av varje färg
  • Kompletterande på färghjulet
  • Spaced 180 grader från varandra på färghjulet
  • Konvertera färgerna till gråskala resulterar i mycket liten kontrast

Ett klassiskt exempel är parning ljusröd och grön. Den populära julen? kombinationen är en av de största (och mest använda) färgbrott. Dessa kombinationer presenterar också ett tillgänglighetsproblem eftersom de är oförstörbara av personer med färgblindhet.

Prova här istället: Om du måste använda? Vibrerande? färgkombinationer, separera dem med något annat (helst en neutral) däremellan.

Ljus på ljus

Detta är ett av de misstag som händer hela tiden. Kanske beror det på att du kan dra av det med utskriftsprojekt. Det beror kanske på vissa skärminställningar som gör det möjligt att arbeta, men det är inte lätt att skära på ljuskombinationer.

De är svåra att läsa. Varje gång.

Det är här de största brotten verkar hända: Hjältehuvud som parar en bild och en vit text, men texten faller över en lätt del av bilden. Vid denna tidpunkt är orden oläsliga. Det händer ofta oftare än det borde. Om varje bokstav inte är tydligt läsbar, måste du ompröva det.

Prova här istället: Lyckligtvis finns det ganska enkla korrigeringar för detta problem:

  • Välj en ny bild med en konsekvent färgad bakgrund.
  • Använd en färgad ruta för text ovanpå bilder med mycket färgvariation.
  • Tänk på överlagring i fullfärg för att öka kontrasten mellan bakgrunds- och textelementen.

Något Rainbow-Colored

Medan det nästan är självklart, fungerar regnbågefärgade webbplatser inte bara. (Tänk på hur många färgteori regler du bryter, bara genom att föreställa en regnbågs-webbsida i ditt huvud just nu.)

Rainbow färgkombinationer är överväldigande och överväldigande. De kan först få tag på användarens uppmärksamhet, men den användaren kommer säkert att studsa när han eller hon inser att innehållet är oförstörbart.

Prova här istället: Om du vill använda en bred färgpalett - som är trenden - väljer du färgblåsning eller kortstil, där färger kan associera med element. Denna design i behållarstil ger större flexibilitet med färg samtidigt som man skapar en känsla av organisation och flöde.

Ljus på ljus / mörk på mörkret

Precis som ljus på ljus, och kombination av liknande färgmättnad kommer att orsaka problem. Det borde vara självklart, men undvik dem.

Om du tror att det inte kommer att hända dig, var försiktig när du använder monotona färgscheman. Det är då designers tenderar att glida upp här. (När du är i tvivel, använd mer kontrast.)

Prova här istället: Tänk i kontrast. Om du vill använda flera ljusa eller mörka färger, överväga dem som alternativ för skärmar på en rullningsplats. Du kommer att få använda alla de mörka eller ljusa färgerna du gillar och behålla läsbarhet och användbarhet. (Det är en win-win!)

? K? Svart

Särskilt om du korsar mellan utskrifter och webbprojekt ofta - så många designare gör det - kan rent svart släppa in webprojekt av misstag. Känd som? K? svart i utskriftsprojekt, eftersom det bara använder en platta eller? Ren? svart (# 000000) i digitala projekt, är denna färg bara platt.

Tänk på verkligheten, alla kombinationer av svart filtreras faktiskt med andra nyanser för att ge den den rikedom. (Även en ravens fjädrar ser ofta blåaktigt eller mer lila i rätt ljus.) Använd en kombination av svart som innehåller andra färger för att skapa den rika, mörka färgen och spara rent svart för utskrift.

Prova här istället: Prova en svart med tips om färgning som matchar ditt varumärke eller lägg till bara rätt färgkonnotationer. Ju mer du lyser svart till grått, desto lättare är sminkfärgerna att se. Betrakta svart i samklang med omgivande färger och tänk på sminken av varje och hur de relaterar till varandra. (Till exempel, använd en svart med lite mer av en blåaktig ton för att kompensera orange eller gula nyanser för text eller andra element.) Färgen till Wonderland ovan är exempelvis # 0a0a0b.

Slutsats

Den största anledningen att undvika dessa färger och kombinationer är brist på läsbarhet och kontrast. Verkligheten är med rätt färgval och massor av kontrast, nästan vilken nyans som helst kan fungera i mått.

Men det finns en fångst. Du kanske måste göra det lite mörkare eller lättare än du förväntar dig att få det att fungera. Kom ihåg att färger tar på attribut från omgivningen (inklusive bakgrundsbelysning från en skärm) och måste justeras i enlighet därmed.

Här är ditt trick på dagen :? Om du måste squint, fråga eller flytta skärmen alls för att se något, fungerar färgen inte och du behöver gå vidare till något annat.