Принципи коришћења боја

Палете боја

Дизајнери најчешће не користе случајне комбинације боја, већ креирају палете боја – сет боја које се добро уклапају и имају визуелну хармонију. Постоји више типова палета, заснованих на односу нијанси у HSL кругу боја:

Монохроматска палета: једна нијанса, различите вредности светлине и засићености.
Аналогна палета: боје које су блиске једна другој у кругу (нпр. плава, тиркизна и зелена).
Комплементарна палета: две супротне боје у кругу (нпр. плава и наранџаста).
Тријадна палета: три боје које су на једнаким растојањима у кругу (нпр. црвена, жута и плава).
Тетрадна палета: четири боје које чине правоугаоник у кругу боја.

Контраст и читљивост

Контраст представља разлику у осветљености или боји између два елемента. У дизајну интерфејса контраст има кључну улогу, јер директно утиче на читљивост, видљивост и употребљивост елемената на екрану. Добар контраст омогућава да се текст лако чита, да се важни елементи јасно издвајају и да корисник без напора уочи оно што је најбитније.

Најчешћи пример употребе контраста је однос између текста и позадине. Ако је позадина светла, текст треба да буде таман (на пример, црн на белој или светло сивој позадини). Ако је позадина тамна, текст треба да буде светлији (на пример, бела или светло сива на тамноплавој позадини). Превише слаб контраст отежава читање и замара очи, док превелик контраст може деловати агресивно и непријатно.

У UI дизајну постоје и стандардизовани критеријуми за контраст, дефинисани у оквиру WCAG стандарда. Према овом стандарду, минимални однос контраста између боје текста и позадине треба да буде најмање 4.5:1 за обичан текст и најмање 3:1 за задебљан текст. Постоје бројни бесплатни алати за проверу контраста боја (нпр. Contrast Checker) који омогућавају дизајнеру да провери да ли изабране боје задовољавају стандарде приступачности.

Контраст се не односи само на текст, већ и на иконе, дугмад, поља за унос, линкове и интерактивне елементе. Корисник мора јасно да разликује активна и неактивна стања елемената нпр. дугме које је онемогућено треба да има нижи контраст од активног дугмета. Такође, при дизајну треба водити рачуна о корисницима који имају поремећаје вида или облике далтонизма (неспособност разликовања одређених боја). За такве случајеве није довољно ослонити се само на боју већ је потребно је комбиновати боју са обликом, текстом или иконицом како би информација била јасно пренета свима.

Хармонија боја

Хармонија боја представља визуелни баланс између различитих нијанси које се користе у интерфејсу. Њен циљ је да створи пријатан, усклађен и естетски доживљај за корисника. Када су боје правилно усклађене, интерфејс делује уравнотежено и природно, а корисник може лакше да се фокусира на садржај и функционалност апликације. С друге стране, несразмерне комбинације боја могу изазвати визуелни замор или збуњеност, што нарушава укупно корисничко искуство.

Хармонија боја се често заснива на односу између боја на кружници боја (color wheel). Овај круг приказује примарне, секундарне и терцијалне боје распоређене тако да однос између њих одражава визуелну блискост или супротност. Најчешћи типови хармонија су:

Комплементарна хармонија користи боје које се налазе једна насупрот другој на кружници боја (на пример, плава и наранџаста). Ова комбинација ствара снажан контраст и визуелну динамику, што је корисно када се жели нагласити одређени елемент у интерфејсу (на пример, дугме за акцију).
Аналогна хармонија користи боје које се налазе једна поред друге (нпр. плава, тиркизна и зелена). Ове комбинације делују природно и смирујуће, па су чест избор за позадине и интерфејсе који треба да делују пријатно и ненаметљиво.
Тријадна хармонија заснива се на три боје које су равномерно распоређене на кружници боја (нпр. црвена, жута и плава). Овај приступ омогућава богат спектар боја уз добар баланс између живости и усклађености.
Монохроматска хармонија користи различите нијансе и осветљености једне боје. Овај приступ обезбеђује једноставан, елегантан изглед и често се користи у модерном минималистичком дизајну.

У дигиталном дизајну, хармонија боја се не односи само на леп изглед, већ и на употребљивост и приступачност. На пример, комбинације треба да обезбеде довољан контраст између текста и позадине, али да притом делују пријатно оку. Хармоничан интерфејс омогућава кориснику да лако разликује интерактивне елементе, без вишка визуелних дражи.

У савременим веб и мобилним интерфејсима, дизајнери често користе палете боја које су унапред дефинисане и тестиране за визуелну хармонију, као нпр. Google Material Design палете. Такви системи помажу у одржавању доследности и естетског склада у оквиру целе апликације, што доприноси професионалном и уравнотеженом изгледу.

Савети су да:

не користиш више од 3 до 5 боја у интерфејсу,
обезбедиш да постоји довољно простора између обојених елемената и
избегаваш јаке, засићене боје у великим површинама.

Психологија боја

Боје изазивају емоције и утичу на понашање корисника. Дизајнери их користе да би изазвали жељен осећај или акцију.

Боја	Емоција / Симболика	Примена у UI дизајну
Плава	поверење, сигурност, стабилност	банке, пословне апликације
Црвена	енергија, хитност, упозорење	дугмад за акцију (нпр. Обриши)
Зелена	природа, успех, баланс	апликације за здравље, еколошке теме
Жута	оптимизам, пажња	истакнути елементи, упозорења
Наранџаста	ентузијазам, топлина	продаја, позив на акцију
Љубичаста	креативност, луксуз	креативне и модне апликације
Црна	елеганција, моћ	премијум производи
Бела	чистоћа, једноставност	позадина, простор, минимализам

На пример:

Instagram користи градијент топлих боја (ружичаста, љубичаста, наранџаста) да изрази креативност и енергију.
Facebook и LinkedIn користе плаву боју за осећај поверења и стабилности.
Spotify користи црну позадину са зеленим акцентима како би нагласио модеран дизајн.