4 Речі і 2 онлайн-сервісу підбору кольорової гами в веб-дизайні, школа веб-дизайну алексея

У цій статті я дам прості способи підбору кольорової гами, якими користуюся сам при малюванні сайтів.

Ми ці способи розглядати НЕ будемо, тому що вони дуже складні для початківця веб-дизайнера, та й прізнатся чесно - я скільки не намагався так і не зміг за допомогою них підібрати нормальну колірну гамму, також я не бачив щоб хтось із практиків і профі в веб-дизайні їх використовував. Ну а то які кольори вибирають за допомогою перерахованих вище сервісів новачки просто диву даєшся де вони беруть кольору від яких «ріже очі».

Перед тим як приступати до огляду способів і сервісів, давайте пройдемося по критеріям на основі яких вам варто підбирати кольори. Відразу скажу що це базові критерії для початківця і в різних типах і стилях сайтів ці критерії можуть сильно відрізнятися. Проте перші 10-20 сайтів краще намалювати дотримуючись цих правил. У будь-якому випадку з ними вийде краще, ніж без них. Отже ...

• Кількість квітів: 2-3 шт.
• Колір тексту: білий або чорний (виняток заголовки)
• Контрастні кольори фону і елементів сайту (якщо у вас фон темний, то колір тексту або елемента сайту поверх фону повинен бути світлий і навпаки)

Які емоції передають кольору і які асоціації викликають?
Що стосується емоцій і асоціацій, які викликають кольору - то особисто я особливо не дотримуюся тут ніяких правил з тієї причини, що всі люди насправді трохи по різному розрізняють кольори і одні й ті ж кольори викликають у людей різні почуття. Той же червоний, наприклад, когось може дратувати і напружувати, а кого-то надихати і заряджати.

Більш того, будь-яка людина в різному віці буде одні й ті ж кольори швидше сприймати по різному: в силу ослаблі зору, втоми і т.д. Плюс до цього можна додати ще чинники того де ви живете: країну і місто і національність (в різних країнах або краях / республіках кольору можуть означати протилежні речі, десь чорний - колір трауру, а десь навпаки: колір свята).

Плюс сприйняття кольору кожної людини швидше за все більше залежить не від підвалин в країні, а від дитячих вражень або травм. Наприклад, якщо вас в дитинстві сильно налякали який-небудь страшної лялькою зеленого кольору, то скоріш за все все життя ви неусвідомлено буде не любити зелений колір. І навпаки - якщо ви все дитинство провели в селі і грали з дітьми, то зелений у вас буде викликати тільки позитивні емоції.

Вкрай не рекомендую підбирати кольори на основі своїх почуттів або почуттів замовника. Краще подивіться хто цільова аудиторія - це дасть вам більше розуміння які краще кольору підібрати.

Як цільова аудиторія сайту може вплинути на підбір колірної гами?
Все дуже просто. Давай розглянемо приклад і спробуємо підібрати кольорові гами для двох сайтів:

• Ігровий портал (аудиторія: школярі і студенти) - соответсвенно у них все добре із зором тому можна використовувати 3-7 квітів і дуже яскраві відтінки.
• Інформаційний сайт по вирощуванню морквини (аудиторія: пенсіонери) - із зором майже у всіх буду проблеми, тому квітів 1-2 максимум, фон обов'язково білий або світло-сірий і ніяких яскравих відтінків.

Як сфера діяльності сайту впливає на підбір колірної гами?
Давайте для прикладу візьмемо два сайти:

• Сайт бізнес-тематики - тут все повинно бути дуже строго і просто. Якщо ви подивіться топові сайти в цій ніші, то побачите, що основні кольори білий і чорний, іноді коричневий. (Як власне і в реальному житті: костюми, машини, аксесуари)
• Жіночий форум - зазвичай у людей які там сидять «витає» настрій і часто там йде обговорення не речей і предметів, а емоцій, підтримка один одного і т.п. Тому тут краще підібрати легкі постільні тони рожевого або блакитного кольору.

Як бачите підібрати з нуля колірну гамму не так-то просто, так як варто враховувати купу факторів. Але насправді є способи набагато простіші, які я знайшов за час роботи веб-дизайнером.

Отже способи підбору кольорової гами на сайті:
1) Підбір квітів на основі природи (небо, земля, рослини, тварини і т.д.) там все гармонійно і якщо ви візьмете все що створено Богом, то зможете вибрати на основі цього гармонійну колірну гаму. Наприклад давайте візьмемо дерево.

2) На основі шапки сайту або фото на першому екрані.
Цей спосіб оптимально підходить в тих випадках, коли замовник вже дає вам готове фото або шапку сайту. Але він працює не завжди.
Суть його полягає в тому що ви визначається 2-3 переважаючих кольору в шапці або на фото і робите основний гамою сайту:

3) Підбір кольорової гами на основі логотипу.
Часто якщо ви будете працювати з більш-менш великій компанії то у неї буде логотип. І найпростіше скористатися вже існуючими на лого квітами, тому як найімовірніше вас все одно про це попросять :) Єдиний виняток - не варто використовувати даний спосіб, якщо логотип складається з усіх кольорів веселки, інакше у вас вийде не сайт, а миготливий банер.

4) Найкращий спосіб, що не придумувати а скопіювати вже оптимальну колірну гаму:
Зайдіть на themeforest або 365psd і просто візьміть найпопулярніші шаблони, з ймовірність в 80-90% там буде гармонійна колірну гамму.
Далі вам просто потрібно зберегти картинку, відкрити в фотошопі і за допомогою піпетки визначити основні кольори.