Дизайн целевых страниц (на примерах)
28 мая 2013 | Опубликовано в статьюшечки | 6 Комментариев »
Вот уже более десяти лет веб-дизайнеры и разработчики разрабатывают макеты целевых страниц. Современные приемы, которыми пользуются дизайнеры получены, пройдя длинные годы экспериментов и неудач. Но также осталось много вещей, которым нужно учиться при изучении взаимодействия с посетителем целевой страницы. В этой статье поговорим именно о таких страницах. Здесь будут приведены некоторые идеи, которые помогут вам при разработке хороших макетов landing страниц.
Большие броские заголовки
Названия и заголовки, как правило, занимают достаточно большую часть вашего текста. Посетители очень быстро замечают этот текст, так как он служит как основной элемент и именно по нем чаще всего делается обзор вашей продукции. Убедитесь, что заголовки являются достаточно интересными, и что, читая их, человек захочет дальше прочитать основной текст. Так же убедитесь, что заголовки отвечают основным запросам пользователей.
На целевой странице Gridset мы можем видеть сочетания типографики с полноэкранным фоновым изображением. Данный продукт используется для создания фиксированных прототипов и вайрфреймов для веб-сайта. Прокрутив, страницу вниз, вы можете прочитать о особенностях, деталях и увидеть примеры. Однако акцент на основную информацию сделан в верхней части дизайна страницы.
Еще одним замечательным примером является страница Flex от Pantech. Обратите внимание, как заголовки и кнопки на странице помагают акцентировать внимание на телефоне и на его особенностях.
Описание деталей
Очень часто мы наталкиваемся на целевые страницы, которые практически ничего не объясняют о продукте. Это очень часто можем наблюдать на примере целевых страниц для мобильных приложений. Они ориентированы на то, что посетитель посмотрит видео и узнает от том, как оно функционирует. Думаю, что разработчики не должны заставлять посетителей сидеть и смотреть/слушать. Они должны обеспечить понимание того, что продукт делает и какие возможности имеет, не тратя много времени посетителя. Это возможно, если вы добавите на целевую страницу дополнительную информацию о продукте.
Скриншоты
Когда вы создаете дизайн для какого-либо приложения либо цифрового продукта, очень часто включать в элементы дизайна скриншоты и превьюшки. Посетители смогут увидеть, как ваш продукт будет работать в естественной среде - iPhone, декстопных компьютерах, Mac / Windows / Linux OS. Или даже запуск небольшого веб-приложения поможет объяснить некоторые вещи, связанные, например, с интерфейсом.
Веб-приложение Grooveshark для прослушивания музыки онлайн было доступно в течении многих лет, и пользователи уже успели узнать, какие услуги они предлагают. Но, просмотрев новую целевую страницу Grooveshark, можно найти ряд особенностей и изменений. Пользователи старой системы Grooveshark не будут иметь доступ к обновлениям ресурса, пока вручную на будет обновлен их аккаунт. На создание целевой страницы приложения было потрачено много усилий, так как, как видим, она является мостом, по которому старые пользователи могут перейти на новый обновленный ресурс. Ресурс предоставляет скриншоты различных альбомов исполнителей и списки воспроизведения. Вы также можете вносить настройки, по которым сможете слушать песни соответственно определенных жанров и исполнителей.
Увеличение конверсии
Справедливости ради надо сказать, что почти каждая целевая страница направлена на увеличение конверсии. Является ли это новая регистрация, регистрация через электронную почту или завлечение нового клиента — цели похожи. Вы должны проанализировать разделы вашей целевой страницы — для чего они предназначены и как их можно использовать для увеличения конверсии.
Хорошим примером есть сайт Treehouse . Большие зеленые кнопки “Start learning today” выделяются среди других объектов и привлекают внимание посетителей. Пользователи будут нажимать кнопку, так как заинтересованы, какой контент им может предложить Treehouse. Другие разделы страницы не сильно отвлекают внимание. Основная цель такой целевой страницы заключается в том, чтобы направить действия посетителей в нужное русло, а хороший дизайн помогает в этом.
Другим примером является целевая страница Rate Us . Это цифровое веб-приложение позволяет пользователям и клиентам оценивать, просматривать и оставлять отзывы на ваш продукт(продукты). Это услуга направлена на малый бизнес или даже на большие компании для обратной связи с клиентами.
Правильный контент
Каждая целевая страница, вероятно, будет иметь часть текста, который будет подталкивать посетителей на определенные действия. Для инкапсуляции части теста и привлечения внимания можно использовать различные формы выделения и больших шрифтов.
На странице DesignBoost вы сможете найти небольшую форму регистрации для новых заинтересованных пользователей. Точно так же, прокрутив страницу вниз, вы найдете список вещей, которые можете выучить. Яркие кнопки и графические элементы акцентируют внимание на тех местах, на которых нужно сделать паузы и более детально просмотреть информацию.
Контент- слайдер SlideDeck - высококачественный продуктом с собственной целевой страницей. На странице вы сможете увидеть информацию (вместе со скриншотами) о том, как выглядит слайдер в WordPress шаблоне.
Подводим итоги
Целевая страница — сложная концепция, в которую вкладывают свой опыт и знания лучшие маркетологи и специалисты. Нету каких-либо оптимальных техник для создания успешной целевой страницы. Все зависит от продукта, для которого вам нужно создать страницу — будь это тема, psd-материалы, мобильные приложение, или что-нибудь другое — именно от этого будет зависеть дизайн вашего макета. Единственный, и пожалуй, самый правильный вариант — продолжать экспериментировать и анализировать свои неудачи и успехи.
Автор: Jake Rocheleau
Перевод — Дежурка
Смотрите также:
28 мая 2013 в 12:21
Комментарий скрыт из-за рейтинга
3 июня 2013 в 8:49
Что за сайт на самой первой картинке (www.dejurka.ru/wp-content...esign_trends.jpg)
июля 9, 2013 at 11:28 дп
soundcloud.com
июля 9, 2013 at 11:29 дп
блин, присмотрелся... не он... но очень похож
июля 9, 2013 at 1:16 пп
www.spiceworks.com