Логотип

Подбор цветовой палитры для дизайна веб-сайта

Цвета

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

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

Палитра мягких тонов:

Палитра мягких тонов

 

Выбор цветовой палитры по анализу фотографии

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

Палитра цветов по анализу фотографии Палитра цветов по анализу фотографии Палитра цветов по анализу фотографии Палитра цветов по анализу фотографии

От уникальности к готовым решениям

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

Flat Design

Flat Design или Плоский дизайн - это дизайн, подчёркивающий эффект простоты и утончённости. Он стал набирать популярность с 2006 года, а с переходом Microsoft на Metro стал по сути новым стандартом веб-дизайна. В 2013 году компания Apple, выпустив операционную систему iOS 7, выполненную в плоском дизайне. Через некоторое время на плоский дизайн перешла и компания Google, переведя свои сервисы и приложения на Material Design.

В Палитре цветов Flat Design преобладают мягкие и спокойные тона.

Основная палитра Flat UI Design:

Палитра Flat UI Design

Дополнительная палитра Flat UI Design:

Дополнительная палитра Flat UI Design

По мере распространения Flat Design и его перехода к массовости помимо основной палитры цветов стало появляться довольно большое количество авторских.

Палитра Flattastic Pro Color (Автор Erigon)

Палитра Flattastic Pro Color

Палитра Flat & Gorgeous (Автор ViccAlexander)

Палитра Flat & Gorgeous

Material Design

Material Design или Материальный дизайн - это плоский дизайн приложений ОС Android сервисов от компании Google. Впервые он был представлен на конференции Google I/O 25 июня 2014 года. Его идея заключается в приложениях, которые открываются и сворачиваются как карточки, используя "эффекты теней". По идее дизайнеров Google у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно.

Палитра цветов Material Design отличается от Flat Design более яркими тонами.

Основная палитра Material Design:

Дополнительная палитра Flat UI Design

 

Возможные ошибки при выборе цвета

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

Значение цветов

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

Цветовые ассоциации:

  • Белый - простота, чистота, свежесть, доброта, невинность;
  • Голубой - терпение, спокойствие, надежность, стабильность;
  • Желтый - энергия, счастья, тепло, любопытство, радость, интеллект, осторожность;
  • Зеленый - жизнь, гармония, природа, исцеление, здоровье, благополучие;
  • Красный - азарт, смелость, страсть, желание, любовь, силы, лидерства и волнения, но так же он несет и негатив: опасность и тревогу;
  • Коричневый - уверенность, природу, долговечность, комфорт, надежность, приземленность;
  • Оранжевый - бодрость, творчество, дружелюбие, уверенностью, игривость, мужество, стойкость;
  • Розовый - романтичность, женственность, нежность, привязанность, но так же и негативные: пассивность и слабость;
  • Серый - консерватизм, традиционализм, солидность строгость;
  • Фиолетовый - благородство, мудрость, достоинство, независимость, власть, богатство, роскошь;
  • Черный - стиль, элегантность, властью, изысканность.

Оптимальное количество цветов

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

Печатная продукция и веб-дизайн

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