Webhelyek, e-kereskedelem vagy alkalmazások színsémáinak fejlesztése

Webhely-, e-kereskedelmi vagy alkalmazásszínsémák kidolgozása

Jó néhány cikket megosztottunk a színek fontosságáról egy márka szempontjából. Egy webhely, e-kereskedelmi webhely, illetve egy mobil vagy webes alkalmazás esetében ez ugyanolyan fontos. A színek hatással vannak:

  • A márka kezdeti benyomása és értéke – például a luxuscikkek gyakran feketét használnak, a piros pedig izgalmat stb.
  • Vásárlási döntések – egy márka bizalmát a színkontraszt határozhatja meg. A lágy színsémák nőiesebbek és megbízhatóbbak, az éles kontrasztok sürgetőbbek és kedvezmények lehetnek.
  • Használhatóság és felhasználói élmény – a színeknek pszichológiai jellemzőik vannak és fiziológiai hatást is, ami megkönnyíti vagy megnehezíti a felhasználói felületen való navigálást.

Mennyire fontos a szín?

  • Az emberek 85%-a azt állította, hogy a színek nagyban befolyásolják, hogy mit vásárolnak.
  • A színek átlagosan 80%-kal növelik a márka ismertségét.
  • A színlenyomat a termék elfogadásának vagy elutasításának 60%-áért felelős.

Egy weboldal színsémájának meghatározásakor néhány lépést a mellékelt infografika részletez:

  1. Elsődleges szín – Válasszon egy színt, amely megfelel terméke vagy szolgáltatása energiájának.
  2. Akció színei – Ez hiányzik az alábbi infografikáról, de az elsődleges műveletszín és a másodlagos műveletszín azonosítása rendkívül hasznos. Arra oktatja közönségét, hogy a szín alapján a felhasználói felület bizonyos elemeire összpontosítson.
  3. Atovábbi színek – Válasszon továbbiakat színek, amelyek kiegészítik az elsődleges szín, ideális esetben azok a színek, amelyek az elsődleges színt adják pop.
  4. Háttér színek – Válasszon színt webhelye hátteréhez – lehetőleg kevésbé agresszív, mint az elsődleges színe. Tartsa szem előtt a sötét és világos módot is. Egyre több webhely alkalmazza a világos vagy sötét mód színsémáit.
  5. Betűtípusok színei – Válasszon színt a webhelyén megjelenő szöveghez – ne feledje, hogy a tömör fekete betűtípus ritka és nem ajánlott.

Például a cégem Highbridge online márkát fejlesztett ki egy ruhagyártó számára, aki egy közvetlen fogyasztói e-kereskedelmi webhelyet akart építeni, ahol az emberek vásároljon ruhákat online. Megértettük a célközönségünket, a márka értékét, és – mivel a márka túlnyomórészt digitális volt, de volt fizikai terméke is – olyan színsémákra összpontosítottunk, amelyek jól működnek a nyomatokon (CMYK), a szövetpalettákon (Pantone), valamint digitális (RGB és Hex).

Színséma tesztelése piackutatással

A színséma kiválasztásának folyamata intenzív volt.

  1. Marketingkutatást végeztünk egy sor elsődleges színről a célközönségünkkel, amelyek egyetlen színre redukáltak bennünket.
  2. Marketingkutatást végeztünk egy sor másodlagos és harmadlagos színről célközönségünkkel, ahol leszűkítettünk néhány színsémát.
  3. Készítettünk termékmaketteket (termékcsomagolás, nyakcímkék és akasztós címkék), valamint e-kereskedelmi maketteket a színsémákkal, melyeket a megrendelőnek és a célközönségnek adtunk visszajelzésre.
  4. Mivel a márkájuk nagymértékben függött a szezonalitástól, szezonális színeket is beépítettünk a keverékbe. Ez jól jöhet bizonyos gyűjtemények vagy hirdetések és közösségi média megosztások esetén.
  5. Több mint fél tucatszor mentünk keresztül ezen a folyamaton, mielőtt a végső sémát választottuk volna.

szekrény52 színséma

Míg a márka színei világos rózsaszín és sötétszürke, mi kifejlesztettük a akció színei hogy a zöld árnyalata legyen. A zöld egy akció-orientált szín, így remek választás volt, hogy felhívjuk felhasználóink ​​figyelmét az akcióorientált elemekre. Másodlagos műveleteinkhez a zöld inverzét alkalmaztuk (zöld szegély fehér háttérrel és szöveggel). Ezenkívül teszteljük a zöld sötétebb árnyalatát az akciószínen a lebegési műveletekhez.

Mióta elindítottuk az oldalt, beépítettünk egérkövetést és hőtérképeket, hogy megfigyeljük azokat az elemeket, amelyekhez látogatóink leginkább vonzódnak, és amelyekkel a legtöbbet interakcióba lépnek, hogy ne csak jól nézzen ki, hanem jól is működjön a színséma.

Színek, fehér tér és az elemek jellemzői

A színséma kialakítását mindig úgy kell végrehajtani, hogy azt egy általános felhasználói felületen teszteljük, hogy megfigyeljük a felhasználók interakcióját. A fenti webhelyhez nagyon specifikus margókat, kitöltéseket, körvonalakat, szegélysugárokat, ikonográfiát és betűtípusokat is beépítettünk.

Teljes márkaépítési útmutatót szállítottunk a vállalat számára, amelyet bármely marketing- vagy termékanyaghoz belsőleg terjesztünk. A márka egységessége kritikus fontosságú ennél a cégnél, mivel újak, és jelenleg nincs ismertségük az iparágban.

Íme az eredményül kapott e-kereskedelmi webhely színsémával

  • Closet52 - Vásároljon ruhákat online
  • Closet52 gyűjtemények oldala
  • Closet52 termékoldal

Látogassa meg a Closet52-t

Színhasználat és színvakság

Ne felejtse el a színkontraszt használhatósági tesztelését webhelye elemei között. A sémát a Webhely-kisegítő lehetőségek tesztelő eszköze. A színsémánk segítségével tudjuk, hogy vannak kontrasztproblémánk, amelyeken az úton dolgozunk, vagy akár néhány lehetőségünk is adódhat felhasználóinknak. Érdekes módon a színproblémák esélye a célközönségünkkel meglehetősen alacsony.

A színvakság az, hogy képtelenség észlelni a különbségeket egyes színek között, amelyeket a nem színezett, fogyatékkal élő felhasználók meg tudnak különböztetni. A színvakság kb a férfiak öt-nyolc százaléka (körülbelül 10.5 millió) és a nők kevesebb mint egy százaléka.

Usability.gov

A WebsiteBuilderExpert csapata összeállította ezt az infografikát és a hozzá tartozó részletes cikket Hogyan válasszunk színt webhelyéhez ez rendkívül alapos.

Hogyan válasszunk színsémát webhelyéhez