Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

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

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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



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


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



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

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

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

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

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

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

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

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

- яркая 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


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

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


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



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



Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: