Сочетание цветов для дизайнера. Сочетание цветов в веб-дизайне как эффективный инструмент маркетинга
Цвета и их значения
Несмотря на то, что цвета и их оттенки очень часто вызывают у разных людей разные эмоции и ассоциируются с разными вещами, все же на сайте они должны гармонично сочетаться, и нести смысловую нагрузку. Общепринятые значения цветов условно можно разделить на три группы по типу их восприятия: тёплые, холодные и нейтральные цвета.
Цветовые комбинации всегда должны быть гармоничными, если вы следовали за предыдущими шагами, когда вы здесь, процесс будет проще. Но вы должны знать, потому что многие цветовые комбинации кажутся гармоничными с первого взгляда, но опасны при нанесении, как в случае зеленого и желтого цветов, которые очень близки по цвету, но их оттенки должны быть очень близкими так что эффект может быть приятным, в противном случае он становится утомительным и даже болезненным для более чувствительных глаз.
Важен также вопрос о весе. В некоторых комбинациях цветов трудно определить, какие элементы будут иметь больший вес, то есть меню может оказаться в фоновом режиме, если цвета не были благоприятными, и это затрудняет навигацию. Теперь, зайдя сюда, как вы определяете, какая комбинация цветов имеет лучший визуальный аспект?
Красный Оранжевый Желтый
Зеленый Синий Пурпурный
Черный Серый Коричневый
Вот где начинается начало этого разговора. Нам нужно исследовать, анализировать, что делают конкуренты и как они применяют цвета, поэтому мы будем ближе к вселенной посетителя. Если мы увидим, например, что подавляющее большинство компьютерных и периферийных магазинов используют синий цвет, мы можем идти двумя путями: делать обычное или инновационное.
По моему личному мнению, новатора следует использовать только тогда, когда вы уверены, что целевая аудитория готова к этому. В противном случае предпочтительнее не рисковать инвестициями, которые клиент сделал в том, что не может быть оценено до тех пор, пока оно не будет работать, и если что-то пойдет не так, будет поздно передумать.
Бежевый Кремовый Белый
Варианты и примеры использования
Один цвет в разных вариантах дизайна можно использовать как фоновым, так и для выделения важных элементов. Примеры:
В данном примере голубой цвет используется в элементах дизайна, а продающие моменты выделены красным.
Помните, что сайт вашего клиента, по большей части, единственный, который у него есть, и поэтому он должен выполнять именно то, что он предлагает. Поиск, поиск и поиск. Держите на кончике языка все, что уже сделано в реальности продукта, который вы хотите продать.
Вооружившись этой информацией, вы не ошибетесь. Розовые оттенки дают весь проект женственности. Фиолетовый, сам по себе приносит дух гламура, желтый в тоне, который имитирует золото, приносит благородство. У нас есть идеальное совпадение, чтобы говорить о женской красоте.
Это здорово для фермы. Не говоря уже о деревенских деталях, созданных веб-дизайнером, это была отличная работа. Использование цвета является одной из основных проблем доступности, которые остаются незамеченными при разработке веб-сайта. Проблема в том, что не все люди воспринимают цвет одинаково, и поэтому использование цвета исключительно для передачи сообщения иногда может сделать это сообщение неоднозначным.
А для этого сайта голубой цвет выбран в качестве основного и важные продающие элементы выделяются именно с помощью него.
Здесь красный цвет используется в качестве фонового.
Не полагайтесь исключительно на цвет, чтобы предоставлять информацию
Также необходимо учитывать контраст между цветом текста и цветом фона, так как не все цвета хорошо сочетаются или позволяют читать до 100% содержимого. Мы должны гарантировать, что вся информация, предоставляемая через цветовой код, может быть просмотрена без использования цвета.
Никогда не следует использовать цвет в качестве единственного средства указания важных действий. Около 8% мужчин и 5% женщин испытывают трудности с различием цветов. Большинство из них с трудом видят цвета в зеленом спектре. Чтобы информация была видна всем пользователям.
Ну а для этого примера тот же красный цвет используется для выделения продающих моментов.
Выбор цвета для сайта
- 1. Выбирать цвета для сайта нужно не наобум, а руководствуясь будущими целями сайта. Первое, с чего нужно начать выбор - узнать, не сделали ли его до вас). У многих коммерческих (и чуть реже некоммерческих) сайтов очень часто есть жесткая привязка к существующему логотипу, узнаваемым цветам и элементам предыдущей версии сайта, или попросту выработан фирменный стиль.
- 2. Если сайт в дальнейшем планируется продвигать в поиске или контекстной рекламе, то лучше просмотреть Топ 20, или Топ 30 (включая рекламные площадки) сайтов конкурентов. Нужно это для того чтобы найти цвета, оттенки и их сочетания которые реже используются в вашей тематике. Сайт должен запоминаться как самим дизайном, так и его уникальными цветовыми решениями, а не быть похожим на сайты конкурентов.
- 3. Далее следует выбрать основные цвета:
- подложки сайта (чаще всего берутся нейтральные цвета);
- основных элементов сайта (выбор зависит от задач);
- для выделения продающих и важных моментов (обычно используют яркие оттенки тёплых).
Подбирать цвета нужно руководствуясь правилами сочетания цветов. Начинающим дизайнерам советую использовать аналогичные (близкие по палитре) цвета или методы триад и квадратов по палитре цветового круга.
Выбирайте комбинации цветов, которые можно отличить от слепого пользователя; Убедитесь, что существует достаточный контраст между текстом и цветом фона; Использовать значки, которые представляют действия или информацию; Всегда следите за цветом паттернов, значков или субтитров, чтобы информация могла восприниматься, если цвет путают с другим цветом. Пример использования шаблонов и текстур как второй способ различать каждый элемент в графике.
Проверьте контраст между текстами и цветом фона
Цвет, используемый в текстах, должен иметь достаточный контраст с цветом фона, чтобы обеспечить хорошую читаемость. Плохой контраст между двумя цветами может сделать тексты неразборчивыми для хорошего кусочка населения, даже для людей с «нормальным» видением.
Аналогичные. Этот метод основан на использовании двух – трех близких по палитре цветов и всего многообразия их оттенков. Триады и квадраты. Равносторонний треугольник или квадрат на цветовом круге подскажут правильное сочетание цветов, упростив выбор дизайнера.
Несколько примеров цветовых комбинаций текста и фона без достаточного контраста. На практике мы можем использовать системы, которые автоматически вычисляют контраст между двумя цветами и рассказывают нам, следует ли пройти тест доступности. Пример расчета коэффициента контрастности между белым фоном и двумя оттенками серого.
Избегайте элементов, которые быстро мигают или меняют цвета
Не используйте элементы, которые заставляют страницу мигать или менять цвет на частотах более 2 Гц и менее 55 Гц. То есть, не используйте ничего, что «мигает» более 3 раз в секунду. Пять процентов эпилептиков чувствительны к фоточувствительности и могут иметь судороги, вызванные определенными мигающими частотами.
- 4. Ну и после этого очень важно согласовать выбранные цвета с маркетологом и владельцем сайта). И можно приступать непосредственно к работе над дизайн-макетом будущего сайта.
И помните! Даже самое небольшое изменение одного цветового оттенка может вызвать абсолютное другое восприятие у пользователей. В практике нашей студии был случай, когда изменение основного цвета сайта дало увеличение конверсии и KPI почти в 2 раза.
Цветовая схема - это экран, а не краска
Когда вы находитесь в начале, теория полного цвета не обязательно то, что вам нужно для начала. Часто то, что вам нужно, - это начать работать с чем-то менее теоретическим, а немного «красить цифрами». Это не правила, поскольку вы создаете, многие цветовые схемы в вашей карьере будут следовать совершенно другому направлению. Одним из ключевых принципов веб-дизайна является то, что вам не нужно, сколько времени вы потратили на создание славного дизайна, ваша главная роль - остаться в фоновом режиме и поддержать настоящую звезду шоу: контент.
Люди всё ещё спорят, является ли содержание главным. Если вы спросите меня, то я полностью соглашусь с ними, и моё мнение основано на моем собственном опыте. Несмотря на то, является оно доминирующим или нет, есть нечто, что не менее важно! Что это, спросите вы? Знаю, все любят говорить: «Не судите о книге по её обложке». Но как еще вы планируете привлечь внимание кого-либо , как не оригинальной обложкой? Очевидно, когда вы привлекли чье-то внимание, остальные усилия вы можете потратить на содержание. Речь будет идти о цветах веб-дизайна, и как управлять ими.
Ваша цветовая схема никогда не должна заставлять дизайн сайта «говорить громче», чем контент, который он представляет. Ваш дизайн должен быть в фоновом режиме, помогая перемещению содержимого сайта на передний план. Если вы не поставили какой-то пример контента, можно легко завершить дизайн, который является прекрасным сам по себе и что клиент может хорошо любить в своей типовой форме, но на практике также отвлекает посетителей на сайт.
Фактически, процесс веб-дизайна настолько связан с контентом, что многие высококачественные веб-дизайнеры кажутся почти пустыми, без содержания. Это хорошая идея начать с размещения образца контента, который вы ожидаете появиться на сайте, либо в программе разработки, либо непосредственно в коде, и обрисовать вокруг него. Это особенно относится к фотографиям или изображениям определенного стиля, поэтому вы можете убедиться, что ваш дизайн будет гармонично взаимодействовать с ними. Представьте, что содержание сайта является уникальным человеком, для которого вы должны сделать тот факт, который вам идеально подходит.
Первое впечатление вы производите лишь однажды
Всегда существует одно конкретное действие, которое вы хотите заставить сделать посетителя вашего сайта. Это действие, на которое вы делаете самый большой акцент. Это может быть кнопка подписки, кнопка «далее», или кнопка «купить».
Начинается с простой базовой шкалы
Существует огромное количество цветовых комбинаций, которые вы можете выбрать для основного фона и текстовой базы. Если вы посмотрите на любой выбор популярных сайтов, шаблонов или тем, существует большая вероятность того, что у большинства из них будет такой же темно-серый или белый текстовый базовый текст, и это имеет обоснование. Благодаря этой комбинации они гарантируют практически читаемость для посетителей и позволяют выделить текст и контент на основе изображений.
С некоторым образцом контента на месте создается базовая серая настройка, такая как. Вообще говоря, вам следует избегать использования чистого черного для текста, так как темно-серый немного легче читать. Опять же, это не правила цвета, которые вы должны использовать, просто рекомендации, с помощью которых вы знаете, что можете начать безопасную работу.
Какой бы ни была кнопка, всегда помните, что то, нажмут на неё или нет, зависит от ощущений, которые испытывает посетитель, когда находиться на вашем сайте.
В этой статье вы узнаете о 5 самых популярных цветах, которые заставят ваш сайт заинтересовать и заинтриговать посетителей.
«Pinterest» использует множество красных оттенков
Выберите только один цвет для выделения
Там, где легче видеть, что цветовые схемы заканчиваются плохо, возникает конфликт разных цветов. Чем больше цветов вы используете, тем сложнее держать их под контролем. Итак, для начинающих добавьте только один дополнительный цвет поверх вашей серой базы, которая будет использоваться для выделения таких вещей, как ссылки, названия, меню, кнопки и т.д. цвет подсветки может быть синим, зеленым, красным или любым другим.
Выберите цвет подсветки, предварительно разместив ящик над базой, чтобы вы могли видеть, как ваш цвет относится ко всем элементам. Затем откройте панель выбора цвета и щелкните по центру верхнего правого угла цветовой карты. Переместите ползунок вверх и вниз и выберите цвет, который, по вашему мнению, будет хорошо работать с вашим дизайном.
Без сомнения красный считается самым горячим цветом. Если Вы посмотрите на цветовую палитру «Pinterest», вы сразу обратите внимание, что красный является их основным цветом.
Красный часто ассоциируется с любовью. Это сильный и динамичный цвет, который может заставить вас ощущать влюблённость во что либо, что находится рядом с этим цветом.
На этом этапе вы работаете с тремя основными цветами; ваш фон, текст и подсветка. Вы можете и должны использовать более одного цвета в будущем, но пока подумайте об этом как о жонглировании. Вы уже работаете с тремя жонглированиями, поэтому ждите, пока вам не станет удобно, и будьте уверены, прежде чем добавить больше в спину.
Вы только что узнали, как выбрать «оттенок». Вкратце, оттенок является основным цветом. Если у вас есть вопросы о том, какой цвет подсветки использовать, выберите синий. Синий - это самый гибкий цвет, с которым вы можете работать и который будет соответствовать большинству типов сайтов. Цвета, такие как фиолетовый и желтый, могут быть довольно привлекательными, но они также могут быть яркими, если используются неправильно.
Этот цвет часто встречается в оформлении акций, так как его интенсивность создает ощущение срочности.
Помимо всего, этот интенсивный цвет может вызывать у посетителей сайта чувство возбуждения или поощрения. Но в то же время он может и отбить желание находиться на нём, так что всегда нужно быть осторожным.
Используйте красный, для акцентирования внимания в вашем веб-дизайне. Он хорошо комбинируется с белым, серым, светло-синим или серебристым цветами.
С другой стороны, вы можете делать почти все, что должно быть синим, как цвет подсветки, не вдаваясь в слишком большой урон. Если вы не знаете, с чего начать или какой цвет использовать в проекте, он синий. Синий, который вы выбираете, может находиться где-то между темно-синим и зеленым, чтобы вы были на безопасной территории.
Добавление вариаций к выделенному цвету
Когда вы решили, что ваш цвет подсветки идет впереди, и добавьте его в свой дизайн, где вам это нужно. Если вы используете цвет подсветки на кнопках или в любой текстовой области сверху, измените цвет этого текста. После того, как вы выбрали свой цвет подсветки, оставьте ползунок, где вы остановились. Для вашего дизайна вам понадобятся дополнительные цвета, но все они будут вариациями того цвета подсветки, который вы уже выбрали, так что держите вещи простыми.
Практический пример использования красного цвета:
Человеческий глаз видит красный цвет, когда он смотрит на свет с длиной волны между 630 и 700 нанометров. Свет выше этого диапазона называется инфракрасным, и не воспринимается человеческим глазом, но он может быть идентифицирован как тепло. - Wikipedia
Более тонкий текст над верхним цветом
Чтобы создать цветовые вариации, перетащите курсор в область карты выбора цвета. Использует эти типы цветовых вариаций для таких вещей, как.
Пребывание от правого верхнего угла
Верхний правый угол цветной карты - это земля с высокими октановыми цветами. Цвета в верхнем правом углу похожи на гоночные автомобили Формулы 1; могут совершать ужасающе и очень соблазнительно, но, как правило, для их использования требуется высокий уровень опыта. Без этого опыта могут возникнуть несчастные случаи, поэтому лучше начать с более спокойных цветов.Более широкое использование палитры красного цвета (по jimjim421):
10 ассоциаций с красным цветом:
- кровь
- война
- пожар
- мужественность
- страсть
- обольщение
- принуждение
- энергия
- храбрость
«Amazon » любит насыщенный оранжевый:
Оранжевый — теплый и активный цвет, но не настолько интенсивный, как красный. Оранжевый цвет — скорее теплый, чем горячий.
Наполненный энергией, этот яркий цвет призывает, а не вынуждает или заставляет, людей действовать. Оранжевый лишь иногда воспринимается как интенсивный - он призывает к таким действиям, как купить, подписаться, продать или следовать. Рекомендуется использовать оранжевый цвет, если после посещения вашего сайта вы хотите оставить у гостя чувство мотивации, радости, креативности, и полноты энтузиазма.
Практический пример использования оранжевого цвета:
Более широкое использование оранжевой палитры по manekineko :
10 ассоциаций с оранжевым:
- оптимизм
- определение
- пожар
- предупреждение
- осень
- религия
- выносливость
- сострадание
- Хэллоуин
- организм
Синий цвет facebook создает ощущение безопасности:
Вы можете найти много деловых и корпоративных веб-сайтов с использованием синего цвета. Этот цвет у нас ассоциируется с чем-то надежным, безопасным, вызывает чувство доверия и опыта. Таким образом, не удивляет тот факт, что каждый бизнесмен, который заботится о том, какие впечатления он оставит от сайта своей фирмы, предпочитает использовать синий цвет. Синий создает ощущения совершенно противоположные от тех, которые оставляет красный. Синий успокаивает нас, и мы вовсе не должны беспокоиться о том, что его будет слишком много.
Практический пример использования синего цвета:
Могу поспорить, что вы не знали:
Опрос, который был проведён в Германии и опубликован в 2009 году доказал, что синий — любимый цвет 46 процентов опрошенных мужчин и 44 процентов женщин. — Wikipedia
Более широкое использование синей цветовой палитры по entitydesigns :
10 ассоциаций с синим:
- правдивость
- дружелюбие
- магия
- парни
- безвозмездность
- полиция
Сила зеленого цвета на
Чувствуете себя сейчас необычайно оптимистично? Дайте угадаю — вы смотрели на что-то зеленое? Возможно, вы смотрели просто на зеленое растение — это, несомненно, успокоило вас и заставило посмотреть на вещи оптимистичней.
Все, кто каким-то образом связан экологией, имеет больше возможностей использовать зеленый цвет в создании своих сайтов. Обратите внимание на 100-долларовую банкноту. Здесь преобладает зеленый цвет! Такие сайты, как Groupon, также имеют достаточно зеленого цвета в своём бренде, так как они непосредственно имеют дело с деньгами. Зеленый цвет очень освежает и расслабляет, оставляя у людей чувство сбалансированности и вдохновения. Он представляет собой баланс и гармонию в дизайне.
Практический пример использования зеленого цвета:
Могу поспорить, что вы не знали:
В некоторых языках, в том числе старокитайском, тайском, старояпонском, и вьетнамском, одно и то же слово может одновременно означать и синий, и зеленый цвет. Не существует природных источников для зеленых пищевых красителей, которые были бы одобрены организацией контроля за продуктами и лекарствами США. - Wikipedia
Более широкое использование зеленого цвета по Skybluue2u :
10 ассоциаций с зеленым:
- деньги
- жадность
- зависть
- природа
- весна
- здоровье
- молодость
- трава
- надежда
Yahoo! и фиолетовый цвет на их логотипе
Фиолетовый цвет чаще всего ассоциируется с такими понятиями, как воображение, креативность, достоинство, благородство и изобилие. Яркие оттенки фиолетового по большей мере связаны с весной и романтикой, в то время как более темные его тона ассоциируются с роскошью и богатством. Фиолетовый цвет используется в красивых и модных моделях постельного белья, потому что фиолетовый успокаивает больше, чем любой другой цвет. Он считается скорее женственными и романтичным, нежели мужским цветом. При взгляде на вещи фиолетового цвета он кажется явно искусственным, это потому что этот цвет встречается в природе очень редко. Так же, как и красный, люди находят фиолетовый цвет слишком сильным и ярким, он заставляет их чувствовать принуждение к чему либо, он как бы подталкивает принять определенное действие. Поэтому было бы эффективно сочетать этот цвет с черным или белым цветами.
Практический пример использования фиолетового цвета:
Могу поспорить, что вы не знали:
В апреле 2007 года учёные предположили,что ранние археи, возможно, использовали фиолетовый пигмент по принципу хлорофилла, для того, что бы поглощать энергию солнца. Если бы это действительно было так, то огромные площади океанов и береговых линий были бы фиолетового цвета. Эта теория называется «фиолетовой гипотезой Земли». — Wikipedia
Более широкое использование фиолетового цвета по
10 ассоциаций с фиолетовым
- богатство
- щедрость
- благородство
- утонченность
- романтика
- искусство
- экзотика
- духовность
- роскошь
- женственность
1WD разумно используют монохромные цвета
Обычно монохромные цвета такие, как белый, черный, темно-серый и светло-серый следует использовать в качестве фона в разработке дизайна с уже существующими и правильно расположенными акцентирующими цветами, которые являются более яркими и насыщенными. Взгляните на сайт, 1stwebdesigner — 1WD. Они используют также оранжевые цвета в качестве яркого цветового акцента — но только в гармоничном сочетании с темно-серыми и светло-серыми тонами. И, конечно же белый, (фоновый цвет сайта). Черный цвет всегда будет представлять модерн, загадочность, элегантность и силу. Серый — нейтральный цвет, представляющий нечто спокойное и практически неведомое, как тень. Поскольку серый цвет иногда может выглядеть грязным, то белый создаст противоположный эффект. Белый отождествляет чистоту, открытость, простоту и минимализм.
Практический пример использования монохромного цвета:
Могу поспорить, что вы не знали:
Цифровая монохромная фотография охватывает только оттенки черного, которые воспринимает датчик фотокамеры. При пост-обработке цветных изображений можно преобразовать воспринимаемую яркость путем объединения показателей нескольких каналов. - Wikipedia
Более широкое использование монохромной палитры по munsteri
10 ассоциаций с монохромными цветами
- власть
- элегантность
- пространство
- мягкость
- невиновность
- пессимизм
- депрессия
- скука
А какой Ваш любимый цвет? И какие ощущения и эмоции он у Вас вызывает?
Перевод — Дежурка