Кольори для дизайну сайту

На сьогоднішній день існує дуже велика кількість різних моніторів, які відображають більше 16 мільйонів квітів. Вам слід подумати про всі комбінаціях, які ви можете створити, використовуючи різні відтінки і тони. Їх кількість може бути трохи надмірною. Для цього дизайнери зазвичай використовують теорію кольору, за допомогою якої можна ефективно використовувати всі кольори в нашому дизайні.

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

Кольорове кільце

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

Стандартне колірне кільце, яке використовується нами в повсякденному житті, ґрунтується лише на трьох основних кольорах:

Потім, якщо ми змішаємо ці кольори, то отримаємо три другорядних кольору:

На наступному етапі змішування основних кольорів з вторинними ми можемо отримати третинні кольори:

Використовуючи колірне кільце можемо зрозуміти принципи з'єднання різних груп квітів між собою. Кольори в ньому розташовуються по колу, що приховує велику кількість різних способів змішування. Це кільце допоможе нам сформувати прекрасну колірну схему і простим чином розділити пари квітів:

Температурні групи квітів

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

теплі кольори

Теплі кольори зазвичай у нас асоціюються з чимось світлим і приємним. Вони дуже енергійні і зазвичай передають тепло. Ці кольори включає в себе всі відтінки від червоного до жовтого.

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

холодний колір

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

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

Основні три значення

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

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

Давайте розглянемо ці три значення і спробуємо зрозуміти, що вони представляють собою.

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

насиченість

Насиченість - це яскравість тону. Чим менше буде яскравість вашого тону, тим більше він буде мати сірості. Тому краще використовувати кольори сильно насичені. Це дозволяє кольором бути чистішим і яскравим.

В даному випадку назва цього значення говорить сама про себе. Як ви вже напевно зрозуміли, це значення говорить про яскравість тону. Наприклад, якщо додати білий колір в чистий тон, то це дозволить збільшити його светосилу, а якщо додати чорний колір, то навпаки світлосила зменшиться.

Як створити ефективну колірну палітру

Процес розробки колірних схем для інтернет-проектів буде не таким складним процесом, як можна уявити. Головне - дотримуватися одного основного правила: простоти. Якщо використовувати багато різних квітів, то можна отримати досить дивний і викликає багато різних емоцій дизайн.

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

Більшість дизайнерів вважають найоптимальнішою палітрою ту, в якій використовується 3-4 кольори. Їх прийнято називати основною, вторинний, який акцентував і колір заднього фону.

Основний колір

Це колір, яка була обрана в якості основного, і він буде визначати марку, а також посприяє залученню уваги відвідувачів. Досить часто його використовують для заголовків, кнопок і навігації.

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

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

вторинний колір

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

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

акцентував колір

Цей колір є одним з найважливіших в схемі. Він називається акцентують чи виділяє, тому що це і є його головна задача. За допомогою цього кольору ви зможете розбити ваш шаблон кольорової палітри і привернути увагу відвідувачів сайту. Не варто їм зловживати: застосовуйте його тільки тоді, коли це дійсно необхідно. Таким чином ви досягнете хороших результатів.

Слід також пам'ятати, що який акцентував колір повинен обов'язково поєднуватися з вашим основним і другорядним кольором, тому як він буде виділятися серед них. Підберіть саме той колір, який буде мати найсильніший контраст з основним кольором.

Колір заднього фону

Цей колір, який ви буде використовувати як заднього фону, найчастіше він заповнює великі обсяги вільного простору. Обов'язково переконайтеся в тому, що цей колір буде відмінно взаємодіяти з основним, вторинним і акцентують квітами.

Колір заднього фону може бути будь-яким, навіть просто білим. До речі, саме білий найчастіше використовується дизайнерами. Це дає можливість легко підтримувати існуючу кольорову схему, але він обов'язково повинен добре поєднуватися з усіма іншими присутніми квітами в вашому дизайні.

Також непоганим вибором для вас може стати теплий колір. Тоді ви можете з легкістю як колір заднього фону вибрати від білого до жовтувато-коричневого кольору. Ще можна розглянути варіант холодно кольору. У цьому випадку непогано буде виглядати сірувато-синій.

Звичайно ж, не обов'язково використовувати саме ці кольори, адже в своєму виборі ви можете бути досить гнучкими.

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

Приклади вдалих колірних схем

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

Цей сайт має досить ясну кольорову схему, в якій присутній білий колір на задньому тлі. Основним кольором цього сайту є темно-сірий. Його найчастіше дизайнери використовують в своїй друкарні, а іноді навіть застосовують для заднього фону і для поділу деяких сторінок сайту.

Синій колір застосували тут для посилань і різних другорядних кнопок. Акцентують кольором для цього сайту вибрали зелений колір і використовують його тільки на кнопках, які закликають до певних дій або ж ведуть на сторінку реєстрації.

Даний веб-проект виглядає досить одноцветно. Кольори, які використовуються веб-дизайнерами в цьому проекті, знаходяться на одній стороні колірного кільця. Зверніть свою увагу, яке застосування отримали різні кольори заднього фону. За допомогою них фахівці відокремили секції основного тексту від бічній панелі.

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

Веб-сайт має досить строкату колірну палітру. Чудовий колірний контраст тут створюють жовтий і чорний кольори.

Дизайн цього сайту виконаний дуже незвично. Будівель фон основного тексту сайту має білий текст, що сприяє поліпшенню Новомосковскемості і додає красу зовнішнім виглядом.

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

Веб-дизайнери цього проекту вирішили використовувати синій колір в якості основного. Він застосовується для всього тексту і великих блоків заднього фону. Цей вибір дав можливість шаблоном знайти холодний і спокійний вигляд.

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

Міркуємо про колір

Дуже важко бути оригінальним і креативним, коли справа доходить до вибору потрібного кольору. Існує досить багато різних місць, відвідавши які можна надихнутися і приступити до створення колірних схем. Давайте розглянемо декілька прикладів популярних ресурсів, де можна отримати натхнення.

Colourlovers.com

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

Цей сервіс дозволить вам зануритися в світ справжнього мистецтва. Ви зможете насолодитися природними комбінаціями кольорів і, вивчивши всі це, знайти відмінні комбінації кольорів.

Color.adobe.com

Google Images

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