() translation by (you can also view the original English article)
До сих пір чітко пам'ятаю одне зі своїх перших художніх занять, коли мені, дитині з величезним бажанням малювати, подарували набір яскравих фарб. Я пам'ятаю, яке захоплення у мене вперше викликало змішування базових квітів у другорядні, і як я вважав, що якщо два кольори можуть створити гарний новий колір, значить, змішування всіх кольорів разом призведе до чогось прекрасного! І як мене розчарувало усвідомлення, що будь-які спроби зробити це незмінно приводили до дивним кольором, який можна було назвати тільки одним словом: "БРУД".
Через роки, будучи неопереним веб-дизайнером, я продовжував експериментувати з цим процесом. У міру навчання я потрапив в неминучу пастку, використовуючи надто багато квітів, або змішуючи їх неправильно, і в результаті у мене знову виходив "БРУД".
Я вирішив, що навчуся створювати колірні схеми для вебу, і виявив масу приголомшливою інформації з теорії кольору. Я сітал про тонах, відтінках, насиченості і яскравості, а також про аналогових, монохромних кольорах, про тріади, про комплементарних і складових колірних схемах.
Однак, без практичної системи того, що робити з усією цією інформацією, я виявив, що всі ці знання ніяк не наблизили мене до грамотним дизайнам сайтів, коли мова заходила про колір. Тільки після того, як я став експериментувати з колірними схемами методом проб і помилок, все правила теорії кольору, які я дізнався раніше, стали зрозумілими.
В процесі цього я витягнув для себе "базові принципи" по колірних схем в інтернеті, і шкода, що я не знав про них з самого початку. Для початку, немає необхідності в детальному вивченні теорії кольору, щоб починати її застосовувати. Найчастіше вам спочатку потрібно приступити до практики, щось на зразок "розфарбовування за номерами".
У цій статті я поділюся шістьма вірними порадами, яким ви можете піти й домогтися ефективного використання кольору в веб-дизайні, це стосується основ. Це не суворі правила, так як за свою кар'єру ви створите масу колірних схем, які можуть значно відрізнятися в застосуванні. Швидше за все, вони стануть для вас відправною точкою, своєрідним гідом про те, як вижити, роблячи перші кроки в веб-дизайні і не виявитися затягнутим в "БРУД".
1. Колірна схема - це палітра, а не картина
Один з найбільш фундаментальних принципів веб-дизайну: скільки часу б ви не витратили на створення приголомшливого дизайну, його головне призначення - відтінити справжню зірку - контент. Ваша колірна схема не повинна бути більше "гучного", ніж представляється вами контент. Дизайн виходить на другий план, виводячи контент сайту на перший план.
Найпростіший процес в веб-дизайні - створити окремий дизайн в прикладної програми типу Photoshop або Sketch. Якщо у вас немає зразкового контенту на місці, легко виявити, що у вас є приголомшливий дизайн, і клієнтові сподобається макет, але в реальному житті він буде занадто відволікати відвідувачів сайту. Насправді процес веб-дизайну дуже щільно пов'язаний з контентом, при цьому багато високоякісні дизайни здаються порожніми, без особливого контенту на сторінці.
Гарна ідея почати викладати контент - заповнювач, щось на зразок зразка, який з'явиться на сайті. Зробити це або в програмі або відразу написати кодом, і розташувати дизайни навколо нього. Це особливо відноситься до фото або зображенням особливого стилю, які ви будете використовувати, тому подбайте про те, щоб ваш дизайн гармоніював з ними. Уявіть, що контент сайту - це унікальна особистість, для якої ви шиєте ідеально сидить костюм.
2. Для основи візьміть просту градацію сірого
Для основного фону і тексту можна вибрати необмежену кількість кольорових комбінацій. Однак моєю рекомендацією буде освоїти найпростіші основи, і тому вам допоможуть білий або світло-сірий на тлі з темно-сірим текстом.
На яку підбірку з популярних сайтів, шаблонів або тим ви б не подивилися, напевно у більшості з них буде саме цей основний набір з темно-сірого кольору на білому або світло-сірому тлі, і тому є вагома причина. З такою комбінацією ви можете гарантувати легкість для читання відвідувачам сайту, і виведете текст і зображення на перший план.
Розміщення зразкового контенту-заповнювач допоможе створити базову розкладку в відтінках сірого, наприклад:
Загалом, вам варто уникати чисто чорного кольору для тексту, так як темно-сірий легше читається. Зручний діапазон знаходиться десь в межах #333333 і #666666.
Для фонових квітів чистий білий #FFFFFF - найнадійніший вибір для фонів під будь-який текст. Для інших елементів фону ви можете вибирати будь-який в діапазоні #FFFFFF - #CCCCCC.
Нагадаю, це не жорсткі правила підбору кольорів, яким ви повинні слідувати, а лише орієнтири, які легко і безпечно використовувати.
3. Вибирайте тільки один колір для виділення
Найчастіше колірні схеми не спрацьовують, коли ми намагаємося змішати кілька різних кольорів. Чим більше кольорів ви використовуєте, тим складніше контролювати їх. Тому для початку, додайте до своїх відтінкам сірого тільки одного кольору для виділення таких елементів, як заголовки, посилання, меню, кнопки, і інше. Цим кольором може стати синій, зелений, червоний, або будь-який інший.
Вибирайте цей колір, створивши рамку навколо бази, щоб вам було видно, як він буде взаємодіяти з усіма іншими елементами. Потім відкрийте панель вибору кольору і клацніть в центрі верхньої правої чверті колірної карти.
Наведіть шкалу вниз і вгору, щоб вибрати колір, який найбільше підійде вашому дизайну.
На цей момент ви маєте справу з трьома базовими кольорами: фон, текст, і акцент. Ви можете і повинні використовувати більше одного кольору в майбутньому, але поставтеся до цього як до жонглювання. Для початку ви жонгліруете тільки трьома предметами до тих пір, поки у вас не з'явиться впевненість, і поступово ви можете додавати нові предмети.
Ви тільки що дізналися:
Ви тільки що навчилися вибирати тон. Простіше кажучи, тон - це основний колір. При пересуванні слайдера вгору і вниз, ви побачите що в панелі вибору кольору буде змінюватися значення "Н".
"Н" означає тон (hue), і як тільки ви знайдете відповідний колір, номер, що відображається у вікні будьте вашим тоном.
4. Коли не знаєте, що вибрати, вибирайте синій
Якщо ви сумніваєтеся у виборі колірного акценту, вибирайте синій. Правда. Синій - самий багатофункціональний колір для роботи, і він підійде до широкого ряду сайтів. Кольори на зразок фіолетового або жовтого можуть виглядати красиво, але вони можуть все зіпсувати, якщо їх неправильно використовувати.
З іншого боку, ви можете зробити що завгодно з синім кольором, і в якості колірного акценту не помилитеся. Якщо не впевнені, з чого починати роботу з кольором, або який колір вибрати для проекту, почніть з синього. Відтінок синього може відрізнятися, як в сторону темно-синього (235), так в сторону бірюзового (190) - в будь-якому випадку ви не помилитеся.
У моєму прикладі обраний відтінок 205. Коли ви виберете колірної акцент, включите його в свій дизайн і подивіться, чи підійде він вам. Якщо ви використовуєте колір акценту на кнопках або в будь-який текстовий області, змініть також і колір тексту. У моєму прикладі я змінив текст в виділених областях на білий.
5. Додайте відтінки колірного акценту
Як тільки ви визначилися з кольоровим акцентом, залиште слайдер там, де він був. Вам знадобляться додаткові кольору в дизайні, але вони все стануть варіаціями основного кольору, який ви вже вибрали. Це спростить процес.
Щоб створити варіації кольору, перетягуйте область колірної карти.
Скористайтеся цим видом колірних варіацій для:
Ефекти при наведенні курсору
Межі
Більш м'який текст поверх колірного акценту
Градієнти
Ефекти світла і тіні
6. Тримайтеся подалі від верхнього правого кута
Верхній правий кут колірної карти - місцевість з забійними квітами. Кольори в правому верхньому куті схожі на машини з Формули 1: вони надзвичайно привабливі і багато чого вміють, але для їх використання потрібна велика майстерність. Без великого досвіду можуть мати місце нещасні випадки, тому краще відточити своє вміння на більш приглушених тонах.
Тому в третій частині цієї статті я попросив вас клікнути по колірній карті в центрі правого верхнього квадрата, перш, ніж вибирати колірний акцент, щоб упевнитися, що ви вибрали досить приглушений колір.
Для прикладу подивіться, що станеться, коли я злегка зміню тон свого дизайну, навіть не торкаючись до колірній карті.
Все одно виглядає вражаюче, правда? Однак, якщо я перетягну слайдер на кольоровій карті в самий верх правого кута, раптово зображення виглядає не так добре.
Очі ріже! Якщо ви хочете подбати про очі відвідувачів вашого сайту, дотримуйтесь загальними правилами тонування речей, залишаючись поза межами правого верхнього кута на колірній карті.
Ви тільки що дізналися:
У попередніх двох розділах ви навчилися використовувати кілька різних аспектів колірної теорії. Ви навчилися працювати з:
Насиченість і яскравість.
Коли ви переміщаєте слайдер по колірній карті, ви побачите, що змінюються параметри "S" і "B", вони означають "насиченість" та "яскравість" відповідно. Ви також побачите, що номер тону залишається колишнім. Отже, ви працюєте над колірними варіаціями, змінюючи насиченість і яскравість початкового тону.
Насиченість і відтінки
Насиченість - наскільки яскраво виражений колір. Наприклад: "Моя сорочка просякла розлитим червоним вином". На типовою панелі вибору кольорів насиченість визначається тим, як багато білого змішано з базовим тоном. Чим менше білого, тим більше насиченість.
Коли ви перетягуєте курсор вправо по колірній карті, ви знижуєте кількість білого, а значить, підвищуєте насиченість, і значення в графі "S" підвищується. Коли ви перетягуєте курсор вліво, ближче до білого кутку, ви знижуєте насиченість, і значення в графі "S" знижується.
Це змішання білого з оригінальним тоном також називається відтінком. Еот термін виник з живопису, коли біла фарба змішувалася з кольоровою фарбою.
Яскравість і тіні
Яскравість ставиться до того, скільки чорного змішано з кольором. Чим менше чорного, тим більше яскравість.
Коли ви перетягуєте слайдер вгору по карті і зменшуєте кількість чорного, ви підвищуєте яскравість, і величина в графі "B" підвищується. Коли ви перетягуєте його вниз, збільшується кількість чорного, і величина "B" підвищується.
Змішування чорного з оригінальним тоном, також називається створенням "тіні". Цей термін також прийшов з змішування фарб, коли чорний змішувався з пігментом.
Відтінки
Коли ви змішуєте сірий з кольором, ви створюєте відтінок. Коли ви зміщується з верхнього правого кута, як ви це зробили раніше, ви знижуєте і насиченість, і яскравість, що додає і білий і чорний (то, є, сірий), і це створює відтінок. Отже, в будь-який час, коли і насиченість і яскравість нижче 100%, у вас з'являється відтінок.
Знову-таки, термін виник з змішування фарби, де спочатку змішується сірий, а потім він змішується з кольоровим пігментом. Саме звідси і прийшов вислів "приглушити тон". Здорово, правда?
Монохроматичні колірні схеми
"Монохроматичний" колірний ряд - коли ви берете базовий колір, і доповнюєте його відтінками, тінями і тонами. Ви тільки що навчилися, що означають всі ці терміни на практиці. Отже, вибравши один колір акценту і створивши його варіації, ви створили монохроматичності колірну схему.
Що далі?
Продовжуйте практикуватися з монохроматичними колірними схемами з відтінками сірого до тих пір, поки не відчуєте себе впевнено. Спробуйте створити їх з різними тонами як акцентів, експериментуйте і подивіться, як змінюється насиченість і яскравість в настройках, якими ви користуєтеся.
Коли ви почнете відчувати себе впевнено, переходите до наступного кольору. Раджу спробувати помаранчевий і синій спочатку, так як з цим дуетом простіше працювати. Потім спробуйте зелений і синій, по-моєму, це друга за складністю комбінація. Обидва поєднання популярні серед клієнтів і покупців.
Найкраще, що ви можете зробити - поглибити своє розуміння колірних схем в інтернеті, встановивши додаток за вибором квітів на кшталт Colorzilla, і користуватися ним, щоб перевіряти, як це роблять досвідчені дизайнери. Коли ви переглядаєте сайти в інтернеті і бачите кольорову схему, яка привабливо виглядає, зніміть зразки кольорів і подивіться, які саме номери колірних тонів використовуються на ній. Для кожного тону з зразка, подивіться, яка там насиченість, і яскравість. Також приділяйте увагу, які кольори краще працюють в комбінації з іншими.
Якщо ви сумніваєтеся, то завжди можете повернутися до "безпечним" радам, і вбережете себе від "БРУДУ" в зображеннях.
