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


Основы высокой конверсии
Когда Вы разрабатываете дизайн целевой страницы, нужно учитывать несколько вещей, от которых зависит высокая конверсия. Если верить Нилу Пателю, у успешной целевой страницы должны быть следующие элементы:
— сногсшибательный заголовок,
— убедительный подзаголовок,
— изображения,
— толкование,
— полезные предложения,
— логическая цепь,
— благонадёжные рекомендации,
— яркая CTA-кнопка.
Мы постараемся включить все описанные аспекты в наш дизайн.
Модель AIDA
AIDA – это аббревиатура в маркетинге, расшифровывается как Attention, Interest, Desire and Action (Внимание, Интерес, Желание и Действие). Эти принципы могут быть применимы в разных ситуациях, включая продажу товаров и услуг.
Исследования показывают, что посетители сайтов не возражают против скроллинга страницы, если Вы сумеете разжечь интерес в самом начале страницы. Именно здесь очень важно предоставить самую интересную информацию и интересные элементы.
Метод проб и ошибок
Эффективную целевую страницу нельзя просто так создать с первого раза. Вам нужно пробовать разные комбинации цвета, кнопок, текста и других элементов, чтобы выявить наиболее эффективную.
Ресурсы урока:
Подготовка документа
Шаг 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, вариантов может быть несколько.
Правила перепечатки материалов сайта
Все материалы сайта являются интеллектуальной собственностью данного проекта (кроме случаев, когда прямо указано другое авторство) и охраняются законом "Об авторском праве и смежных правах".
Перепечатка, распространение, в том числе в переводе, любых материалов сайта возможны с соблюдением правил цитирования, а при размещении их в сети Интернет необходима ссылка на www.photoshop-training.ru.
Надеемся, вас не затруднит соблюдение этих условий.