30 веб сайтов выполненных в жёлтом цвете


Содержание

Примеры идеального сочетания цветов в веб — дизайне

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

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

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

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

Очаровательный дизайн веб-сайтов с минимальным набором цветов: лучшие решения

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

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

Минимальное использование цветов веб-дизайне

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

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

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

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

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

Lukas ‘NK’ Nikitczuk

Дизайнер использует синий и светлый оттенок цвета мокко как основные в цветовой схеме, чтобы придать сайту Lukas ‘NK’ Nikitczuk нежный и изысканный вид. Абстрактный фон с трехмерными струями жидкости в сочетании с множеством круглых элементов умело создает атмосферу элегантности.

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

Panna’s en Akka’s

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

Последний задействован в создании определенной траектории взгляда от начала до конца сайта.

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

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

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

The Pete Design

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

PITCH Festival Amsterdam

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

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

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

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

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

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

Biere du Sorcier

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

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

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

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

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

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

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

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

Заключение

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

Данная публикация представляет собой перевод статьи « Charming Website Designs with Minimal Coloring: Best Practice » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

Теория цвета. Основные моменты

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

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

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

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

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

Цвет и эмоции

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

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

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

Красный цвет

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

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

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

Оранжевый цвет


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

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

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

Желтый цвет

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

Зеленый цвет

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

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

Синий цвет

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

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

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

Черный цвет

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

Цукерберг рекомендует:  Php - Гибкий Router на PHP

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

Белый цвет

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

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

Серый цвет

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

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

Бежевый цвет

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

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

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

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

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

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

Триада

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

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

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

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

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

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

Поисковая оптимизация или Search Engine Optimization (SEO) – это комплекс действий, направленных на изменение опре.

Плейсмент — это место размещения рекламы в социальных сетях Facebook и Instagram, а также сетях партнерах. Не для .

Безопасные Веб-цвета

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

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

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

Безопасные цвета были выведены математически, а не потому, что они кому-то больше пришлись по душе. Для получения безопасного цвета из Красного, Зелёного и Синего, нужно использовать только данные десятичные значения: 0, 51, 102, 153, 204, 255 — и никакие другие. Каждое из трёх шестнадцатеричных значений не должно отличаться от 00, 33, 66, 99, CC, FF.

Таблица Безопасных Веб-цветов

Палитра состоит из 216 безопасных веб-цветов. Под каждым цветом указаны два значения — RGB, для создания цвета в графическом редакторе, и его шестнадцатеричных HEX-код, для обозначения цвета в HTML.

Дизайн интернет сайта и цветовая гамма

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

Цвет мой зеркальце: дизайн интернет сайта запросто может увеличить конверсию

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

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

Смысл такой: используйте правильные цвета – и вы выиграете.

Что такое цветовая психология?

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

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

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

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

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

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

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

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

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


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

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

Почему так, а не иначе?

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

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

Woman’s Day использует все три любимых женских цвета и до сих пор остается очень популярным сайтом среди своей целевой аудитории.
Большинство людей наивно полагает, что универсально любимый цвет всех женщин – розовый. Это не так. Лишь малый процент женщин выбрали его в качестве любимого. Оттенки розового могут восприниматься нежными, а потому – женственными, однако, в большинстве случаев, это все же стереотип. Практика показывает, что именно синий, сиреневый и зеленый приведут на ваш сайт больше женской аудитории. А это, в свою очередь, скажется и на увеличении конверсии.

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

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

Красный: Молодость, Сила и отВажность

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

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

Дружелюбный и энергичный Оранжевый

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

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

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

Счастье с энтузиазмом: Желтый

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

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

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

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

Спокойный и надежный Синий

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

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

Зелень: Развитие и стабильность

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

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

Роскошный пурпур

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

Сила Черного

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

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

Белый: просто и ясно

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

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

Цукерберг рекомендует:  Обучение - Проблемы с установкой Netbeans 8.2

Меланхоличный и нейтральный серый

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

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

Беж — Подчеркивает окружающее

Бежевый – это своеобразный джокер. Его главная особенность состоит в выделении других цветов.

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

Айвори: просто, но со вкусом

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

Еще одна небольшая хитрость

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

Например, все элементы конверсии на сайте Dell – зеленые.

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

Вместо заключения

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

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

Понравилась наша статья, поделитесь с друзьями!

Цвет в веб-дизайне: как вызвать у пользователя нужные эмоции

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

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

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

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

Теория цвета

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

Можно разбить теорию цвета на три части:

Контраст

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


Дополнение

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

Резонанс

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

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

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

Эмоциональное восприятие цвета

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

На основе нескольких исследований — анализа, опубликованного на сайте Vandelay Design, и поста о цветах в Smash Magazine — мы объясним, как цвета влияют на эмоции и помогают создавать UX-дизайн.

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

Красный

Эмоции и ассоциации: власть, важность, молодость.

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

Например, красный цвет очень подходит сайту No Way NSA, цель которого — предупреждать о предполагаемых угрозах.

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

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

Оранжевый

Эмоции и ассоциации: дружелюбие, энергия, уникальность.

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

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

Жёлтый

Эмоции и ассоциации: счастье, энтузиазм, архаичность (более тёмные тона).

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

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

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

Зелёный цвет

Эмоции и ассоциации: рост, стабильность, темы финансов, темы окружающей среды.

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

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

Синий цвет

Эмоции и ассоциации: спокойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).

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

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

Отличный пример — агентство событийного дизайна Van Vliet & Trap. Используя синие цветы в качестве фона, они визуально намекнули на свои знания и умения во флористике, а также создали ощущение надёжности и доверия.

Van Vliet & Trap

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

Фиолетовый

Эмоции и ассоциации: роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).

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

Более светлые оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, тогда как тёмные оттенки кажутся более шикарными и таинственными.

Чёрный

Эмоции и ассоциации: власть, изысканность, нервозность.

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

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

Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля, как на сайте Dream and Reach компании BOSE.

Белый

Эмоции и ассоциации: чистота, простота, добродетель.

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

Сайт с работами Клоина Тошева

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

Серый цвет

Эмоции и ассоциации: нейтральность, формальность, меланхолия.

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

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

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

Бежевый

Эмоции и ассоциации: передаёт характер остальных цветов.

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

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

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


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

Эмоции и ассоциации: комфорт, элегантность, простота.

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

Можно использовать цвет слоновой кости вместо белого, чтобы смягчить контраст между ним и более тёмными цветами. Например, на сайте Art in My Coffee коричнево-оранжевые элементы размещены на фоне цвета слоновой кости (который выглядит сероватым), что сохраняет ощущение теплоты.

Art in My Coffee

Цветовая гамма

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

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

Триада (тройная гармония, треугольник)

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

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

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

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

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

Аналоги (последовательная система)

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

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

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

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

Инструменты-помощники для выбора цвета

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

  1. Adobe Color CC, ранее известный как Adobe Kuler. Это один из самых надёжных инструментов в выборе цвета.
  2. Paletton. Если вам нужен простой инструмент для максимально быстрого выбора цвета, Paletton отлично подойдёт.
  3. Flat UI Color Picker. Прекрасный инструмент для выбора цвета пользовательского интерфейса.

А если эти инструменты вам не подходят, вот ещё 28 сайтов с палитрами и разными инструментами для выбора цвета.

Прямая зависимость между цветом и эмоциями

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

Цукерберг рекомендует:  Новичок - С чего начать новечку

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

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

30 веб сайтов выполненных в жёлтом цвете

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

Цветовая схема сайта: 4 рекомендации и 8 примеров для улучшения взаимодействия с пользователями

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

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

1. Повышайте узнаваемость бренда

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

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

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

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

2. Определите, как посетители ассоциируют ваш сайт

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

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

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

3. Выберите подходящую палитру

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

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

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

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

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

4. Выберите цвета, не входящие в основную палитру

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

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

Согласно исследованию Consumer Preferences for Color Combinations было определено, что несмотря на то, что потребители в большей мере предпочитают цветовые решения, находящиеся в пределах одной цветовой гаммы, они также предпочитают цветовые решения, в которые включены контрастирующие цвета, акцентирующие внимание.

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

Помните о том, что максимально рекомендуемое количество цветов сайта — четыре:

  1. Основной фон.
  2. Основной текст.
  3. Ключевой цвет проекта.
  4. Ключевой цвет ховера.

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

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

Дата публикации: 2020-01-27

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


Цветовая теория для «чайников»

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Контраст.

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

Дополнение.

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

Резонанс.

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

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

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

Какие эмоции вызывают цвета?

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

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

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

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

Инструменты для выбора цветовой гаммы веб-сайта

Воплотить теорию на практике и выбрать цвет для сайта можно даже онлайн. Сэкономьте время на создании собственной палитры и воспользуйтесь готовыми: Adobe Color CC, Paletton или Flat UI Color Picker. Если вам не понравятся эти инструменты, можете поискать в интернете другие — их там огромное количество.

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

Подписывайтесь на мой блог и делитесь ссылкой на него с друзьями! Пока!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

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

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

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

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

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

С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.

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

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

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

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

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

Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic :)

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

На этом сайте необходимо указать ссылку на изображение.

На этот сайт нужно загрузить картинку со своего компьютера.

Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».

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

Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.

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

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

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

Нужен сайт с правильными цветами? Пишите, сделаем :)

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих