Веб-сайтты, электрондық коммерцияны немесе қолданбаның түс схемаларын қалай әзірлеуге болады

Веб-сайтты, электрондық коммерцияны немесе қолданбаның түс схемаларын жасаңыз

Біз түстердің брендке қатысты маңыздылығы туралы бірнеше мақалалармен бөлістік. Веб-сайт, электрондық коммерция сайты немесе мобильді немесе веб-қосымша үшін бұл өте маңызды. Түстер мыналарға әсер етеді:

  • Бренд туралы алғашқы әсер және оның құндылығы – мысалы, сәнді тауарлар көбінесе қара түсті пайдаланады, қызыл түс толқуды білдіреді және т.б.
  • Сатып алу туралы шешімдер – брендтің сенімі түс контрастымен анықталуы мүмкін. Жұмсақ түс схемалары әйелдік және сенімдірек болуы мүмкін, қатал контрасттар шұғыл және жеңілдікке негізделген болуы мүмкін.
  • Қолдану мүмкіндігі және пайдаланушы тәжірибесі - түстердің психологиялық қасиеті бар және физиологиялық әсер етеді, бұл пайдаланушы интерфейсінде шарлауды жеңілдетеді немесе қиындатады.

Түс қаншалықты маңызды?

  • Адамдардың 85% түсі олардың сатып алатын нәрсесіне үлкен әсер етеді деп мәлімдеді.
  • Түстер брендті тануды орта есеппен 80%-ға арттырады.
  • Түс әсері өнімді қабылдау немесе қабылдамау үшін 60% жауап береді.

Веб-сайттың түс схемасын анықтау кезінде ілеспе инфографикада егжей-тегжейлі сипатталған бірнеше қадамдар бар:

  1. Негізгі түс – Өніміңіздің немесе қызметіңіздің энергиясына сәйкес келетін түсті таңдаңыз.
  2. Әрекет түстері – Төмендегі инфографикада бұл жоқ, бірақ негізгі әрекет түсін және қосымша әрекет түсін анықтау өте пайдалы. Ол сіздің аудиторияңызды түске негізделген нақты пайдаланушы интерфейсінің элементтеріне назар аударуға үйретеді.
  3. Aқосымша түстер – Қосымша таңдаңыз толықтыратын түстер сіздің негізгі түсіңіз, ең дұрысы негізгі түсіңізді жасайтын түстер поп.
  4. Фондық түстер – Веб-сайтыңыздың фоны үшін түсті таңдаңыз – негізгі түсіңізге қарағанда агрессивті болуы мүмкін. Қараңғы және ашық режимде де есте сақтаңыз.. Көптеген сайттар ашық немесе қараңғы режимде түс схемаларын қосуда.
  5. Шрифт түстері – Веб-сайтыңызда болатын мәтіннің түсін таңдаңыз – қатты қара шрифт сирек кездесетінін және ұсынылмайтынын есте сақтаңыз.

Мысал ретінде менің компаниям Highbridge Адамдар тікелей тұтынушыға арналған электрондық коммерция сайтын құрғысы келетін көйлек өндірушісі үшін онлайн бренд әзірледі. көйлектерді онлайн сатып алыңыз. Біз мақсатты аудиториямызды, брендтің құндылығын түсіндік және – бренд негізінен цифрлық болғанымен, сонымен бірге физикалық өнімі болғандықтан – біз басып шығаруда (CMYK), мата палитраларында (Pantone) жақсы жұмыс істейтін түс схемаларына назар аудардық. сандық (RGB және Hex).

Түс схемасын нарықты зерттеу арқылы сынау

Түс схемасын таңдау процесі қарқынды болды.

  1. Біз мақсатты аудиториямызбен негізгі түстер сериясы бойынша маркетингтік зерттеулер жүргіздік, бұл бізді бір түске дейін азайтты.
  2. Біз мақсатты аудиториямызбен екінші және үшінші түстер сериясы бойынша маркетингтік зерттеулер жүргіздік, онда кейбір түс схемаларын тарылттық.
  3. Біз өнімнің макеттерін (өнім орамы, мойын белгілері және ілулі тегтер), сондай-ақ түс схемалары бар электрондық коммерция макеттерін жасадық және оларды клиентке, сондай-ақ кері байланыс үшін мақсатты аудиторияға ұсындық.
  4. Олардың бренді негізінен маусымдылыққа тәуелді болғандықтан, біз маусымдық түстерді қоспаға қостық. Бұл жарнамалар мен әлеуметтік медиа бөлісулеріне арналған арнайы жинақтар немесе көрнекіліктер үшін ыңғайлы болуы мүмкін.
  5. Ақырғы схемаға қол жеткізгенге дейін біз бұл процестен жарты оннан астам рет өттік.

шкаф52 түс схемасы

Бренд түстері ашық қызғылт және қою сұр болғанымен, біз оны әзірледік әрекет түстері жасыл түстің көлеңкесі болу. Жасыл - әрекетке бағытталған түс, сондықтан бұл біздің пайдаланушылардың көздерін әрекетке бағытталған элементтерге аудару үшін тамаша таңдау болды. Біз қосымша әрекеттеріміз үшін жасыл түстің кері мәнін енгіздік (ақ фон және мәтіні бар жасыл жиек). Сондай-ақ меңзерді жылжыту әрекеттері үшін әрекет түсіндегі қою жасыл реңкті сынап жатырмыз.

Сайтты жаңадан іске қосқаннан бері біз келушілерді қызықтыратын және ең көп әрекеттесетін элементтерді байқау үшін тінтуірді бақылау мен жылу карталарын енгіздік, бұл жай ғана жақсы көрінбейтін түс схемасы бар... ол жақсы жұмыс істейді.

Түстер, ақ кеңістік және элемент сипаттамалары

Түс схемасын әзірлеу әрқашан пайдаланушылардың өзара әрекеттесуін бақылау үшін оны жалпы пайдаланушы интерфейсінде сынау арқылы орындалуы керек. Жоғарыдағы сайт үшін біз сондай-ақ өте ерекше жиектерді, толтыруды, контурларды, шекара радиусын, иконографияны және қаріптерді енгіздік.

Біз компанияға кез келген маркетинг немесе өнім материалдары үшін ішкі тарату үшін толық брендинг нұсқаулығын жеткіздік. Бренд консистенциясы бұл компания үшін өте маңызды, өйткені олар жаңа және қазіргі уақытта салада ешқандай хабардар емес.

Міне, түсті схемасы бар нәтижелік электрондық коммерция сайты

  • Closet52 - көйлектерді онлайн сатып алыңыз
  • Closet52 коллекциялар беті
  • Closet52 өнім беті

Closet52-ге барыңыз

Түстерді қолдану мүмкіндігі және түс соқырлығы

Сайтыңыздың элементтері бойынша түс контрастын анықтау үшін жарамдылық сынағы туралы ұмытпаңыз. көмегімен схемаңызды тексере аласыз Веб-сайттың қол жетімділігін тексеру құралы. Түс схемасы арқылы бізде контраст мәселелері бар екенін білеміз, олар бізде төменде жұмыс істейтін болады немесе тіпті пайдаланушыларымыз үшін кейбір опциялар болуы мүмкін. Бір қызығы, біздің мақсатты аудиториямен түс мәселелерінің ықтималдығы өте төмен.

Түс соқырлығы - бұл түсті емес пайдаланушылар ажырата алатын кейбір түстер арасындағы айырмашылықтарды қабылдау қабілетсіздігі. Түс соқырлығы шамамен әсер етеді ерлердің бес-сегіз пайызы (шамамен 10.5 миллион) және әйелдердің бір пайызынан азы.

Usability.gov

WebsiteBuilderExpert тобы осы инфографиялық және егжей-тегжейлі ілеспе мақаланы жинады Веб-сайтыңыз үшін түсті қалай таңдауға болады бұл өте мұқият.

Веб-сайтыңыз үшін түс схемасын қалай таңдауға болады