Большое количество сайтов, которые находятся в рунете, очень однообразны, а всегда необходимо создавать что-то новое, необычное, привлекающее внимание. На этот раз я решил написать статью не просто об очередном эффекте на сайте, а показать как данные эффекты можно объединить в рамках одного большого проекта. Это очень важно, чтобы Ваш сайт не смотрел как набор бессмысленно появляющейся из разных сторон анимации. Вашему вниманию я хочу представить подборку из 10 лучших интерактивных Landing Page, на которые стоит обратить внимание.
О том с чего начать при изучении создания сайтов, а в частности лендингов, я рассказал в небольшом мини-курсе: .
Итак, вот подборка из 9 лендингов где стоит черпать вдохновение:
Подборка — лучшие интерактивные Landing Page
1 Fixed Group
Отличный вариант сайта, на котором нельзя даже мышку сместить, как сразу увидите искажение блока с контентом в ответ. Сзади медленно "плывет" космос. Переходы также не могут оставить равнодушным, ведь они все происходят с интересным эффектом, и создается впечатление, что каждый из блоков "разрезан" на две половинки.
2 Fubiz
На данном сайте ничего не появляется при прокрутке, но здесь очень на элементы: раскрывающиеся списки, смена цвета, появление дополнительных элементов и описания. Никаких резких эффектов, всё выполнено в едином стиле. Рекомендую обратить внимание на эффекты, некоторые из них можно применить и на своих проектах.
3 Vimeo
Этот проект должен быть Вам уже знаком — это профессиональный видео-хостинг. Но данная страница рассказывает о возможности редактирования видео прямо из мобильного устройства. Но я хочу заострить внимание на эффектах, которые происходят при прокрутке страницы. Сначала происходит уменьшение фонового изображения в шапке, а затем появляется в телефон. Очень привлекает внимание, не правда ли?
4 Black Negative
Отличительной особенностью данного сайта перед всеми остальными является его нестандартная прокрутка. Как Вы могли заметить — она горизонтальная. Также перемещение происходит при помощи перетаскивания контента влево. Но что еще больше впечатляет — это количество эффектов в каждом блоках: , , а также вертикальная прокрутка блоков. Видео на фоне немного сбивает, но всё же выполнено всё достаточно оригинально и необычно.
5 Super Top Secret
Здесь хочу обратить Ваше внимание не на эффекты при наведении, а на фон. После полной загрузки сайта при перемещении курсора мыши на фоне появляются разводы, как на воде. Также по клику создаются разводы, и такой эффект производит отличное впечатление. Не на каждом сайте увидишь такое.
6 WE AIN’T PLASTIC
В процессе прокрутки на странице появляются (рисуются) различные иконки и заголовки. Не осознавая начинаешь смотреть на процесс рисования и ждать что же там появится в конце, тем самым читая текст, который нарисовался. Если Вам интересно как же создается данный эффект и Вы хотите создать такой же эффект на своем сайте или лендинге, тогда изучите данные статьи: и .
7 ANTON & IRENE
8 BLITZ
Что привлекло меня данном сайте, так это эффекты при наведении. Хоть сайт и создан в современном стиле минимализма, но здесь очень красиво сочетаются 3D объекты: раскрывающиеся открытки, движение объектов на открытке. Также обратите внимание на
This article was contributed by Alice Jackson & Patrick Cole.
First impressions matter! This is why it is important to know the latest landing page design trends. Let’s take a look at where we are at in 2016.
Take a look at the Google trends graph that clearly shows how interest for ‘creative landing pages’ has been steadily growing since 2009. You can also see some landing page software reviews here that compares different services for building successful landing pages.
This is because marketers and professionals are aware that a creative and unique landing page can boost conversation rate dramatically . (Tweet this)
An eye-catching landing page is something every business craves, as it is the best way to convert strangers on your site into paying consumers.
Given the ever-increasing competition on the web, optimization of your landing page is crucial for capturing a visitor’s attention, as well as increasing traffic . Having a well-designed and intuitive landing page is a must for any business.
You could also offer various services such as free trials or coupons for your product or service through your landing page to your customers, and gather information such as their name and email. This is, of course, just one of the many features you can add on your landing page to increase leads.
Below we take a look at 7 landing page design trends for 2016, that you need to know to stay ahead of the curve.
1. Auto Play Full-Screen Video Background
This trend of having full screen videos or images as background is already being used widely by many businesses. Having such a landing page is a treat for the eyes, as videos pack in enough punch to entertain, and engage your visitors. More and more marketers are using this technique for drawing visitors deeper into their websites since it gives them an opportunity to convey their message about the product or service much more easily. If you have an entertaining video, there is little chance the user will hit the back button. For instance, check out the landing page of Walabot .
2. 3D Parallax Storytelling
Parallax scrolling is one of the biggest design trends at the moment and has been for a quite some time. It gives the user a 3D effect as they scroll down the page. According to Hubspot, a parallax effect on a website is when content scrolls at different speeds, creating a sense of perspective and depth . If done in the right way, it can engage and entertain your users and help convey your message step-by-step . Tech giant, Sony used parallax scrolling to excite its users, while providing them information about the brand in their now removed ‘Be Moved’ campaign. Here, you can see a video of how the site reacted to scrolling.
Navigation should always be user-friendly but there is no harm in trying out a different method from the usual scrolling . See this post for more . You can have a standard navigation bar on the top or you can try a unique style. For example, have a look at the landing page of Kurka Wolna . It mesmerizes the users with its unique style of providing information while the user scrolls anyway. It is actually engaging!
3. Branded Illustrations
Your aim should be to create a landing page which stands out from the crowd. Instead of using images or videos, you can use illustrations to tell something about, or related to, your product or service. With a unique illustration style, it will give site visitors the feeling of you being different from other websites .
4. No Navigation Bar
Navigation bars no doubt make things easy for users to find what they are looking for, but removing the navigation bar or trying a different navigation method on your landing page may make your audience spend some more time on your site .
They won’t get distracted by looking at different navigation icons and can focus on what information you have provided them with. This is exactly what Quincy Réquin & Associés legal site have done on the landing page of their site. Each link connects you to a page which provides specific, targeted information. It is their logo design which catches the eye of site visitors when they first land on the page.
5. Super Simplification
This trend is here to stay. Simplicity is the key to success, right? Though there are a lot of options available, as discussed above, a simplistic design can often communicate much better as it allows the user to focus on the content at hand . For instance, take a glance at this simple yet elegant landing page: Kalium . The focus is on the work, with a simple clear statement at the header of the page, free of other words or clutter. Take a look at your designs and see what can be taken away.
6. Split Screens
Often a website has multiple target audiences and what better way to split an audience than have a split screen? A good example of this Muck Rack ‘s landing page which splits the page between marketers and bloggers. CoSchedule goes even further and has a pop up when you scroll down the page with 3 choices which then loads the next section of the page.
Before people make the decision to purchase something or even to subscribe to a mailing list, they usually want to vet out the business that they are dealing with. One of the most common ways to do this is to read about the experiences that others have had. In most cases, this is done by reading product review websites, and by asking peers on social media.
The only problem with this is that when a customer is on your landing page, the last thing you want is for them to be clicking on another tab and diverting their attention to another website. This is why including social proof directly on the landing page is a trend that will increase in popularity in 2016.
Social proof can be added to a landing page using many different options these include:
- Adding badges and ratings from professional and regulatory organizations such as the BBB
- Quotes from satisfied customers
- Endorsements from influencers
- Subscriber and social media counts
- Logos of well known clients
- Media Logos
Each of these items provides proof of quality of products and services and can significantly increase the level of trust that visitors have.
Продающие сайты. Что это такое? Каждый второй скажет: “Конечно же, это лендинги!”. Они же одностраничники, они же лендинг пэйдж, они же продающие страницы.
Убеждать Вас в обратном не буду, ведь в этих словах большая доля правды. Поэтому в этой статье мы разберём какие лендинги можно назвать лучшими и почему.
Именно поэтому я начал искать лучшие продающие сайты. Где посмотреть их примеры, рейтинги и как их оценить в принципе. Ведь изначально одностраничный сайт был придуман для того, чтобы увеличить продажи компании.
В последнее же время очень многое поменялось. Ушли , которые были актуальны раньше, сайты стали делать более качественные, красивые, с большим количеством анимации, картинок и разных завлекающих фишек.
Критерии оценки сомнительны
По какому принципу оценивать ? Какие брать за основу? Как составить рейтинг ТОП-10 сайтов?
Где брать сайты на конкурс? Всё это усложняет ситуацию в создании настоящего и честного рейтинга лучших сайтов.
К тому же, мы не знаем сколько продаж компании совершают через подобные сайты. Им же нельзя позвонить и спросить: “А какая у вас ?” или “Сколько Вы получаете заявок из ?”.
Я уверен, никто не ответит на такой вопрос, так как либо никто не считает, либо скажет, что это конфиденциальная информация.
Ага, размечтались!
Поэтому я сделал проще. Стал искать и просматривать рейтинги и подборки лучших лендингов. И знаете что?
Сайт долго загружается, а это может очень сильно повлиять на показатель отказов. То есть люди будут уходить с него быстрее, чем увидят предложение.
2. Мастерская “Dinero”
Это не сайт, это целый фильм об одном “персонаже” - деревянном кошельке. Если бы он стоил 1 000- 2 000 р., то сайт бы провалился.
6. Проект “Большая сушка”
Большинство женщин (их целевая аудитория) слышали о проекте “Бешеная сушка”. Их реклама к запуску заполоняет весь интернет. И это не удивительно, когда инвестируются миллионы на трафик.
Но без хорошего сайта получить десятки миллионов выручки не получится, поэтому их сайт также входит в наш ТОП.
Проект “Большая сушка”
Видно, что к созданию подходили основательно, чего только одни тексты стоят. Но вот только совершили они одну большую ошибку - не сделали кнопку призыва в самом конце.
А это влияет на отток посетителей, в силу того, что они не видят логичного закрытия всей истории.
7.
Мы сами пользуемся системой взаимоотношений с клиентами Битрикс24. Но так как у нас тема не “ ”, то сайт системы Мегаплан превзошёл все ожидания.
Они через него донесли все главные моменты своей системы, после чего ты понимаешь, что это лучшее, что есть для бизнеса.
CRM “МегаПлан”
Из наших пожеланий по улучшению - добавить видео-обзор системы, так как у всех прямых конкурентов он есть. И также сделать более понятные призывы, а именно, заменить заголовки (не кнопки) на “Начните пользоваться бесплатно” или что-то в этом роде.
Кстати! Если Вы хотите использовать в качестве своей CRM-системы, то советую не забыть промо-код “Megastart”. Так Вы получите скидку на первую покупку 10% и 14 дней бесплатного использования.
8. Банк для предпринимателей “Точка”
Ещё один лендинг от банка. Он получает премию за свою оригинальность. Данная страница рассылается своим друзьям в качестве реферальной ссылки.
Для усиления эффекта мы бы добавили ещё несколько блоков, которые давят на логику. Так как сейчас сайт больше направлен на эмоции. В некоторых случаях это могло быть правильным решением, но так как у нас выбор банка, то одними эмоциями тут не обойтись.
Банк для предпринимателей “Точка”
9. Оснащение тренажерных залов “Goodfit”
Интересный переход сайта из чёрной гаммы в белую с голубым. Но помимо интересного дизайнерского решения, в данном лендинге используется отличная игра заголовков.
В данном исполнении они являются не подводкой к блоку, а самостоятельными элементами, прочитав которые, уже можно создать полную картину.
Для полной упаковки не хватает видео-презентации от лица генерального директора. Наверняка он у них в отличной физической форме.
И также было бы отлично добавить цифры к кейсам. То есть сколько стоит зал, который получил клиент. Но это не критично, а желательно.
Оснащение тренажерных залов “Goodfit”
10. Торговый центр “МЕТРОПОЛИС”
Безусловно, это самый лучший лендинг пейдж торгового центра, который я когда-либо видел. Красиво подобраны цвета, донесены главные смысла, отличное юзабилити. Это всё сразу видно при перехода на этот лендинг. Поэтому кликайте и изучайте.
Хотя вставлю свои 5 копеек. Я, конечно, понимаю, что на этот сайт должны попадать люди, которые знакомы с этим центром. Но также на него будут попадать люди, которые будут видеть его впервые.
А значит логично было сделать небольшой дескрипшен (описание в несколько слов о компании), чтобы посетитель сразу знал куда попал и что его ждёт там.
Торговый центр “МЕТРОПОЛИС”
Только Россия!?
Да, в своем обзоре я главным образом сконцентрировался на самые лучшие одностраничный сайты рунета, хотя в мире есть очень много достойных, хороших вариантов.
Причем, самое главное (и оно же самое удивительное), лендинг пейдж в буржунете использует не только малый бизнес, но и даже крупный бизнес.
К примеру, одна из самых известных служб такси в мире Uber взяла в качестве главного сайта следующий вариант - многофункциональный лендинг пейдж или, как еще принято говорить, многостраничный лендинг.
Это сайт, состоящий из множества лендингов. Практически многостраничный сайт. Но все-таки лендинг.
https://youtu.be/ClF-txTHGnc
Но, я специально не выкладываю их landing page здесь, потому что они другие. Пускай все говорят о том, что мы повторяем всё за западом, но в данном случае я считаю иначе.
Мы, русские, другие. У нас другой тип мышления, так как мы живём в другой стране.
Например, у Американца почти нет опасений в голове, что компания возьмёт деньги и растворится. Так как у них всё защищено на десять рядов, что только один PayPal стоит.
У нас же, в России, этот страх стоит в первых рядах. Поэтому у них на сайте мало убеждающих блоков доверять компании, а у нас их тьма.
Я могу приводить ещё десятки аргументов, что у нас с ними будут разные лучшие лендинги. Поэтому прошу простить, но их вариантов здесь не будет.
Лучше наслаждайтесь нашими русскими решениями. Моделируйте наши тексты и блоки. А в зарубежных сайтах просто берите хорошие идеи для дизайна.
Коротко о главном
Теперь, когда Вы просмотрели всех претендентов, я не призываю Вас вслепую на них ориентироваться, но посмотреть лучшие landing page для примера определенно стоит.
Как минимум, у кого-то можно взять идею интересно сделанной анимации. Или, например, кто-то из создателей в совершенстве знает свою и использует это в течении всего лендинга. В общем, изучить, сделать выводы и перенять стоит.
И кстати говоря, если Вы ищите идеи для своего первого лендинга, можете попробовать создать его самостоятельно. Так Вы поймёте что Вам нужно и что это не так просто, как кажется на первый взгляд.
Используйте для этого , например Платформа LP . А уже потом, мы ждём Вас к нам в гости на совместную разработку.
В этой статье мы рассмотрим 5 примеров лучших лендингов, взятых с behance.net, признанного мировыми дизайнерами самым популярным сайтом по веб-дизайну, иностранными заказчиками для поиска разработчиков и лучшим для вдохновения и черпания новых идей.
Ниже представлены лучшие лендинг пейдж, которые прошли отбор, непосредственно, нашей веб-студией. Мы взяли ТОПовые работы на сайте и выбрали landing page с наиболее эффективными продающими структурами, ведь именно продающая структура является главным преимуществом лендинга.
Дамы и господа! Знакомьтесь, самые крутые и лучшие продающие лендинги 2017-2018 по версии и популярного сайта behance.net.
Примеры лучших лендинг пейдж
Чтобы упорядочить примеры лучших лендингов, мы решили разбить их на блоки, свойственные продающей странице. Мы рассмотрим УТП, описание продукта, выгод и преимуществ, блок доверия и СТА на примерах отобранных лендингов. Вы сможете увидеть варианты оформления и структуры, почерпнув для себя ценную информацию и новые идеи.
Уникальное торговое предложение
Первый пример УТП лучшего лендинга 2019 года - фирма по продаже стульев.
Первое, что бросается в глаза - это фотография товара. Стильный стул действительно привлекает внимание, которое разжигается уникальным торговым предложением. Заметьте, УТП в этом случае нестандартное, отсутствуют какие-либо факты о компании или выгоды покупки. Но при этом мощный продающий текст и качественное изображение делают свое дело - повышают интерес посетителя, в чем и заключается принцип продающей структуры. Стоит сразу сказать, что то самое преимущество продукта размещено на втором и третьем слайде первого экрана.
Каждый слайд содержит фотографии товара с разных ракурсов и описание к нему. Очень мощный ход, который мотивирует читателя проскроллить страницу чуть ниже. Смотрите больше примеров посадочных страниц и черпайте новые идеи для своего проекта.
Следующий пример лучшего, по нашему мнению, лендинга - посадочная страница фирмы по продаже меда
Сочно, ярко, интересно. Очень крутой дизайн первого экрана. При этом уникальное торговое предложение раскрывает главное преимущество - экологичность продукта. УТП написано в мягкой форме, но при этом вызывает доверие.
Следующий пример лучшего лендинга
Первый экран совместил в себе УТП, предоставляющее ценность потенциальному клиенту, а также небольшой список кратких преимуществ. Очень интересно сделан снимок продукта, который на подсознании вызывает желание сделать заказ. Что, в общем-то, и предлагает эффективный лендинг на первом экране.
Первый экран с УТП содержит текст, вызывающий интерес, 3 преимущества производителя, СТА с кнопкой и видео, позволяющее узнать больше информации о компании. Экран оформлен красивым фото меблированного интерьера, подчеркивающее эксклюзивность продукта.
Еще один пример крутого landing page
Сразу бросается в глаза абсолютная нечитабельность текста. Зачем разработчики оформили текст белым цветом на белом фоне остается загадкой. Но, повторимся, лучший леднинг - тот, у которого четко проработана продающая структура, а этот пример работы относится именно к таким. Стильный экран с не очень эффективным еле просматриваемым УТП. К сожалению, фотография услуги компании не дает представление о ее деятельности - большой промах разработчиков.
Хотите узнать больше о УТП? Читайте статью с рекомендациями по созданию УТП на сайте Импульс Дизайн.
Описание продукции
На первом примере посетителю предоставляется возможность просмотреть вариации продукта и выбрать его вид. Блок очень удобен с точки зрения пользования. Все фотографии из каталога размещены в виде слайдеров, есть кнопки выбора цвета коробки и приведены примеры готовых работ. Посетитель визуально понимает что ему предлагают. Если он решился на заказ продукта, поможет ему в этом кнопка "Заказать".
Следующий пример описания продукции лучшего продающего лендинга содержит большие и яркие фотографии и категории.
Кроме того, для удобства посетителя предусмотрена лидогенерирующая кнопка. Она "убивает" сразу двух зайцев. Посетитель получает интересующую его информацию, а компания - клиента.
Продающая структура лендинг пейдж должна заключать в себе удобство для пользователя. Удобство во всем: принятии решения и его выполнения, просмотре товара. В случае со следующим примером описания товаров удобство пользования раскрывается на 100%.
Во-первых, представлены виды продукции, во-вторых, под каждым видом есть лидогенерирующая кнопка. При наведении мышкой на стул, меняется фотография и продукт представляется в другом положении, что помогает пользователю понять принцип эксплуатации продуктом и его вид.
Следующий продающий леднинг содержит полный каталог продукции, предоставляемой компанией. Отдельный плюс - красивое оформление и соответствие цветов общей тематики сайта.
Лаконичность - лучший друг лендинга. И следующий пример лучшего лэндинга это подтверждает.
Стильно и скромно, на белом фоне сделан акцент на фото и небольшое описание улуги с лидогенерирующей кнопкой. Остальные услуги сделаны в виде активных ссылок, при кликании на которые открываются другие фотографии с описаниями, соответствующие услугам.
Выгоды и преимущества на одностраничнике
Выгоды и преимущества фирмы для клиента являются эффективной мотивацией. Как правило, преимущества размещаются в начале сайта для разжигания интереса пользователя, а выгоды - ближе к концу, подталкивая посетителя к целевому действию. Оба блока должны содержать ценную информацию, отвечать на вопросы, подавлять страхи потенциального клиента. Рассмотрим на примерах крутых landing page.
Преимущества
Оба блока раскрывают ценности фирмы и конкретного товара. Читатель понимает где можно использовать продукт, его качественные характеристики. В качестве дополнения продемонстрированы конкурентные преимущества самой компании.
Следующий лендинг объединил в себе преимущества и выгоды. Читая и просматривая контент, пользователь убеждается в профессионализме производителя, что подавляет его основной страх - получить низкокачественный товар. Этот триггер демонстрирует лучший пример конверсионного лендинга .
В этом же блочке внедрена фишка, повышающая доверие пользователя к компании - видеоролик, который подробнее расскажет о производителе.
Аналогичное совмещение выгод и преимуществ показывает и следующий лендинг.
В этом случае устраняются страхи. Потенциальный покупатель знает, что натуральный мед - дикая редкость. В случае с одностраничником подтверждается натуральность продукта цифрами. Кроме того, пользователь может получить информацию о продукте, кликнув на кнопку и связавшись с представителями компании.
Еще один блок преимуществ выполнен в очень стильном дизайне и, в целом, довольно интересен. Просматривается профессионализм дизайнера, что однозначно привлекает внимание.
Казалось бы, преимущества можно описать 4 словами "Доставка по всей России", но графическая карта добавляет лендингу уникальности. К тому же, сама карта имеет тематическую направленность, что делает лендинг ну очень крутым.
ТОП лучших лендингов содержит интересные и эффективные решения. Следующий landing имеет небольшой блок преимуществ, который размещен сразу под блоком с УТП. Блок выгод оформлен отдельно и отвечает клиенту на вопросы стоимости, а также усиливает желание за счет скидок.
И еще один продающий лендинг, который раскрывает преимущества компании и выгоды для клиента. В качестве преимуществ описан принцип работы компании, который подавляет существующие страхи.
Усиливается желание благодаря небольшому блоку выгод
При этом компания демонстрирует выгоды для клиента не только тем, что использует во время процедуры качественные продукты, но и намекает о том, что косметика в продаже. Чему и свидетельствует кнопка с СТА.
Блок доверия на посадочной странице
Блок доверия не является обязательным требованием для лендинга, в отличие, например, от блока call-to-action. Однако он помогает пользователю решиться на целевое действие. Ведь лендинг, исходя из своей специфики, не предусматривает большое количество информационного текста о компании. Следовательно, лучше, если блок доверия будет реализован другими способами. Посмотрим как с этим справились ТОПовые лендинги.
Вариант 1. Отзывы
Очень практично и удобно размещен блок отзывов на сайте. Отдельный плюс - фото реальных людей: не моделей, не снимков людей, откровенно взятых из Интернета.
Вариант 2. Видео
Пожалуй, видео - один из самых эффективных способов повлиять на человека. Видеообращение всегда повышают доверие из-за прямого контакта с пользователями, которые уже стали клиентами и передают свои эмоции "вживую".
Вариант 3. Фотографии
Очень часто в качестве повышения доверия размещаются фотографии реальных специалистов, которые работают в компании. В нашем случае принято решение разместить реальные фотографии салона. Глядя на них, создается впечатление элитности. А элитное не может быть низкокачественным. Следовательно, доверие к компании усиливается.
На сладкое. Призыв к действию (СТА)
Первый лендос имеет "сочный" СТА, оформленный в едином стиле с сайтом. Желание сделать заказ усиливается скидкой.
Единственный минус - блок размещен в середине страницы. В идеале, нужно было разместить еще один призыв в самом конце, вместо этого добавлены небольшие кнопки, которые не сразу бросаются в глаза.
Следующий призыв к действию содержит не только лидогенерирующую кнопку, но и дополнительные выгоды для клиента. Очень продуманный призыв.
Завершает наш обзор еще один призыв к действию, оформленный в сочных тонах, привлекающих внимание.
Подведем итоги
Как видите, продающая структура продающей страницы является главным и мегаважным инструментом для повышения конверсии сайта. Нельзя сказать какая из структур, приведенная в лучших лендингах, будет наиболее эффективной. Скажем только одно: каждая структура должна максимально соответствовать потребностям целевой аудитории и максимально раскрывать преимущество компании/продукта/услуги. Добавьте к этому стильный и яркий дизайн, и вы обязательно получите ошеломляющую конверсию лендинга . Ну, а если вы пока не в силах создать свой продающий одностраничник, вы всегда можете заказать landing page у нас .
На этом все! Ставьте лайки и подписывайтесь на наш блог, чтобы не пропустить самое интересное.
Основная вещь, которую следует знать о трендах — это то, что они постоянно меняются. Тенденции в области сайтостроения также весьма быстро сменяют одна другую, поэтому веб-дизайнерам порой бывает очень сложно «угнаться за модой».
По данным статистики, 75% пользователей признались, что они определяют степень надежности фирмы, глядя на то, как спроектирован ее сайтлендинг. При этом нужно иметь в виду, что любое изменение может повлиять на эффективность бизнеса в целом.
В этой статье подобраны 10 основных трендов в области веб-дизайна посадочных страниц на 2016 год. Следуя им, вы сможете повысить эффективность своего ресурса.
№1: Четкий и персонализированный призыв к действию
Единичный призыв к действию, который выглядит как кнопка и всегда находится на виду у пользователя, поможет вам увеличить количество лидов. Если кнопка с целевым действием будет размещаться в шапке или подвале лендинга, то позаботьтесь о том, чтобы ничего не отвлекало внимание пользователя. Таким образом вы сможете увеличить конверсию.
Настоятельно рекомендуется в качестве призыва к действию использовать не более 5 слов. Кроме того, нужно, чтобы сама кнопка выделялась на общем фоне страницы. Для этого лучше подбирать контрастные цвета. Это поможет привлечь внимание пользователей.
№2: Анимированные элементы или встроенное видео на заднем плане
К применению этих элементов следует относиться с умом. При правильном использовании они помогут повысить узнаваемость вашего ресурса, а также завоевать доверие посетителей. CSS или анимированные переходы добавят элегантности вашему лендингу. Однако чрезмерное использование видео и анимации — это потенциальный риск с точки зрения внимания. Не стоит этим злоупотреблять.
№3: Респонсивный дизайн
На сегодняшний день превратился в своеобразный стандарт. Это стало так важно, потому что пользователи часто просматривают сайты при помощи различных мобильных устройств, а не только на своих компьютерах и ноутбуках.
Респонсивный дизайн обеспечивает правильное отображение лендинга на всех видах устройств, как показано на изображении выше.
№4: Упрощенная навигация по сайту
Если говорить обобщенно, то пользователи с большей вероятностью будут совершать конверсию, если смогут быстро и просто найти то, что им нужно. Четкость и простота — это ключевые составляющие успешного лендинга.
В настоящее время навигация на многих сайтах упрощена: в главном меню отображены только основные опции. Дизайнеры стремятся избавиться от ненужных элементов, занимающих «драгоценное» пространство на странице. К «лишним» относится, например, значок «Перейти на домашнюю страницу».
№5: Большие изображения
Вместо того, чтобы размещать у себя на сайте множество мелких картинок, используйте одно большое изображение (hero image). Это поможет улучшить пользовательский опыт.
Кроме того, уменьшение количества картинок увеличит скорость загрузки сайта. Вы сможете более эффективно донести нужную информацию до пользователей.
№6: Привлекательный минимализм
Как уже было упомянуто выше, современным людям важно найти нужную им информацию как можно быстрее. В связи с этим, в дизайне сайтов начинает преобладать минималистический подход. Минимализм наблюдается также и в оформлении текстов — гарнитура шрифтов постоянно упрощается.
№7: Элегантный и изысканный внешний вид
Множество дизайнеров в настоящее время следуют этой простой формуле при создании лендингов. Эта тенденция — нечто большее, чем просто минимализм. При таком подходе дизайнер уделяет особое внимание визуальной эстетике.
№8: «Кирпичная кладка» и модульное расположение элементов на странице
Что касается расположения элементов на странице, самыми последними трендами являются:
- Masonry - вывод html-блоков в виде кирпичной кладки;
- Mosaic - тренд, определяющий внешний вид современных браузеров. На странице содержится меню, панель инструментов и строка поиска;
- Модульное расположение элементов, основной принцип которого можно кратко выразить как «от меньшего к большему».
№9: Динамическая персонализация
Динамическая персонализация является одной из ключевых составляющих успешной стратегии входящего маркетинга. Она учитывает различные сегменты аудитории и предлагает пользователям контент в зависимости от их потребностей, а также от того, на каком этапе совершения покупки они находятся.
Например, вы можете направлять всех ваших потенциальных клиентов на одну посадочную страницу, а партнеров - на другую. В таком случае вы сможете предоставить каждому из сегментов целевой аудитории релевантный контент.
№10: «Исчезающий» контент
При помощи JavaScript или CSS можно создать на сайте контент, который будет появляться или исчезать в зависимости от потребностей пользователя.
Бонус: Оптимизация дизайна ради увеличения скорости загрузки сайта
Медленно загружающиеся сайты раздражают пользователей. У вас есть всего лишь 5 секунд, чтобы заинтересовать посетителя. Даже 1 секунда промедления может стоить вам конверсии.
Используйте самые новейшие приемы, чтобы своего лендинга. Это так важно, потому что, согласно данным статистики, пользователь покидает сайт, если время его загрузки превышает 4 секунды. Это исследование было проведено в 2014 году, и можно предположить, что этот показатель уменьшился еще сильнее с тех пор.
