Hoe kinne jo webside, e-commerce, as applikaasjekleurskema's ûntwikkelje

Untwikkelje webside, e-commerce, as app-kleurskema's

Wy hawwe nochal wat artikels dield oer it belang fan kleur mei respekt foar in merk. Foar in webside, e-commerce-side, as in mobile of webapplikaasje is it krekt sa kritysk. Kleuren hawwe in ynfloed op:

  • Inisjele yndruk fan in merk en syn wearde - bygelyks, lúkse guod brûke faak swart, read betsjut opwining, ensfh.
  • Purchase besluten - it fertrouwen fan in merk kin wurde bepaald troch de kleurkontrast. Sêfte kleurskema's kinne frouliker en betrouber wêze, hurde kontrasten kinne urgenter wêze en koarting oandreaun.
  • Brûkberens en brûkersûnderfining - kleuren hawwe in psychologyske en ek fysiologyske ynfloed, wêrtroch it makliker of dreger is om in brûkersynterface te navigearjen.

Hoe wichtich is kleur?

  • 85% fan de minsken bewearde dat kleur in grutte ynfloed hat op wat se keapje.
  • Kleuren ferheegje merkerkenning mei gemiddeld 80%.
  • Kleur yndruk is ferantwurdlik foar 60% fan de akseptaasje of ôfwizing fan in produkt.

By it bepalen fan in kleurskema foar in webside binne d'r guon stappen detaillearre yn 'e byhearrende infografyk:

  1. Primêre kleur - Kies in kleur dy't past by de enerzjy fan jo produkt of tsjinst.
  2. Aksje Kleuren - Dit ûntbrekt yn 'e infografyk hjirûnder, mar it identifisearjen fan in primêre aksjekleur en sekundêre aksjekleur is ekstreem nuttich. It leart jo publyk om te fokusjen op spesifike brûkersynterface-eleminten basearre op de kleur.
  3. Aoanfoljende kleuren - Kies ekstra kleuren dy't oanfolje dyn primêre kleur, by útstek kleuren dy't meitsje dyn primêre kleur pop.
  4. Eftergrûnkleuren - Kies in kleur foar de eftergrûn fan jo webside - mooglik minder agressyf as jo primêre kleur. Hâld ek yn 'e tsjustere en ljochte modus yn gedachten .. mear en mear siden opnimme kleurskema's op ljocht of tsjustere modus.
  5. Lettertype Kleuren - Kies in kleur foar de tekst dy't op jo webside sil wêze - tink derom dat in bêst swart lettertype seldsum is en net oan te rieden is.

As foarbyld, myn bedriuw Highbridge ûntwikkele in online merk foar in jurkfabrikant dy't in e-commerce-side foar direkte konsumint bouwe woe wêr't minsken koene keapje jurken online. Wy begrepen ús doelgroep, de wearde fan it merk, en - om't it merk foaral digitaal wie, mar ek in fysyk produkt hie - rjochten wy ús op kleurskema's dy't goed wurken oer print (CMYK), stofpaletten (Pantone), lykas ek digitaal (RGB en Hex).

In kleurskema testen mei merkûndersyk

Us proses foar ús seleksje fan kleurskema wie yntinsyf.

  1. Wy diene marketingûndersyk nei in searje primêre kleuren mei ús doelpublyk dy't ús redusearre ta ien kleur.
  2. Wy diene marketingûndersyk nei in searje sekundêre en tertiêre kleuren mei ús doelgroep dat wêr't wy wat kleurskema's beheine.
  3. Wy diene produktmockups (produktferpakking, halstags, en hingjende tags) lykas e-commerce mockups mei de kleurskema's en levere dy oan 'e klant lykas it doelpublyk foar feedback.
  4. Om't har merk foar in grut part ôfhinklik wie fan seizoensferoaring, hawwe wy ek seizoenskleuren yn 'e miks opnommen. Dit kin handich wêze foar spesifike kolleksjes as fisuele foar advertinsjes en oandielen op sosjale media.
  5. Wy gongen troch dit proses mear as in heal dozen kear foardat wy fêstigje op it definitive skema.

closet52 kleurskema

Wylst de merk kleuren binne ljocht roze en donkergriis, wy ûntwikkele de aksje kleuren it skaad fan grien wêze. Grien is in aksje-rjochte kleur, dus it wie in geweldige seleksje om de eagen fan ús brûkers te tekenjen nei aksje-oriïnteare eleminten. Wy hawwe it omkearde fan grien opnommen foar ús sekundêre aksjes (griene grins mei wite eftergrûn en tekst). Wy testen ek in donkerdere skaad fan grien op 'e aksjekleur foar hover-aksjes.

Sûnt wy de side krekt lansearre hawwe, hawwe wy mûs-tracking en heatmaps opnommen om de eleminten te observearjen wêrop ús besikers wurde oanlutsen en it meast ynteraksje mei om te soargjen dat wy in kleurskema hawwe dat net allinich goed sjocht ... it prestearret goed.

Kleuren, wite romte en elemintkenmerken

It ûntwikkeljen fan in kleurskema moat altyd wurde berikt troch it te testen yn in algemiene brûkersynterface om de ynteraksje fan 'e brûkers te observearjen. Foar de side hjirboppe hawwe wy ek heul spesifike marzjes, padding, sketsen, grinsradiusen, ikonografy en lettertypen opnommen.

Wy levere in folsleine branding-gids foar it bedriuw om yntern te fersprieden foar marketing- of produktmateriaal. Merkkonsistinsje is kritysk foar dit bedriuw, om't se nij binne en op dit stuit gjin bewustwêzen hawwe yn 'e sektor.

Hjir is de resultearjende e-commerce-side mei kleurskema

  • Closet52 - Keapje Jurken Online
  • Closet52 Samlingen Side
  • Closet52 Product Page

Besykje Closet52

Kleurgebrûk en kleurblindens

Ferjit net brûkberheidstesten foar kleurkontrast oer eleminten fan jo side. Jo kinne testen jo skema mei help fan de Website Tagonklikheid Test Tool. Mei ús kleurskema witte wy dat wy wat kontrastproblemen hawwe wêr't wy ûnderweis oan sille wurkje, of wy kinne sels wat opsjes hawwe foar ús brûkers. Opfallend is dat de kâns op kleurproblemen by ús doelgroep frij leech is.

Kleurblinens is it ûnfermogen om ferskillen te fernimmen tusken guon fan 'e kleuren dy't net-kleurde beheinde brûkers kinne ûnderskiede. Kleurblindens beynfloedet oer fiif oant acht prosint fan de manlju (sawat 10.5 miljoen) en minder as ien persint fan de froulju.

Usability.gov

It team by WebsiteBuilderExpert hat dizze infografyske en detaillearre begeliedende artikel gearstald oer Hoe kinne jo in kleur kieze foar jo webside dat is ekstreem yngeand.

Hoe kinne jo in kleurskema kieze foar jo webside