ISSN 1312-0379
За сайта | Карта на сайта | Контакт | F.A.Q.

Главна > Статии > Цветове

Цветът в уеб дизайна. От Дмитрий Кирсанов.

Наред с формата, шрифта и текстурата, цветът е един от базовите строителни материали както в традиционния, така и в мултимедийния и уеб дизайна. Необикновеният, но внимателно обмислен и балансиран подбор на цветове може да стане основа за великолепна композиция - дори и останалите елементи да са съвсем обичайни.

Очевидно е, че възприемането на цветовете принципно е по-субективно, отколкото, да речем, възприемането на формите - различните хора имат не само различни любими цветове, но и различни усещания, предизвиквани от един или друг цвят. Независимо от това във вселената на цветовете действат напълно универсални закони, които всеки дизайнер е длъжен да знае и да може да прилага в практиката. Това не дава, за съжаление, гаранция, че неговият подбор на цветове ще се хареса на всички, но поне ще му помогне да избегне разпространените грешки и ще придаде на работите му професионален вид, очевиден даже и за тези, които имат алергия към някои конкретни цветове.

Цветът - това е онази област, в която компютърната графика има най-голямо преимущество пред естествената графика. Компютърният екран, за разлика от листа хартия, сам излъчва светлина и регулирането на количеството светлина позволява да се обхване далеч по-широк спектър цветове, отколкото този, който може да се възпроизведе върху хартия. До скоро проблемът беше в това, че компютърните дисплеи бяха с ниско качество, а компютрите с преклаено малко памет за съхранение на изображения. Но сега, когато видеокартите поддържащи high и true color вече не са екзотика, компютърът се превърна в най-добрия инструмент за работа с цветовете, достъпен не само за професионалните дизайнери, но и за огромната армия любители.

Разбира се, на цветовете не трябва да възлага ролята на основен носител на информация - уеб страницата задължително трябва да бъде четлива дори и в черно-бял вид (например, на екрана на преносим компютър или на страниците на книга). Преди да счита работата си за завършена, дизайнерът е длъжен да разбере как изглежда неговото творение в "grayscale". Но това не значи, че отношенията между цветовете, като нещо предварително моделирано, могат да се прехвърлят в един черно-бял дизайн. В края на краищата, скалата на сивите полутонове запазва един от трите съставни компонента на изходния цвят - неговата яркост и ако композицията е решена правилно цветово, тя ще изглежда прилично и в монохромен вариант.

Цветово възприятие

Човешкото възприятие по природа е синтетично, а не аналитично - ние разграждаме образа на съставящите го размери, форми, цветове и т.н. чак в мозъка, където сетивните ни органи предават цялостната картина, с всички изкривявания и неточности, предизвикани от взаимното влияние между елементите. Това се отнася в пълна сила и за цветовете - просто е удивително по колко различен начини се възприема цвета в зависимост от това, каква форма или площ заема и какви други цветове са около него.

При намаляване на заеманата от цвета площ се намалява количеството оттенъци, които може да различи окото и повечето цветове започват да изглеждат по-бледи и тъмни, особено ако яркостта и наситеността им и без това не са били на максимума. На практика това означава, че за по-малките елементи трябва да се избират по-ярки, "примитивни" цветове, а за да се покаже цялата красота на някой тъмен, слабонаситен оттенък е необходима достатъчна площ (например, фонът на цялата страница).

От друга страна, цветовете, достатъчно близки до черното или бялото, трудно могат да бъдат изразени ефективно дори и върху блюдо с рамерите на цяла маса. Ако цветът е прекалено тъмен, окото е склонно да го приема за черен, а незначителната му осветеност да приписва на несръчността на художника или на прекалената яркост на монитора. Същото се отнася и до бялото: почти всички примеси (като изключим единствено синьото - неслучайно при прането на бельо добавят и синка) предизвикват усещане за нечистота и за да ги накараме да звучат приятно, трябва да поддържаме и доразвиваме този оттенък в другите елементи.

Всеки два цвята поставени близко един до друг се възприемат в известна степен по-иначе, отколкото ако стоят самостоятелно. Художниците знаят, че предметите от материалния свят са свързани със сложни цветови отношения - те хвърлят един върху друг рефлекси (отразена светлина) и оцветени сенки. Макар и на подсъзнателно ниво, окото на всеки непрофесионал очаква подобни отношения и в композициите върху компютърния екран или хартия.

Ако съседните цветове имат що-годе еднаква яркост, то те са склонни да обменят наситеността и цвета си. Например, бледо-синьо до ярко-зелено придобива зеленикав оттенък и става малко по-"цветно"; зеленото пък в известна степен губи от яркостта си и също се предвижва в посока към синьото. Тези ефекти се проявяват най-отчетливо тогава, когато един цвят обкръжава от всички страни, "притиска" другия.

Непосредствено на границата между два цвята, обаче, започва да се проявява противоположната тенденция - цветовете като че ли се отблъскват един друг, стараят се да подчертаят своите различия; по-тъмният цвят в съседство с по-светъл придобива още по-тъмен "ръб", а светлият точно на самата граница изглежда по-ярък. Такова влияние на цветовете, водещо до усилване на контраста между тях, е толкова по-забележимо, когато съседните цветове значително се различават по яркостта си. На ярък бял фон почти всеки достатъчно тъмен цвят изглежда черен, а на тъмен или черен фон ярките и наситени цветове изглеждат особено сочни, а тъмните и ненанситени остават бледовати.

Съчетаване на цветовете

Съчетаване на цветовете - една от малкото области, в които почти всеки непрофесионалист има свое мнение. Няколко подобни рецепти са известни на всяка жена, която някога е вземала в ръце игла и конец; пък и мъжете обичат да разсъждават над това кое на кое отива или не, когато си избират вратовръзка или тапети. Професионалистите знаещи, че има доста повече от седем цвята и че два "зелени" цвята могат да се различават не по-малко отколкото черното и бялото, използват по-често вместо готови рецепти общи принципи, макар в много случаи и те да не могат да заместят с нищо интуицията и опита.

Особено важни за избора на цветове са противоположните и взаимодопълващи се принципи на единството и контраста. Принципът на единството изисква използваните цветове да са възможно най-близки един до друг, а в идеалния случай биха представлявали един и същи цвят. И това наистина работи - също както жените избират "шапка в тон с ръкавиците", така и дизайнерите обикновено ограничават спектъра във всяка отделна композиция до неголямо количество (обикновено не повече от 3-4) цвята, използвайки всеки цвят за няколо различни елемента (понякога близки в своите функции и оформление, а понякога и съвършено различни).

Освен това, понякога принципът на единството е ръководещ при избора на цветове, които задължително трябва да са различни. Много професионални страници са изпълнени в една цветова гама: например с тъмни оттенъци на основния цвят за фон, по-светли - за декоративните елементи (фиг.1). Обаче при търсенето на подобно цветово решение трябва да сме внимателни, защото прекалено близките, но не еднакви цветове могат да дразнят със своята ("дразнеща") близост, а отсъствието на достатъчно контраст ще направи композицията скучна. Затова, ако нямате достатъчно опит, по-добре се придържайте към проверените от времето рецепти: използвайте минимум цветове, но избирайте по възможност по-контрастни цветове.


Рисунка 1. Дизайнът на сайта www.ideo.com се основава върху контраста между сините рамки и разнообразните по цвят разпръснати навсякъде фотографии.

Как се избира добро съчетание от контрастни цветове? Какво въобще е контрастът между цветовете? Нека си спомним как се разлага един цвят на трите си съставни от системата HSV (англ. Hue-Saturation-Value, тон-наситеност-яркост), и да се опитаме да анализираме всяка от тях по отделно.

Ще започнем с тона. Първото правило се формулира лесно: не трябва да се използват цветове, които са прекалено близко един до друг в цветовия кръг - дисонансът (разногласието) между подобни цветове буквално бие по окото (както реже ухото дисонансът между ноти, които се различаватсамо по полутон). От друга страна, напълно противоположните цветове рядко образуват хармонични двойки - зелено и виолетово или червено с небесно синьо обикновенно изглеждат прекалено разнородни (относително добре се съчетават единствено жълто и синьо). В крайна сметка, най-добре се съчетват и контрастират цветове, разположени на разстояние около една четвърт от цветовия кръг един от друг.

С другите два параметра работата е по-проста. Разликите в наситеността или яркостта на два цвята веднага се забелязва, но все пак тя обикновено се възприема като нещо допълнително към разликата на основните тонове. Логично е затова, цветовете рязко да се различават по един от тези два параметра, засилвайки контраста между тоновете, а по втория - да се поддържат един друг, не позволявайки на цветовото решение да се разпадне (рис 2, а). Ако в нашия случай общите неща и различията между цветовете не са толкова важни, може да се използва противопоставяне на всички три компонента на цвета (рис 2, б) - увеличение на количеството противоположни аспекти не усилва, а намалява контраста, разединявайки елементите. И обратното, ако искате да подчертаете взаимодействието между отделните цветове, свързвайки ги с особено тесен контраст, можете да използвате два параметъра за обединение и един (най-добре това да бъде яркостта) за противопоставяне (рис 2, в).


a


б


в
Рисунка 2. Примери за цветови взаимоотношения: в а тонът и яркостта се различават, но наситеността е една и съща; в б и трите компонента на цвета си простивостоят; във в тонът и наситеността съвпадат, а цветовете се различават само по яркостта си.

Сега вече би трябвало да ви е ясно, защо бялото и черното се съчетават толкова добре с повечето други цветове. В тях отсъстват компонентите тон и наситеност, което позволява на съзнанието на зрителя да ги счита за по-ярка или по-тъмна модификация на този цвят, с който са един до друг в момента, прилагайки върху тях варианта с два общи и един противоположен параметъра (както е на рис 2, в) - т.е. почти оптимално съчетание между принципите за единство и контраст.

Не ви се губи време за търсене на необичайни, запомнящи се цветове? Простотата на вашите страници не изисква неординарни цветови решения? Тогава вижте какво съветва дизайнерът Роджър Блек: "The First Color is White, The Second Color is Black, The Third Color is Red." (Първият цвят е бялото. Вторият цвят е черното. Третият цвят е червеното.) И наистина всичко е толкова просто - най-яркият и най-тъмният цветове създават усещане за тясно единство и максимален контраст, а ако ви е нужен трети цвят - червеното се съчетава прекрасно и с бялото, и с черното.

Противоположност на този минималистичен подход се явява един особен, умишлено пъстър в цветовете стил, съединяващ максимален брой максимално ярки и наситени цветове. Известно е, че всевъзможните "папагалски" схеми са едни от любимите приьоми на дизайнерите-любители. От друга страна обаче този мотив може да бъде срещнат и в съвсем професионални композиции (рис. 3).


Рисунка 3. Преднамерената пъстрота в логото на фирмата Fractal Design се уравновесява от максималната цветова сдържаност в текстовата част на знака.

Тази теория може да ви бъде от помощ, но никога няма да замени вашия личен опит и експериментиране. Съществуват множество великолепни цветови съчетания, които трудно се вместват в описаната от нас схема. И обратното - много съставени по всички правила цветови двойки упорито не искат да работят заедно. Освен това, подборът на цветове зависи много от това, за какъв род елементи са предназначени тези цветове. Сега ще преминем към разглеждането на най-важният от тези специални случаи - цветовото координиране на текста и фона.

Tекст и фон

Елементите, без които не може нито една уеб страница - фон, текст, хипертекстови връзки - поставят интересна задача при хармонизирането на трите (или четирите, ако се смята и цвета на "посетените" връзки) цвята, заемащи разко различаващи се площи и изпълняващи различни функции в композицията. Има не малко страници с минимум графики и достатъчно обикновена композиция, които привличат и се запомнят изключително благодарение на цветовата гама (един добър пример е сайтът www.versaware.com, рис. 4).


Рисунка 4. Цветовото решение на сайта www.versaware.com включва три основни тона, образуващи строга йерархия по яркост/наситеност и, при цялата външна простота на сайта, създават впечатление за уравновесеност и храмония.

Основно изискване към двойката цветове за фона и текста е достатъчният контраст между тях, необходим за комфортното, незатормозяващо четене. Този контраст трябва да се изразява преди всичко в различната яркост на цветовете, понеже разлика само в тона или наситеността не позволява на съзнанието да различи текст и фон достатъчно автоматично, а при по-малки размери на шрифта, неговата тоналност и степен на наситеност въобще стават трудно различими (освен това, тези параметри на цвета се губят при показване върху черно-бели екрани).

Ето защо не е удивително, че тестовете на психолозите показват, че черен цвят на бял фон е съчетание, осигуряващо максимално удобство при продължително четене. Но ергономичността - макар и важен, но не единствен аспект на информационния дизайн, нерядко и се налага да отстъпва място на естетиката. Освен черно на бяло, съществуват безброй много цветови съчетания, осигуряващи добра четливост на текста и при избора на едно от тях трябва да се имат в предвид общият стил на дизайна на страницата, възможноста за съчетаване на тези цветове с друг и много други, чисто естетически съображения. Не трябва да се забравя също, че компютърният екран позволява да се манипулира далеч по-свободно с компонентите на цвета, правейки възможни съчетания, невъзпроизводими върху хартия.

Необичайните цветови решения в уеб страниците могат да се разделят на две големи группи: с тъмен текст на светъл фон и със светъл текст на тъмен фон. Вторите са значително по-популярни от първите (ако не се броят традиционните черно-бели страници, съставящи значителното мнозинство).

Нека първо видим, какво може да ни даде схема с тъмен текст на светъл фон. Ще оставим засега текста черен, ще вземем някой достатъчно наситен цвят (например, син), ще увеличим яркостта му (с други думи - ще го смесим с бяло) и ще запълним с него фона. Трудно е да се каже, че резултатът е приятен - очевидно е, че наситеността на фоновия цвят тук противоречи на неговата яркост. Подобен фон изглежда воднист, разреден, неинтересен. За какво ни е разредено мляко, ако можем да си пием чиста вода или чисто мляко?

Сега вече би трябвало да са ви ясни начините, чрез които може да се подобри тази цветова схема - трябва или да се направи фоновият цвят по-тъмен, така че неговата наситеност да излезе на преден план, или, обратното, да го оставим светъл, но да намалим наситеността му. За първия способ е нужно фоновият цвят сам по себе си да е достатъчно оригинален, така че тук няма място за чисто синьо - но затова пък може да се изпробва някой неочевиден промеждутъчен тон, примерно синьо-зелен или кафеникав.

Вторият начин - намаляването на наситеността - превръща фоновия цвят в светло-сиво с оттенък на пъвроначалния цвят. Това прави цвета по-малко очевиден и затова по-интересен, но сам по себе си той може би няма да бъде толкова убедителен. Подобен цвят изисква поддръжка от страна на текста и затова за текста е най-добре да се използва по-тъмна вариация на същия цвят.

Със същия успех бих могъл да кажа и обратното - тъмният цвят на текста изисква поддръжка от страна на фона, защото иначе тоналността му ще бъде трудноразличима. Както акордът звучи по-интересно отколкото отделната нота, така и тази двойка цветове изразява най-добре характера на техния общ тонален компонент. В същото време невисоката наситеност не позволява на цвета да излезе на преден план при възприемането (на страницата), осигурявайки комфортно четене.

Към подобен цветови ландшафт може да се прибави необходимата доза разнообразие чрез по-голяма наситеност или контрастност на цвета на връзките. Въобще, за едно ефективно разпознаване, връзките трябва да са с по-забележим цвят от този на основния текст, макар че подобна "забележимост" може да се постигне по различни начини - с контрастност на тона, увеличение на наситеността, увеличаване или намаляване на яркостта. Посетените (visited) връзки трябва да сигнализират за това, че са свършили работата си чрез по-малката наситеност или по-голямата близост с този на основния текст цвят. Приетата за стандартна в графичните браузъри цветова схема - синьо за "новите" линкове и виолетов за "старите" - постига нужния цвят без каквито и да било вариации в наситеноста, използвайки това, че виолетовият цвят обикновено създава усещане за нещо "размесено", "нечисто" и затова "незначително".


Рисунок 5. Още един пример за балансиран цветови дизайн - сайтът www.chess.ibm.com. Неговият светъл, но достатъчно наситен фон (#CCCC99) е изразителен сам по себе си и не изисква поддръжка и от страна на текста, за който е избран леко смекчен черен цвят (#333333). За връзките е използван контрастен, но смекчен син цвят (#0033FF). Останалите графични елементи поддържат тази разнообразна, но лишена от пъстрота гама.

Вторият тип цветови решения - със светъл текст на тъмен фон - на пръв поглед изглежда по-привлекателен. Доколкото буквите на текста заемат далеч по-малко площ в сравнение с фона, всеки достатъчно тъмен цвят на текста се слива с черното. Затова е по-изгодно за текста да се избира по-светъл и наситен тон, който изисква, разбира се, тъмен фон. Трябва да се има в предвид, че светлият текст на тъмен фон, макар и да отстъпва по комфорт при продължително четене на черния текст върху бял фон, при по-кратки текстове уморява по-малко окото, защото намалява общото количество светлина, получавано от монитора (за съжаление, мониторите на много потребители са настроени така, че белият фон на страницата почти моментално предизвиква болки в очите).

Печат на бял текст върху черно понякога се изпозва и във вестниците, но само на екрана тази цветова схема откри всички заложени в нея възможности. Всеки достатъчно тъмен цвят като фон звучи сдържано, благородно, даже тайнствено; всеки светъл цвят за текст става особено ярък и изразителен. Сега подобни цветови съчетания не се асоциират от никой с нещо мрачно и траурно така че свободата в творчеството не е ограничена от нищо.

Има, обаче, едно техническо ограничение. Фоновият цвят, който иска да изглежда именно като цвят, а не като безцветно черно, е длъжен да бъде достатъчно наситен - "нощем всички котки са сиви", защото в тъмния цвят слабата примес с основния тон се забелязва доста по-трудно, независимо от голямата площ, която заема този цвят. Наситеността на цвета на текста може да поддържа наситеността на фона, но може и да е в контраст с нея.

На второ място по популярност след чисто черният фон са наситените хладни цветове - например, кадифено-синят фон на сайта www.verso.com (рис. 6). За текста пък са популярни оттенъците на светлите цветове, особено жълтото, призвано да символизира златото. Необикновенният цветови колорит на сайта www.bdaweb.com (рис. 7) се обяснява с пълния отказ от цвета като такъв - тъмно-сивите букви на черен фон са привлекателни със своята сдържаност, макар че щяха да изглеждат мрачно, ако не беше ярко-оранжевият цвят на логото и връзките.



Рисунка 6. Текстът и фонът са контрастни по тон и яркост (www.verso.com)



Рисунок 7. Отказът от компонента тон в цвета на текста и фона се компенсира от наситеността на цвета на връзките и логото (www.bdaweb.com).

Заключение

Цветът в уеб дизайна е обширна, многопланова и дори парадоксална тема. Навлизащият тепърва в Интернет "хартиен" дизайнер още преди да се е насладил на свободата и широкия избор при работа с компютърните цветове, се сблъсква с някои ограничения. Но всеки талантлив уеб дизайнер се откроява с един особен, отличителен "цветови стил", проявяващ се не само в привързаността му към определени тонове, но и в общото му отношение към цветовете, индивидуалния маниер на сблъскване на контрастните и хармонизирането на сходните цветове, с ловкоста при придаване на цветови нюанси. Ето защо е толкова важно да се отделя толкова внимание на цветовете в една професионална композиция, да се анализират силните и слабите страни на цветовите решения във вашите уеб страници.