Мощным союзником для дизайнера является цвет. Это может позволить нам работать над достижением множества различных целей. Вы можете использовать его, чтобы усилить или выделить идею, спровоцировать эмоциональный ответ от пользователя или для привлечения внимания к определенной части вашего сайта. Это, конечно, в дополнение к тому, что ваш сайт будет эстетично радовать глаз.
Во многих случаях цветовая гамма, выбранная для веб-сайта, также отражает бренд и ценности компании.
Цвет и брендинг
Палитра веб-сайта может внести свой вклад в общий бренд, восприятие продуктов или услуг. На основе исследования пользователи оценивают товары в Интернете в течение первых 90 секунд после первого просмотра продукта. От 62% до 90% этого суждения будет основано на цветовой схеме. Их выводы показали, что веб-палитра может отражать индивидуальность бренда:
- Говорят, что красный отражает силу, страсть и энергию. Его можно использовать, чтобы предупредить пользователя или привлечь внимание пользователя в дизайне или бренде. Примером может стать сайты CNN, MacDonald's, KFC, YouTube и Adobe.
- Оранжевый может означать дружбу, единение и молодость. Одним из примеров использования оранжевого является Fanta, который, как вы могли ожидать, стал с их основным брендом (оранжевая Fanta когда-то была единственной, бренд прошел долгий путь за последние годы и значительно расширил свои предложения).
- Считается, что желтый отражает счастье и энтузиазм. Это не удивительно, ведь мы ассоциируем с солнцем и яркостью лампочки. Пример использования желтого в логотипе — международный перевозчик DHL.
- Зеленый отражает рост и окружающую среду. На веб-сайте Inhabitate, посвященном устойчивому развитию, используется преимущественно зеленый, который перекликается с экологическими коннотациями.
- А что синего, она олицетворяет спокойствие, безопасность и надежность. Это разумный подход для использования, покупатели, как правило, чувствуют себя с ней более непринужденно. Во многих сферах бизнеса широко используется синий, и вы можете найти его на веб-сайтах и в торговых марках AOL, Facebook, HP, PayPal, EA Games, DELL и многих других.
Цвет и пользовательский опыт
Палитра, безусловно, играет свою роль в обеспечении лучшего взаимодействия с клиентом на веб-сайтах. В частности, правильный выбор обеспечить удобство использования и разборчивость (читаемость) информации, отображаемой на экране.
Правильный контраст между текстом и фоном — важная часть пользовательского опыта, если ваши клиенты не могут легко прочитать ваш контент, они уйдут в другое место. Задумайтесь на мгновение о красном тексте на синем фоне. Эту комбинацию трудно прочитать; наши глаза не могут одновременно сфокусироваться на этих оттенках. То же самое касается синего текста на красном фоне. Так как они вибрируют, заставляя нас напрягать глаза.
У нас есть еще один инструмент. Вы также можете текст оставить на втором плане, уменьшив уровень контрастности по сравнению с фоном, помогая читателю пропустить несущественный текст при беглом просмотре или быстром чтении.
Яркость могут вызвать эмоциональные переживания. Они дают энергию (поэтому так много призывов к действию ярко-красного или оранжевого цвета) и ощущение непосредственности. Новостные сайты часто используют красный текст, чтобы привлечь внимание к последним или важным новостям. Более мягкие, менее яркие могут помочь посетителю расслабиться при приближении навигация.
Как цвета дополняют друг друга?
Чтобы создать гармоничную color scheme, важно сосредоточиться на деталях, при этом необходимо учитывать несколько моментов:
Насыщенность, яркость и тона
Вы можете создать множество вариаций цветового тона на color scheme. Сделайте ярче или темнее добавив белый или черный, и меняйте насыщенность добавив серый.
Самая легкая это монохроматическая (одноцветная), в нем меняется только яркость
Контраст
Контрастность — это просто мера различия между двумя цветами. Цвета на противоположных сторонах цветового круга предлагают самый высокий уровень контрастности, как и черная и белая. Контрастность можно применить для достижения баланса или для привлечения внимания клиентов к определенной функции или области текста.
Важно, внимательно следить за использованием контраста, переусердствуете, и вы скорее запутаете клиентов, чем поможете им.
Сочность
Мы можем воспользоваться живостью (или яркостью), добавив более яркие оттенки получаем дополнительное эмоциональное содержание, обычно отражая повышенную энергию (и, следовательно, позитивные эмоции, например, счастье), а с более темными оттенками, более спокойные эмоции.
Аддитивные и субтрактивные цвета
Мы пользуемся базовыми цветами для печати и для экранов. Наиболее распространенными являются CMYK (голубой, пурпурный, желтый и ключевой — черный) и RGB (красный, зеленый и синий).
CMYK - это субтрактивная схема формирования цвета, в которой при отсутствии любого из четырех на выходе получается белый. Краски (включая черный) рассчитываются как процентное соотношение каждого из четырех. CMYK обычно используется для традиционной печати.
RGB является аддитивной. Он начинается с черного, и к нему добавляются люминофора или светоматрицы из трех цветов, чтобы получить оттенки вплоть до белого. Значения каждого цвета назначаются от 1 до 256 и предлагают более 16 миллионов комбинаций для палитры. Это связано с тем, что RGB обычно используется на цифровых экранах, а основная система основана на двоичных парах.
Стоит отметить, что с точки зрения человеческого глаза разница между двумя палитрами незначительна. Наши глаза различают все 10 миллион цветов, созданных шкалой CMYK, но заметить разницу 16 миллионов шкалы RGB человеческому глазу будет трудно. Ни одна из палитр не «лучше» другой с визуальной точки зрения.
Разница важна, потому что две системы используются для получения разных результатов — печати и экрана. Преобразование между двумя системами будет неточным и давать разные результаты при просмотре.
Онлайн-приложения для создания цветовых схем
Хорошая новость заключается в том, что если вы застряли в выборе для своих посетителей, есть множество онлайн-инструментов, которые помогут с этой работой. Вы можете скачать (а в некоторых случаях экспортировать настройки для других программ) палитру с сайтов, перечисленных ниже:
- Adobe Colors
- Paletton
- Color Hunter
- Check my Color Sphere (Расширение Google Chrome)
- The Color App (приложение для iPad)
Вывод
Цвет — мощный инструмент для вас. Как показали исследования, подбор палитры для веб-сайта особенно важен для брендинга. Возьмем такую компанию DHL, в котором основой применяется желтый (отражает счастье и энтузиазм). Теперь рассмотрим бизнес DHL - перевозку товаров и документов, которые мы ценим. Это помогает вселить в покупателя счастье.
Как дизайнер, вы должны оптимизировать взаимодействие с пользователем и сделать правильный выбор. Это поможет обеспечить:
- Удобство и удобочитаемость (читаемость) для клиентов. Мы можем выбрать лучшую комбинацию палитры, чтобы клиенты продолжали читать то, что мы написали.
- Эмоциональный опыт в потребителе. Это связано с яркостью выбранной палитры. Яркость придает энергию и ощущение срочности. Нам стоит использовать этот прием, чтобы привлечь внимание к нашим продуктам, услугам или важным сообщениям. Более мягкие и менее яркие вызывают чувство более непринужденности, что особенно полезно для таких отраслей, как банковское дело.
Использование правильной палитры многое меняет. Глядя на всю палитру у нас большой выбор по тонам, насыщенностям и яркостям. Чтобы сбалансировать тон, насыщенность и яркость, проще всего использовать монохромную (одноцветную) схему.
При выборе вы также должны учитывать следующее:
Контрастность — мы можем привлечь внимание клиента к определенной функции или достичь баланса в нашем дизайне, используя меру различия между двумя цветами или черным и белым. Будьте осторожны с контрастом: чрезмерное усердие сбивает читателей с толку. Сосредоточьтесь на том, что важно.
Яркость — жизненно важна для того, чтобы вызвать эмоциональную реакцию клиентов. Выбирайте более яркие оттенки, чтобы отразить больше энергии и положительных эмоций, более темные, чтобы вызвать спокойные чувства у клиентов.
Сделайте выбор в зависимости от того, предназначен ли ваш дизайн для отображения на экране или для печати. CMYK (голубой, пурпурный, желтый и ключевой — черный) - используемая для печати, способная к 10 миллионам комбинаций. RGB (красный, зеленый и синий) - используемая для отображения на экране, позволяющая использовать более 16 миллионов комбинаций.
Многие онлайн-инструменты могут помочь вам сделать правильный выбор палитры. А так же обратная связь с пользователями сэкономит ваше время и деньги, прежде чем вы начнете двигаться дальше.