Целевая страница мобильного приложения

Основы высокой конверсии

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

— сногсшибательный заголовок,

— убедительный подзаголовок,

— изображения,

— толкование,

— полезные предложения,

— логическая цепь,

— благонадёжные рекомендации,

— яркая CTA-кнопка.

Мы постараемся включить все описанные аспекты в наш дизайн.

Модель AIDA

AIDA – это аббревиатура в маркетинге, расшифровывается как Attention, Interest, Desire and Action (Внимание, Интерес, Желание и Действие). Эти принципы могут быть применимы в разных ситуациях, включая продажу товаров и услуг.

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

Метод проб и ошибок

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

Ресурсы урока:

Фотографии

Шрифт «PT SANS»

Иконка пользователя

Иконка маркера

Иконка часов

Макет смартфона

Подготовка документа

Шаг 1

Создайте новый документ в Фотошопе (Ctrl + N) с такими параметрами:

Шаг 2

Мы воспользуемся направляющими, чтобы разграничить область холста. Они помогут нам сразу определиться с шириной и расположением элементов. Направляющие можно создавать через меню Просмотр > Новая направляющая (View > New Guide). Создайте их на отметках 100px, 600px и 1100px.

Шапка сайта

Дизайн шапки сайта очень важен. От неё зависит, останется ли посетитель на сайте или нет. Основная задача нашей целевой странице – убедить посетителя загрузить мобильное приложение. Поэтому мы сконцентрируемся на создании наиболее удобного способа загрузки.

Шаг 1

Создайте новую группу «Header». Активируйте инструмент Горизонтальный текст (Horizontal Type Tool), выберите шрифт «PT Sans (Bold) » размером 18 пикселей и чёрным напишите название приложения, которое послужит логотипом. Расположите его в левом верхнем углу на линии вертикальной направляющей. Оставьте немного пустого места над заголовком.

Шаг 2

Давайте сразу создадим CTA-кнопку. Мы продублируем её ещё несколько раз на всей странице, чтобы посетители не теряли её из внимания. Создайте новую группу «CTA btn». Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и на верхней панели установите радиус 2 пикселя. Создайте кнопку цветом #17e594 размером 206х38 пикселей.

Примените к слою кнопки стиль Обводка (Layer Style – Stroke).

Текстовым инструментом подпишите кнопку. Шрифт «PT Sans (Bold) » размером 12 пикселей белого цвета.

Шаг 3

Возьмите инструмент Прямоугольник (Rectangle Tool) и создайте прямоугольник цветом 1200х600. Опустите его на 25 пикселей ниже логотипа.

Вставьте фотографию инструментов в наш документ и расположите её поверх синего прямоугольника. Создайте обтравочную маску (Ctrl + Alt + G), чтобы фотография не выходила за его пределы. В режиме Свободное трансформирование (Free Transform) измените размер фотографии.

Шаг 4

Сейчас мы создадим для фотографии цветовой фильтр. Создайте новый слой над слоем фотографии и залейте его цветом #222325. Создайте обтравочную маску (Ctrl + Alt + G) и уменьшите непрозрачность слоя до 80%.

Шаг 5

Шрифтом «PT Sans (Bold) » размером 48 пикселей напишите главное послание, которое будет отражать идею приложения.

Шаг 6

Уменьшите размер шрифта до 21 пикселя, выберите начертание Regular и добавьте ещё немного информации о приложении. Чтобы повысить читабельность текста, увеличьте высоту строки до 30 пикселей. Опустите этот текст на 40 пикселей ниже верхнего.

Шаг 7

Создайте копию группы «CTA btn» и расположите CTA-кнопку под сообщением.

Шаг 8

Сейчас мы добавим ещё и скриншот самого приложения, чтобы посетители сразу видели, что им предлагают. Вставьте макет смартфона в наш документ и преобразуйте его в смарт-объект. Измените размер смартфона и расположите его справа от текста. Вставьте скриншот приложения на экран смартфона, преобразуйте его в смарт-объект и только потом измените размер. Ниже показан скриншот приложения сайта Tuts+.

Преимущества приложения

Шапка сайта завершена. Сверните её группу и создайте новую – «Benefits».

Шаг 1

Выберите текстовый инструмент и шрифтом PT Sans (Bold) размером 30px цветом #222325 напишите самое сильное преимущества приложения.

Шаг 2

Напишите несколько строк о ценности приложения и причины, по которым посетителям стоит загрузить приложение. Используйте шрифт «PT Sans (Regular) » размером 21 пиксель цветом #6a7588. Установите высоту строки на 32 пикселя. Настройки шрифта такие же, как и текста в шапке сайта.

Шаг 3

Повторите CTA-кнопку и поместите её в группу «Benefits».

Особенности приложения

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

Шаг 1

Чтобы отделить текущую секцию от других, мы изменим её фон. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру размером 1200х700 пикселей цветом #fbfbfb.

Шаг 2

По верхнему краю нового фона проведите 1-пиксельную линию цветом #eeeeee.

Шаг 3

Скопируйте заголовок из группы «Benefits» в группу «Features» и измените его, сохранив форматирование.

Шаг 4

В этой секции мы создадим три блока с особенностями приложения. Они будут состоять из иконки, названия и описания. Создайте новую группу «Feature 1». Вставьте в неё иконку пользователя размером 48х48 пикселей. Примените следующие стили:

Наложение цвета:

Обводка:

 

Шаг 5

Скопируйте заголовок ещё раз и вставьте его в группу «Feature 1». Уменьшите размер шрифта до 16 пикселей, а высоту строки – до 22 пикселей.

Шаг 6

Добавьте небольшое описание особенностей. Цвет текста — #6a7588.

Шаг 7

Сверните группу и создайте её копию. Измените все элементы, сохранив стилизацию и форматирование.

Шаг 8

Теперь мы добавим ещё один скриншот приложения. Вставьте изображение смартфона и расположите его в альбомной ориентации. Можете просто продублировать предыдущий слой. Раскройте смарт-объект и замените изображение на экране.

Рекомендации

Здесь мы добавим несколько отзывов от пользователей.

Шаг 1

Создайте новую группу «Testimonials». Отделите её тонкой линией и напишите заголовок.

Шаг 2

Из группы «Features» скопируйте в новую группу одну из групп с иконкой и текстом. Измените название на имя и вместо описания напишите отзыв. Удалите иконку и на её месте расположите фотографию. Создайте небольшой круг, наложите на него фотографию и создайте обтравочную маску.

Шаг 3

Таким же образом создайте ещё несколько отзывов.

Футер

Создайте новую группу «Footer». На нём будет ещё одна CTA-кнопка и несколько ссылок на внутренние страницы сайта.

Шаг 1

В группе «Header» продублируйте слои прямоугольника и серого фильтра. Перенесите их в группу «Footer». Измените фоновую фотографию.

Шаг 2

Напишите какой-нибудь заголовок, побуждающий на загрузки приложения и добавьте CTA-кнопку.

Шаг 3

Добавьте навигационные ссылки. Шрифт «PT Sans (Regular) » размреом 16 пикселей белого цвета, высота строки – 29 пикселей.

Шаг 4

Добавьте ещё несколько колонок навигации. В самом низу напишите информацию о правах.

Конечный результат:

 

Адаптивный дизайн набирает популярность, и нам стоит обратить внимание на решения проблемы навигации на маленьких экранах. Как же сделать адаптивный дизайн для своего сайта. В зависимости от вашего бюджета и знаний CSS/HTML, вариантов может быть несколько.