Актуальные яркие цветовые сочетания для создания современного сайта: 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 выигрышных цветовых сочетаний 

Если перед вами стоит задача разработки дизайна сайта агентства или креативной студии, возьмите на вооружение 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 проделали огромную работу в направлении того, чтобы создать такую легкую и простую страницу. При этом они не забыли указать посетителям причины, почему с ними стоит работать, разместили форму и кратко информацию о себе. 

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

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

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

Выводы: ТОП 5 выигрышных цветовых сочетаний

Если работаете в 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. Палитра смотрится эффектно как на черном фоне (первый экран и подвал сайта), так и на белом фоне (основная часть блога). 

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

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

Выводы: ТОП 5 выигрышных цветовых сочетаний

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

Палитра №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, которые убеждают посетителя купить продукт. Попробуйте повторить в разработке своего лендинга такую схему! 

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

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

Выводы: ТОП 5 выигрышных цветовых сочетаний

Цветовое решение для интернет-сайтов в сегменте 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 также разбивает содержимое своего сайта на несколько разделов, чтобы улучшить навигацию по блогу. Из особенных преимуществ этого ресурса – отдельно вынесенные разделы с тенденциями. 

Выводы: ТОП 5 выигрышных цветовых сочетаний

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

Палитра №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

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