СПОДЕЛИ

Не е тајна дека филозофијата на бои се употребува во сите аспекти на дизајнот. Од боите кои се употребени на секојдневните прехранбени продукти кои ги купуваме, до логоата на брендовите и дизајнот на веб сајтот. Бојата е многу важен елемент кој може да пренесе одредена порака на корисниците.

Photo credit: Dropbox

Според Kissmetrics, кога погледнуваме боја, нашите очи испраќаат порака до делот од мозокот наречен хипоталамус. Како резултат, тој праќа сигнали до друга жлезда во мозокот и потоа сето то оди до тироидната жлезда. Овие сигнали прават да се лачат хормони кои предизвикуваат промени во нашето расположение, емоции, и како резултат на тоа, влијаат на нашето однесување.

Науката ни кажува дека бојата буди емоции кои може да резултираат во позитивни и негативни чувства. Според Kissmetrics потребни се само 90 секунди за посетителот на сајтот да оформи свое мислење. Дополнително, “62-90% од целата интеракција се одредува само од бојата на продуктот.”

Како што е опишано во е-книгата Web Design for the Human Eye, бојата игра неоспорна улога во креирањето на силен прв впечаток кај корисниците.

Што значат боите

Секоја боја му значи нешто на секој човек, иако ова значење варира во зависност од вашиот личен вкус и потеклото.

Само за пример, погледнете го графиконот со бои подолу.

Photo credit: UXPin
Photo credit: UXPin

Филозофијата на бои во дизајнот не е прецизна наука, и многу студии покажале дека боите се под влијание на индивидуалната перцепција. Општествените параметри, како и полот, имаат влијание на тоа како една боја се восприема. Подеталните истражувања откриле дека не е само бојата онаа која го остава впечатокот, туку и тоа колку корисникот верува дека бојата која е употребена е соодветна за брендот.

Извор: Kissmetrics
Извор: Kissmetrics

Па, ако дизајнирате за жени,  виолетовата е добар избор бидејќи станува збор за универзално поженска боја, но затоа пак, на мажите оваа боја не им се допаѓа (општо зборувано). На сликата подолу, ова е употребено со добар ефект за L’Oreal Paris. Како што можете да забележите, заглавјето и подножјето се црни, што алудира на класика и елеганција, па добивате чувсто дека продуктот не е евтин, туку дека е врвен и скап.

Извор: Kissmetrics
Извор: Kissmetrics

Белата боја е употребена за текстот, што асоцира на современост и чувство на спокој, а виолетовата е одбрана за да долови луксуз, елеганција и женственост. Сето ова е целосно соодветно за сајт од овој тип.

(За да научите повеќе за минималистичкиот дизајн и употребата на празен простор како алатка во дизајнот, кликнете на бесплатните е-книги The Elegance of Minimalism и The Zen of White Space in Web Design).

На сликата подолу, за списанието Women’s Health, банерот од горе е розев, а сајтот е релативно без боја и се потпира на слики и навигација со задебелени букви. Ова е интересен избор кој може функционира против овој сајт.

Илустрација: Women’s Health
Илустрација: Women’s Health

Ако одиме во детали, розевата боја е стереотипна за сајт кој цели на жени. Оваа боја одговара на оние кои имаат слабост кон слатките, па пораката на сајтот, во одност на тоа дека се однесува на женското здравје, може да се изгуби во дизајнот.

Откако ќе навлезете подлабоко во структурата на сајтот, бојата на заглавјето се употребува на секоја страница, а со кликнување на секцијата за губење тежина го добивате следново:

Илустрација: Women’s Health
Илустрација: Women’s Health

Како и што самите може да забележите, оваа страница е уште порозева, што е контрапродуктивно со публиката. Сепак, првата слика која ја видовме беше на лизгач, па се смени по извесно време поминато на страницата.

Одредување шема на бои

Неверојатно е да креирате сајт кој ќе се состои од само една боја (освен ако не одите на монохроматски изглед), па затоа треба да размислите за целата шема на бои, за секоја од засебните бои, и за начинот на кој тие функционираат заедно. Исто така, мора да го земете во предвид и влијанието кое тие ќе го имаат врз корисникот,  како и начинот на кој секундарната боја се совпаѓа со примарната боја на сајтот.

Со сево ова на ум, може да употребите повеќе бои, па за да ви помогнеме, ви ги претставуваме трите основни методи на мешање бои.

#1: ТријадаОва е најосновниот и најизбалансираниот метод. Тој употребува комплементарност и светлина на бои. Со употреба на тркалото со 12 бои, може да селектирате три бои кои се поставени на 120 степени една од друга за позадина, навигација и содржина.

Фото кредит: Ray Trygstad. Wikimedia Commons. Creative Commons.
Фото кредит: Ray Trygstad. Wikimedia Commons. Creative Commons.

#2: Сложена комбинација (поделена комбинација на комплементарни бои)Вториот метод е покомплициран, и со него би требало повеќе да експериментирате за да ја добиете вистинската комбинација, но може да е многу ефикасен, ако се следи правилно. Концептот употребува четири бои, два контрастни пара (кои се блиску на тркалото со бои) и два комплементарни пара.

Фото кредит: Ray Trygstad. Wikimedia Commons. Creative Commons.
Фото кредит: Ray Trygstad. Wikimedia Commons. Creative Commons.

#3: АналогниОвој метод се фокусира на комплементарни бои, и овде треба да одлучите што треба шемата да му кажува на корисникот. Со оглед на тоа што ја потенцира динамичноста на избраните бои, може да е нападен, бидејќи боите обично се пренагласени.

Фото кредит: Ray Trygstad. Wikimedia Commons. Creative Commons.
Фото кредит: Ray Trygstad. Wikimedia Commons. Creative Commons.

Кога размислувате за филозофијата на бои, важно е да ги земете во предвид сите бои како целина и начинот на кој тие функционираат заедно, наместо да изберете бои и да се надевате дека истите добро ќе изгледаат една до друга како позадина, текст и копчиња.

Погледнете ја страницата подолу и размислете што му кажува на корисникот.

Илустрација: Codementor
Илустрација: Codementor
  1. Боја на позадина – Црната позадина асоцира на класика, совршенство, формалност и корпоративност. Обично, кога имате сајт кој нуди менторски услуги, сакате да ја потенцирате извонредноста, т.е совршенството. Формалноста сугерира дека е поврзано со учење, а корпоративноста, дека корисниците не мора да учат да програмираат само како хоби, туку и дека тоа може да е нивна идна кариера.
  1. Боја на копчиња: Сајтот употребува црвени копчиња за повик на акција, кои јасно се истакнуваат на црната позадина, за да го поттикнат регистрирањето на корисниците на сајтот. Црната е употребена со бела рамка кај помалку важните копчиња, притоа усогласувајќи се со целокупната избрана шема.
  1. Боја на текст: За текстот, белата боја обезбедува важен контраст, а сепак одговара со шемата на бои. Иконите кои се со бели контури (и белите дух-копчиња) се поставени на начин кој ги поттикнува корисниците да скролуваат надолу за повеќе информации, ако е неопходно.

Генерално, дизајнот е во ред. Сите знаеме дека црната и белата добро одат една со друга, и во случајов, сајтот е елегантен и релативно формален. Црвената, ако  претерано се употребува, може да го одвлече значењето од основната порака, па затоа се употребува ретко, само за да истакне одредени работи, со што дава јасно до знаење дека посакуваната акција е да се регистрирате за услугата.

Бои кои треба да ги избегнувате

Кафената буди чувство на природност во дизајнот, но е боја која на мажите не им се допаѓа, иако добро функционира во некои контексти, бидејќи  означува сигурност.

Илустрација: Color-Matters
Илустрација: Color-Matters

Кафената е добра за UPS бидејќи тоа е компанија која сака да пренесе силна порака дека можете да се потпрете на нив.

Сепак, спортската опрема на сликата, е опишана како најлоша во историјата на колеџ рагби лигите, благодарение на дресот на сликата кој му припаѓа на тимот на Вајоминг колеџот. Интересно е што кафената се верува дека промовира грубост, па би било очекувано да се стави во комбинација со толку агресивен спорт, но во овој случај не се потврдува тоа, најверојатно, заради фактот што мажите обично не сакаат кафена боја.

Ако зборуваме за жените, за нив се чини дека најмалку омилена боја е портокаловата, па имајте го ова на ум ако дизајнирате нешто што е примарно наменето за женски корисници.

Се разбира ова се само препораки (и сé зависи од контекстот). Многу поважно е сите ваши бои да се надополнуваат една со друга, и да креираат хармонија на екранот.

Алатки кои ќе ви помогнат да ги изберете вистинските бои

Може да употребите и подготвени палети со боја за полесно да го направите изборот. Кога станува збор за веб дизајнот на кориснички интерфејс, нема потреба одново да го откривате тркалото со бои.

  • Adobe Color CC – обезбедувач од доверба за сите Adobe корисници.
  • Paletton – едноставен избирач на бои за почетници.
  • Flat UI Color Picker – за креирање шарени рамни дизајни
  • Mudcube Color Sphere – ниди селекција на теми и обезбедува HEX броеви.
  • Check My Colours – за проверка на комбинациите на бои и точен контраст за употреба од луѓе кои се далтонисти.
  • Color – ви дозволува да изберете боја движејќи го глувчето по екранот, да прилагодите заситеност и да добиете HEX код.

Учење по пример

Постојат илјадници на сајтови кои употребуваат боја за подобар ефект, а постојат и сајтови кои не го прават тоа. Сликата подолу доби награда awwwards Site of the Day за препознатливост по боја, а можете да забележите и зошто.

Илустрација: AWWWards
Илустрација: AWWWards

Позадината е изедначена светло сива боја која совршено одговара со сивата боја на моторот. Едноставниот дизајн со големите букви е многу ефикасен и веднаш пренесува чувство дека станува збор за мал и брз мотор кој би го возеле со уживање. Употребата на сивата боја им дозволува на другите бои да се истакнат, бидејќи таа е природна боја која, која како што станува посветла, ја осветлува и освежува страницата. Сивата исто така дава и чувство на стабилност (одлично за реклама за мотор), притоа креирајќи чувство на спокој и прибраност.

Боите кои се употребени во зборот ‘Go’ се светли и живи, давајќи чувство на динамичност и современост на дизајнот. Доминантна е сината боја, и бидејќи ова е боја која им се допаѓа и на жените и на мажите, страницата не е врзана за одреден пол. Зелената се додава спорадично, а со тоа дава чувство на еколошка одговорност. Ова е навистина мудар потег, бидејќи мотор со оваа големина сигурно не троши многу и не ја загадува толку околината, па затоа е и подобар. Се разбира ова е нешто што веќе го знаеме, но добро е кога пораката се засилува.

Оваа страница ви дава идеја дека овој скутер е одличен за модерно, урбано живеење.

За крај

Бојата е важен дел од дизајнот, но и витален елемент на секој бренд. Боите кои се употребуваат мора да се совпаѓаат со чувството кое го пренесува приказната и значењето на брендот. Често, дизајнерот може да треба да работи со постоечки слики и графички елемнти, како логоа, и ќе мора да ги одбере боите врз основа на тоа. Иако некои ова го гледаат како ограничување, палетата со која веќе располагате може да го олесни целиот процес.

За да научите повеќе за тоа како да направите најдобар прв впечаток кај корисниците, погледнете ја бесплатната е-книга од 85 стр. Web UI Design for the Human Eye. Анализирани се примери од повеќе од 33 компании, меѓу кои Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom, и Bose.

извор designomodo


Доколку сакате посистематски пристап во учењето, тогаш за вас веројатно ќе е најсоодветен курсот Основи на боја кој се наоѓа како составен дел од предметот Визуелен дизајн кој го следат нашите студенти кои се подготвуваат да станат Веб дизајнери или UX дизајнери.

Ти се допадна овој напис?
Се согласувам моите податоци да бидат префлени на MailChimp ( повеќе информации )
Стани член на клубот на веб професионалци Еверест и прв добивај информации кои можат да ти помогнат за твојот натамошен професионален развој.
И ние како и ти ги мразиме спамерите. Твојата email адреса никогаш нема да биде (про)дадена некому. Чесен збор.