Дизайн целевых страниц (на примерах)

Содержание

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

 

Большие броские заголовки

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

 

gridset-website-layout-typography

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

pantech-landing-page-flex-phone

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

Описание деталей

Очень часто мы наталкиваемся на целевые страницы, которые практически ничего не объясняют о продукте. Это очень часто можем наблюдать на примере целевых страниц для мобильных приложений. Они ориентированы на то, что посетитель посмотрит видео и узнает от том, как оно функционирует. Думаю, что разработчики не должны заставлять посетителей сидеть и смотреть/слушать. Они должны обеспечить понимание того, что продукт делает и какие возможности имеет, не тратя много времени посетителя. Это возможно, если вы добавите на целевую страницу дополнительную информацию о продукте.

 

flywheel-details-list-website-layout

Скриншоты

Когда вы создаете дизайн для какого-либо приложения либо цифрового продукта, очень часто включать в элементы дизайна скриншоты и превьюшки. Посетители смогут увидеть, как ваш продукт будет работать в естественной среде —  iPhone, декстопных компьютерах, Mac / Windows / Linux OS. Или даже запуск небольшого веб-приложения поможет объяснить некоторые вещи, связанные, например, с интерфейсом.

grooveshark-iphone-mobile-screenshot-webpage

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

Увеличение конверсии

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

treehouse-landing-page-homepage-website

Хорошим примером есть сайт Treehouse . Большие зеленые кнопки “Start learning today” выделяются среди других объектов и привлекают внимание посетителей. Пользователи будут нажимать кнопку, так как заинтересованы, какой контент им может предложить Treehouse. Другие разделы страницы не сильно отвлекают внимание. Основная цель такой целевой страницы заключается в том, чтобы направить действия посетителей в нужное русло, а хороший дизайн помогает в этом.

rateus-homepage-website-buttons-signup

Другим примером является целевая страница Rate Us . Это цифровое веб-приложение позволяет пользователям и клиентам оценивать, просматривать и оставлять отзывы на ваш продукт(продукты). Это услуга направлена на малый бизнес или даже на большие компании для обратной связи с клиентами.

Правильный контент

Каждая целевая страница, вероятно, будет  иметь часть текста, который будет подталкивать посетителей на определенные действия. Для инкапсуляции части теста и привлечения внимания можно использовать различные формы выделения и больших шрифтов.

designboost-homepage-startup-website-layout

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

slidedeck-content-slider-plugin-homepage

Контент- слайдер  SlideDeck — высококачественный продуктом с собственной целевой страницей.  На странице вы сможете увидеть информацию (вместе со скриншотами) о том, как выглядит слайдер в WordPress шаблоне.

 Подводим итоги

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

Автор: