Ako vytvoriť webové stránky, elektronický obchod alebo farebné schémy aplikácií

Vyvíjajte farebné schémy webových stránok, elektronického obchodu alebo aplikácií

Zdieľali sme niekoľko článkov o dôležitosti farieb vzhľadom na značku. Pre webové stránky, stránky elektronického obchodu alebo mobilnú či webovú aplikáciu je to rovnako dôležité. Farby majú vplyv na:

  • Prvotný dojem zo značky a jej hodnota – napríklad luxusný tovar často využíva čiernu farbu, červená implikuje vzrušenie atď.
  • Rozhodnutia o kúpe – dôveryhodnosť značky môže byť určená farebným kontrastom. Jemné farebné schémy môžu byť ženskejšie a dôveryhodnejšie, ostré kontrasty môžu byť naliehavejšie a poháňané zľavou.
  • Použiteľnosť a používateľská skúsenosť – farby majú psychologický a tiež fyziologický vplyv, čo uľahčuje alebo sťažuje navigáciu v používateľskom rozhraní.

Aká dôležitá je farba?

  • 85 % ľudí tvrdilo, že farba má veľký vplyv na to, čo kupujú.
  • Farby zvyšujú povedomie o značke v priemere o 80 %.
  • Farebný dojem je zodpovedný za 60% prijatia alebo odmietnutia produktu.

Pri určovaní farebnej schémy pre webovú stránku je niekoľko krokov podrobne popísaných v sprievodnej infografike:

  1. Primárna farba – Vyberte si farbu, ktorá zodpovedá energii vášho produktu alebo služby.
  2. Akčné farby – Toto v infografike nižšie chýba, ale identifikácia primárnej akčnej farby a sekundárnej akčnej farby je mimoriadne užitočná. Vychováva vaše publikum, aby sa zameralo na konkrétne prvky používateľského rozhrania na základe farby.
  3. Aďalšie farby – Vyberte ďalšie farby, ktoré sa dopĺňajú vaša primárna farba, ideálne farby, ktoré tvoria vašu základnú farbu pop.
  4. Farby pozadia – Vyberte si farbu pozadia svojich webových stránok – možno menej agresívnu ako vaša primárna farba. Majte na pamäti aj tmavý a svetlý režim... stále viac stránok používa farebné schémy v svetlom alebo tmavom režime.
  5. Farby písma – Vyberte si farbu textu, ktorý bude na vašej webovej lokalite – nezabudnite, že jednoliate čierne písmo je zriedkavé a neodporúča sa.

Napríklad moja spoločnosť Highbridge vyvinul online značku pre výrobcu šiat, ktorý chcel vytvoriť webovú stránku elektronického obchodu priamo pre spotrebiteľov, kde by ľudia mohli kúpiť šaty online. Pochopili sme našu cieľovú skupinu, hodnotu značky, a keďže značka bola prevažne digitálna, ale mala aj fyzický produkt, zamerali sme sa na farebné schémy, ktoré dobre fungovali naprieč tlačou (CMYK), látkovými paletami (Pantone), ako aj digitálne (RGB a Hex).

Testovanie farebnej schémy pomocou prieskumu trhu

Náš proces výberu farebnej schémy bol náročný.

  1. S naším cieľovým publikom sme urobili marketingový prieskum série základných farieb, ktorý nás zredukoval na jednu farbu.
  2. Urobili sme marketingový prieskum série sekundárnych a terciárnych farieb s našou cieľovou skupinou, kde sme zúžili niektoré farebné schémy.
  3. Urobili sme makety produktov (obaly produktov, štítky na krku a závesné štítky), ako aj makety elektronického obchodu s farebnými schémami a poskytli sme ich klientovi, ako aj cieľovému publiku na spätnú väzbu.
  4. Pretože ich značka do značnej miery závisela od sezónnosti, do mixu sme zakomponovali aj sezónne farby. To sa môže hodiť pre konkrétne kolekcie alebo vizuály pre reklamy a zdieľania na sociálnych sieťach.
  5. Prešli sme týmto procesom viac ako pol tucta krát, kým sme sa dohodli na konečnej schéme.

farebná schéma skrine52

Zatiaľ čo farby značky sú svetloružová a tmavosivá, vyvinuli sme akčné farby byť odtieňom zelenej. Zelená je farba zameraná na akciu, takže to bol skvelý výber, ktorý pritiahol zrak našich používateľov k prvkom orientovaným na akciu. Začlenili sme prevrátenú hodnotu zelenej pre naše sekundárne akcie (zelený okraj s bielym pozadím a textom). Tiež testujeme tmavší odtieň zelenej na akčnej farbe pre akcie vznášania.

Odkedy sme túto stránku práve spustili, začlenili sme sledovanie myšou a teplotné mapy, aby sme mohli pozorovať prvky, ktoré našich návštevníkov najviac priťahujú a s ktorými najviac interagujú, aby sme zaistili farebnú schému, ktorá nielen dobre vyzerá, ale aj dobre funguje.

Farby, biely priestor a vlastnosti prvkov

Vývoj farebnej schémy by sa mal vždy uskutočniť jej testovaním v celkovom používateľskom rozhraní, aby sa sledovala interakcia používateľov. Pre vyššie uvedenú lokalitu sme tiež začlenili veľmi špecifické okraje, vypchávky, obrysy, polomery okrajov, ikonografiu a typy písma.

Spoločnosti sme dodali úplného sprievodcu brandingom na internú distribúciu pre akékoľvek marketingové alebo produktové materiály. Konzistencia značky je pre túto spoločnosť rozhodujúca, pretože je nová a v tomto bode nemá v tomto odvetví žiadne povedomie.

Tu je výsledná stránka elektronického obchodu s farebnou schémou

  • Skriňa52 - Kúpte si šaty online
  • Stránka kolekcií Closet52
  • Stránka produktu Skriňa52

Navštívte Closet52

Použiteľnosť farieb a farebná slepota

Nezabudnite na testovanie použiteľnosti farebného kontrastu medzi prvkami vášho webu. Svoju schému môžete otestovať pomocou Nástroj na testovanie dostupnosti webových stránok. Vďaka našej farebnej schéme vieme, že máme nejaké problémy s kontrastom, na ktorých budeme ďalej pracovať, alebo dokonca môžeme mať pre našich používateľov nejaké možnosti. Je zaujímavé, že pravdepodobnosť problémov s farbami u našej cieľovej skupiny je pomerne nízka.

Farbosleposť je neschopnosť vnímať rozdiely medzi niektorými farbami, ktoré dokážu rozlíšiť nefarební používatelia. Farbosleposť postihuje asi päť až osem percent mužov (približne 10.5 milióna) a menej ako jedno percento žien.

Usability.gov

Tím WebsiteBuilderExpert zostavil túto infografiku a podrobný sprievodný článok o Ako si vybrať farbu pre svoj web to je mimoriadne dôkladné.

Ako si vybrať farebnú schému pre váš web