Дизайн сайту. Який колір вибрати

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

Занадто багато чи недостатньо відповідні кольори можуть дуже погано відбитися на привабливості сторінки.

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

Приклад невідповідного кольору.

Сайт Starbuck відчуває великі проблеми з колірною схемою, його сірий фон інертний і виглядає дуже утилітарно. Бренд намагається зв’язати себе зі стилем життя, але веб сайт повністю позбавлений будь-якого характеру.

Використовуйте достатньо кольорів.

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

Залишайте білий фон

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

Приклад

Подивіться на //www.pixelgraphix.de/ основний текст розташований в дуже світлих сірих блоках. Зауважте, що Ваш погляд не хоче зупинятися в сірих блоках, він вважає за краще білий.

Оригінал

Головна сторінка Ірландського провайдера HEAnet використовує білий фон за межами блоку контента. Це призводить до того, що дуже важко сфокусуватися, на тексті.

Використовуйте яскраві кольори щоб привернути увагу

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

www.collegeclub.com використовує занадто багато інтенсивних контрастів і кольорів, у результаті очей ігнорує їх.

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

www.guardian.co.uk теж використовує занадто багато елементів, що притягують погляд. Велика кількість яскравих червоних областей приводить користувача в замішання, а кольорові елементи відволікають погляд від відносно тьмяного контенту.

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

Але колірна схема абсолютно невдала.

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

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

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

Уникайте сусідства фотографій та інтенсивних кольорів.

Сторінка Harrah’sCasino використовує пурпурний і фотомонтаж, але інтенсивний пурпурний не поєднується з тонкими кольорами фотографій, роблячи їх тьмяними і брудними.

Не використовуйте занадто багато різних кольорів.

Занадто велика кількість кольорів може погіршувати сприйняття сторінки.

Деякі кольори дуже природно поєднуються, але деякі в поєднанні можуть створювати дуже неприємне враження.

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

Пофарбовані області дуже привабливі, якщо розташовані поруч з менш насиченими або сірими.

Колірні схеми, натхненні природою

Люк Вроблескі опублікував в Boxes&Arrows статтю, в якій звернув увагу на те, що багато корпоративних сайтів використовують схожі колірні схеми.

HP, IBM, Dell і Microsoft

Схожі як близнюки.

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

Люк пропонує дуже цікавий і зручний спосіб підбору колірної схеми: використання натхнення від природи.

Ось кілька прикладів:

Приклад колірної схеми, створеної на основі фотографії прерії.

Колірна схема отримана за допомогою фотографії околиць Дубліна.

Обмеження у виборі кольорів: дальтонізм

Деякі люди (головним чином чоловіки) можуть погано розрізняти кольори, різним ступенем дальтонізму страждають до 8% чоловіків, і 4 жінки з 1000, перевіряти, чи доступна ним інформація, настільки ж важливо, як перевіряти відображення сторінки в такому браузері як Opera. Найбільш поширений випадок, коли людина не розрізняє червоний і зелений.

Ви не повинні створювати інтерфейс так, щоб користувачеві було необхідно розрізняти кольори (особливо червоний і зелений), при його використанні. Одне з основних правил (Пріоритет 1), яким пропонує слідувати W3С:

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

Друге правило:

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