Paano Bumuo ng Website, Ecommerce, O Mga Color Scheme ng Application

Bumuo ng Website, Ecommerce, o App Color Scheme

Nagbahagi kami ng ilang mga artikulo sa kahalagahan ng kulay na may paggalang sa isang tatak. Para sa isang website, ecommerce site, o isang mobile o web application, ito ay kasing kritikal. Ang mga kulay ay may epekto sa:

  • Paunang impression ng isang brand at ang halaga nito – halimbawa, ang mga luxury goods ay kadalasang gumagamit ng itim, ang pula ay nagpapahiwatig ng kaguluhan, atbp.
  • Mga desisyon sa pagbili – ang tiwala ng isang brand ay maaaring matukoy ng contrast ng kulay. Maaaring mas pambabae at mapagkakatiwalaan ang mga malalambot na scheme ng kulay, maaaring mas apurahan ang mga malupit na contrast at may diskwento.
  • Usability at karanasan ng user - ang mga kulay ay may sikolohikal at pisyolohikal na epekto pati na rin, na ginagawang mas madali o mas mahirap na mag-navigate sa isang user interface.

Gaano Kahalaga ang Kulay?

  • 85% ng mga tao ang nagsabing ang kulay ay may malaking impluwensya sa kanilang binibili.
  • Pinapalakas ng mga kulay ang pagkilala sa tatak ng average na 80%.
  • Ang impression ng kulay ay responsable para sa 60% ng pagtanggap o pagtanggi ng isang produkto.

Kapag tinutukoy ang scheme ng kulay para sa isang website, may ilang hakbang na nakadetalye sa kasamang infographic:

  1. Pangunahing kulay – Pumili ng kulay na angkop sa enerhiya ng iyong produkto o serbisyo.
  2. Mga Kulay ng Aksyon – Ito ay nawawala sa infographic sa ibaba, ngunit ang pagtukoy ng pangunahing kulay ng pagkilos at pangalawang kulay ng pagkilos ay lubhang nakakatulong. Tinuturuan nito ang iyong audience na tumuon sa mga partikular na elemento ng user interface batay sa kulay.
  3. Amga karagdagang Kulay - Pumili ng karagdagang mga kulay na umaakma ang iyong pangunahing kulay, perpektong mga kulay na gumagawa ng iyong pangunahing kulay pop.
  4. Mga Kulay sa Background – Pumili ng kulay para sa background ng iyong website – posibleng hindi gaanong agresibo kaysa sa iyong pangunahing kulay. Isaisip din ang dark at light mode.. parami nang parami ang mga site na nagsasama ng mga color scheme sa light o dark mode.
  5. Mga Kulay ng Typeface – Pumili ng kulay para sa text na mapupunta sa iyong website – tandaan na ang solid black typeface ay bihira at hindi inirerekomenda.

Bilang halimbawa, ang aking kumpanya Highbridge bumuo ng online na brand para sa isang tagagawa ng damit na gustong bumuo ng isang direktang-sa-consumer na ecommerce na site kung saan magagawa ng mga tao bumili ng mga damit online. Naunawaan namin ang aming target na madla, ang halaga ng tatak, at – dahil ang brand ay higit sa lahat ay digital ngunit mayroon ding pisikal na produkto – tumutok kami sa mga scheme ng kulay na mahusay na gumagana sa kabuuan ng print (CMYK), fabric palettes (Pantone), pati na rin ang digital (RGB at Hex).

Pagsubok ng Color Scheme Gamit ang Market Research

Ang aming proseso para sa aming pagpili ng color scheme ay masinsinan.

  1. Nagsagawa kami ng pananaliksik sa marketing sa isang serye ng mga pangunahing kulay kasama ang aming target na madla na nagbawas sa amin sa isang kulay.
  2. Nagsagawa kami ng pananaliksik sa marketing sa isang serye ng mga pangalawang at tersiyaryong kulay kasama ang aming target na madla na kung saan pinaliit namin ang ilang mga scheme ng kulay.
  3. Gumawa kami ng mga mockup ng produkto (packaging ng produkto, mga tag sa leeg, at mga nakabitin na tag) pati na rin ang mga mockup ng ecommerce na may mga scheme ng kulay at ibinigay ang mga iyon sa kliyente pati na rin sa target na audience para sa feedback.
  4. Dahil ang kanilang brand ay higit na nakadepende sa seasonality, isinama din namin ang mga seasonal na kulay sa mix. Ito ay maaaring magamit para sa mga partikular na koleksyon o visual para sa mga ad at pagbabahagi sa social media.
  5. Dumaan kami sa prosesong ito nang higit sa kalahating dosenang beses bago mag-settle sa huling scheme.

scheme ng kulay ng closet52

Habang ang mga kulay ng brand ay light pink at dark grey, binuo namin ang mga kulay ng aksyon upang maging lilim ng berde. Ang berde ay isang kulay na nakatuon sa pagkilos kaya ito ay isang mahusay na pagpipilian upang maakit ang mga mata ng aming mga user sa mga elementong nakatuon sa pagkilos. Isinama namin ang kabaligtaran ng berde para sa aming mga pangalawang aksyon (berdeng hangganan na may puting background at teksto). Sinusubukan din namin ang isang mas madilim na lilim ng berde sa kulay ng pagkilos para sa mga pagkilos na mag-hover.

Dahil kakalunsad pa lang namin ng site, isinama namin ang mouse-tracking at mga heatmap para obserbahan ang mga elemento kung saan naaakit ang aming mga bisita at pinakamadalas na nakikipag-ugnayan para matiyak na mayroon kaming color scheme na hindi lang maganda ang hitsura... mahusay itong gumaganap.

Mga Kulay, White Space, at Mga Katangian ng Elemento

Ang pagbuo ng scheme ng kulay ay dapat palaging magawa sa pamamagitan ng pagsubok nito sa isang pangkalahatang user interface upang obserbahan ang pakikipag-ugnayan ng mga user. Para sa site sa itaas, nagsama rin kami ng napakaspesipikong mga margin, padding, outline, border radiuse, iconography, at typeface.

Naghatid kami ng buong gabay sa pagba-brand para sa kumpanya na ipamahagi sa loob ng anumang marketing o mga materyales ng produkto. Ang pagkakapare-pareho ng brand ay mahalaga sa kumpanyang ito dahil bago sila at walang anumang kaalaman sa industriya sa puntong ito.

Narito Ang Nagreresultang Ecommerce Site na may Color Scheme

  • Closet52 - Bumili ng Mga Dress Online
  • Pahina ng Mga Koleksyon ng Closet52
  • Pahina ng Produkto ng Closet52

Bisitahin ang Closet52

Color Usability at Color Blindness

Huwag kalimutan ang pagsubok sa usability para sa contrast ng kulay sa mga elemento ng iyong site. Maaari mong subukan ang iyong scheme gamit ang Tool sa Pagsubok sa Accessibility ng Website. Sa aming scheme ng kulay, alam namin na mayroon kaming ilang mga isyu sa kaibahan na gagawin namin sa hinaharap, o maaaring mayroon kaming ilang mga opsyon para sa aming mga user. Kapansin-pansin, ang mga pagkakataon ng mga isyu sa kulay sa aming target na madla ay medyo mababa.

Ang color blindness ay ang kawalan ng kakayahang makita ang mga pagkakaiba sa pagitan ng ilan sa mga kulay na maaaring makilala ng mga user na walang kulay na may kapansanan. Nakakaapekto ang pagkabulag ng kulay tungkol sa lima hanggang walong porsyento ng mga lalaki (humigit-kumulang 10.5 milyon) at mas mababa sa isang porsyento ng mga babae.

Usability.gov

Ang koponan sa WebsiteBuilderExpert ay pinagsama-sama ang infographic na ito at detalyadong kasamang artikulo sa Paano Pumili ng Kulay para sa Iyong Website iyon ay lubos na masinsinan.

Paano Pumili ng Color Scheme Para sa Iyong Website