В течение нескольких недель искала толковые советы по подбору цветовой гаммы для сайта. И… как ни странно нашла очень мало информации.

Конечно, есть специальные сервисы по подбору цветов. Есть много рерайтинга. Но общей информации для веб-дизайнера… — хм…

А нужны были мне такие советы для работы над сайтом художницы Ольги.

У этой замечательной и очень профессиональной художницы одна из любимых фраз во время работы: «Ну ещё чуть-чуть!» (именно эту фразу я вынесла в заголовок поста). Нам с ней пришлось довольно много работ сделать вместе — печатную рекламу, буклеты, обложки книг и так далее, и тому подобное. И эту фразу мне приходилось слышать очень часто. 🙂

Поэтому, когда я взялась за сайт для Ольги, я понимала, что это будет одна из самых сложных работ — именно из-за вот этого: «Ну ещё чуть-чуть!».

Так в результате и получилось…

Поэтому шишек в процессе этой работы я набила весьма достаточно. Многие вещи поняла и осознала непосредственно в процессе работы, методом научного тыка проб и ошибок.

И делюсь некоторыми важными выводами…

Думаю, что многим эти советы помогут.

Итак, хватит предисловий. Перехожу к сути.

При создании сайтов надо учитывать следующие моменты:

1) Главное правило любого дизайна: дизайн обязательно сочетает в себе красоту и функциональность. То есть проектируемый предмет (кресло, трактор, монитор… и сайт тоже!) должен быть не только красив. Им должно быть удобно пользоваться.

2) В удобство пользования сайтом входит не только размещение управляющих элементов, но и цветовая гамма. Поэтому, вполне понятно, подбор цветовой гаммы — это очень важно.

3) Цветовая гамма должна быть оправдана. То есть должна соответствовать целевому назначению.

Три выше названных момента описаны достаточно подробно в разных местах Интернета, и я не буду заниматься рерайтингом по этой теме.

Но вот дальше…

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

Потому что листовку, напечатанную на бумаге, или рекламу, вывешенную на билл-борде, и вообще все предметы вокруг себя мы воспринимаем в отраженном свете.

 

А монитор компьютера и, следовательно, — все сайты — в отличие от «обычных» стандартных предметов в реальности — активно и сильно бьют светом нам в глаза, тем самым — гораздо сильнее воздействуют на цветовые рецепторы. Для человека такое восприятие неестественно. Ведь человеческий глаз миллионами лет формировался для восприятия любой визуальной информации в отраженном свете. И конечно же — никак не может за пару десятков лет перестроиться на восприятие в «прямом» свете, бьющем в глаза. Поэтому восприятие информации (любой — и текста, и графической) с монитора кардинально отличается от восприятия такой же информации с листа бумаги.

 

Неучитывание этого момента приводит к достаточно частой ошибке начинающих вебмастеров (и даже опытных «стандартно-бумажных» дизайнеров) — использованию одного и того же «макета» или одинаковой цветовой гаммы, допустим, для афиши и для сайта.

Простой пример. Все десятки раз видели листовки-раздавалки, напечатанные на цветной бумаге. Допустим, желтая бумага. На ней — синим или красным цветом напечатан тот или иной текст, какой-то рисунок-логотип.

А теперь представьте такую же «листовку», растянутую на весь свой монитор (или даже на половину): жёлтый фон и синий текст на нём — убиться можно!!

Голубая бумага и голубой цвет фона на мониторе под черным текстом воспринимаются совершенно по-разному.

Или вот наружная реклама: прекрасное яркое сочетание красных и желтых полос:

 

Но если эти же полосы поставить в качестве фона на монитор… — хочется сразу же нажать кнопку выключения экрана.

И так далее, и тому подобное.

К огромному сожалению, множество дизайнеров не учитывают этот момент — резкое усиление восприятия цвета пользователем за счет подсветки монитора.

 

Вполне понятно, что многие дизайнеры перешли на сайтостроение после прохождения насыщенной практики в типографиях… Даже подавляющее большинство так называемых «преподавателей вебдизайна» так и продолжают преподавать тот же самый «цветовой круг», что и для «стандартных» художников и дизайнеров. Да, конечно, цветовой круг и понятие о цветоведении в сайтостроении — тоже важны. Но плюс к этому надо обязательно добавить и вот это правило: необходимо учитывать усиление восприятия цвета, дополнительное воздействие на глаза за счет подсветки монитора.

 

Следующий момент.

В типографиях есть понятие «цветопроба». Оно подразумевает, что для важных художественных работ, либо для «крутой» рекламы проводится предварительная печать — делается несколько пробных оттисков. Причем проводится эта процедура обязательно на той бумаге, на которой будет печататься весь тираж. Даже температура и влажность в печатном цехе тоже могут повлиять на цветопередачу… И только после утверждения такой цветопробы идёт печать всего тиража.

Так вот о любых «цветопробах» в вебдизайне надо забыть! Потому что сколько у народа марок мониторов… Какого года эти мониторы и как они уже «подсели»… Чем человек занимается у компьютера чаще всего… — возможно, играет в компьютерные игрушки с темным дизайном — и потому «выкручивает» яркость монитора на максимум… Или смотрит фильмы… Или на ноутбуке экономит батарею и потому яркость уменьшил до минимума… Или… Или не обращает внимания на яркость / контрастность / гамму / теплоту… — она у него стоит так, как выставил менеджер в компьютерной фирме (скорее всего, совсем на другой видеокарте)… Более того — даже освещение (или его отсутствие) вокруг монитора — тоже оказывает влияние на восприятие человеком цветовых сочетаний на экране.

Поэтому — всё, что может сделать вебмастер, — так это почаще крутить настройку яркости / контраста своего монитора в разные стороны, смотреть на сайт на разных мониторах, с разными настройками и… и молиться надеяться на то, что монитор у «важного» пользователя-заказчика настроен более-менее нормально. Уверяю вас — такое случается не так уж часто.

 

Отсюда опять же следует вывод: цветовые сочетания должны быть достаточно «простыми», «безопасными», то есть достаточно нейтральными.

И потому в подборе цветовой гаммы для сайта бессмысленно руководствоваться соображениями: «Ну ещё чуть-чуть!».

Теперь по поводу сервисов для подбора цветовой гаммы.

Да, эти сервисы важны и нужны. Но… Но они тоже используют тот же самый стандартный «цветовой круг», который используется уже в течение многих десятилетий (или столетий?) в производстве печатной продукции.

Кстати, обратите внимание: в этом удобном сервисе предлагается просмотр страницы в двух вариантах: на светлой и тёмной странице.

При этом в на светлой странице цветные элементы достаточно невелики по размеру (исключение — достаточно «звонкая» шапка). И это правильно! Обратите внимание: фон берётся нейтральный — белый, а на нём — некрупные цветовые пятна.

А в тёмной странице… — сами посмотрите! Даже в таком уменьшенном предпросмотре предлагаемая «тёмная» страница ужасно бьёт по глазам и мозгам!

Итак. Отсюда можно сделать следующий вывод:

Чем ярче выбранные цвета и чем контрастнее цветовые сочетания, тем цветные элементы дизайна должны быть меньше.

И наоборот. Большие цветовые «пятна» и особенно фон должны быть как можно более «нейтральны».

 

Ещё несколько полезных приёмов и замечаний:

— посмотрите на скриншот сайта. Взгляд на сайт в мелком виде позволит разглядеть неожиданные детали;

— уменьшите отображение (нажмите несколько раз Ctrl-минус, или другим методом в вашем браузере) — это тоже даст дополнительный ракурс;

— при использовании инверсии (то есть светлый текст на темном фоне) шрифт должен быть больше, чем при темном шрифте на светлом фоне;

— чем больше графической информации на сайте, тем фон должен быть нейтральнее;

— если на сайте много текста, то его следует «разбавлять» какими-то небольшими графическими элементами (линиями) и пустыми местами с нейтральным фоном, на которых будет отдыхать глаз.

 

Во многих местах Интернета копируются-переписываются одни и те же «цветовые ассоциации», где указывается, как человек воспринимает тот или иной цвет.

Так вот эти рекомендации, конечно же, надо учитывать, но еще обязательно помнить о том, что желтый, красный и оранжевый фон на сайте посетитель абсолютно точно воспримет, как цветовой удар по мозгам, глазам и психике! Отсюда следует, что не надо не только брать эти «сильно-бьющие» цвета в качестве фона сайта. Их не стОит применять в качестве атрибута bgcolor для тега body. Потому что время от времени некоторым посетителям этот фоновый цвет будет лупить по глазам и мозгам.

 

Ещё один дополнительный вывод: проще всего делать дизайн сайта, ориентируясь на собственный вкус: «Мне нравится — значит, это хороший дизайн!». А сложнее всего — для художника, под девизом: «Ну ещё чуть-чуть!».

В общем, советов, как мне кажется, я дала довольно много. А если кому-то мало, то можете почитать ещё вот здесь малость.

Вот ещё одна толковая статья по подбору цветовой гаммы на сайт.

 

И да поможет вам здравый смысл и собственный художественный вкус!

 

ЗЫ. Постовых в данной статье нет. Все ссылки на внешние ресурсы — найдены в процессе собственных розысков.

регистрация доменов
домен RU - 99 руб
домен РФ - 99 руб
www.

Тут была реклама Google Adsense. Почему я её убрала?

Не забывайте подписываться на rss и/или твиттер блога. Нажимайте на лайки.  Сделала и веду больше 15 сайтов. Точная цифра - всё время меняется. Подробнее - читайте на странице "Мои проекты". DivaDii (ДиваДии)


Мобильный стильный ноутбук. Настольный макбук про..

6 комментариев: Ещё чуть-чуть!..

  • DrozdovNo Gravatar (1 comments):

    А я пробовал подобрать цветовую гамму с помощью фотошопа

    • DivaDiiNo Gravatar (646 comments):

      Можете тут показать результат? Действительно интересно.

      Ну конечно, можно подбирать и при помощи Фотошопа. Без Фотошопа в дизайне сайтов обойтись практически невозможно.
      Более того — лучше сочетать эти инструменты: фотошоп и вот тот сервис по подбору цветовой гаммы.

  • Человек ДелаNo Gravatar (1 comments):

    Ну вообще раньше была такая тема — web-палитра цветов, по ней лучше подбирать.

    • DivaDiiNo Gravatar (646 comments):

      2 Человек Дела, конечно.
      Когда я говорила в посте об «удобном сервисе» — там как раз говорится о выборе на палитре.
      Если Вы говорите о именно web-палитре и подразумеваете так называемые «веб-безопасные» цвета, то эта «тема» уже явно остыла и покрылась пеплом. В смысле — абсолютно устарела. Потому что уже никто не выходит в интернет с палитрой в 256 безопасных цветов. 😉
      Такого отчета уже даже статистика не предоставляет.
      И когда я делала сайт для художницы, — то ей явно этих 256 цветов было бы мало. 😉

  • Si.A.A.No Gravatar (1 comments):

    Честно говоря постоянно над этим думаю и пришел к выводу, что более трех цветов (с учётом их оттенков) не нужно использовать в дизайне блога. В противном случае цыганский платок получается.

    • DivaDiiNo Gravatar (646 comments):

      Si.A.A., я бы сказала ещё жёстче. Есть масса примеров отличных, великолепных, красивых, выразительных дизайнов сайтов, где всего 1-2 цвета плюс нейтральные белый, черный, серый.
      То есть даже три цвета (помимо нейтральных, разумеется) — для сайта уже многовато. И их надо использовать ещё более осторожно.
      То есть общий вывод такой: чем более многоцветный дизайн, тем разработчик должен быть профессиональнее и аккуратнее в своих действиях. Причем, это касается любого дизайна — хоть интерьера, хоть машины, хоть плаката… Но в дизайне сайтов это правило особенно актуально и важно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сколько будет? *



DivaDii, aka Надежда Лях на Google+  Вверх
Плюсани!

Интересная тема!

Записи по месяцам:

Подпишись!


Читать Палю Тему в Твиттере




Введите Ваш email-адрес:



с помощью FeedBurner

Рассылки Subscribe.Ru
Лента "Палю тему"

Наш опрос:

Совершаете ли Вы ошибки при создании сайтов?

Результаты опроса

Загрузка ... Загрузка ...

Цифирь: