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

Как подобрать цвета для сайта?

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

Знание ключевых правил колористики поможет выбрать грамотное цветовое решение.

Как цвета влияют на бренд и сайт?

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

Использование красного цвета в бренде Кока-Колы имеет два основания:

• Яркий цвет хорошо выделяется на полках среди других напитков с менее приметными этикетками.
• Цвет вызывает определенные эмоции, к которым апеллирует компания: красный всегда ассоциируется с любовью, страстью, определенной энергетикой.

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

Разрабатывая дизайн, нужно обратить внимание на три нюанса:

1. Выбрать ключевой цвет, превалирующий на странице.
2. Подобрать пару оттенков (не более 3), акцентирующих внимание на важных деталях.
3. Выбрать фоновый оттенок, чтобы оформление было законченным и гармоничным.

Как выбрать ключевой цвет?

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

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

Стоит также учитывать значения цветов

1. Зеленый символизирует здоровье, покой, достаток и природу. Этот цвет приятен для восприятия, помогает расслабиться. Кстати, по статистике зеленый – один из самых приятных оттенков как для мужчин, так и для женщин.
2. Красный – символ любви, страсти или опасности и тревоги. В маркетинге часто используется, чтобы подтолкнуть человека к покупке, сообщить о выгодных условиях, о необходимости сделки. В общепите помогает вызвать аппетит.
3. Желтый олицетворяет молодость, свежесть, оптимизм. Популярен для привлечения внимания. Но нужно знать еще, что желтый может стать причиной эмоционального напряжения, так что применять его нужно с осторожностью.
4. Розовый всегда связан с романтикой, женственностью, нежностью и легкостью, поэтому его берут в основном для дизайна сайтов с товарами и услугами для девушек.
5. Оранжевый – это символ творчества, дружелюбия. Он побуждает людей к действию, мотивирует. Такой цвет способен подталкивать к импульсивным покупкам и шагам, поэтому его часто используют для оформления Call-to-action кнопок.
6. Синий вселяет некую уверенность, чувство безопасности, спокойствия и умиротворения. Из-за этого цвет широко используется различными коммерческими организациями и банками.
7. Черный – элегантный и роскошный цвет. Популярен для рекламы и продвижения люксовых дорогих продуктов.
8. Фиолетовый ассоциируется с достатком, успешностью и мудростью. Успокаивает людей, вселяет доверие. Очень популярен для оформления сайтов, связанных с косметикой.
9. Серый – это универсальность, лаконичность и минимализм. Он символизирует осторожность и надежность.

Как воспринимают цвета мужчины и женщины?

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

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

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

Где на сайте использовать основной цвет?

Если теперь вы уже решили, какой цвет будет главным на вашей странице, нужно определиться, где и как именно его нужно применять. Этот оттенок должен акцентировать внимание, так что не стоит им оформлять все подряд. Используйте основной цвет в тех местах, которые считаете ключевыми, где хотите задержать внимание посетителя или замотивировать его сделать какое-то действие (кнопки Call-to-action).

Где лучше всего применить основной цвет?

• Логотип;
• Раздел меню;
• Главная кнопка, призывающая к действию;
• Название
• Важные факты.

Как применять акцентные оттенки?

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

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

Где можно употребить акцентные цвета?

• Кнопки
• Подзаголовки;
• Дополнительная информация важного характера;
• Кнопка перехода в раздел меню.

Как выбрать и использовать фоновый цвет?

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

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

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

1. Adobe Color

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

2. Colorscheme

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

3. Hailpixel

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

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

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

• выберите основной цвет в соответствии с логотипом;
• подберите правильные дополнительные цвета;
• выберите фон, сочетающийся с другими цветами и не перекрывающий текст.

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

> Создать сайт

где найти и как выбрать

Различных инструментов создания палитры существует много; мы выбрали десятку самых популярных, среди которых сервисы и для начинающих дизайнеров, и для профессионалов.

Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.

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

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

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

Material Color Tool — сервис специально был создан в помощь дизайнерам пользовательских интерфейсов. Главная особенность в том, что выбранную цветовую палитру можно сразу применить к схеме веб-страницы и оценить, насколько удачным получится результат.

Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.

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

Colourcode — во многом сервис похож на Colordot, но с более гибкими настройками и возможностью выбрать комбинацию оттенков по триадным, монохромным, аналоговым и другим стилям цвета.

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

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

Как цвет вашего сайта воздействует на психику клиента / Блог компании RedHelper / Хабр

Теория Цвета гласит, что каждый цвет оказывает свое воздействие на психику человека. О том, как подобрать нужные для сайта цвета и что такое «цветовое колесо» — в переводе статьи от выпускника Калифорнийского университета Ника Роджаса (Nick Rojas).

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

Оказывается, красный цвет действует как стимулятор (вызывая аппетит, пробуждая голод) и привлекает к себе внимание, тогда как желтый создает ощущение скорости и срочности. Классические примеры – Макдональдс, KFC, Стардог!s. Теперь подумайте о Вашем собственном сайте и его дизайне. С большой долей вероятности в процессе его создания цвета выбирались без учета Теории Цвета, обходясь привычными цветами Вашего бренда.

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

Что такое Теория Цвета

Интересный факт, о котором мало кто знает — художники используют Теорию Цвета уже сотни лет. Но история ее применения в бизнесе и маркетинге намного короче.

Одна из первых современных трактовок Теории Цвета была написана около ста лет назад Альбертом Манселлом (Albert Munsell). Манселл придумал для описания цветовых свойств трехкомпонентную модель, в которой цвет выявляется с помощью трех понятий – значения/ценности (англ. value), оттенка (англ. hue) и насыщенности/яркости (англ. croma).

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

Зачем применять Теорию Цвета на ваших сайтах

В настоящее время Теория Цвета становится все актуальнее в сфере интернет-маркетинга в связи с ростом значимости показателя отказов и других статистик взаимодействия. Когда посетитель

за доли секунды решает

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

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

Как подбирать цвета для сайта

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

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

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

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

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

Настроение и эмоции

Отвлекитесь на минутку от дел и задумайтесь о цветах, которые Вы используете, осмотрите Ваш сайт и представьте — какие чувства Вы хотите вызвать у пользователя?

Красный

Красный — интуитивный, цвет физической силы. Цвет крови. Когда Вы смотрите на красный, у Вас учащается пульс, возникает чувство срочности; цвет придает мужества, силы и пробуждает бунтарский дух – это один из самых мощных цветов. Сайт онлайн-консультанта RedHelper прекрасный пример использования красного в оформлении и расстановке акцентов.

Оранжевый

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

Желтый

Желтый — цвет молодости. Он символизирует оптимизм и игривость, творческие порывы и спонтанность. Желтый — смелый цвет. Он не агрессивный, но очень заметный. Отличный пример — сайт представительства Nikon в России.

Зеленый

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

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

Синий

Синий — это цвет искренности. Цвет воды и неба, а так же — главный цвет интернета (вспомните, какого цвета ссылки по умолчанию). По этой причине, его уникальность в онлайн-бизнесе не так велика, как у других цветов. В этом цвете по минимуму импульсивности и спонтанности, он связан с логикой и прохладой. Хороший пример — сайт гипермаркета оптовых закупок METRO Cash&Carry.

Фиолетовый

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

Сайт мессенджера Viber отлично демонстрирует, как фиолетовый вызывает ощущение простоты и честности.

Розовый

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

Черный

Первоклассный, утонченный цвет, цвет роскоши. Он свидетельствует о профессионализме, вкусе, заставляет прочувствовать всю изысканность предложения. Рассматривается как мужской аналог розового, и может слегка оттолкнуть женскую аудиторию. Красноречивый пример — интернет-магазин якутских бриллиантов ЭПЛ.

Теория Цвета в дизайне сайта

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

Использование основных правил Теории Цвета при разработке дизайна сайта поможет Вам увеличить его привлекательность для посетителей. В сфере, где от успеха до провала отделяет несколько секунд, используя грамотную стратегию управления цветом Вы сможете в разы увеличить конверсию. Цветовые решения — один из самых недооцененных способов влиять на привлекательность Вашего сайта в глазах посетителей. Теория Цвета поможет понять, что испытывают пользователи при первом взгляде на Ваш сайт. Обратите на него внимание, кстати. О чем говорят ваши фирменные цвета?

Цвет в веб-дизайне. Особенности использования. Как выбрать цвет для сайта?

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

По данным опросов, 9 из 10 пользователей не доверяют сайтам с плохим дизайном. Около половины людей считают, что охотнее верят сайту с минималистичным оформлением, чем сложным и броским. Не меньше трети интернет-пользователей считают ресурсы с устарефрим оформлением заброшенными и стараются с такими не взаимодействовать.

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

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

Мы поговорили с дизайнерами и маркетологами, чтобы сформулировать максимально развернутый ответ на вопрос: как правильно подобрать цвета сайта, чтобы он нравился целевой аудитории. Но, обо всём по порядку.

Что нужно знать о сочетании цветов

О сочетании цветов спектра говорил еще сэр Исаак Ньютон, создавший в 1706 году цветовое кольцо. Цветовое кольцо — это круг, разделенный на сегменты. В базовой версии кольца ­первичной, есть сегменты только трех основных цветов: красного, зеленого и синего. Для получения спектра второстепенных цветов нужно смешать соседние цвета сегментов первичного кольца. Звучит сложно, поэтому лучше один раз увидеть, чем трижды прочитать:

Усложнение цветового кольца: от первичного до третичного

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

1. Монохроматическая. Для оформления выбирается один основной цвет, а дополнительные формируются из его оттенков (регулируется насыщенность, светосила).
2. Комплементарная. Подбор цвета для веб сайта начинается с выбора двух контрастных тонов, которые дополняются еще несколькими производными оттенками.
3. Сплит. Схема похожа на комплементарную, но один из контрастных цветов заменен на два похожих из соседних сегментов круга.
4. Аналоговая. Согласно этой схеме выбираются 3 цвета для сайта из идущих подряд соседних сегментов: один используется в качестве основного, а два других играют роль дополнительных.
5. Триада. Дизайнер берет три цвета, одинаково удаленных друг от друга, и на их основе формирует цветовую палитру.
6. Прямоугольник. Здесь в игру вступают четыре цвета, а каждая пара подбирается по принципу контраста.
7. Квадрат. Схема напоминает предшествующую, но все цвета одинаково удалены друг от друга.

Помимо схем сочетания цветов, при оформлении сайта учитываются цветовые модели:

• RGB, построена на трех основных цветах: красном, зеленом, синем. Все прочие оттенки образуются путем смешивания этих цветов.

  В HTML оттенки кодируются символами от 00 до FF, перед которыми вводится символ #.

  
  

• CMYK, основана на четырех основных цветах: голубом, пурпурном, желтом, черном, и включает оттенки, образованные их соединением.
  Такую модель используют в печати и полиграфии чаще, чем в веб, но постепенно ситуация меняется. Это сочетание цветов в web-дизайне выглядит ярко и необычно, привлекает внимание.
  

Наглядный пример построения цветового сочетания на базе CMYK для оформления сайта: mirkleya.com.ua.

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

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

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

1. Фирменный стиль. Когда есть готовый фирменный стиль и логотип, который уже закрепился в памяти людей, стал узнаваемым, или вы планируете его таким сделать, нужно обязательно обыграть брендовые цвета в дизайне сайта. Но при этом нужно учитывать, как выбранные цвета сочетаются между собой, как они будут смотреться в оформлении сайта. В некоторых случаях цвета из логотипа можно заменить похожими оттенками, регулируя интенсивность, жесткость и другие параметры цвета.
2. Тематика. Цвета для оформления сайта должны соответствовать его тематике или продукту/услугам, которым он посвящен.

   Например, бренды парфюмерии часто выбирают оттенки фиолетового, эко-бренды — зеленого, соцсети — синего, кофейни — коричневого. о это не значит, что вы не можете сделать фирменным цветом кофейни — белый, а соцсеть «покрасить» в красный, как сделал небезызвестный Pinterest.

   
   

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

Цвета и психологические особенности их восприятия

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

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

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

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

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

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

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

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

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

Сколько цветов нужно выбрать для оформления?

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

Оптимальная рабочая палитра для дизайна сайта — это 3-4 цвета:

• Основной цвет — им выделены ключевые акценты на страницах;
• Дополнительный — используется для второстепенных блоков, выгодно сочетается с основным, но не отвлекает от него.
• Фоновый — спокойный оттенок, на котором не теряются основной и дополнительный цвета.
• Цепляющий — контрастный к основному цвет, который притягивает внимание посетителя к целевым точкам: кнопкам, формам, объявлениям.

На подбор цвета сильно влияет основная цель сайта.

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

Лучшие цвета для оформления сайта можно подбирать самостоятельно или воспользоваться готовыми решениями сервисов: colourlovers.com, color.romanuke.com, paletton.com, flatuicolorpicker.com и их аналогами. Но учтите, что гармония оттенков не даст вам гарантии того, что сайт понравится целевой аудитории и окупит расходы на разработку.

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

Как узнать, что определенные цвета нравятся целевой аудитории

В мире цвета понятие «нравится» достаточно размытое. Особенно когда речь идет о цветах, используемых на веб-страницах. Ведь ни один пользователь, разве что кроме некоторых дизайнеров и художников, не скажет вам, что выбирает определенные сайты только потому, что у них фон синенький, красненький или беленький. На самом деле сознательно аудитория о дизайне не задумывается, зато подсознательно — очень даже.

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

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

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

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

Редизайн, дизайн лендинга, интернет-магазина, корпоративного сайта, визитки, а также разработка сайта под ключ — всем этим в студии «Бизнес Сайт» занимаются профессиональные веб-дизайнеры. Примеры их работ есть в портфолио, посмотрите и убедитесь, то разработанные ими странички выглядят гармонично и привлекательно, и секрет там не только в цвете.

Какие 3 самых популярных цвета для оформления сайтов?

Как подтвердит большинство маркетологов, психология восприятия цвета имеет огромное влияние на отношение посетителей к online ресурсу. То, как целевая аудитория отреагирует на рекламную кампанию или воспримет ваш лендинг, тоже во многом определяет цвет.

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

Цвет очень важен

Около 85% покупателей отмечают, что цвет является основной причиной выбора продукта, и это справедливо для всего, от автомобилей до обуви. К продаже услуг данный фактор относится не меньше. Но почему? Узнаваемость бренда зависит на 80% от цветового оформления, которое вызывает доверие потребителя.

В интернет-маркетинге ситуация не менее серьезна — цвет существенно влияет на показатели продаж. 42% покупателей формируют мнение о веб-сайте на основе его дизайна, в том числе и благодаря цветовой гамме. Более того, 52% покупателей не посетят лендинг или сайт снова, если им не понравилось его оформление.

Цвет, по данным исследований нейробиологов, обладает способностью притягивать определенные сегменты людей, менять предпочтения и влиять на поведение аудитории.

1. Голубой символизирует безопасность

Самая «безопасная» цветовая гамма — синяя. Любой ее оттенок «работает» и каждое сочетание с синим эффективно. Но что подразумевается под словом «безопасность» в данном контексте?

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

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

Если посмотреть на вопрос с другой стороны, то практически никто из респондентов не счел синий раздражающим или просто нелюбимым. По данным опроса, только 1% мужчин и 0% женщин заявили, что синий — самый отталкивающий оттенок для них.

Почему он так популярен? Теорий на этот счет несколько. Некоторые основаны на том, что синева ясного неба («безопасная» погода) или океана (который отражает безоблачное небо) ассоциируются у людей с надежностью, уверенностью и властью.

Многие сайты используют цвет «безопасности», за примерами не стоит ходить далеко. Самая крупная социальная сеть, Facebook, оформлена в оттенках синего.

Twitter не отстает.

И, да, даже LinkedIn любит синий цвет.

Wal-Mart — крупнейшая в мире розничная сеть — пошла той же дорогой.

Многие банки используют этот подход. Основной цвет Citibank — синий с ярко-красной дугой.

Bank of America использует красный, но основной цветовой акцент в их логотипе — на синем цвете.

У Chase Bank светло-синий сайт и логотип.

Большинство компаний, работающих в отраслях, где доверие и надежность очень важны, используют много синего в своем брендировании. Ниже показана целевая страница First American Home Warranty — компании, предлагающей услуги по техническому обслуживанию домов.

USAA, Американская ассоциация автосервисов — основной дистрибьютор страховых полисов. На их сайте преобладает синий цвет.

New York Life, один из лидеров по страхованию жизни, использует хорошо известный синий квадратный логотип.

Среди российских брендов можно выделить Yota:

И, конечно же, социальная сеть ВКонтакте:

Подводя итог: вы не ошибетесь, если выберете оттенки синего для оформления своего ресурса. Даже если его слишком много, он все равно «работает».

Карен Галлер (Karen Haller), специалист в области прикладной психологии цвета, пишет о синем следующее:

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

2. Зеленый символизирует рост

Основной посыл зеленого — рост. Причины ассоциации очевидны: большинство растений — зеленые.

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

Бренд Subway позиционирует себя как здоровая альтернатива фастфуду и использует зеленый в качестве корпоративного цвета на логотипе и официальном сайте.

Зеленый используется в оформлении крупнейшего IT блога Techcrunch.

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

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

Российский пример напрашивается сам собой. Разумеется, это Сбербанк:

3. Будьте осторожны с оранжевым

Оранжевый — один из тех цветов, которых стоит опасаться. Как утверждают психологи, он наиболее тесно связан с риском. Но почему? Прислушайтесь к инстинктам. Когда вы видите надпись оранжевого цвета, что-то внутри говорит: «Стой! Здесь может быть опасно!»

Охотники носят оранжевые жилеты, чтобы их не подстрелили по ошибке. Строители в опасных ситуациях тоже надевают оранжевые жилеты или каски.

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

Home Depot апеллирует к духу авантюризма у покупателей товаров категории DIY («Сделай сам»). Цвет их логотипа красноречиво отражает эту философию.

Есть риск использования оранжевого цвета — он воспринимается «дешево». Гипотеза, выдвинутая в исследовании Forbes в 1991 г., подтверждает это: почти четверть опрошенных назвали оранжевый «дешевым».

Писатель и бизнес-психолог Эми Морин (Amy Morin) тактично назвал «дешевыми» оттенки оранжевого, говоря об этом так: «Люди часто ассоциируют оранжевый цвет с хорошей скидкой, низкой ценой. Но «хорошая цена» редко говорит о высоком качестве».

Обозреватель Washington Post Джефф Туринтайн (Jeff Turrentine) предпринял мучительную попытку реабилитировать оранжевый цвет. Он отметил, что «нет ничего сомнительного в ярко-оранжевом», но признал, что иногда тот вызывает «вульгарные ассоциации».

Независимо от вашего намерения, будьте осторожны с этим цветом.

У HootSuite в логотипе присутствует оранжевый.

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

Однако многие компании используют оранжевый цвет достаточно успешно. Кстати, если вы обратите внимание, то увидите, что многие эффективные CTA-кнопки — оранжевые.

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

Вывод

При выборе цветов для оформления ресурса лучшим решением будут зеленый и синий.

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

Голубой внушает чувство спокойной уверенности, при этом он наиболее легкий для восприятия. Менее 1% пользователей считают этот цвет раздражающим. Поэтому большинство успешных социальных сетей оформлены в оттенках синего и голубого — люди проводят многие часы своей жизни, читая ленты новостей ВК или Facebook, постоянно проверяют Twitter и т. д. А чтобы человек мог провести в социальной сети действительно долгое время, ее оформление должно минимально отвлекать и не раздражать посетителя.

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

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

А теперь забудьте все, что прочитали выше :). Цвет лишь инструмент в процессе оптимизации конверсии.

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

Высоких вам конверсий!

По материалам: blog.crazyegg.com, image source splitshire 

16-12-2014

Как правильно выбрать цвета для сайта? Что такие цветовые схемы для сайта?

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

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

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

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

Знание всего нескольких правил позволит сделать выбор цветовых решений не таким тяжелым.

Прочитав эту статью, вы узнаете, как:

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

Если я попрошу вас подумать о Кока-Коле, что первым придет вам на ум? Скорее всего, в вашем воображении всплывёт красный логотип Кока-Колы:

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

Красный в цветовой схеме несет в себе два важных послания:

1. Ярко-красные этикетки сильно выделяются на фоне остальных на прилавках с газировкой.
2. Каждый цвет вызывает определенные эмоции. Когда мы видим красный, у нас на подсознательном уровне возникает чувство возбуждения, любви и страсти. Именно эти чувства Кока-Кола хочет вызвать своими напитками:

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

85% покупателей признают, что основной причиной покупки товара явился его цвет.

Узнаваемость бренда увеличивается на 80% при использовании цвета.

При разработке дизайна сайта нужно:

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

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

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

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

Каждый цвет привлекает свою группу покупателей, и даже может повлиять на их выбор:

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

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

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

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

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

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

Желтый – символ молодости, оптимизма и жизнерадостности. Часто используется, чтобы привлечь внимание. Также желтый может вызвать напряжение, так что используйте его в небольших количествах.

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

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

Розовый – женственный, сладкий, невинный и романтичный. Часто используется в предложении частных услуг и товаров для девочек и женщин.

Фиолетовый – символ величия, богатства, успеха и мудрости. Часто присутствует в косметике. Влияет на людей успокаивающе.

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

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

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

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

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

На кого преимущественно рассчитан ваш сайт, на мужчин или на женщин? А может и на тех, и на других?

Мужчины предпочитают яркие цвета, а женщины приглушенные.

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

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

Женщинам больше нравятся светлые оттенки. Причиной этого является их усиленное восприятие определённых цветов.

Женщины

Наиболее предпочтительные цвета: синий, фиолетовый, зеленый.

Наименее предпочтительные цвета: оранжевый, коричневый, серый.

Мужчины

Наиболее предпочтительные цвета: синий, зеленый, черный.

Наименее предпочтительные цвета: коричневый, оранжевый, фиолетовый.

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

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

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

Часто люди покупают определенные товары или услуги, чтобы произвести конкретное впечатление на других.

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

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

Теперь ясно?

Подумайте об идеальном представителе целевой аудитории. Каким он хочет казаться другим людям?

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

Теперь, когда вы определились с главным цветом своего сайта, вам нужно понять, как правильно его использовать. Цвет привлекает много внимания, так что не нужно пытаться использовать его везде, где только можно.

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

Например, позвонить по телефонному номеру, заполнить форму, подписаться на обновления и т.п.

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

• Логотип;
• Вкладки меню;
• Кнопка «Позвонить»;
• Важная информация;
• Заголовки и названия;
• Кнопки.

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

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

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

Как только вы определились с преобладающим цветом, нет ничего проще, чем подобрать акцентные цвета с помощью таких программ, как Adobe Color CC Tool:

Вот короткая инструкция, которая покажет вам, как создать цветовую схему одним из двух способов:

Шаг 1. Для начала узнайте код вашего преобладающего цвета. Например, на сайте ColorPicker.com. Код цвета указан в прямоугольнике прямо над квадратом с цветовой палитрой.

Скопировав код с ColorPicker.com, вставьте его в поле «НЕХ» инструмента Adobe Color. Убедитесь, что вы вставили код в колонку посередине:

Вставьте код преобладающего цвета вашего сайта в прямоугольник ПОСЕРЕДИНЕ.

Как только вы зададите цвет, Adobe Color отобразит его на экране вместе с другими комплементарными цветами.

Шаг 2. В левой верхней стороне вы увидите прямоугольник со следующими цветовыми схемами:

• Последовательная;
• Монохромная;
• Треугольная;
• Комплементарная;
• Составная;
• Оттенки.

Выберите цветовую схему

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

Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета.

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

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

CMS и конструкторы сайтов позволяют вставить цветовые коды (HEX) для выделения любой части вашего сайта:

Скопируйте цветовые коды (HEX) для вашей цветовой схемы для сайта.

Порой проще искать цветовые решения на просторах интернета и вдохновляться ими.

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

Шаг 1. Загрузите фотографию:

Нажмите на значок камеры, чтобы загрузить изображение.

Шаг 2. Выберите одно из пяти цветовых настроений:

• Красочное;
• Яркое;
• Приглушенное;
• Насыщенное;
• Темное.

Поэкспериментируйте с цветовыми настроениями, чтобы понять, какое вам ближе:

Выберите цветовое настроение.

Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета по изображению:

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

Шаг 4. Предложенная цветовая палитра расположена под изображением. Вот как можно подобрать цветовую схему для вашего веб-дизайна.

Чтобы увидеть коды (HEX) цветов, нажмите на цветное колесико, расположенное в правом верхнем углу:

Нажмите на цветное колесико, чтобы увидеть коды цветов:

Скопируйте цветовые коды (HEX) для вашей цветовой схемы.

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

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

• Активная кнопка меню;
• Подзаголовки;
• Выделение второстепенной информации.

Вам когда-нибудь приходилось красить стены в своем доме?

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

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

Выбор фонового цвета для сайта не сильно отличается от выбора краски для вашей комнаты!

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

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

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

Фоновый цвет вашего сайта зависит от того, на что вы хотите обратить внимание пользователей.

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

Замечали ли вы, что информационные ресурсы и интернет-магазины часто используют белые или нейтральные цветовые схемы для сайта?

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

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

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

При создании корпоративного ресурса преследуется одна цель – продвижение товаров или услуг.

В зависимости от того, какова цель вашего сайта, фоновый цвет должен отличаться.

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

Все потому, что цвет напрямую влияет на узнаваемость бренда (помните пример про Кока-Колу?) Когда вы используете различные оттенки цвета своего бренда в качестве фона, вы усиливаете его и делаете более запоминающимся для клиентов.

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

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

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

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

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

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

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

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

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

Используйте цвета, которые нравятся вашей потенциальной аудитории, и тогда ресурс надолго засядет у людей в памяти. Это выделит вас среди конкурентов.

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

• Выбрать для сайта правильный преобладающий цвет;
• Выбрать для преобладающего цвета правильные вспомогательные цвета;
• Выбрать соответствующий фоновый цвет.

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

Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!

Данная публикация является переводом статьи «How to Choose a Good Color Scheme For Your Website» , подготовленная редакцией проекта.

Выбор цвета для дизайна сайта. Примеры: 50 великолепных цветовых схем

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

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

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

На что влияет выбор цветовой палитры

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

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

50 великолепных цветовых схем для дизайна вашего сайта

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

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

1. Красочные и сбалансированные

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

2. Яркие цвета с сильным акцентом

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

3. Природные и земные цвета

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

4. Свежие и лаконичные цвета

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

5. Смелые и яркие

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

6. Черные с ярким акцентом

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

7. Стильные и утонченные

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

8. Оттенки красновато-коричневого

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

9. Мистические темные цвета

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

10. Современные и смелые

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

11. Живые и привлекательные цвета

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

12. Поразительно простые цвета

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

13. Оттенки живого красного

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

14. Вычурные и креативные

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

15. Элегантные и доступные

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

16. Футуристические цвета

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

17. Инновационные и смелые

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

18. Текстурированные и динамичные

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

19. Теплые оттенки и минимализм

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

20. Яркие и контрастные цвета

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

21. Чистые и энергичные

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

22. Традиционная бизнес-классика

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

23. Глубокий сдержанный синий

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

24. Чистые и современные

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

25. Яркие и элегантные

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

26. Веселые и задорные цвета

Эта игривая и красочная схема сочетает в себе несколько ярких оттенков: ярко-бирюзовый, мандариново-желтый и темная орхидея Она отличноподойдет для смелых молодежных проектов

27. Минималистичные контрастные цвета

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

28. Эффектные цвета с четким акцентом

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

29. Современные и актуальные цвета

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

30. Природные естественные цвета

Эта природная комбинация зеленого с рядом синих оттенков идеально подходит для консервативных проектов, призванных создать образ стабильности, надежности и изобилия.

31. Ярко-розовые и пастельные

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

32. Уникальная необычная комбинация цветов

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

33. Яркие цитрусовые цвета

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

34. Энергичные голубые и апельсиновые цвета

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

35. Оттенки бородово-красного и и синего

Эта гамма бордовых и красных цветов с ярко-синей кнопкой призыва к действию создает визуального интерес и сразу привлекает к себе внимание. Хорошо подходит для интересных уникальных проектов

36. Дерзкие, смелые и современные

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

37. Веселые и энергичные

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

38. Снежный, но теплый

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

39. Богатство насыщенных красок

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

40. Элегантный минимализм

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

41. Простые и бесстрашные цвета

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

42. Плоские и простые цвета

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

43. Комфортный и спокойный

Это уникальное сочетание оттенков кофе с небесно-голубым и различных оттенков коричневого делает эту успокаивающую и утешительную цветовую схему: чем-то напоминающим вашу любимую кофейню или гостиную. Отлично подходит для сферы HoReCa.

44. Классический и традиционный

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

45. Популярные акцентные цвета

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

46. Серьезный корпоративный

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

47. Гламурные и стильные цвета

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

48. Привлекательный и насыщенный

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

49. Контрастные кислотные цвета

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

50. Оптимистичные, живые успокаивающие цвета 

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

Публикация адаптирована в веб-студии АВАНЗЕТ на основе опыта гуру индустрии дизайна и статьи Найоми Чибана. Вдохновляйтесь вместе с visme и найдите для себя идеальную цветовую палитру!

18.07.2021

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

6 советов по выбору потрясающей цветовой схемы веб-сайта

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

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

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

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

1. Познакомьтесь с основами психологии цвета
2. Познакомьтесь с теорией цвета
3. Подумайте о смешивании цветовых сочетаний
4. Все просто
5. Контрастите свои цвета
6. Добавьте свой брендинг

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

1. Изучите основы психологии цвета

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

Цветовые ассоциации очень сильны. Мы развиваем их в младенчестве, и обычно они остаются с нами на всю жизнь. Эти ассоциации инстинктивны и часто подсознательны.

Многие из этих ассоциаций достаточно универсальны.Например, все учатся ассоциировать зеленый цвет с листьями и природой, а желтый — с солнцем.

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

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

2. Познакомьтесь с теорией цвета

Короче говоря, теория цвета — это наука о том, как работает цвет. Более длинную версию объяснить не так просто — для нее есть целые курсы колледжа! Но есть несколько простых концепций, которые вы можете подобрать, чтобы обогатить свое понимание цвета для дизайна своего веб-сайта.

Во-первых, вам необходимо понять первичных , вторичных и третичных цветов.

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

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

Третичный цвет создаются путем смешивания основного и вспомогательного цветов, расположенных рядом друг с другом на цветовом круге. Они создают сложные цвета; например, смешивание синего (первичного) и фиолетового (вторичного) создает сине-фиолетовый (третичный).

Во-вторых, давайте поговорим о теплых и холодных цветах.

Вы, наверное, уже имеете представление о том, что такое теплые и холодные цвета. Красные, оранжевые и желтые цвета классифицируются как теплые, а синие, зеленые и фиалки — как холодные.

В-третьих, важно понимать цветовых нюанса .

Не все цвета, которые вы видите, являются чистыми. Многие цвета, которые вы видите в Интернете, так или иначе пострадали.

Вы можете видеть оттенок (цвет с добавлением белого), оттенок (цвет с добавлением черного) или оттенок (цвет с добавлением серого).

Или вы могли бы видеть перенасыщенный или ненасыщенный цвет . Насыщенность цвета — это яркость или тусклость цвета.

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

3. Подумайте о смешивании цветовых комбинаций

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

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

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

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

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

• Дополнительные цвета располагаются на цветовом круге напротив друг друга. Дополнительная цветовая комбинация будет состоять из одного теплого и холодного цветов. Красный и зеленый — одна популярная взаимодополняющая пара.
• Разделенные дополнительные цвета состоят из основного цвета и двух цветов, смежных с дополнительным основным цветом.
• Триады и тетрадные цвета имеют аналогичные отношения. Триады используют цвета, равномерно распределенные на цветовом круге (например, красный, синий и желтый).Тетрадические цвета — это четыре цвета, состоящие из двух пар дополнительных цветов (например, красный, зеленый, синий и оранжевый).
• Аналогичные цвета располагаются рядом друг с другом на цветовом круге. В результате аналогичные цвета очень похожи, например, зеленый и желто-зеленый.
• Наконец, монохроматических цвета — это просто вариации одного и того же цвета. Это достигается за счет использования оттенков, оттенков и тонов.

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

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

4. Будьте проще

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

У простоты есть два больших преимущества.

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

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

Цветовая схема

WordStream — отличный тому пример.На главной странице используются всего три цвета: синий, оранжевый и зеленый.

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

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

Эта цветовая схема одинакова для всего сайта.Вот как выглядит одно из сообщений в блоге:

Это простая цветовая схема, но невероятно эффективная , потому что такой простоты. Это говорит о том, что ярче не всегда лучше.

Блог

Evernote — еще один отличный пример:

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

Желтый появляется часто, что делает эту цветовую схему аналогичной.

Эти простые дизайны имеют огромное влияние — помните об этом при выборе цветовой схемы своего веб-сайта.

5. Контрастность цветов

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

Это потому, что контраст создает впечатление. В частности, контраст может привлечь внимание к определенным частям страницы.

Еще раз взгляните на сайт WordStream:

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

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

6. Добавьте свой брендинг

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

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

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

Полезно узнать, что сделали и другие бренды.Вот пример с Medium:

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

А теперь приступим к (цветному) проектированию!

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

Все, что осталось, — это пойти и сделать это.

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

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

Об авторе

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

12 основных советов по выбору цветовой схемы веб-сайта

Знаете ли вы, что 85 процентов покупателей принимают решение о покупке товара на цвете?

Это правда.

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

Но если учесть, насколько мы управляемы визуально, как люди, это имело смысл.

Визуальные стимулы направляют почти все, что мы делаем.

Так почему же все должно быть иначе, когда дело доходит до покупки?

И только подумайте о некоторых из крупнейших мировых брендов.

Большинство из них, как правило, имеют четкую цветовую схему, связанную с их фирменным стилем.

В «Макдоналдсе» — красно-желтый.

Для Dell он синий.

И так далее.

Цвет и брендинг

Как мы все знаем, создание прочного бренда жизненно важно.

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

А что является неотъемлемой частью бренда?

Его логотип.

Цветовая гамма, которую компания выбирает для своего логотипа, навсегда переплетается с ее фирменным стилем.

Согласно исследованию, «Цвет увеличивает узнаваемость бренда на 80 процентов».

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

Есть еще кое-что, о чем нужно помнить. Цвет бренда коррелирует со значением бренда .

Конечно, есть некоторый компромисс между причиной и следствием, но взгляните на эту статистику:

Ценные бренды заботятся о цвете .Много!

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

Взгляните на эти примеры с сайта TheLogoFactory.com

Вы можете мгновенно обнаружить искусственные логотипы, и вы почувствуете нечто иное, окружающее этот бренд!

Цветовая схема веб-сайта

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

Вы не хотите выбирать цветовую схему наугад или основывать ее на том, «что вам нравится».

Конечно, вам нужна потрясающая эстетика и «сделать это популярным», но цветовая схема — это то, о чем вы хотите много подумать.

Почему?

«Люди подсознательно судят об окружающей среде или продукте в течение 90 секунд после первого просмотра. От 62 до 90 процентов этой оценки основано только на цвете ».

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

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

1. Понять, как цвет влияет на эмоции

Первое, что я рекомендую, — это ознакомиться с тем, как цвет влияет на человека на эмоциональном уровне.

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

Обратите внимание, что влияние цвета может варьироваться в зависимости от географического положения.

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

Я также наткнулся на справочник Color Emotion Guide , в котором объясняются эмоции, которые мы связываем с цветами, и приводятся некоторые примеры брендов, использующих каждый цвет.

Я предлагаю потратить некоторое время на рассмотрение этих примеров и подумать о психологическом значении различных цветов.

2. Учитывайте общую демографию

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

С кем вы пытаетесь связаться и продать?

Какие эмоции вы пытаетесь вызвать?

Это чрезвычайно важные вопросы, которые стоит задать себе.

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

Учитывайте личность и эмоции вашей целевой аудитории.

Затем выберите лучший цвет, который будет основным цветом для цветовой схемы вашего веб-сайта.

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

3. Учитывать пол

Хотя это не относится ко всем, некоторые компании в основном обслуживают людей определенного пола.

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

Исследование на основе Color Assignments Джо Хэллока показало, что в среднем каждый пол имеет определенные цветовые предпочтения.

Вот о чем я.

Как видите, мужчинам очень нравится синий и не нравится коричневый и фиолетовый.

Женщины любят синий и фиолетовый и не любят коричневый и оранжевый.

Это еще один фактор, о котором следует помнить.

4. Учитывать возрастную группу

Есть кое-что, о чем следует подумать, что может быть неочевидно — возрастная группа.

Знаете ли вы, что цветовые предпочтения человека могут меняться с возрастом?

Согласно исследованию Джо Хэллока, это правда.

Вот любимые цвета людей по возрастным группам.

Вот наименее любимый цвет людей по возрастным группам.

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

5. Пройдите «Цветную викторину»

Если вам нужна небольшая помощь в выборе основного цвета, вы можете пройти тест от Grasshopper.

Вас спросят, например, «что лучше всего описывает ваших клиентов» и «какой тип продукта вы предлагаете».”

Это быстро и легко (всего семь вопросов), но может указать вам правильное направление, если вы не знаете, в каком направлении двигаться.

6. Избавьтесь от предубеждений

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

И это на основании их личных предпочтений, а не психологии.

Если ваш любимый цвет — синий, очень заманчиво сделать его основным цветом.

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

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

7. Решите, сколько цветов использовать

Итак, на этом этапе вы должны иметь в виду основной цвет.

А теперь пора выяснить, сколько всего цветов вы хотите использовать.

Хотя для этого не существует универсальной формулы, я хотел бы указать на то, что называется правилом 60-30-10.

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

Вот как все это ломается.

• 60 процентов доминирующего цвета
• 30 процентов вторичного цвета
• 10 процентов акцентного цвета

Это означает, что основной цвет будет составлять примерно 60 процентов места на вашем веб-сайте, вторичный цвет будет составлять 30 процентов, а цвет акцента будет составлять 10 процентов.

Если вам нужен пример правила 60-30-10, не ищите ничего, кроме Quick Sprout.

Обратите внимание, что зеленый является основным цветом, белый — второстепенным, а черный — основным.

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

Три.

Я не говорю, что вам нужно использовать три цвета, но это хорошее число, к которому нужно стремиться.

Использование более четырех цветов может сделать вещи сложными и совершенно уродливыми.

8. Выберите цветовую гамму

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

Я не эксперт по дизайну, но одна вещь, которую вы определенно захотите достичь, — это контраст.

Лично я предпочитаю сайты со светлым фоном и более темными контрастами на переднем плане.

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

Вот хороший пример.

Однако есть сайты, которые неплохо справляются с темным фоном.

Возьмем, к примеру, «Чудо-хлеб».

9. Проконсультируйтесь с цветовым кругом

Помните, еще в классе рисования вы узнали о «цветовом круге»?

Что ж, это может быть огромным подспорьем при выборе цветовой схемы сайта.

Что вы хотите сделать, так это выбрать либо «аналогичные цвета», которые похожи и расположены рядом друг с другом на цветовом круге, либо «дополнительные цвета», которые находятся прямо напротив друг друга на цветовом круге.

Вот о чем я.

Один из возможных вариантов дополнительных цветов — желтый и фиолетовый.

Еще бы зеленый и оранжевый.

Один из вариантов аналогичных цветов — оранжевый и красный.

Другой будет зелено-синим.

10. Используйте вспомогательные инструменты

Вот совет по оптимизации процесса.

Используйте такой инструмент, как Colorspire.

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

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

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

11. Примите участие в конкурсе

Вы также можете многому научиться у конкурентов в вашей отрасли.

Я рекомендую проверить как минимум три веб-сайта прямых конкурентов и поискать общие закономерности в их цветовой гамме.

Это должно дать вам представление о том, какие типы тонов они используют.

Оттуда у вас есть один из двух вариантов.

1. Создайте аналогичную цветовую схему, подходящую для обычной формы
2. Идите в противоположном направлении, чтобы выделиться из группы

Я лично сторонник второго варианта, если вы хотите создать свой собственный бренд.

12. Сравните несколько различных цветовых схем

Вот в чем дело.

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

На самом деле, это может быть очень ограничивающим фактором.

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

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

Затем сузьте его, пока не найдете цветовую схему, подходящую для вашего бренда, до T.

Заключение

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

Это просто вопрос понимания психологии цвета и эмоций, которые вызывают различные цвета.

Вы также захотите получить базовое представление о правиле 60-30-10 и о том, как работает цветовое колесо.

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

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

Все это может иметь огромное влияние на ваш бизнес.

Какие факторы вы учитываете при выборе цветовой схемы?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четкой окупаемостью.

Заказать звонок

11 цветовых схем веб-сайта, которые помогут вам найти идеальную палитру

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

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

Учет психологии цвета для цветовых схем веб-сайта

—

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

Взаимодействие цвета. Йозеф Альберс через Phillips

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

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

Выбор идеальной цветовой палитры для вашего веб-сайта создает положительное восприятие и доверие потребителей.

Вы можете не только использовать определенные цветовые схемы, чтобы влиять на настроение людей, но также можете использовать их для управления тем, как они воспринимают ваш веб-сайт. Почему именно Facebook всегда придерживался синей цветовой схемы? Неужели это действительно потому, что Марк Цукерберг дальтоник к красно-зеленому, а это значит, что синий кажется ему необычайно ярким? Ну да, но еще и потому, что синий — самый любимый цвет.Фактически, синий цвет присутствует более чем в половине всех логотипов. Имея это в виду, давайте посмотрим на основные психологические принципы всех ключевых цветов:

1. Красный : скорость, энергия и страсть. Красный — отличный цвет, когда вы хотите, чтобы ваша аудитория начала действовать. Красный часто используется для цветовых схем веб-сайтов электронной коммерции, а также для ресторанов и приложений для еды на вынос — когда вы голодны и заказываете еду на вынос, вы страстно хотите, чтобы еда была быстрой!
2. Апельсин : оптимизм и счастье.Оранжевый цвет повсеместно считается «забавным», и его использование в веб-дизайне — отличный способ показать, что вы не относитесь к себе слишком серьезно.
3. Желтый : тепло, уют, позитив. Цвет солнечного света, желтый ассоциируется со счастьем и радостью. Супер весело и доступно. Это отличный цвет веб-сайта для сферы услуг — вы будете рады помочь!
4. Зеленый: природа и здоровье. Успокаивающий и естественный зеленый цвет — идеальный выбор для цветовой схемы при создании здорового бренда.Зеленый также является отличным выбором для обозначения экологичности и устойчивости.
5. Синий: самый универсальный и универсальный. Было показано, что синий вызывает чувство доверия, что делает его одним из самых популярных в цветовых схемах веб-сайтов.
6. Purple : креативность, мудрость и уверенность. Фиолетовый — это уникальный яркий цвет, который можно использовать в цветовой схеме веб-сайта, поскольку он требует внимания и выделяется.
7. Розовый : креативность и изобилие.Пинк в данный момент переживает время своей жизни, более чем когда-либо его принимают люди всех полов и идентичностей, а это означает, что бренды следуют его примеру и внедряют его в различные отрасли.
8. Коричневый : доброта, тепло и честность. При использовании в веб-дизайне коричневый цвет утешает. Это придает веб-сайтам естественную, практичную атмосферу и часто сочетается с традиционным винтажным дизайном.
9. Черный: современность, гладкий, нейтральный.Его минимализм отлично подходит для роскошных веб-сайтов; многие косметические бренды выбирают черный цвет в качестве основного цвета, чтобы показать, что их продукт является качественным, что, возможно, поможет вам оправдать такие большие траты ..?
10. Белый: минимализм, прозрачность. Иногда лучший выбор цвета для минималистичного веб-дизайна — это вообще отсутствие цвета. Белый — нейтральный оттенок, а это значит, что его можно легко комбинировать с другими цветами в целях брендинга. Он в основном используется в качестве цвета акцента или фона.
11. Серый: зрелость, авторитет.Если у вас более серьезный веб-сайт, серый цвет — отличный выбор, он показывает людям, что вы серьезно относитесь к делу.

Мы только что отправили вам ваш первый урок.

Автор OrangeCrush

11 красивых цветовых схем веб-сайта, которые вдохновят вас

—

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

1. Цвета для продуманных экологически чистых продуктов

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

Зеленая конопля, бледно-лимонная, овсяная и темно-синяя:

Цветовая схема сайта с тонировкой конопли от Tonitrix: # f5eec2 # 416a59 # 39395f # 73a24e # a9c25d

2. Яркие и полезные для здоровья цвета

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

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

Бледно-персиковый, апельсиновый, мятный и темно-зеленый:

Эко-тона тысячелетия от Your Daye: # f6c453 # fefbe9 # f0a04b # 183a1d # e1eedd

3. Стильные, тщательно подобранные цветовые схемы

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

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

Сирень, ржавчина, крем и уголь:

Цветовая схема Contemporary Lilac от Collagerie: # e4ddf4 # 943d24 # fffbf0 # 2d2d2d # 282612

4.Веселые, юные цветовые палитры

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

Нежно-розовый, зеленый, оранжевый и фиолетовый:

Цветовая схема полихроматического веб-сайта от Brent & Jo Studio: # 397754 # f0a3bc # 70be51 # eb6b40 # 9b45b2

5.Цвета для креативщиков, кружащие голову

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

Желтый, неоновый синий и черный:

Контрастная цветовая схема сайта от e2infinity: # 5bccf6 # fcde67 # 030e12

6.Успокаивающие и оптимистичные нейтральные палитры

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

Персик, сливки и уголь:

Успокаивающая нейтральная цветовая гамма от Lovely Grit Studio: # ef9273 # fef9f8 # 0d0d0d

7.Надежные тона

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

Бирюзовый, серый, синий, ярко-белый, темно-серый и морской волны:

Надежные бирюзовые тона через N26: # 2b6777 # c8d8e4 #ffffff # f2f2f2 # 52ab98

8. Успокаивающие, но уверенные цветовые схемы

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

Бледно-розовый, коралловый, серый, сиреневый и темно-синий:

Медитативная цветовая схема Spoon Lancer: # fae5df # f5cac2 # ed7966 # 303179 # 141850

9. Современные модные цветовые схемы

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

Фиолетовый, лиловый, мята и апельсин:

Via Saluto: # 5f2c3e # d1adcc # c2d2bd # c65032 # f6e9d7

10. Веселые и благотворительные цветовые палитры

.

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

Синий, желтый, шалфейно-зеленый и белый:

Веселые некоммерческие цвета от Lovely Grit Studio: # 1b4d89 # f9e45b # 6db784 #ffffff

11. Сильные и женственные цветовые схемы

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

Пудрово-розовый, фуксия и нефрит:

Цветовая схема Fuschia и Green для Fertility Tribe от Lovely Grit Studio: # eddcd9 # f2ebe9 # de5499 # 264143 # e99f4c

Начинается поиск цветовых схем для веб-сайтов сейчас

—

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

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

Ищете единственную в цветовой гамме?

Позвольте нашим дизайнерам подобрать ваши оттенки.

Эта статья была первоначально опубликована в 2017 году и написана Диной ДеБара. Он был дополнен новой информацией и примерами.

Простое руководство по цветам для веб-разработчиков — Smashing Magazine

Краткое резюме ↬

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

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

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

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

Вы, конечно, будете подсознательно изучать теорию по пути. Так что, просто для шуток (да, я сказал «шутки»), я рекомендую вернуться через несколько месяцев и еще раз попробовать теорию.

Клянусь, тогда все будет иметь гораздо больший смысл.

Больше после прыжка! Продолжить чтение ниже ↓

Давайте разберемся с TypeScript и рассмотрим, как его правильно использовать. В своем предстоящем онлайн-семинаре «Мастер-класс по TypeScript» Стефан Баумгартнер подробно расскажет о системах типов и о том, как их правильно использовать при написании JavaScript. Онлайн и в прямом эфире . 5–19 августа 2021 г.

Перейти в мастерскую ↬

Выбор основного цвета

Мы можем видеть что-то нелепое, например, 10 миллионов цветов в любой момент времени.Подумайте об этом на секунду. 10 миллионов.

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

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

Как выбрать начальный цвет

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

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

Советы по выбору начального цвета

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

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

Допустим, вы выбрали синий. (Кстати, отличный выбор!)

Выбор основного цвета A (приятный)

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

Сначала перейдите в Dribbble и Designspiration и щелкните ссылку «Цвета» в обоих.

Они должны представить вам похожие экраны:

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

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

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

Разные оттенки синего имеют разные характеристики.Выбирать мудро! (Просмотр большой версии)

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

Так много синего! Ваша задача — выбрать тот, который, по вашему мнению, лучше всего подходит вашему бренду. Очень просто! (Просмотр большой версии)

Вы не только увидите разные варианты основного цвета, но и легко увидите совпадающие цвета.

Создание единой цветовой палитры

Хорошо, теперь у вас должно быть HEX-значение для вашего цвета.Мой — # 30c9e8 . Теперь мы собираемся сделать палитру из этого цвета. И это проще, чем вы думаете.

Когда вы думаете о процессе создания цветовой схемы, вы можете представить себе следующее:

Виды палитр, которые вы, вероятно, привыкли видеть. (Изображение предоставлено: палитры ColourLovers от manekineko и сахара!) (Посмотреть большую версию)

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

• белый,
• темно-серый,
• светло-серый (по желанию).

Если вы попытаетесь добавить пять или шесть цветов к нейтральным, получится беспорядок. Все, что вам действительно нужно, это два цвета:

• базовый цвет (в нашем случае # 30c9e8 ),
• акцентный цвет (мы скоро к этому вернемся).

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

Как и Thoughtbot и TedTodd, вам не нужна сложная цветовая схема, чтобы иметь красивый веб-сайт.(Просмотр большой версии)

Найдите свой акцент

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

Ваш следующий шаг — перейти в Paletton и ввести свой HEX-код в цветовое поле:

Введите свой основной цветовой код в Paletton. (Просмотр большой версии)

Отсюда вы можете найти свой акцент одним из двух способов.

Во-первых, вы можете нажать кнопку «Добавить дополнение» и бух ! Этот апельсин там? Это твой акцент.

Paletton автоматически подберет для вас подходящий цветовой акцент. (Просмотр большой версии)

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

Щелкните, чтобы найти понравившуюся цветовую схему. (Просмотр большой версии)

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

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

Наша цветовая палитра уже формируется. (Просмотр большой версии)

Сейчас не хватает только серого.

Добавление серого

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

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

Вы можете выбрать оттенки серого одним из двух способов:

• Вы можете снова использовать Dribbble и Designspiration, чтобы найти приятный серый цвет из ваших предыдущих результатов, который соответствует вашему базовому цвету. Но обычно проще ввести синий веб-сайт в строку поиска, чтобы в результатах было больше серого.
• Если у вас есть Photoshop или что-то подобное, вы можете использовать технику Эрики Шунмейкер, чтобы согласовать серые тона с основным цветом.

Создание гармоничных серых оттенков

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

1. Создайте две формы и залейте их цветами # 424242 и #fafafa .
2. Вставьте слой с цветной заливкой над двумя фигурами.
3. Измените эту заливку на свой основной цвет ( # 30c9e8 ).
4. Установите режим наложения на «Перекрытие» и уменьшите непрозрачность до 5–40% (в приведенном ниже примере она установлена ​​на 40%).
5. Воспользуйтесь палитрой цветов и скопируйте новые значения.

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

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

Вуаля! Мы сделали это!

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

Наша замечательная цветовая гамма готова к применению. (Просмотр большой версии)

Применение вашей цветовой схемы

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

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

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

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

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

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

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

Важно отметить, что при использовании цвета и текста необходимо обеспечить достаточный контраст между фоном и копией. Это поможет людям с дальтонизмом или слабым зрением читать текст на вашем сайте. Есть много инструментов, которые вы можете использовать для поиска цветов, соответствующих рекомендациям WCAG. Двумя популярными из них являются программа проверки контрастности цвета WebAim и функция Contrast Ratio от Lea Verou.

Color Guide Final Note

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

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

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

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

Дополнительная литература по SmashingMag:

(rb, jb, ml, al)

7 правил выбора потрясающей цветовой схемы веб-сайта

Для веб-разработчиков инвестирование в визуальную иерархию является естественным шагом в нашем рабочем процессе проектирования.В прошлом году в блоге Shutterstock была опубликована статья «6 правил визуальной иерархии, которые помогут вам разрабатывать лучше». Эти правила, объясняют они, основаны на всеобъемлющей цели — упорядочении компонентов дизайна на основе важности, что «направляет зрителя через дизайн и гарантирует, что сообщение будет ясным и кратким».

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

Согласно этому образу мышления, когда у вас есть главный текст, а затем описание под ним, ваш выбор цвета шрифта имеет решающее значение, как и ваш выбор цвета фона. Например, на изображении выше различить заголовок и подзаголовок гораздо проще, если им присвоены два разных цвета.Таким образом, более «важный» текст будет темным цветом, а «менее важный» текст — более светлым контрастным цветом. Глаз обращается к h2 перед подзаголовком просто потому, что он очень выделяется и каждый легко увидеть в отдельном свете. Во втором визуале оба текстовых элемента имеют один и тот же цвет, поэтому глаз инстинктивно видит их как одно целое и медленнее разделяет их на два разных объекта.

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

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

Примеры лучших цветовых схем для веб-сайтов

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

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

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

Что такое цветовая схема веб-сайта?

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

Почему цветовые схемы сайта так важны?

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

Эстетика

Это может показаться очевидным, но никто никогда не захочет долго сидеть на уродливом сайте! Если цветовая палитра вашего веб-сайта раздражает глаза или вызывает головную боль, скорее всего, скоро ваши посетители начнут искать кнопку «выход». С другой стороны, если ваш веб-сайт гармоничен и эстетичен, они с большей вероятностью останутся.

Восприятие бренда

Знаете ли вы, что цвет связан с психологией? Разные цветовые схемы вызывают разные чувства: например, красный — уверенный, желтый — забавный, а синий — надежный.Согласно Buffer, более 90% нашей оценки продукта основывается только на цвете, и это касается и вашего веб-сайта. Это означает, что вы можете задать тон своему веб-сайту, выбрав цветовую схему, которая отражает то, как вы хотите, чтобы ваши посетители чувствовали себя.

Преобразование

Цветовая палитра вашего веб-сайта также может определить, действительно ли посетители вашего веб-сайта покупают у вас. Фактически, цвет настолько силен, что одно недавнее тематическое исследование показало, что выбор правильных цветов может увеличить конверсию до 24%! Например, многие люди считают, что красная кнопка CTA на вашей странице продаж приносит больше продаж, чем синяя или фиолетовая.Точно так же реклама с зеленым баннером будет давать другие результаты, чем та же реклама с желтым или красным фоном.

Какие известные примеры цветовых схем веб-сайтов?

Via G Hacks

Когда вы думаете о платформе социальных сетей Facebook, скорее всего, на ум приходит один цвет: синий! Оказывается, на самом деле это так по интересной причине: основатель Марк Цукерберг не различает красный и зеленый цвета. «Синий для меня самый богатый цвет; Я вижу весь синий цвет », — сказал он однажды.

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

eBay

Через eBay

Хотя eBay имеет довольно широкую цветовую палитру, зеленый часто занимает видное место на их веб-сайтах. Магазин электронной коммерции использует символику этого цвета, чтобы обозначить финансовое благополучие (или, в данном случае, экономию средств) и побудить браузеры начать совершать покупки.

Примеры цветовых схем веб-сайтов, которые вдохновят вас.

Чтобы вы могли начать работу с собственной палитрой, мы собрали 50 красивых веб-сайтов с универсальными цветовыми схемами, на которых вы можете черпать вдохновение.

Цветовая схема веб-сайта №1: Веселая и профессиональная

Mark Dearman

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

Цветовая схема веб-сайта № 2: Неоновые тона и резкий контраст

Play.agency

Этот веб-сайт Play.agency использует смелый и высококонтрастный подход, сочетая сильный темный фон с яркими неоновыми акцентными цветами. Сравнивая черный с пурпурным, синим и розовым, вы можете создать столь же поразительный эффект.

Цветовая схема веб-сайта № 3: Теплый и жирный

Lush Digital

Хотите смешать теплые и более холодные цвета, чтобы создать уникальную атмосферу? Возьмите образец дизайна от Lush Digital’s, сочетая яркие красные и синие тона с более темными индиго и пурпурными.Создает мечтательный и смелый эффект.

Цветовая схема веб-сайта №4: Чистый и выделенный

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

Цветовая схема веб-сайта # 5: Теплые тона

Studio Recode

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

Цветовая схема веб-сайта # 6: Четкий и современный

Frost Festival

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

Цветовая схема веб-сайта № 7: Смелая и яркая

Magoz

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

Цветовая схема веб-сайта № 8: Вдохновленный историей искусства

Fabrique

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

Цветовая схема веб-сайта № 9: Оттенки и тона

Ромен Бушеро и Винсент Фреман

Отличный способ добавить объемности вашей палитре, сохраняя при этом минимализм, — это использовать разные оттенки одного цвета. Эта чистая, элегантная цветовая схема сайта от Ромена Бушеро и Винсента Фремана делает именно это, используя немного разные оттенки нейтрального персикового цвета, которые дополняют центральный фиолетовый цвет.

Цветовая схема веб-сайта # 10: Всплеск цвета

Magnium Themes

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

Эта цветовая схема более тонко включена в шаблон Waffle Blog Banner. Оцените это в Canva уже сегодня!

Цветовая схема веб-сайта № 11: Элегантная и изысканная

Julian Damy

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

Цветовая схема веб-сайта № 12: Летнее вдохновение

StrADegy Advertising

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

Цветовая схема веб-сайта № 13: Профессиональная и современная

Avondale Type Co.

Ищете палитру, которая выглядит профессионально, но не скучна и не устарела? Вдохновляйтесь этим дизайном от Avondale Type Co. Сочетание серых, глубоких и ярких желтых тонов в сочетании с четким, плоским современным дизайном создает авторитетный, но свежий дизайн.

Цветовая схема веб-сайта # 14: Яркие черные и яркие акценты

Cantina dei Colli Ripani

Если вы ищете более яркий современный дизайн, попробуйте объединить смелые черные и белые пятна с некоторыми яркими всплески цвета, как в этом примере для Cantina dei Colli Ripani.Контраст между выделенными цветами и черным создает эффектный, смелый и забавный эффект.

Цветовая схема веб-сайта № 15: Чистые градиенты и свежий синий цвет

SHIBUI

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

Цветовая схема веб-сайта # 16: Веселая и элегантная

Huemor

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

Цветовая схема веб-сайта № 17: Современная и чистая

Benedict Leicht

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

Цветовая схема веб-сайта № 18: Роскошный и современный

Zach Klein

Эта цветовая палитра Зака ​​Кляйна привносит мир роскоши, изысканности и характера в дизайн веб-сайта. Благодаря сочетанию темно-синего, теплого загара и ярко-красного оттенка этот сайт остается современным, минималистичным и изысканным.

Цветовая схема веб-сайта №19: Симпатичные пастели

B / C Designers

Пастельные тона подходят не только для стен детской.На этом веб-сайте B / C Designers используются чистые, яркие пастельные розовые, синие и оранжевые тона для создания веселой, яркой и привлекательной палитры. При использовании пастели постарайтесь добавить немного белого пространства, чтобы вещи оставались свежими и светлыми.

Цветовая схема веб-сайта № 20: Уникальная и яркая

Great Works Copenhagen

Этот профессиональный веб-сайт Great Works Copenhagen использует менее нейтральный подход к цвету и вместо этого выбирает яркую палитру. Сочетая яркий красный цвет с различными синими и темно-синими тонами, этот сайт уравновешивает профессиональный вид с уникальным и веселым чутьем.

Цветовая схема веб-сайта # 21: Неожиданные сочетания цветов

Intesys S.r.l.

Фиолетовый и зеленый — это не два цвета, которые часто смешивают, но этот сайт Intesys S.r.l. доказывает, что, возможно, они должны быть! Насыщенный фиолетовый цвет разительно контрастирует с ярким лаймовым и резким белым цветом, создавая уникальный и запоминающийся дизайн сайта.

Цветовая схема веб-сайта # 22: В стиле ретро

Lowdi

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

Цветовая схема веб-сайта № 23: Античный и чистый

Pier-Luc

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

Цветовая схема веб-сайта # 24: Ярко и энергично

Hyperakt

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

Цветовая схема веб-сайта № 25: Свежая и яркая

Baesman

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

Цветовая схема веб-сайта № 26: Чистая и четкая

BrightMedia

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

Цветовая схема веб-сайта # 27: Красочная без колличества

Ярмо

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

Цветовая схема веб-сайта # 28: Приглушенная и минималистичная

Инга Гудоньен / MIOS

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

Цветовая схема веб-сайта № 29: Прохладный и спокойный

Roll Studio

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

Цветовая схема сайта №30: Современное и приглушенное

Расслабьтесь, мы хорошие ребята

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

Цветовая схема веб-сайта № 31: Землистый и свежий

AQuest

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

Цветовая схема веб-сайта # 32: Высокая насыщенность и высокая энергия

El Burro

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

Цветовая схема веб-сайта # 33: Теплая и прекрасная

Fieldwork

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

Цветовая схема веб-сайта # 34: Винтажный шарм

Cafe Frida

Хотите создать винтажный эффект, который не выглядит устаревшим или старомодным? Обратите внимание на эту палитру для Cafe Frida, в которой используются теплые золотые, зеленые, коричневые и белые оттенки, чтобы создать очаровательный эффект, источающий класс.

Цветовая схема веб-сайта # 35: Холодные тона драгоценных камней

GrowCreate

На этом веб-сайте Business Benchmark on Farm Animal Welfare от GrowCreate используются красивые фиолетовые и синие тона драгоценных камней с тонкими градиентами для создания простой, но привлекательной цветовой палитры.Случайные всплески ярко-розового цвета делают дизайн привлекательным, свежим и привлекательным.

Цветовая палитра веб-сайта № 36: Яркие оттенки

Cinco Design

Ищете более темный и гладкий вид, но не поклонник прямого черного? Обратите внимание на этот бурный, капризный дизайн веб-сайта от Cinco Design, в котором используются темно-пурпурные, синие и розовые тона для создания гладкого и изысканного эффекта.

Цветовая схема веб-сайта № 37: Холодное против теплого

Cinco Design

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

Цветовая схема веб-сайта # 38: Чистый и коллегиальный

details.ch

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

Цветовая схема веб-сайта # 39: Простая и свежая

MadeByShape

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

Цветовая схема веб-сайта № 40: Тропические тона

Thomas Schrijer

Этот красивый дизайн сайта для Топ-10 Томаса Шрайера 2014 года использует яркие тропические тона для создания прекрасного эффекта.Использование теплых желтых, красных, зеленых и синих оттенков создает веселую, легкую и красивую палитру, подходящую для любого энергичного бренда.

Цветовая схема веб-сайта # 41: Полужирные основные цвета

Joy Intermedia

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

Цветовая схема веб-сайта # 42: Античные тона

Leibowitz Branding & Design

Веб-сайт Athena Art Finance, созданный Leibowitz Branding & Design, использует красивые античные тона для создания элегантного и утонченного дизайна с большим шармом. Черпая вдохновение в истории искусства и используя темно-фиолетовый, синий, зеленый и теплый золотой, вы можете превратить любую веб-страницу в изысканное потрясающее зрелище.

Цветовая схема веб-сайта # 43: Неоновый и жирный

Calvi on the Rocks

Этот пример для Calvi on the Rocks показывает нам, как именно искусно использовать яркие неоновые тона, уравновешивая их.Эта палитра состоит из яркого зеленого, яркого пурпурного и оттенка королевского синего, но она уравновешивает эту яркость с большим количеством нейтрального кремового белого, поэтому она не является подавляющей.

Цветовая схема веб-сайта # 44: Приглушенные тона

The Martin Agency

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

Цветовая палитра веб-сайта # 45: Простая, но смелая

Mambo Mambo

Хотите легкость маленькой палитры, но с яркостью большой? Обратите внимание на этот для Mambo Mambo, который использует желтый и несколько оттенков зеленого / синего, чтобы сформировать простую, но стильную палитру. Эта цветовая гамма тропическая, веселая, свежая и, что самое главное, простая!

Цветовая схема веб-сайта # 46: Корпоративный и элегантный

Райан Боркер, Джермейн Крейг, Майк Парсонс и Кайл Миллер

Вам нужно меньше яркости и немного больше профессионализма? Вдохновитесь красивыми цветами, использованными в этой палитре Райаном Боркером, Джермейн Крейг, Майком Парсонсом и Кайлом Миллером.Яркий темно-синий цвет прекрасно сочетается с не совсем белым фоном яичной скорлупы, чтобы создать простой и элегантный дизайн веб-сайта.

Цветовая схема веб-сайта # 47: Современная и минималистичная

Huemor

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

Цветовая схема веб-сайта # 48: Веселая и веселая

Marie Catribs

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

Цветовая схема веб-сайта # 49: Солнечно и спокойно

TRAFFIC

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

Цветовая схема веб-сайта # 50: Поп-арт

Visualsoft

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

Как выбрать цветовую схему своего сайта

Итак, как создать свою цветовую схему с нуля? Вот несколько советов, которые помогут вам в этом процессе.

Воспользуйтесь цветовым кругом

Вам не нужно изобретать колесо, когда вы выбираете цвета для своего бренда — просто воспользуйтесь нашим! Цветовой круг Canva — удобный инструмент, используемый в теории цвета, чтобы определить, какие оттенки смотрятся вместе. Есть два типа цветовых кругов — RYB и RGB. Первый — это красный, желтый, синий цветовой круг, который обычно используется художниками для комбинирования цветов краски. Затем есть красный, зеленый и синий цветовой круг, который используют графические дизайнеры, поскольку он включает смешивание света для использования в Интернете.

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

Рассмотрим демографию

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

Однако, в конце концов, восприятие цвета не является универсальным опытом. Разные люди воспринимают цвета по-разному, в зависимости от своего возраста, культуры и жизненного опыта.

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

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

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

Создаете что-нибудь для более молодой аудитории? Шаблон веб-сайта Canva для малого бизнеса Pink and Blue Pet Care отличается забавной и свежей эстетикой, которую можно легко перенастроить для вашего собственного бренда.

Создание цветовой палитры

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

Веб-сайт Фаррелла Уильяма красочный и динамичный

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

Как использовать цветовую палитру из фирменного набора

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

Активы ThisThatApp от Хелены. Изображение через Dribbble.

В большинстве наборов брендов есть раздел, посвященный вашей цветовой палитре, где вы определяете цвета своего бренда и соответствующие коды. Они могут включать коды Pantone (специальные цвета) и CMYK (стандартные цвета печати), но для веб-дизайна вам в основном нужны коды RGB и HEX (шестнадцатеричные). В зависимости от эстетики вашего бренда вы также можете использовать разные оттенки и оттенки одного и того же цвета.

Благодаря тому, что ваша цветовая палитра будет легко доступна в вашем фирменном наборе, вы гарантированно получите точное соответствие цветов каждый раз, когда вы создаете somedeskg new для своего бренда. Функция Brand Kit в Canva Pro позволяет вам установить цвет и коды вашего бренда для облегчения доступа при разработке дизайна в приложении.

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

Как выбрать цветовую схему для вашего веб-сайта

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

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

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

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

Выбор цвета для вашего сайта?

Когда вы размещаетесь на DreamHost, вы получаете бесплатный доступ к нашему инструменту WP Website Builder и более чем 200+ отраслевым стартовым сайтам!

Что оттенки сообщают нашему мозгу: психология цвета

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

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

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

Недавнее исследование показывает, что до 90 процентов сегодняшних потребителей покупают товары, основанные на цвете. Все еще не уверены? Забудьте на мгновение о своем контенте и продукте и подумайте вот о чем: 42 процента онлайн-покупателей основывают свое мнение о веб-сайте только на дизайне.

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

Пол, возраст и культурное воспитание могут изменить наше восприятие

Мы знаем, что цвет влияет на наш мозг, но часть земного шара, на которой вы выросли — вместе с вашим возрастом и полом — скорее всего, влияет на то, как вы воспринимаете цвет.

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

Точно так же желтый цвет в золотых арках McDonald’s, который встречается в 120 странах и территориях по всему миру, ассоциируется со счастьем практически во всем мире. Однако, в зависимости от того, где расположены более 36 000 ресторанов, McDonald’s создает свою цветовую схему, чтобы удовлетворить культурные предпочтения своих посетителей.

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

Связанные: 14 отличных шаблонов веб-сайтов, которые вы можете использовать

Спектр тем для разных целей: выбор цвета веб-сайта

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

Наличие надежного веб-хостинга похоже на наличие команды лицензированных подрядчиков и технических специалистов на связи 24/7: ваш хост обеспечивает прочность и безопасность стен и стыков вашего сайта, горит свет и ничего не протекает.Таким образом, вы можете сосредоточиться на деталях и обстановке, благодаря которым ваши гости (читай: потенциальные клиенты) чувствуют себя комфортно и как дома.

Не знаете, как выбрать цвет для своего веб-сайта? Закройте глаза и представьте, как вы идете в массажную студию или на занятия по расслабляющей йоге — или быстро загляните в Google, чтобы найти местные студии, где вы могли бы побаловать себя сеансом снятия стресса. Что ты видишь?

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

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

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

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

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

Цветовая схема: вы выбрали доминирующий цвет — что дальше?

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

• Монохроматический: в монохроматических схемах используется один цвет и исследуются различные варианты освещения и насыщенности. Хотя монохромные схемы считаются самыми легкими для глаз, они могут оказаться мягкими.Удачно расположенное пятно дополнительного желтого или аналогичного фиолетового может многое сделать, например, на странице, переполненной оттенками синего.

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

• Дополнительные: Дополнительные цвета появляются напротив друг друга на цветовом круге, создавая высококонтрастную, яркую, привлекающую внимание схему при совместном использовании. Используйте их умеренно, чтобы выделить детали, которые вы хотите выделить (кашель * кнопки с призывом к действию * кашель).

• Триада. В цветовых схемах триады используются цвета, равномерно распределенные на цветовом круге, как точки треугольника. Фиолетовый, зеленый и оранжевый — классический пример схемы триады, которую лучше всего применять, когда один цвет доминирует, а два других используются в качестве акцентов.

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

Учитывайте оттенки и оттенки при выборе цветов, дополняющих

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

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

• Тон: Тона — это серая область, так сказать, между оттенками и оттенками. Оттенки создаются путем добавления черного и белого к исходному оттенку, чтобы затемнить или осветлить его и уменьшить насыщенность исходного оттенка.

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

Имейте в виду, что резкие сочетания цветов могут утомлять глаза. Рассмотрим, например, схему с ярко-оранжевым текстом на ярко-синем фоне: хотя цвета создают высокий контраст, они буквально раздражают глаза. Однако настройка оттенка и тона выравнивает значения цвета, в результате чего получается визуально приятная и легко читаемая схема «золото на темно-синем».

Сделайте цвета яркими там, где это наиболее важно для конверсий

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

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

Лучшие целевые страницы не заняты. Они просты, понятны и основаны на хороших дизайнерских принципах. Примените свои новые знания теории цвета, учитывая следующие факторы и советы по дизайну целевой страницы:

• Ваш заголовок выделяется? Помните о цветах фона и никогда не позволяйте вашей цветовой схеме поглотить ваше сообщение.

• Читается ли ваш основной текст? Не бойтесь простого черного на белом! Это не только самая легкая для чтения цветовая комбинация, но и создает чистый, минималистичный вид практически в любом контексте.

• Ваш призыв к действию смелый и привлекательный? Если у вас есть интерактивный призыв к действию, она — та дива, которая требует внимания. Именно здесь вам нужно сделать контрастные цвета яркими.

Дайте волю своему внутреннему гуру дизайна без кода с помощью инструментов для самостоятельного проектирования

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

К счастью, есть множество инструментов, которые помогут подобрать цветовую палитру в соответствии с вашими прихотями и желаниями.Adobe Color — один из моих любимых, в то время как Color Code обеспечивает управление курсором, которое позволяет пользователям перемещаться по параметрам цвета. Более того, шестнадцатеричные коды легко доступны.

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

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

С конструктором веб-сайтов, таким как DreamHost’s WP Site Builder, никто не должен быть экспертом по графическому дизайну или мастером программирования, чтобы создавать красивые веб-сайты.Даже самые нерешительные из нас могут начать с профессионально созданной темы, а затем настроить такие элементы, как цвета и шрифты, в соответствии с историей, которую мы хотим рассказать.

Информация в вашем почтовом ящике

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

Что можно и чего нельзя делать при выборе цвета для вашей веб-страницы

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

Что ваш выбор цвета говорит об истории, которую вы хотите рассказать на своем веб-сайте? Вы намерены стимулировать или успокаивать свою аудиторию? Ваш выбор цвета передает изысканность и крутой профессионализм или теплоту и доступность?

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

Создает ли ваш выбор цвета непреднамеренный эффект Лизы Фрэнк, известный также как сенсорная перегрузка в радужных тонах? Эффект задуман? Сделайте шаг назад и подумайте о своем выборе флуоресцентных шартрез.