Cum să dezvoltați scheme de culori pentru site-ul web, comerțul electronic sau aplicația

Dezvoltați site-uri web, comerț electronic sau scheme de culori pentru aplicații

Am împărtășit câteva articole despre importanța culorii în raport cu un brand. Pentru un site web, un site de comerț electronic sau o aplicație mobilă sau web, este la fel de esențial. Culorile au un impact asupra:

  • Impresia inițială a unei mărci și a valorii acesteia – de exemplu, bunurile de lux folosesc adesea negru, roșu implică entuziasm etc.
  • Deciziile de cumpărare – încrederea unui brand poate fi determinată de contrastul de culoare. Schemele de culori moale pot fi mai feminine și de încredere, contrastele dure pot fi mai urgente și determinate de reduceri.
  • Utilizabilitate și experiență utilizator - culorile au un aspect psihologic precum și impactul fiziologic, făcând mai ușoară sau mai dificilă navigarea într-o interfață de utilizator.

Cât de importantă este culoarea?

  • 85% dintre oameni au susținut că culoarea are o influență majoră asupra a ceea ce cumpără.
  • Culorile sporesc recunoașterea mărcii cu o medie de 80%.
  • Impresia de culoare este responsabilă pentru 60% din acceptarea sau respingerea unui produs.

Când determinați o schemă de culori pentru un site web, există câțiva pași detaliați în infograficul însoțitor:

  1. Culoare primară – Alegeți o culoare care se potrivește cu energia produsului sau serviciului dvs.
  2. Culori de acțiune – Acest lucru lipsește din infograficul de mai jos, dar identificarea unei culori de acțiune primară și a unei culori de acțiune secundară este extrem de utilă. Îți educă publicul să se concentreze pe anumite elemente ale interfeței cu utilizatorul bazate pe culoare.
  3. ACulori suplimentare – Alegeți suplimentar culori care se completează culoarea primară, în mod ideal culorile care fac culoarea primară pop.
  4. Culori de fundal – Alegeți o culoare pentru fundalul site-ului dvs. – posibil mai puțin agresivă decât culoarea primară. Țineți cont și de modul întuneric și luminos... tot mai multe site-uri încorporează scheme de culori în modul deschis sau întunecat.
  5. Culori de caractere – Alegeți o culoare pentru textul care va fi pe site-ul dvs. – amintiți-vă că o literă neagră solidă este rară și nu este recomandată.

De exemplu, compania mea Highbridge a dezvoltat un brand online pentru un producător de rochii care dorea să construiască un site de comerț electronic direct către consumatori, unde oamenii să poată cumpara rochii online. Ne-am înțeles publicul țintă, valoarea mărcii și – pentru că marca era preponderent digitală, dar avea și un produs fizic – ne-am concentrat pe scheme de culori care funcționau bine în imprimare (CMYK), palete de țesături (Pantone), precum și digital (RGB și Hex).

Testarea unei scheme de culori cu studii de piață

Procesul nostru de selecție a schemei de culori a fost intens.

  1. Am făcut cercetări de marketing pe o serie de culori primare cu publicul țintă care ne-a redus la o singură culoare.
  2. Am făcut cercetări de marketing pe o serie de culori secundare și terțiare cu publicul nostru țintă, unde am restrâns anumite scheme de culori.
  3. Am realizat machete de produse (ambalarea produsului, etichete de gât și etichete suspendate), precum și machete de comerț electronic cu schemele de culori și le-am furnizat clientului, precum și publicului țintă pentru feedback.
  4. Deoarece marca lor depindea în mare măsură de sezonalitate, am încorporat și culori de sezon în amestec. Acest lucru poate fi util pentru anumite colecții sau elemente vizuale pentru reclame și distribuiri pe rețelele sociale.
  5. Am trecut prin acest proces de mai mult de o jumătate de duzină de ori înainte de a ne stabili schema finală.

schema de culori closet52

În timp ce culorile mărcii sunt roz deschis și gri închis, am dezvoltat culori de acțiune să fie nuanța de verde. Verdele este o culoare orientată spre acțiune, așa că a fost o selecție excelentă pentru a atrage privirea utilizatorilor noștri către elementele orientate spre acțiune. Am încorporat inversul verdelui pentru acțiunile noastre secundare (chenar verde cu fundal alb și text). De asemenea, testăm o nuanță mai închisă de verde pe culoarea de acțiune pentru acțiunile de hover.

De când tocmai am lansat site-ul, am încorporat urmărirea mouse-ului și hărțile termice pentru a observa elementele de care sunt atrași vizitatorii noștri și cu care interacționează cel mai mult pentru a ne asigura că avem o schemă de culori care nu doar arată bine... funcționează bine.

Culori, spațiu alb și caracteristici ale elementelor

Dezvoltarea unei scheme de culori ar trebui întotdeauna realizată prin testarea acesteia într-o interfață generală cu utilizatorul pentru a observa interacțiunea utilizatorilor. Pentru site-ul de mai sus, am încorporat, de asemenea, margini foarte specifice, umplutură, contururi, raze de frontieră, iconografie și fonturi.

Am furnizat un ghid complet de branding pentru ca companie să îl distribuie intern pentru orice materiale de marketing sau produs. Consecvența mărcii este esențială pentru această companie, deoarece sunt noi și nu au nicio conștientizare în industrie în acest moment.

Iată site-ul de comerț electronic rezultat cu schemă de culori

  • Closet52 - Cumpărați rochii online
  • Pagina de colecții Closet52
  • Pagina de produse Closet52

Vizitați Closet52

Utilizabilitatea culorilor și daltonismul

Nu uitați de testarea gradului de utilizare pentru contrastul de culoare între elementele site-ului dvs. Puteți testa schema folosind Instrument de testare a accesibilității site-ului web. Cu schema noastră de culori, știm că avem unele probleme de contrast la care vom lucra pe viitor sau chiar că avem unele opțiuni pentru utilizatorii noștri. Interesant este că șansele de probleme de culoare cu publicul nostru țintă sunt destul de scăzute.

Daltonismul este incapacitatea de a percepe diferențele dintre unele dintre culorile pe care utilizatorii cu deficiențe necolorate le pot distinge. Daltonismul afectează aproximativ cinci până la opt la sută dintre bărbați (aproximativ 10.5 milioane) și mai puțin de unu la sută dintre femei.

Utilizabilitate.gov

Echipa de la WebsiteBuilderExpert a creat acest articol infografic și detaliat însoțitor despre Cum să alegi o culoare pentru site-ul tău web asta e extrem de temeinic.

Cum să alegi o schemă de culori pentru site-ul tău web