2.1 Психологія кольорів
Незалежно від того, чи знешкоджуєте тикаючу бомбу затримки чи намагаєтесь створити шикарний веб-сайт, якщо ви виберете неправильні кольори, ви загубитесь. Ну, вибір неправильного кольору для веб-сайту клієнта не фатальний, але це може скоротити вашу нову кар’єру веб-дизайнера. Вибір кольорів непростий. Ви повинні враховувати естетичні аспекти, а також ідентичність компанії або простоту використання. А щоб ускладнити ситуацію, екрани можуть відображати понад 16 мільйонів кольорів. Зважаючи на це, існує нескінченна кількість жахливих поєднань кольорів, які просто чекають на використання. На щастя, вам не потрібно бути млявою книгою зразків кольорів, щоб знаходити гарні поєднання кольорів. Доступно безліч знань, від делікатних (як я їх називаю) психологічних вказівок до випробуваних теорій кольорів, які допоможуть зробити правильний вибір кольорів. колір
Колірні схеми 57 2.6.1 Монохромна кольорова схема Коли ми говорили про значення кольорів вище, ми також розглядали освітлення та затемнення. Монохромна колірна схема містить один базовий колір і будь-яку кількість відтінків цього кольору. Тут, на малюнку 2.14, нашу королівську мавпу можна побачити в монохромній кольоровій гамі на основі фіолетового кольору. Рис. 2.14 Монохромна мавпа Приклади монохромних колірних схем Вступна сторінка Mint, Інтернет-програми Шона Інмана, яка може використовуватися для відстеження статистики доступу до веб-сайтів, є корисною та елегантною. 3 Як на веб-сайті, так і в самому додатку використовується однакова, переважно монохромна кольорова схема з декількома відтінками зеленого, як ви можете бачити на малюнку 2.15. Рис. 2.15 Веб-сайт «Монетний двір», монохромний зелений Якщо ваш фірмовий стиль та ідентифікація починаються з кольору, монохромна колірна схема завжди є очевидним варіантом. Люди цієї консалтингової та дизайнерської компанії Blue Flavor підхопили цю ідею. 4 Див. Рис. 2.16 для цього. Замість того, щоб шукати кольори, що відповідають логотипу 3 http://www.haveamint.com/ 4 http://www.blueflavor.com
58 відповідають кольору, вони включили блакитний колір у свою торгову марку, надаючи їм однорідну та просту колірну гамму. Рис. 2.16. Блакитна колірна гамма Blue Flavor, що відповідає торговій марці "Надмірний бантер", - це приватний веб-сайт дизайнера Дана Рубіна. 5 Коли він востаннє переробив дизайн (або "перезапуск", як він любить говорити), Ден створив тему дизайну, яку він назвав Orangina, в якій оранжевий колір використовується дуже щедро. Як і попередні два приклади монохромних колірних схем, цей дизайн справді привертає увагу. Ви можете бачити це на малюнку 2.17. Ми настільки звикли до різнокольорових дизайнів в Інтернеті, що дизайн, який має лише один колір, нас справді захоплює відразу, особливо якщо цей колір яскраво-оранжевий. Рис. 2.17 Веб-сайт «Надмірний Бантер» - тема оформлення помаранчевим кольором 5 http://www.superfluousbanter.org/
60 кольорових циркових мавп Hoity-Toity Рис. 2.19 Мавпа в аналоговій кольоровій схемі Приклади аналогових кольорових схем Я вже згадував, що помаранчевий дуже корисний для реклами їжі, і каштановий або бордовий добре поєднуються з ним. Веб-сайт Regine's Patisserie 7 використовує кольорові психологічні аспекти цих двох кольорів. Сам цей веб-сайт виглядає ніжним кондитерським виробом і випромінює аромат і тепло, як ви можете переконатися на малюнку 2.20. Якщо кольори не стимулюють ваш апетит відразу, то фотографії роблять це. Рис. 2.20 Regine s Patisserie mmm Веб-сайт Blinksale 8, який ви можете побачити на рис. 2.21, є Інтернет-додатком, за допомогою якого Ви можете створювати, керувати та надсилати рахунки в Інтернеті, відформатовані за допомогою CSS або в текстовому форматі. Це також чудовий приклад впливу креативної аналогової колірної схеми на діловий веб-сайт. Він усуває заздалегідь уявлені уявлення про те, як повинні виглядати бізнес-сайти, і перекидає їх усіх у прохолодне море кольорів, починаючи від синьо-зеленого і закінчуючи жовтим. 7 http://www.regines.net.au 8 http://www.blinksale.com
Кольорові схеми 61 Рис. 2.21 Blinksale - крутий діловий веб-сайт Хоча кольори веб-сайту urlgreyhot 9 Майкла Анджелеса змінюються в усіх областях веб-сайту, переважна колірна гамма домашньої сторінки однакова. Цю сторінку ви можете побачити на малюнку 2.22. Рис. 2.22 Початкова сторінка urlgreyhot аналогового та земного кольору ПРИМІТКА Зміна колірних схем Багато веб-сайтів використовують різні кольорові схеми для різних областей вмісту. Такий підхід може підкреслити зміст і надати йому характер, але також може призвести до проблем з ідентичністю. Використовуючи різні кольорові схеми на одному веб-сайті, подбайте про те, щоб логотип, меню та загальний макет веб-сайту були узгодженими, щоб уникнути плутанини. 9 http://urlgreyhot.com/
62 Колір 2.6.3 Додаткова схема кольорів Додаткові схеми кольорів, такі як наведені на малюнку 2.23, містять кольори, які протилежні один одному на кольоровому колі, такі як червоний та зелений, жовтий та фіолетовий або оранжевий та синій. Ці кольори називаються доповнюючими один одного або доповнюючими кольорами. Рис. 2.23 Примхлива допоміжна мавпа Приклади додаткових кольорових схем Кольори в Університеті Флориди 10, де вчилася моя дружина, є чудовою відправною точкою для додаткової колірної схеми. Деякі люди можуть бути збентежені цим різким контрастом додаткової колірної схеми, як показано на малюнку 2.24. Але якщо ці кольори представляють компанію чи організацію, для якої ви проектуєте, ви завжди маєте рацію. Команда, яка займалася редизайном цього веб-сайту, непогано поєднала цей незвичайний вибір кольорів із красивим макетом та HTML-кодом, що відповідає стандартам. Рис.2.24 Домашня сторінка Університету Флориди 10 http://www.ufl.edu/
Кольорові схеми 63 Faith Incubators 11 - це організація, яка поставила перед собою завдання створити, протестувати та оптимізувати освітній зміст для закріплення християнської віри. Фіолетовий колір вашого логотипу, який ви бачите на малюнку 2.25, використовується на веб-сайті і компенсується використанням нейтрального жовтого кольору. Рис. 2.25 Початкова сторінка «Вірні інкубатори» Якщо вас звати Роб Гудлатт, як ви можете помилитися з кольоровою палітрою кавово-коричневих та земляних тонів? Роб є дизайнером і студентом університету Дьюка, і, схоже, він глибоко розуміє принципи графічного дизайну. Вибір зеленого кольору для бічної панелі та інші акценти веб-сайту 12, показані на малюнку 2.26, не очевидні, але вони перетворюють просту аналогову тему в дизайн із вишуканою доповнюючою палітрою. Рис.2.26 Кавові коричневі та зелені відтінки на веб-сайті Роба Гудлатта 11 http://www.faithink.com/ 12 http://www.robgoodlatte.com/