Главное Свежее Вакансии   Проекты
😼
Выбор
редакции
678 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Градиенты в email-дизайне. Ликбез и вдохновляющие примеры

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

Градиенты в email-дизайне. Ликбез и вдохновляющие примеры


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

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

Этот элемент дизайна получил широкое распространение еще в 60-х годах прошлого века, но в современном дизайне его днем рождения можно считать 11 мая 2016 года, когда Instagram обновил логотип.


Instagram

Что такое градиенты


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

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

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

«В природе цвет создается светом, в картине источник света — цвет» — Ганс Хоффман, художник-экспрессионист

Как сделать градиент


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

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

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

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


Линейный и радиальный градиенты

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

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


Редактор eSputnik

Также вы можете воспользоваться сторонними генераторами градиентов, такими как CoolHue, CSS Gradient или UI Gradients.

Примеры градиентов в емейл-рассылках


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

eSputnik


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


Mondly


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


Mondly

Lingualeo

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


Lingualeo

Email Competitors


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


Градиенты в рассылке Email-Competitors

1973.LTD


Маркетинговое агентство 1973.LTD размещает на многотональной закатной подложке текст письма и акцентирует внимание на 2 баннерах с призывами к действию.


1973.LTD

Spotify


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


Spotify

SimpleWine


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


Simple Wine

Tea.ru


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


Tea.ru

Caribou Coffee


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


Caribou Coffee

J.Сrew


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


J.Crew

UNIONMADE


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

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


UNIONMADE

Hallelu Boutique


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

Эта рассылка отражает еще один важный тренд 2021 — ностальгию и ретростилистику как ее следствие.


Hallelu Boutique

Curtis


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

Среди других преимуществ письма нельзя не упомянуть полную готовность к прочтению в режиме dark mode.


Curtis

Неудачный пример


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


Неудачное использование градиента

В заключение


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

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

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

Источник: eSputnik

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем