Сочетание цветов сайта в дизайне: 16 отличных цветовых решений сайтов

Заключение

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

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

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

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

По материалам: crazyegg.com

06-02-2019

Выбор правильного сочетания для вашего сайта / Хабр

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

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

Итак, приступим к знакомству с магией цвета…

Цветовая теория: основные принципы. Умение сочетать цвета

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

Рассмотрим цветовой круг.

Немного истории: цветовой круг изобрел Исаак Ньютон. Обосновав теорию света и цветов в 1666г. Именно она легла в основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Ньютон при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым доказав его сложность (явление дисперсии), открыл хроматическую аберрацию.

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

Основные цвета
Есть три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.

Составные цвета
Есть также три основных: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Вы можете получить их путем смешивания красного и желтого(оранжевого), желтого и синего (зеленый) и синего и красного (фиолетовый).

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

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

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

Цвета в разных культурах: символизм

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

Давайте выясним, какое значение имеют цвета в различных культурах:

Красный

• Китай: цвет невесты, удачи, торжества
• Индия: чистота
• Южная Африка: траурные цвета
• Восток: радость (в сочетании с белым)
• Запад: возбуждение, любовь, страсть
• США: рождество (с зеленым), день святого Валентина (с белым)
• Иврит: жертва, грех
• Япония: жизнь
• Христианство: жертва, страсть, любовь
• Фэн-шуй: Янь, огонь, удача, уважение, защита, живучесть, деньги, признание

Голубой

• Европа: успокоение
• Иран: траур, цвет неба и духовность
• Китай: бессмертие
• Индуизм: цвет Кришны
• Иудаизм: святость
• Христианство: цвет Христа
• Католицизм: цвета одежды Марии
• Ближний Восток: защита
• В мире: цвет безопасности
• Фэн-шуй: Инь, вода, спокойствие, любовь, исцеление, релаксация, доверие, приключения
• Запад: печаль, депрессия

Желтый

• Европа: счастье, надежда, радость, трусость в опасностях, слабость
• Азия: цвет имперского
• Египет: траур
• Япония: мужество
• Индия: торговцы
• Буддизм: мудрость
• Фэн-шуй: Янь, Земля, благоприятный, солнечные лучи, тепло, движение

Оранжевый

• Европа: осень, урожай, творчество
• Ирландия: протестанты (религиозные)
• США: Хэллоуин (с черным), дешевые товары
• Индуизм: шафран (персиковый оранжевый) священный цвет
• Фэн-шуй: Янь, Земля, цели, усиливает концентрацию

Коричневый

• Колумбия: препятствие продажам
• Австралийские аборигены: цвета земли, торжественное охра
• Фэн-шуй: Янь, Земля, промышленность

Зеленый

• Япония: жизнь
• Ислам: надежда, добродетель
• Ирландия: символ всей страны
• Европа / США: весна, новое рождение, День Святого Патрика, Рождество (с красным)
• США: деньги
• Индия: Ислам
• Фэн-шуй: Инь, дерево, исцеление, здоровье, успокаивающее

Фиолетовый

• Таиланд: траур (вдовы)
• Католицизм: смерть, траур, распятие
• Фэн-шуй: Инь, цвет физического и психического исцеления

Белый

• Европа: брак, ангелы, врачи, больница, мир
• Япония: траур, белая гвоздика символизирует смерть
• Китай: траур, смерть,
• Индия: несчастья
• Восток: похороны
• Фэн-шуй: Янь, металл, смерть, призраки, траур, равновесие, уверенность

Черный

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

Значение цветов

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

Красный

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

Голубой

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

Желтый

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

Оранжевый

Бодрость и творчество. Ассоциируется с дружелюбием, уверенностью, игривостью, мужеством, стойкостью.

Фиолетовый

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

Зеленый

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

Коричневый

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

Серый

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

Розовый

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

Черный

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

Белый

Белый связан с чистотой, простотой, свежестью, добротой, невинностью.

Заключение

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

1. Если вы хотите, чтобы текстовое содержимое, было легко читаемым, выбирайте контрастные цвета.
2. Оптимальное количество цветов. Не делайте из Вашего сайта цирк.
3. Используйте необходимое количество цветов. Минимальное количество цветов, может способствовать серости Вашего сайта.
4. Если вам нужно привлечь посетителя, применяйте интенсивные цвета.
5. Вы можете найти дополнительные цветовые схемы приобщаясь чаще к природе.

Источник:

Психология цвета и веб-дизайн

Синий цвет

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

Фиолетовый цвет

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

Черный цвет

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

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

Белый цвет

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

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

Серый цвет

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

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

Бежевый цвет

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

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

Цвет слоновой кости

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

Выбор цветовой гаммы

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

Триада

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

Двойная комплиментарная система

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

Цвета-аналоги

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

Как правильно использовать цвета в UI-дизайне

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

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

Сначала разберемся с терминами, которые относятся к теории цвета.

Вот основные:

Тон (hue): какого цвета объект (например, красный или синий).

Хроматичность (chroma): есть ли примеси белого или черного.

Насыщенность (saturation): как сильно цвет выражен.

Яркость (value): насколько цвет темный или светлый.

Тональность (tone): сколько серого добавили к чистому цвету.

Тень (shade): сколько черного добавили к чистому цвету.

Оттенок (tint): сколько белого добавили к чистому цвету.

Теперь к истории.

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

Цветовой круг Ньютона из книги «Оптика» 1704 года. Источник: wikipedia.org

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

Цветовой круг Иттена. Источник: doodleandsketch.com

Как работает цветовой круг

В базовый цветовой круг входит 12 цветов:

основные (первичные) — красный, желтый и синий

дополнительные (вторичные) — фиолетовый, оранжевый и зеленый

комбинированные (третичные) — смешение соседних цветов (например, оранжевый из красного и желтого)

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

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

Комплементарные цвета

В цветовом круге комплементарные цвета лежат друг напротив друга: синий–оранжевый, красный–зеленый, фиолетовый–желтый.

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

В дизайне сайта WeWork использованы комплементарные синий и оранжевый.
Источник: wework.com

Аналоговые цвета

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

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

На сайте Dropbox использовали цвета, которые сочетают не часто, и это сработало.
Источник: dropbox.com

Триадные цвета

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

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

Триадная желто-красно-голубая цветовая схема сайта Петера Оравица — зеленый тут тоже подключился.
Источник: peteroravec.com

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

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

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

КРАСНЫЙ

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

Лендинг iPhone X (RED) — красный на красном. Источник: apple.com

ЖЕЛТЫЙ

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

Онлайн-магазин продуктов Headery на основе конопляного масла — все в желтых тонах.
Источник: headery.com

ОРАНЖЕВЫЙ

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

Оранжевый онлайн-магазин бренда Aloha — продуктов на основе растительного белка.
Источник: aloha.com 

СИНИЙ

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

Например, визуальный стиль Facebook как раз основан на оттенках синего. Но этот выбор объясняется не только «надежным» характером синего, но и тем, что Марк Цукерберг — дальтоник. Он не различает красный и зеленый, а вот синий видит.

Сине-белый сайт книги When the World Went Digital о главных событиях в веб-дизайне.
Источник: thehistoryofweb.design

ЗЕЛЕНЫЙ

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

Сайт американской студии дизайна Unboundary — в оттенках зеленого.
Источник: unboundary.com

РОЗОВЫЙ

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

Онлайн-магазин женской одежды Femme and Fierce в основных оттенках розового.
Источник: femmeandfierce.nl

ФИОЛЕТОВЫЙ

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

Лавандово-фиолетовый сайт креативного агентства Omelet. Источник: omelet.com

Как составить цветовую палитру

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

Цветовую палитру составляют из первичных, вторичных и акцентных цветов.

Вот как это происходит:

Источник: gfycat.com

ДОМИНИРУЮЩИЕ ЦВЕТА

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

ВТОРИЧНЫЕ ЦВЕТА

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

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

АКЦЕНТНЫЕ ЦВЕТА

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

Чтобы подбирать цвета было проще, вот бесплатные инструменты:

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

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

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

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

Основные цветовые сочетания в веб-дизайне

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

АНАЛОГОВАЯ

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

Сайт Useless London, посвященный теме борьбы с отходами. Источник: useless.london

КОМПЛЕМЕНТАРНАЯ

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

Онлайн-магазин Kin Europhorics — бренда антистрессовых напитков.
Источник: kineuphorics.com

ГРАДИЕНТ

Градиент — плавный переход одного цвета в другой. С помощью градиента объединяют аналоговые цвета, например, синий и зеленый. Еще его используют, когда хотят остаться в рамках одного базового цвета — и «раскатывают» оттенки от более интенсивного к менее насыщенному. Сайт музыкального стриминга Spotify — идеальный пример того, как использовать градиент.

На сайте стриминга Spotify показали, как «перевести» желтый в персиковый.
Источник: spotify.com

АКЦЕНТ НА ФИРМЕННОМ ЦВЕТЕ

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

Онлайн-магазин постельного белья Casper с акцентом на синий. Источник: casper.com

МОНОХРОМНАЯ

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

Онлайн-магазин косметики для губ Axiology Beauty. Источник: axiologybeauty.com

ПАЛИТРА ПРИГЛУШЕННЫХ ЦВЕТОВ

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

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

Кофейные оттенки на сайте магазина кофе StumpTown Coffee. Источник: stumtowncoffee.com

СХЕМА ИЗ ОСНОВНЫХ ЦВЕТОВ

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

Красный, синий и желтый в дизайне сервиса знакомств Bumble. Источник: bumble.com

ВИНТАЖНАЯ ЦВЕТОВАЯ СХЕМА

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

 
Винтажные акценты на сайте Five/Four — в фильтрах и основных цветах.
Источник: five-four.co

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

Сочетание цветов в веб дизайне

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

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

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

• Синий (голубой) – один из самых популярных цветов, используемых в интернете. Относится к категории так называемых «безопасных» цветов, который по большей степени нравится большинству. Синий цвет ассоциируется с такими понятиями, как мир, спокойствие, надежность, доверие, честность, чистота, ясность. Однако, например, светло-голубой цвет может символизировать депрессию.
• Зеленый — всегда ассоциируется с природой. Символизирует окружение, здоровье, судьбу, молодость. Однако в некоторых случаях может соотносится с недоверием и опасностью.
• Желтый — цвет радости, счастья, солнца, дружбы. Среди негативных ассоциаций можно выделить трусость и болезнь. Не стоит использовать слишком темный желтый цвет.
• Оранжевый — символизирует теплоту и энергию. Очень хороший цвет для того, что бы сделать акцент на чем-то.
• Красный — опасность, кровь, любовь и тепло. Красный цвет является самым подходящим для того, что бы обратить на что-то особое внимание.
• Фиолетовый — таинственный, творческий цвет. Обычно используется для того, что бы придать сайту особую изящность.
• Розовый – наиболее женственный цвет. Ассоциируется с детьми и детством.
• Черный – символизирует силу, темноту и зло. Как правило, используется для отображения большого количества монотонного цвета.
• Белый – чистый, добрый цвет. Может ассоциироваться с равнодушием и зимой.

Цветовые комбинации

Существуют основные правила комбинации цветов при разработке дизайна страницы:

1. Дополнительные – используются диаметрально противоположные цвета
2. Дополнительные расщепленные – используются диаметрально противоположные цвета и цвет, смежных с одним из них
3. Триада – используются три диаметрально противоположных цвета согласно цветовому кругу (120 градусов)
4. Тетраидр – используются четыре диаметрально противоположных цвета согласно цветовому кругу (90 градусов)
5. Аналогичные – используется один основной цвет и смежные с ним цвета
6. Одноцветные – используется один основной цвет в соответствии с его оттенками

Цветовые оттенки

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

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

Web безопасность цветов

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

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

Проблемы доступности

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

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

по материалам Blue Anvil
перевод на русский язык Николенко Алексей

Теория цвета: как выбрать правильные цвета для сайта

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

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

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

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

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

В исследовании «Влияние цвета на маркетинг» (Impact of color on marketing) говорится, что использование разных цветов может существенно влиять на настроение и поведение потребителей. Утверждается, что от 60 до 90% покупателей (в зависимости от категории продукта) дают положительную или отрицательную оценку товару, основываясь только на его цвете.

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

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

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

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

Теория цвета

Цветовой спектр

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

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

Основные цвета (Primary Colors) — красный, синий, желтый. Источник — color-wheel-artist.com

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

Вторичные цвета (Secondary colors) — зеленый, оранжевый, фиолетовый. Источник — color-wheel-artist.com

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

Третичные цвета (Tertiary Colors) — сине-зеленый, красно-оранжевый, желто-зеленый, красно-фиолетовый, желто-оранжевый, сине-фиолетовый. Источник — color-wheel-artist.com

Цветовой круг

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

Цветовой круг (цветовое колесо, хроматический круг). Источник — www.ecolourprint.co.uk

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

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

Аналогичные цвета. Источник — www.ecolourprint.co.uk

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

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

Комплиментарные (дополняющие) цвета. Источник — www.ecolourprint.co.uk

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

Триадные цвета. Источник — www.ecolourprint.co.uk

Параметры цвета

В начале XX века американский художник Альберт Манселл ввел важные для современной теории цвета понятия — параметры цвета. Это тон (оттенок), яркость, насыщенность.

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

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

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

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

Цветовые ассоциации и психология цвета

Маркетологи Университета Севильи (Испания, Universidad de Sevilla) выяснили, что на поведение потребителей влияет не столько сам цвет, сколько его «уместность и целесообразность» для продукта. Уместность определяют цветовые ассоциации — образы и эмоции, которые человек связывает с определенным оттенком.

О важности цветовых ассоциаций в маркетинге также говорят результаты маркетингового исследования «Влияние цветов продуктов на восприятие уместности логотипа бренда» (The interactive effects of colors and products on perceptions of brand logo appropriateness).

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

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

Красный

В большинстве культур воспринимается положительно и вызывает ассоциации с теплом, энергией, скоростью, смелостью, силой. Как известно, «красный — цвет страсти». Среди отрицательных ассоциаций с красным — опасность (красный свет светофора, знак STOP, тревожные кнопки), страх, боль. Если красного слишком много, он может подавлять.

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

Оранжевый

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

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

Желтый

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

Наиболее эффектно желтый смотрится в сочетании с контрастными цветами.

Зеленый

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

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

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

Синий

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

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

Фиолетовый

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

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

Розовый

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

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

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

Черный

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

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

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

Белый

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

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

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

Есть два основных способа применить теорию цвета для создания эффективных продающих страниц:

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

Как использовать психологию цвета

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

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

Дизайн сайта свадебного салона: нежные пастельные оттенки низкой насыщенности на преобладающем белом фоне

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

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

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

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

Дизайн сайта магазина мужской одежды и аксессуаров: сдержанное сочетание базовых оттенков

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

Как подбирать комбинации оттенков для повышения удобства восприятия информации

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

Например, в ColoRotate есть целая библиотека цветовых схем, которые можно выбирать, сохранять и редактировать с помощью современного 3D инструмента (3D color tool).

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

При выборе цветовой палитры не используйте больше трех-четырех цветов на одной странице. Аляповатый дизайн производит плохое впечатление, способствует расфокусировке внимания пользователей, отвлекает от основной информации на сайте и «уводит» от СТА-кнопок.

Для сайта обычно выбирают три цвета — основной оттенок (фон), вторичный — для выделения крупных элементов и яркий акцентный цвет.

Существует специальная формула эффективного соотношения базовых цветов на продающей странице: 60/30/10. Это значит, что фон страницы занимает 60% площади, вторичный оттенок — около 30%, цветовой акцент — остальные 10%.

Формула эффективного соотношения базовых цветов на продающей странице. Источник — lpgenerator.ru

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

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

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

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

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

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

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

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

51 пример для вдохновения, разбор и предложения

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

Информационная вкладка Вы знали, что 93% покупателей считают, что именно цвет определяет их выбор, а 52% не вернутся на сайт, не удовлетворяющий требованиям эстетики. При этом, лучшими цветами для кнопки целевого действия («Подписаться», «Скачать» или «Отправить заявку») традиционно считаются красный, оранжевый и зеленый. Они увеличивают на 13.5% коэффициент конверсии мобильных пользователей, а в целом на 9%. На 6.5% чаще добавляется товар «В корзину». Компании BMI, HubSpot, Ript, и VegasSlotsOnline добились улучшения конверсии с 2,5% до 175%, поменяв лишь цвет CTA-кнопок.

Ссылка на источник

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

1. Студии, агентства (услуги дизайна, фото, полиграфия и реклама, создание сайтов и т.п.)

Hum (ссылка http://humcreative.com/) 

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

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

Цветовое решение: 

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

Bubble (ссылка https://followbubble.com/) 

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

Цветовое решение: 

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

Huge (ссылка https://www.hugeinc.com/) 

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

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

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

Цветовое решение 

Современный, актуальный, заметный, – вот прилагательные, которые характеризуют палитру фуксия + черный (мы видим ее на первом экране до прокрутки). Такое сочетание моментально приковывает взгляд и производит впечатление.

Born (ссылка Borngroup.com) 

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

Информационная вкладка. Вам также может быть интересно: 

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

Si Digital (ссылка https://sidigital.co/) 

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

Цветовое решение

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

Reestart (ссылка https://reestart.com/) 

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

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

Цветовое решение

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

Impact (ссылка https://www.impactbnd.com/) 

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

Цветовое решение 

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

SmartBug (ссылка https://www.smartbugmedia.com/)

Простая в оформлении, посадочная страница от SmartBug Media демонстрирует, как следует управлять вниманием и вовлеченностью посетителя. Мало текста, одна мысль на один экран прокрутки. Каждый элемент этой страницы – часть единой выстроенной логики. 

Цветовое решение 

Оранжевый CTA, как и в предыдущем примере, ясно и четко дает пользователю понять, куда нужно нажимать. Бирюзовый – вдохновляет. 

Campaign Creators (ссылка https://www.campaigncreators.com/)

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

Цветовое решение 

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

Pyxl (ссылка https://pyxl.com/) 

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

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

Цветовое решение 

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

Tomorrow People (ссылка https://www.tomorrow-people.com/)

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

Цветовое решение 

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

Блоги 

The Next Web (ссылка https://thenextweb.com/) 

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

Zazzle Media (ссылка https://www.zazzlemedia.co.uk/blog) 

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

Цветовое решение

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

Start Up Quote (ссылка https://startupquote.com/)

Start Up Quote – самый яркий пример в подборке. Простой для восприятия контент, который сильно напоминает формат Instagram Stories подан одновременно привлекательно и стильно. Нестандартный прием, который позволяет выделяться на фоне других ресурсов.

Цветовое решение

На черном фоне яркая плитка цитат смотрится еще эффектнее. Благодаря этому контрасту внимание посетителя моментально привлечено к главному – заголовкам. 

Adventure Digital Agency (ссылка http://blog.adventures.do/)

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

Цветовое решение

Классическое сочетание теплых желтого и оранжевого с холодным бирюзовым успокаивает и улучшает настроение. Они одновременно говорят 1) настройся на рабочий лад и 2) не переживай, тут не будет скучно! 

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

Палитра №1: #e2d810 – #d9138a – #12a4d9 – #322e2f. 

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

Автор:Stephen. 

Палитра №2: #1e3d59 – #f5f0e1 – #ff6e40 – #ffc13b. 

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

Автор: spoon lancer 

Палитра №3: #316879 – #f47a60 – #7fe7dc – #ced7d8

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

Автор: sheva™.

Палитра №4: #d13ca4 – #ffea04 – #fe3a9e

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

Автор:Litlast

Палитра №5: #408ec6 – #7a2048 – #1e2761

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

Автор: Mithum.

Поможем разработать современный сайт. Отправить заявку.

2. Бизнес, связанный с производством и/или продажей еды, напитков (бары, рестораны, кафе, доставка и кейтеринг, HoReCa)

Mah Ze Dahr (ссылка https://mahzedahrbakery.com/) 

Главная страница пекарни Mah Ze Dahr – торжество элегантности и больших красивых фотографий хлебобулочных изделий. Именно эти фото отвечают за привлечение внимания (и, надо признать, аппетита!). При прокрутке страницы вниз навигационное меню и логотип, размещенный в центре, остаются на месте. Это упрощает навигацию по сайту, а бренд запоминается и ассоциируется с вкусной выпечкой. 

Цветовое решение

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

Blue Apron (ссылка https://www.blueapron.com/) 

Главная страница службы доставки еды сразу задает нужное настроение: «Закажите лучшее, что у нас есть, прямо сегодня!» При прокрутке страницы Blue Apron вниз, мы видим интерактивные визуальные изображения, которые с первых секунд передают основное послание бренда. 

Цветовое решение 

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

Orangina (ссылка http://orangina.eu/) 

После приветственного экрана с высококачественными фотографиями продукта, главная страница бренда

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

Как результат – отлично оформленный контент, в который можно просто «позалипать». Очевидно, разработчики сайта позаботились о том, чтобы пользователям на сайте было весело (что вполне соответствует основному посылу бренда). 

Цветовое решение

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

Lighthouse Brewing Co (ссылка https://www.lighthousebrewing.com/) 

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

Цветовое решение 

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

Tio Luchin (ссылка http://tioluchin.com/) 

Tîo Luchín — кейтеринговая служба, предлагающая перуанские блюда. Каждая прокрутка экрана сопровождается ярким визуальным или звуковым сопровождением. На странице пять разделов, но они очень гармонично объединены в единое по стилю решение. 

Цветовое решение

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

Chikenbot (ссылка https://www.chickenbot.it/) 

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

Цветовое решение

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

Bon appetit (ссылка https://www.bonappetit.com/)

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

У странички есть интересная фишка: если вы нажмете кнопку призыва к действию под любым из вариантов подписки, вы увидите, что текст кнопки поменяется на «Отличный выбор!». Маленькая деталь, но она работает на создание имиджа – вам это нравится, и вы чувствуете, что настроены к бренду уже чуть более дружелюбно. 

Misfit Juicery (ссылка https://misfitfoods.com/)

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

Цветовое сочетание 

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

HelloFresh (ссылка https://www.hellofresh.com/)

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

Форма удобная, понятная и простая для заполнения. 

Цветовое решение

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

RXBAR (ссылка https://www.rxbar.com/)

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

Больше ведь пользователям ничего не нужно. 

Цветовое решение

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

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

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

Палитра № 1: #efb5a3 – #f57e7e – #315f72. 

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

Автор: felipe_charria

Палитра №2: #edca82 – #097770 – #e0cdbe – #a9c0a6. 

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

Автор: Tomas Miliauskas

Палитра №3: #cf1578 – #e8d21d – #039fbe – #b20238

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

Автор: Holly McAlister

Палитра №4: #EAE7DC – #D8C3A5 – #8E8D8A – #E98074 – #E85A4F

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

Палитра №5: #844D36 – #474853 – #86B3D1 – #AAA0A0 – #8E8268

Комбинация кофе с небесно-голубым дарит чувство комфорта. Отличный вариант для бизнеса в сфере HoReCa. 

Поможем разработать красивый и аппетитный сайт. Отправить заявку.

3. Сфера разработки и продажи программного обеспечения, софта, IT

Slack (ссылка https://slack.com/intl/en-ru/?eu_nc=1) 

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

Цветовое решение

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

Litmus (ссылка https://litmus.com/) 

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

Цветовое решение

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

Basecamp (ссылка https://basecamp.com/) 

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

Цветовое решение

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

Prezi (ссылка https://prezi.com/) 

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

Цветовое сочетание

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

Mint (ссылка https://www.mint.com/)

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

Цветовое решение

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

Boords (ссылка https://boords.com/)

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

Цветовое решение

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

Airtable (ссылка https://airtable.com/)

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

Цветовое решение

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

Intercom (ссылка https://www.intercom.com/)

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

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

Цветовое решение

От сочетания черного с акцентами голубого сложно оторвать взгляд – ультрасовременно и ярко. 

Later (ссылка https://later.com/)

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

Блоги 

Engadget (ссылка https://www.engadget.com/)

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

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

TechCrunch (ссылка https://techcrunch.com/) 

Узнаваемый стиль блога TechCrunch – зеленые акценты в лаконичной ленте. При этом акценты используются очень аккуратно, не отвлекают от основного смысла. 

Цветовое решение 

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

Adobe Spark (ссылка https://blog.adobespark.com/)

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

Цветовое решение

Яркие и красочные изображения эффектно смотрятся на максимально нейтральном светлом фоне. 

The Verge (ссылка https://www.theverge.com/) 

Яркие неоновые цвета – вот стиль блога The Verge. Палитра смотрится эффектно как на черном фоне (первый экран и подвал сайта), так и на белом фоне (основная часть блога). 

Цветовое решение

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

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

Палитра №1: #FBE8A6 – #F4976C – #303C6C – #B4DFE5 – #D2FDFF

Энергичная и оптимистичная палитра создана для ярких проектов. Автор Cher Ami

Палитра №2: #F8E9A1 – #F76C6C – #A8D0E6 – #374785 – #24305E         

Яркая и элегантная цветовая схема сочетает в себе сразу несколько бросающихся в глаза оттенков: современно и со вкусом.  Автор Waaark  

Палитра №3: #0B0C10 – #1F2833 – #C5C6C7 – #66FCF1 – #45A29E

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

Палитра №4: #1A1A1D – #4E4E50 – #6F2232 – #950740 – #C3073F

Розовые, красные и серые оттенки отлично смотрятся на темном фоне и ассоциируется с утонченностью и минимализмом. Автор Bryan James

Палитра №5: #25274D – #464866 – #AAABB8 – #2E9CCA – #29648A

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

Поможем разработать эффектный и современный блог на сайте. Отправить заявку.

4. Ecommerce и ритейл (интернет-магазины любой направленности и масштабов деятельности)

Hard Graft (ссылка https://www.hardgraft.com/) 

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

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

Цветовое решение

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

Pure Fix (ссылка https://www.purecycles.com/) 

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

Грамотно организованная верстка и чистый дизайн, что вполне соответствует бренду (pure – чистый)

The Born (ссылка https://www.bornshoes.com/) 

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

Sanctuary T Shop (ссылка https://www.shopsanctuaryt.com/) 

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

Цветовое решение

Отражает близость к природе, пробуждает аппетит. 

Soko Glam (ссыдка https://sokoglam.com/)

Страница корейского салона красоты Soko Glam с первого экрана рассказывает о том, какие продукты и почему нужно приобрести. Дополнительные вкладки в процессе прокрутки о подборе средств, фото в стиле «до» и «после», а также лента из Instagram подогревают интерес и убеждают посетителей совершить покупку. 

Цветовое решение

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

Hubble (ссылка https://www.hubblecontacts.com/pages/home)

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

Цветовое решение 

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

Birchbox (ссылка https://www.birchbox.com/)

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

Цветовое решение

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

Цветовое решение для интернет-сайтов в сегменте E-commerce сильно зависит от того, в какой именно отрасли представлена компания. Мы постарались подобрать цветовые сочетания, подходящие самым разным направлениям: 

Палитра №1: #806543 – #33266E – #111111 – #542F34 – #A6607C

Гламурный и свежий взгляд на дизайн сайтов, цвета подчеркнут статус владельца. Отлично подойдет для fashion-индустрии (одежда, обувь, аксессуары…). Автор Apart

Палитра №2: #d9a5b3 – #1868ae – #c6d7eb

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

Палитра №3: #e3b448 – #cbd18f – #3a6b35

Комбинация цветов ассоциируется с деревьями и природой. Отлично подойдет для эко-ниши и органических продуктов. Автор: Martis Lupus

Палитра №4: #1F2605 – #1F6521 – #53900F – #A4A71E – #D6CE15

Сочные цитрусовые оттенки – лучший выбор для сайтов о спорте и экстриме. Автор: Superhero Cheesecake

Палитра №5: #d72631 – #a2d5c6 – #077b8a – #5c3c92

Комбинация цветов, основанная на триаде, – отличное решение для цветочных мотивов и создания винтажного настроения. Автор: Mad pepper

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

5. Культура, хобби, образ и стиль жизни (музыкальные, творческие, спортивные, кино-проекты, сообщества по интересам)

Jeff Bridges Sleep Tapes (ссылка http://www.dreamingwithjeff.com/) 

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

Цветовое решение 

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

Justin Timberlake (ссылка https://justintimberlake.com/)

Страница Джастина Тимберлейка – пример адаптации артиста под самые актуальные свои работы (Man of the Woods). Используйте этот прием, если ваш продукт или бренд сильно зависит от времени года или каких-то важных отраслевых событий. 

Цветовое решение 

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

Carbone (ссылка https://carbone.ink/) 

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

Цветовое решение

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

Brit + Co (ссылка https://www.brit.co/)

Отличный пример чистого и свободного от лишнего шума дизайна.

Каждая статья помечена темой-рубрикой (образ жизни, здоровье, дом и т. д.), что позволяет сузить фокус интересов. 

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

Цветовое решение

Расслабляющая, но яркая палитра ассоциируется с оптимизмом и энергией

Apartment Therapy (ссылка https://www.apartmenttherapy.com/) 

Нажмите «Меню» в левом верхнем углу, чтобы открыть боковую панель с категориями статей. Если, конечно, не хотите бесконечно листать ленту. Прекрасный пример юзабилити сайта: такой рубрикатор позволяет выделить контент, наиболее интересный посетителям.

Dwell (ссылка http://dwell.com/)

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

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

Палитра №1: #2E1114 – #501B1D – #64485C – #83677B – #ADADAD. 

Красно-коричневый в комбинации с насыщенным красным и лавандовым привлекает своей глубиной и уникальностью. Автор: ReedBe

Палитра №2: #2C3531 – #116466 – #D9B08C – #FFCB9A – #D1E8E2. 

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

Палитра №3: #D83F87 – #2A1B3D – #44318D – #E98074 – #A4B3B6

Идеальный пример цветовой схемы для модного сегодня стиля киберпанк. Яркие неоновые оттенки и грамотно подобранные акценты выведут любой сайт на новый уровень. Автор: FCINQ

Палитра №4: #4285F4 – #5C2018 – #BC4639 – #D4A59A – #F3E0DC

Сочетание красного и синего смотрится интересно и подчеркивает уникальность проекта. Автор: Google Brand Studio

Палитра №5: #b85042 – #e7e8d1 – #a7beae

Сочетание приглушенных первичных цветов создает необычную палитру, которая выглядит очень серьезно и загадочно. Автор: nevergohungry

Поможем разработать веб-ресурс, который выделит вас из толпы. Отправить заявку.

26 вдохновляющих цветовых схем веб-сайтов в 2021 году (палитры для дальтоников)

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

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

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

Как выбрать цветовую схему для вашего сайта

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

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

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

Выбор цвета по отрасли

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

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

Цвета бренда по отраслям (Источник изображения: towergateinsurance.co.uk)

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

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

Синие конвейеры:

Синий — цвет надежности

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

Это не апеллирует к спонтанности или эмоциям. Вместо этого он инициирует спокойный и логичный процесс принятия решений.

Наиболее часто встречается в следующих отраслях:

• Банковское дело
• Авиакомпания
• Связь
• Потребительское финансирование
• Электроэнергетика
• Тяжелая техника
• Товары для дома
• Отели
• Фармацевтические препараты

Красный цвет передает внимание и страсть

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

Наиболее часто встречается в следующих отраслях:

• Рестораны
• Напитки
• Розничная торговля продуктами питания
• Недвижимость
• Одежда

Зеленый передает ощущение жизненной силы

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

Наиболее часто встречается в следующих отраслях:

• Продукты питания и напитки
• Универмаги
• Недвижимость
• Химические вещества

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

Наиболее часто встречается в следующих отраслях:

• Одежда
• Принадлежности
• Провайдеры услуг Интернета и мобильной связи
• Универмаги
• Отели

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

Сколько цветовых схем следует использовать на одном веб-сайте?

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

Но сколько разных цветовых схем следует использовать на одном веб-сайте?

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

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

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

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

Как получить точные цветовые схемы на веб-сайте

Colorzilla

Чтобы идентифицировать каждый цвет, используемый на веб-сайте, вплоть до точного оттенка и шестнадцатеричного кода, вы можете использовать расширение Google Chrome или надстройку Firefox, например ColorZilla.

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

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

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

Какую цветовую схему веб-сайта мы используем в Kinsta?

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

Медиа-комплект Kinsta

Мы используем темно-фиолетовый (# 5333ed) в качестве основного цвета, бирюзовый (# 2cd4d9), чтобы сопоставить и создать эффектные, но сбалансированные градиенты, и приглушенный серый цвет для текста (# 6E7076).

Но что делают другие компании?

Давай узнаем!

26 лучших примеров цветовой схемы веб-сайтов

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

Цветовые схемы для великих сайтов электронной коммерции

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

1. Средство для ухода за кожей: яркое и игривое

Bliss

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

2. Бренд одежды: Clear and Concise

Le Bonnet

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

3. Магазин одежды: Simplicity

Редакция

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

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

4. Посуда: надежность и профессионализм

Моя посуда

My Tableware — это немецкий сайт электронной коммерции, где продаются столовые приборы и блюда по индивидуальному заказу.

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

5. Жевательная резинка: натуральная и импульсная

Neuro

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

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

6. Наручные часы: изысканность и роскошь

Премьер-посол

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

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

7. Брюки: креативные и доступные

Алдай

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

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

8. Фруктовые закуски: элегантные и подчеркнутые цвета

Мэдис

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

Черный фон и желтое олицетворение спелого манго подчеркивают простоту дизайна и создают элегантный конечный продукт.

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

9.Джинсовая ткань индивидуального кроя: It’s Alive

Без вращения

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

Цветовые схемы для личных и туристических веб-сайтов

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

10. Творческая простота

Мадлен Далла

Мадлен Далла — фотограф из Нью-Йорка с большим чутьем в дизайне веб-сайтов (и впечатляющим портфолио).

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

11. Оттенки серого с всплеском

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

12. Единение с природой

iFly 50

iFly 50 — это онлайн-журнал, выпущенный KLM в честь своего 50-летия.

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

13. Чистота и профессионализм

Бенедиктас Гилис

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

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

14. Прагматичные цвета

BucketListly

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

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

15. Элегантная простота

Ларс Франзен

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

16. Футуристическая накладка

Точечное легкое

Dot Lung отлично справляется с задачей максимизировать простую цветовую палитру с наложениями и чистой фоновой графикой. Фиолетовый цвет на заднем плане создает единое впечатление от страницы к странице.

17. Свет и тьма

Любовь к Исландии

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

Цветовая схема целевой страницы

Ниже мы выделили различные целевые страницы с уникальными или эффективными цветовыми схемами.

18.Резкие контрасты

Зенли

Zenly использует резко контрастирующие цвета, чтобы подчеркнуть фактическую функциональность приложения Live Map (кстати, именно так вы встраиваете Google Maps на сайты WordPress). Космический фон выделяет глобальный дизайн приложения и придает ему футуристический оттенок.

19. Цвет для выделения

Slack

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

Обязательно ознакомьтесь с нашим подробным сравнением Microsoft Teams и Slack.

20. Яркие цвета вызывают эмоции

Spotify

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

21. Цветовые контрасты создают порядок в хаосе

Автономность

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

22. Футуристический ансамбль цветов

Багснаг

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

23. Живые цвета

Connect Homes

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

24. Консервативные цвета, игривый дизайн

Plink

Plink основана на относительно консервативном оттенке темно-синего, но уравновешивает его игривой и веселой анимацией и дизайном в целом.

25. Природная жизненная сила

Travelshift

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

26. Яркие краски надежды

Мазок в мире

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

Генераторы цветовых схем веб-сайтов

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

Colormind

Colormind

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

Coolors.co

Coolors.co

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

Палетон

Палетон

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

ColorSpace

ColorSpace

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

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

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

Различные виды дальтонизма

Не все видят «стандартную» цветовую гамму. Существует три основных типа дальтонизма: дейтеранопия, протанопия и тританопия.

Красно-зеленая дальтонизм (дейтеранопия и протанопия) — наиболее распространенная форма дальтонизма. Это поражает примерно 1 из 12 лиц североевропейского происхождения. Учитывая такое большое количество людей, затронутых этим, это стоит учитывать при разработке и / выборе темы WordPress.

Сине-желтая цветовая слепота встречается гораздо реже и одинаково поражает мужчин и женщин.

Как выбрать для своего веб-сайта палитру для дальтоников

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

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

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

Сводка

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

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

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

А теперь пора выбрать шрифты, не так ли?

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

• Мгновенная помощь от экспертов по хостингу WordPress, 24/7.
• Интеграция Cloudflare Enterprise.
• Глобальный охват аудитории с 28 центрами обработки данных по всему миру.
• Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

50 цветовых схем веб-сайта для вашего вдохновения

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

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

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

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

01. Смелая и дерзкая

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

02. Шикарный и элегантный

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

03. Осенний бриз

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

04. Чистый и минималистичный

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

05. Candy delight

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

06. Dreamy skies

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

07. Изящный и аккуратный

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

08. Естественный и нежный

Иллюстратор Кристин Ми Лин, создательница Blush & May, использует мягкие оттенки и много белого пространства на главной странице своего веб-сайта. Она свела к минимуму использование цвета, выбрав светло-розовые и бежевые тона, а также несколько естественных оттенков коричневого и зеленого. Эти цветовые решения вызывают воодушевляющее и успокаивающее ощущение, что идеально сочетается с ее иллюстрацией.

09. Флуоресцентный зеленый

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

10. Городское и промышленное строительство

Выбор цветовой схемы для веб-сайта фотографии может оказаться сложной задачей.В этом портфолио, посвященном фотографии и архитектуре, Béton Brut от Kimberley Jane Harris, домашняя страница представляет собой полноэкранную фотографию бетонного здания. Тусклые промышленные оттенки коричневого варьируются от темного к светлому, образуя интересные композиции, несмотря на монохроматичность изображения. Белый шрифт меню виден, не отвлекая внимание от фотографии.

11. Поп-ретро

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

12. Футуристические градиенты

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

13. Яркий и энергичный

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

14. Землистый и минималистичный

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

15. Техническая изысканность

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

16. Золотые лучи

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

17. Пурпурный с оттенками серого

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

18. Кобальтово-синий

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

19. Радужная пастель

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

20. Успокаивающий и естественный

В этом блоге о стиле жизни, Styling by Why Dee, есть фотографии, идеально подходящие для Pinterest, и подходящая цветовая схема. Нейтральные оттенки в сочетании с текстурой дерева и мрамора создают поистине успокаивающую цветовую палитру.Минимальное использование черного делает атмосферу легкой и воздушной, а несколько более ярких цветов, разбросанных вокруг, добавляют приятный штрих.

21. Теплый с холодными оттенками

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

22. Мягкие осенние оттенки

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

23. Глубокий и мистический

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

24. Крутой и освежающий

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

25. Изысканный и яркий

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

26. Классическое двухцветное комбо

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

27. Посыпать вечеринку

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

28. Легкий и профессиональный

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

29. Смелая и радостная

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

30. Яркий черный фон

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

31. Приглушенная винтажная тема

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

32. Простой и монохромный

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

33. Резкий контраст

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

34. Сюрреалистический и металлический

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

35. Яркие акцентные цвета

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

36. Игривый, но изысканный

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

37. Черничный молочный коктейль

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

38. Поразительно высокая контрастность

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

39. Пастельные тона

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

40. Темный и жуткий

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

41. Аппетитные оттенки

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

42. Мощный и смелый

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

43. Яркий и жизнерадостный

Смелый выбор оранжевого цвета на веб-сайте Dogs on the Streets сразу вызывает положительные эмоции, особенно в сочетании с белым. В дополнение к этому очень живому оранжевому, они выбрали вторичный цвет — темно-серый, в отличие от черного, чтобы тон оставался дружелюбным и доступным.

44. Простота космического пространства

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

45. Оттенки жевательной резинки

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

46. Нейтральный и элегантный

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

47. Основные цвета с изюминкой

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

48. Уникальные комбинации

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

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

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

50. Оттенки серого с оттенком цвета

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

Автор: Wix Team

20 лучших цветовых комбинаций, которые можно попробовать на своем веб-сайте [Руководство в закладках]

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

Лучшие цвета для веб-сайта

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

Вместо этого, при выборе цветов для своего веб-сайта следует учитывать две вещи:

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

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

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

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

1. Кораллово-красный и Викинг
2. Ист-Бэй, Лунный Рейкер и Призрак
3. Викинг и Карри
4. Желто-коричневая кожа, киноварь и Акапулько
5. Боттичелли, Непал и Корабельный серый
6. Персидский зеленый, Vista Blue, сиреневый и подсолнечный
7. Желтые календулы, ледяной холод и синий Vista
8. Специи, Тоскана, Яффо, Калико и желтый металл
9. Swiss Coffee, Schooner, Pharlap и шахтный вал
10. Тюльпанное дерево и пунга
11. Лебединый пух, Монте-Карло и обсерватория
12. Ваш розовый, сладко-горький и ализариновый малиновый
13. Пампасы, твой розовый и Мелани
14. Горный луг и магнолия
15. Терракота, порох, Moon Raker, Акапулько и Манхэттен
16. Сладко-горький, Космос, Нильский синий и Чайка
17. Malibu, Aero Blue, Picton Blue и Boston Blue
18. Навахо, белый и яркий мандарин
19. Голубь серый и Aero Blue
20. Милано красный и черный жемчуг

Конечно, группа загадочных названий цветов не поможет, если не увидеть их в действии.(Что такое «Фарлап»?)

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

1. Кораллово-красный и викинг

• Кораллово-красный: # F93943
• Викинг: # 7EB2DD

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

Источник изображения

2. Ист-Бэй, Мун Рейкер и Призрак

• Ист-Бэй: # 424874
• Moon Raker: # DCD6F7
.
• Призрак: # CACFD6

Если вам когда-либо надоели текстовые элементы предсказуемого черного и темно-серого цветов, то East Bay — темно-синий цвет, который является отличной альтернативой.Замените белый фон бледно-серым цветом Ghost для более красивого белого пространства. Затем добавьте бледные акценты, такие как лаванда Moon Raker, для мягкой палитры или выберите акценты высокой насыщенности, такие как розовый в примере ниже.

Источник изображения

3. Викинг и Карри

• Викинг: # 7EB2DD
• Гарри: # FFE8D4

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

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

Источник изображения

4. Желто-коричневая кожа, киноварь и Акапулько

• Желто-коричневая кожа: # F98866
• Киноварь: # FF420E
• Акапулько: # 80BD9E

Если вы любите апельсины, но ищете что-то более яркое, чем Karry, Tan Hide и Vermilion — прекрасные цвета, похожие на закат.

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

Источник изображения

5. Непал, Корабль Грей и Боттичелли

• Непал: # 90AFC5
• Корабельный серый: # 3E363F
• Боттичелли: # C4DFE6

Ship Grey — еще одна фантастическая альтернатива скучному черному тексту с его супер темным контрастом. Это хорошо сочетается с бледно-серо-голубыми оттенками Непала и Боттичелли.

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

Источник изображения

6. Персидский зеленый, Vista Blue, сиреневый и подсолнечный

• Персидский зеленый: # 00A6A6
• Vista Blue: # 98DBC6
• Чудесный: # F18D9E
• Подсолнечник: # E6D72A

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

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

Источник изображения

7. Желтые календулы, ледяной холод и синий Vista

• Желтые календулы: # F6E278
• Ледяной холод: # BCF4F5
• Vista Blue: # 98DBC6

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

Источник изображения

8.Специи, Тоскана, Яффо, Калико и желтый металл

• Специя: # 6E352C
• Тоскана: # CF5230
• Яффо: # F59A44
• Калико: # E3C598
• Желтый металл: # 6E612F

Пастель вам не нравится? Насладитесь яркими красными оттенками Spice и Tuscany и сумрачно-желтыми оттенками Jaffa и Yellow Metal. Они придают пикантность любому дизайну. Кроме того, с Calico вы можете получить яркий контраст, не прибегая к белому цвету, который может быть слишком крутым для палитры.

Источник изображения

9. Swiss Coffee, Schooner, Pharlap и шахта

• Швейцарский кофе: # E1DCD9
• Шхуна: # 8F868
• Pharlap: # A67F78
• Шахтный ствол: # 3E3C3C

Коричневый может быть чрезвычайно универсальным цветом, о чем свидетельствует этот монохромный набор цветов от Swiss Coffee (самый светлый) до Mine Shaft (самый темный).

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

Источник изображения

10. Тюльпанное дерево и пунга

• Тюльпанное дерево: # F2AB39
• Пунга: # 563C16

Tulip Tree — это глубокий насыщенный горчичный цвет, который привлекает внимание. Сочетание его с темно-оранжевым оттенком, таким как Punga (который выглядит как более темно-коричневый), создает богатый опыт в любом дизайне. Просто посмотрите, как UPS использует эту схему с отличной цветовой блокировкой и визуально привлекательной текстурой.

Источник изображения

11.Лебединый пух, Монте-Карло и обсерватория

• Лебединый пух: # D1EDE1
• Монте-Карло: # 7BC5AE
• Обсерватория: # 028C6A

Мятно-свежий! Еще одна монохромная палитра, на этот раз с бледно-зеленым цветом Swans Down и Monte Carlo с более темным оттенком Observatory. Белый цвет хорошо сочетается с этой схемой, как и контрастирующие апельсины или кораллы.

Источник изображения

12. Ваш розовый, сладко-горький и ализариновый малиновый

• Ваш розовый: # FFC2C3
• Сладко-горький: # FE7773
• Ализарин малиновый: # EA3238

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

Источник изображения

13. Пампасы, твой розовый и Мелани

• Пампасы: # F1EBE9
• Ваш розовый: # FFC2C3
• Мелани: # E6CBDD

Еще одна комбинация с ярким цветом Your Pink, которая переходит в тему жевательной резинки с более светлыми цветами Pampas и Melanie.

Источник изображения

14. Горный луг и магнолия

• Горный луг: # 1B998B
• Магнолия: # F8F1FF

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

Источник изображения

15. Терракота, порох, Moon Raker, Акапулько и Манхэттен

• Терракота: # E07A5F
• Порох: # 3D405B
• Moon Raker: # DCD6F7
.
• Акапулько: # 80BD9E
• Манхэттен: # F2CC8F

Эта комбинация пастельных тонов и глубокого насыщенного темно-пурпурно-синего цвета Gun Powder создает мягкую, но модную и смелую схему. Terracotta, Moon Raker, Acapulco и Manhattan — отличный выбор для цветного фона (как показано ниже) с Gun Powder в качестве контраста для текста и элементов навигации.

Источник изображения

16. Сладко-горький, Космос, Нильский синий и Чайка

• Сладко-горький: # FE7773
• Cosmos: # FFD8D8
• Нильский синий: # 194049
• Чайка: # 87CEEB

Бледно-голубой цвет Seagull и бледно-розовый цвет Cosmos хорошо сочетаются с смелым коралловым оттенком Bittersweet и темным Nile Blue (который представляет собой темно-голубоватый изумруд).

Для смелого образа сделайте последние основными цветами в дизайне, а более мягкие — тонкими акцентами.

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

Источник изображения

17. Malibu, Aero Blue, Picton Blue и Boston Blue

• Малибу: # 4DD7FF
• Aero Blue: # AEFFF1
• Синий Пиктон: # 32C3EE
• Бостонский синий: # 3B8FA1

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

Источник изображения

18. Белый навахо и яркий мандарин

• Белый навахо: # FFE0AC
• Яркий мандарин: # FF8C8C

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

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

Источник изображения

19. Голубино-серый и аэро-синий

• Голубь серый: # 666666
• Aero Blue: # AEFFF1

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

Источник изображения

20. Милано красный и черный жемчуг

• Красный Милано: # BA1200
• Черный жемчуг: # 031927

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

Источник изображения

Добавление цветного всплеска

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

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

Примечание редактора: этот пост был первоначально опубликован в октябре 2020 года и был обновлен для полноты.

Цветовые схемы веб-сайта: теория, практика и вдохновение

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

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

1. Как думать о цветовых палитрах для вашего веб-сайта
2. Определение вашего целевого рынка (и их реакции на цветовые схемы)
3. Психология цвета
4. Как выбрать цветовую схему
5. Инструменты для выбора цветовой палитры
6. Как применить ваши цвета на вашем веб-сайте
7. Цветовые схемы для вдохновляющих веб-сайтов в 2019 году

Как подумать о цветовых палитрах для вашего веб-сайта

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

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

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

Pro-tip: Чтобы избежать сюрпризов в будущем, попробуйте использовать анкету для клиентов, которая охватывает все, что вам нужно знать о бренде и существующих цветовых схемах веб-дизайна. Эти 9 основных вопросов (плюс бесплатный шаблон!) Помогут вам начать с правильного пути.

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

«Выбор цвета всегда должен соответствовать ценностям бренда. ”

Консультации для известных брендов

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

Например, возьмите Coca-Cola, один из самых популярных брендов в мире. Какой цвет приходит на ум?

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

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

Консультации для новых брендов

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

Что такое теория цвета? Как это связано с веб-дизайном?

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

Ознакомьтесь с 11 главными тенденциями дизайна

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

Определение вашего целевого рынка (и того, как они будут реагировать на цветовые схемы вашего сайта)

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

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

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

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

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

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

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

Вот обзор психологии цвета и того, что означают разные цвета:

• Красный: Яркий цвет, вызывающий сильные эмоции. Своей интенсивностью он создает ощущение безотлагательности.
• Оранжевый: Жизнерадостный и уверенный оранжевый передает идею энтузиазма. Однако это также может показаться цветом предостережения.
• Желтый: Желтый, как и оранжевый, дает ощущение бодрости. Он олицетворяет оптимизм и обычно привлекает внимание. Однако следует учитывать, что некоторые оттенки могут утомлять глаза.
• Зеленый: Символизирует рост и природу. Это означает здоровье, безмятежность и умиротворение. Это связано с богатством.
• Синий: Этот цвет ассоциируется с водой и дает ощущение спокойствия и безмятежности. Синий создает чувство безопасности и доверия и часто используется в корпорациях.
• Бирюза: Изысканный и связанный с исцелением.
• Фиолетовый: Цвет богатства и успеха. Это яркий цвет, но он также олицетворяет творчество.
• Коричневый: Дружелюбный, землистый, обычно изображающий на открытом воздухе.
• Черный: Цвет, создающий изысканное ощущение. Мы часто думаем о «элегантных» брендах из-за их исключительности и загадочности.
• Серый: Обеспечивает ощущение безопасности, надежности и интеллекта.
• Белый: Придает ощущение чистоты или нейтральности. Это ключевой цвет, потому что он добавляет пространство для передышки и так называемое «белое пространство».

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

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

Как выбрать цветовую схему вашего сайта

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

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

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

Инструменты для выбора цветовых схем