Цвет веб-дизайне, подбираем цвета для сайта самостоятельно.

Поделиться с друзьями

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

Такой сайт мы закрываем и уходим на другие сайты конкурентов. Почему так происходит? Существует такое понятие, как психология цвета в дизайне. При создании сайтов огромную роль играет цветовое решение.

О символизме цвета, его эмоциональном влиянии на человека написал один из самых известных исследователей Макс Люшер. Он исследовал закономерности этого влияния, зависимость влияния цвета от эмоционального состояния человека, открыл зависимость отношения к цвету от условий развития личности и многое другие закономерности, связанные с цветом и его влияние на человека. Макс Люшер установил, что определённый цвет вызывает у человека вполне определённые эмоции. Например, жёлто-красные тона создают чувство взволнованности, возбуждения. Синие, серые цветовые тона, напротив, действуют успокаивающе. Интересно, что свои исследования он проводил по заданию одной рекламной фирмы. Тёмно-синий цвет ассоциировался с ночным покоем, а жёлтый — с солнечным днём и его заботами. Красный цвет напоминал о крови, пламени и связанных с ними ситуациях, требующих высокой мобилизации, активности. Отношение к цвету определялось характером жизнедеятельности многих поколений.

( Данный текст взят из книги Автора. Макса Люшера.)

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

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

На картинке вы можете ознакомиться с каждым цветом

vybor-cveta

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

Обозначения цвета и ассоциация

  • Белый цвет — лёгкость, часто используется для фона сайтов, в сочетании с другими цветами делает контраст, воздушность, пушистости, простоты, свежести, доброты, невинности.
  • Розовый цвет — подходит больше для женской аудитории и если ваш сайт о косметике тогда этот цвет можно использовать. Выражение это цвета вызывает чувство романтичности, женственности, слабости, привязанности, пассивности, воспитанности.
  • Фиолетовый цвет — часто переменяется для лендингов ювелирных изделий, так как с помощью этого цвета можно произвести впечатления роскоши, богатство, магии, мудрости, независимости, достоинства и тайны.
  • Зелёный цвет — тёплый, применяется для медицины, натуральных продуктов, очень комфортный подходит для любых возрастных категорий. Ассоциируется с процветанием, питания и здоровья, новое рождение, исцеление, успокаивающий, деньги, исцеление, в сочетании с красным применяется для праздника Рождества, часто создаются сайты, связанные деньгами.
  • Красный цветчасто используется в распродажах и скидках. Цвет подойдёт для сайта знакомств. Считается агрессивным, связан с азартом, цвет любви, энергии, силы, страсти, в сочетании с белым используется на праздник Св.Валентина, Фэн-шуй, огонь, удача.
  • Жёлтый цвет — так же как и красный применяют для скидок и хлебобулочных изделий, сладостей, выпечки, солнечные лучи, тепло, счастье, мудрость.
  • Синий цвет — подходит для мужской аудитории, статистика показывает то, что мужчины дольше задерживаются на сайтах с таким цветом. Подходит для магазинов, продающих спортивную одежду, спортзалов. Часто используют в сочетании с жёлтым цветом. Профессионализм, доверие, святость, духовность, вода, небо, доверие, релаксация.
  • Чёрный цвет — классический цвет используют для удобочитаемости контента, строгий, подходит для мужской аудитории, часто используется для сайтов, связанных с машинами и техникой, успех в карьере, доход, сила, стабильность, власть, изысканность, консервативность.
  • Серый цвет — чувство серьёзности, консерватизма, в сочетании часто применяется с синим, оранжевым, зелёным. Подходит ко многим цветам.
  • Оранжевы цвет — чувство теплоты, спокойствия, дружелюбия, энергии и уникальности. Используется в сочетании коричневого, чёрного, белого цвета. Ассоциируется с пляжами и отдыхом. Часто применяется для сайтов, связанных с туризмом и тёплыми странами.
  • Коричневый цветпозитивный цвет, вызывает ощущения теплоты, дружелюбия, изысканности и роскоши, выражает тепло надёжность. Часто используют для сайтов с тематикой кофе, деревянные изделия, сладости из шоколада. Сочетается с оранжевым, светло-бежевым, жёлтым, белым.

Спектр цвета

  1. Основные цвета: Жёлтый, синий, красный. В теории цвета говориться о том, что эти три цвета невозможно получиться путём смешивания других цветов. И из этих трёх пигментов можно получить остальные цвета.
  2. Составные или вторичные цвета: Зелёный, фиолетовый, оранжевый. Такие цвета образуются при смешиванье основных пигментов цвета.
  3. Вспомогательные цвета: сине-фиолетовый, жёлто-оранжевый, жёлто-зелёный, сине-зелёный. Цвета, которые получаются путём смешивания вспомогательных и составных.

Психология цвета

  • Белый — ассоциируется с чистотой, верностью, символизирует завершённость, совершенство, свободу и снятия любых препятствий. Чистота в религии и простота. Этот цвет считает равенством с ним сочетаются все цвета. Если ваш любимый цвет белый, значит, часто изолируетесь от общества и окружающих дел, такие люди могут разочаровываться во всём и часто скучать в одиночестве. А иногда открываться всему миру, легко почувствовать вранье и легко вскрыть истину какой-то проблемы.
  • Серый — цвет нейтральности, многие предпочитают носить серую одежду и столько же людей отказывается наотрез от этого цвета. В основном такой цвет предпочитают люди деловые, так как он не отвлекает от важных дел при всей своей серости дружелюбен и надёжен. Люди, которые предпочитают серый ставят на первое место в первую очередь разум а, не эмоции.
  • Чёрный — это консервативность, авторитетность. Если мы видим человека в чёрном или машину, сотовый телефон. То на подсознании такие личности становятся для нас весомыми в обществе, богатый. Наверное, поэтому так часто мы видим офисных работников в чёрной одежде. А богатых людей на чёрных лимузинах.
  • Жёлтый — этот цвет стимулирует работу мозга и нервной системы. Вызывает чувство теплоты, радости и успеха. Люди, который любят такой цвет, раскрытые, всегда добиваются поставленной цели, самоуверенны, весёлые, жизнерадостные. У таких людей расположенность к креативности. В трудную минуту жёлтый помогает концентрировать внимания. Они как факт ещё те сплетники, очень самокритичны к себе и к окружающим, их самооценка всегда завышена.
  • Оранжевый — этот цвет при плохом настроении поднимет его. Нужно посмотреть на, что-то такого цвета. И появиться бодрость и прилив энергии. В зимнее время этот цвет напоминает нам о солнце, пляже, пальмах. Люди, которые предпочитают такой цвет 100% творческие личности. Они сильно свободолюбивы и ранимы, прощают всех. Такие люди обладают большим скоплением энергии которую они часто используют при очередном создании шедевра.
  • Розовыймягкий и нежный цвет. Успокаивающий агрессивность. Прейдя домой усталым и, без настроения посмотрите на что-то розовое и ваша агрессия исчезнет. Люди, которые любят это цвет нелегкомысленные, трудолюбивы. Но часто также встречаются личности, предпочитающие такого оттенка, легкомысленными, инфантильными.
  • Коричневый — такой цвет любят люди, уверенные в себе. Он несёт надежду и веру  и исполнения желаний. Такие люди любят работать и никогда не врут. Если вы ищите работу, то наденьте что-то в таком цвете.
  • Синий — такой цвет помогает, внушит, к себе доверия, а также несёт уважения к вашей личности. Если деть одежду в таком оттенке, то таким образом, вы покажете свой высокий социальный статус и стабильность. Цвет воды, льда охлаждает и занижает чистоту пульса. Со стенами, окрашенными в таком цвете спортсмены, чувствуют себя лучше. Часто используется в тренажёрных залах и магазинах со спортивными товарами.
  • Фиолетовыйопасный цвет. Такой цвет давит на психику вызывает депрессию. Использовать в дизайне такой цвет надо с большой аккуратностью и малом количестве. В окрашивании некоторых элементов. Людям которым нравится такой цвет часто самокритичны к себе, им сложно реализоваться в жизни. В книгах о психологии цвета упоминается, о людях, страдающих психическими расстройствами. Многие выдающие художники любили такой цвет.
  • Красныйцвет любви, часто мы можем заметить людей которым не хватает внимания в отношениях личностного плана. Такие люди начинают красить волосы в этот цвет, носят одежду красного цвета таким образом, пытаются привлечь к себе внимания, считаются лидерами. Цвет агрессивный, возбуждающий, горячий, привлекает внимание в рекламе. Если долго смотреть на что-то красное, то может подняться давление и участиться пульс.
  • Зелёный — тёплый, природный успокаивающий цвет. Нормализует высокое давление, исцеляет и расслабляет. Поднимает настроение ассоциируется с тёплым сезоном года. Люди, предпочитающие этот цвет, обычно с богатым внутренним миром, любят приходить на помощь другим. Чётко и рационально выбирают свой путь, к жизненным задачам подходят со всей серьёзностью.

Подбираем гамму цветов

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

garmoniya-odinakovye-po-svetlote-i-nas

  • Первый вариант, который вы можете использовать для подбора цветов. Это принцип по убыванию и насыщенности цвета. На картинке мы видим единицу, значит, все цвета выбираем в такой насыщенности. Либо в пастельных тонах, менее насыщенных под №2. Выбираем все цвета с указанной цифрой №2.
  • Второй вариант монохромной гармонии.

garmoniya-monokhromnaya

Выбираем определённую группу цветов, как указано на рисунке и используем различные оттенки этого цвета.

  • Третий вариант в сочетании трёх цветов (триада). В таком способе можно использовать три цвета.

garmoniya-po-principu-triady

Которые находятся с друг другом в палитре цветов.

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

Это цвет должен охватывать большую часть вашего сайта.

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

  • Четвёртый вариант заключается в принципе противоположных цветов.

garmoniya-protivopolozhnykh-cvetov

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

  • Пятый вариант принцип равнобедренного треугольника.

garmoniya-ravnobedrennogo-treugolni

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

Получиться гамма-из трёх разных цветов.

А так же как и в других вариантах уровень насыщенности должен быть одинаковый и какой-то из трёх цветов должен быть доминирующий.

 

Все представленные варианты можно соединять между собой.

Таким образом. Выбираете три цвета близкие к друг другу №3.

и вариант №4 противоположных цветов.

kombiniruem-monokhrom-triada-protivo

Получаем цветовую гамму для вашего сайта.

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

Синий главный цвет этот цвет будет использоваться в большем количестве 50%. Потом голубой 20% и дополнительные три цвета по 10%.

Подборку цветов можно выполнить самостоятельно с помощью программы

(Photoshop) и определится с цветами. А также с помощью специальных сайтов для дизайнеров.

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

10.сервисов по подборке цветов

  1. http://colorscheme.ru/

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

  1. https://material.google.com/style/color.html#

Это сервис удобный как для дизайнеров, так и для фронтенд — разработчиков. С помощью него не только можно посмотреть названия цветов, и также цветовые образцы (номер).

  1. https://color.adobe.com/ru/create/color-wheel/

Похожий на сервис colorscheme в использовании также можно подобрать цветовую систему, последовательную, монохромную, треугольную, комплементарную, составную, произвольную.

  1. https://color.hailpixel.com/

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

  1. http://alssndro.github.io/trianglify-background-generator/index.html

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

  1. https://www.materialpalette.com/

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

  1. http://www.colorpicker.com/

Сервис идентичен палитры программы (Photoshop).

  1. https://galactic.ink/sphere/

С помощью этого сервиса можно подобрать сразу 6 цветов, прокручивая палитру на определённый градус. А так же как и в предыдущих вариантах указан номер цвета. Очень удобно для верстальщиков при работе с css.

  1. http://color.romanuke.com/

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

  1. http://www.degraeve.com/color-palette/index.php

Аналогичный сервис предыдущему.

Помните:

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

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