Как выбрать цвет для сайта


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

Размышляя о цвете

Если вы только начали задумываться о том, как выбрать цвет на сайте, начните с поиска примеров для анализа и вдохновения.

как выбрать цвета для сайта-webeginnerЗайдите на ваши любимые странички и посмотрите на все использованные цвета. Спросите себя:

  • Какой цвет использован для текста, а какой для фона?
  • Как много разнообразных цветов вы можете насчитать на одной странице?
  • Есть ли ощущение, что использованные цвета хорошо сочетаются?
  • Если есть кнопки, то какого они цвета?
  • Если есть изображения, как цвета картинки подходят ко всей странице целиком?

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

Посмотрев на страницу, которая отражается в браузере, загляните за кулисы. Проверьте CSS, которые использованы для каждого элемента,  помощью Developer Tools.  Сами себе ответьте на вопросы:

  • Как цвет вписывается в CSS автора?
  • Какую цветовую схему использует автор – RGB или HSL?
  • Удивило ли вас что-то в том, как использован цвет?

Вы можете так же найти вдохновение и в других медиа: кино, картинах, полиграфическом дизайне. Для начала, посмотрите работы на многочисленных сайтах, где дизайнеры делятся своими работами, таких как Dribbble, siteInspire или Awwwards.

Выбор цвета

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

Цвекак выбрать цвета для сайтатовую палитру может создать каждый, и существует множество бесплатных онлайн-инструментов, которые помогут вам в этом (например, Paletton и Adobe Color CC).

Цветовые палитры часто следуют ряду правил, которые помогают сделать цвета более связанными. Эти правила основаны на теории цвета и математике. Существуют различные варианты названий, но инструменты, упомянутые выше, как минимум имеют следующие общие цветовые варианты:

  • монохромные – вариации оттенков одного цвета
  • аналоговые – оттенки цветов, равноудаленных друг от друга на цветовом круге и обычно смежных, и их вариации
  • дополнительные – оттенки цветов, противоположных друг другу на цветовом круге, и их вариации

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

Доступность цвета

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

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

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

Цвета на Веб-страницах

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

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

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

Цвет – это не все!

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

Дизайн требует времени и практики. Пробуйте разные варианты, не бойтесь делать ошибки и начинать все заново. Самый лучший способ понять, как ваш выбор влияет на дизайн –  экспериментировать.

 


Комментировать