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

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

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

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

Давайте начнем!

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

1. Поцелуй мой кето

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

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

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

2. Кристофер Клоос

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

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

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

3. Обви

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

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

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

4. БлендДжет

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

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

5. Уди

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

Во-первых, то, как изображение сливается с всплывающим окном, визуально бросается в глаза и поддерживает текст: «Хотите обнять?»

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

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

6. Куркума Ко.

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

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

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

7. Кокосовое облако

Coconut Cloud уделяет все внимание своим продуктам. И в этом есть смысл… они выглядят восхитительно!

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

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

8. Дети STEM

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

Содержимое всплывающего окна начинается с перечеркнутого числа «$10.00». В сочетании с выделенным жирным шрифтом «Ничего для доставки» это делает точную ценность предложения очевидной для всех посетителей их сайта.

9. Бибадо

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

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

10. Куре

Дизайн всплывающего окна Qure — хороший пример того, как сделать два предложения одновременно.

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

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

11. Да, пожалуйста, здоровье

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

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

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

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

12. Флипы Фуллера

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

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

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

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

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