Контурные кнопки: 15 примеров призывов к действию на посадочных страницах

Контурные кнопки (ghost buttons) стали одним из самых популярных трендов разработки интерфейса пользователя за последний год. Это неудивительно, поскольку они имеют последовательность значительных преимуществ. Но как добиться того, дабы данный элемент дизайна не просто украшал лендинг, а начинал трудиться на вас?

Из-за чего стоит выбирать прозрачные кнопки призывов к действию?

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

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

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

И, наконец, такие элементы дизайна легко и скоро создаются средствами HTML и CSS.

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

  • 99 примеров действенных элементов призыва к действию

1. Харуки Мураками

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

2. Born Group

Сравнительно не так давно маркетинговая компания Group FMG заявила о слиянии с POD1, и сейчас она известна под брендом Born Group. На ее посадочной странице употребляется специально разработанная «фишка»: открывая ресурс, мы видим фото агрессивного примата.

Интуитивная реакция, вероятнее, вынудит нас закрыть эту фотографию и стремительнее перейти к предстоящей навигации, надавив контурную кнопку «Потом». Помимо этого, зверь выступает как знак лидерства компании в собственной сфере, иллюстрируя «альфа-статус» Born Group.

3. BigDrop

BigDrop — веб-студия. На ее лендинге мы видим читабельную контурную кнопку-призыв к действию (CTA, Call To Action), которая мгновенно завлекает внимание. Она подсвечивается желтым, в то время, когда пользователь наводит на нее курсор, Помимо этого, внизу страницы мы видим прозрачный значок мыши, что облегчает скроллинг.

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

  • Как дизайн CTA-кнопки может расширить конверсию?

4. Bundlin

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

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

5. Nerisson

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

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

  • 94 примера действенных призывов к действию

6. Parallax

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

7. The Distance

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

Они понравятся вашим визитёрам, снимут появившееся конверсионное трение и разбудят их внимание, сделав выговор в том месте, где это нужно.

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

8. Powerhouse Company

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

9.Integra

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

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

10. Urban Influence

Брендинговая компания Urban Influence воображает нам пример самоё «либерального» применения кнопок-призраков (среди всех приведенных).

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

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

11. Five Minutes

Five Minutes — захватывающая онлайн-игра, в которой вам предстоит побегать от зомби. В действительности, она больше напоминает кино, исходя из этого создатели решили загрузить вас в соответствующую воздух уже на домашней странице. И вправду, графический интерфейс пользователя (HUD, head-up display) в сочетании с контурными кнопками напоминает нам о таких картинах, как «Особенное вывод» (Minority Report) либо «Железный Человек» (Iron Man).

  • 4 необходимых элемента высококонверсионного призыва к действию

12. Budoucnost

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

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

13. Panoptiqm

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

  • Тёплая десятка призывов к действию

14. Drygital

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

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

15. Rosewater Film

Сравнительно не так давно в перечень профессий американского комика, сатирика, актера, продюсера и писателя Джона Стюарта (Jon Stewart) добавился еще один пункт — режиссер. Для продвижения собственных проектов он открыл новый сайт Rosewater Film.

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

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

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

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

По данным: uxmag.comImage source jonfeinstein

Случайные статьи:

Как изменить кнопку призыва к действию на Странице Facebook


Подборка похожих статей:

riasevastopol