В этом руководстве я познакомлю вас с процессом разработки дизайна простой посадочной страницы для высокой конверсии посетителей. В качестве примера, мы будем использовать Tuts+ Android приложения для демонстрации нашей работы, делая акцент на особенностях и преимуществах нашего продукта, размещая элементы призыва к действию на протяжении страницы.
Неотъемлемые элементы для высокой конверсии.
Когда мы разрабатываем дизайн для высококонверсионной посадочной страницы, чтобы достичь нужного результата необходимо придерживаться некоторых правил.
В соответствии с мнением эксперта по конверсии Neil Patel, для того чтобы создать, оставляющую позади всех конкурентов, посадочную страницу вам нужно иметь:
Завораживающе-привлекательный заголовок
Убедительный подзаголовок
Изображения
Описание вашего предложения
Ценное предложение или наглядные выгоды
Последовательное изложение ваших доводов
Отзывы реальных людей
Яркий элемент призыва к действию
Мы применим все вышеперечисленные элементы к нашей посадочной странице, чтобы сделать её эффективной на сколько это возможно.
Модель AIDA
Я настоятельно рекоммендую вам взглянуть на правила разработки веб-дизайна по принципам AIDA от Shaun Cronin. Принципы AIDA (Attention, Interest, Desire, Action) основаны на удержании внимания посетителя, его интереса, появлении у него желания к действию и свершения этого действия; эти принципы могут быть применимы к любым проектам, которые основаны на побуждении к покупке продукта или услуги.
Исследования показали, что пользователи активно пользуются скроллом страниц, поэтому если вы вызвали интерес у пользователя на первом экране вашего сайта, вам не нужно беспокоиться о том, что ваша странице слишком длинная. Вам нужна длинная страница для того, чтобы рассказать потрясающую историю вашего проекта и добавить мотивирующие элементы.
А/В тестирование.
Эффективная посадочная страница не может быть разработана один раз и оставаться таковой долгое время. Вам необходимо проводить тестирование посадочных страниц с применением различных комбинаций текста, цвета, призывов к действию и других элементов, чтобы достичь наилучших результатов.
Прежде всего нам необходимо создать новый документ (File > New…) (Файл > Новый...) используя значения, показанные ниже. Размеры холста для вашего документа вы можете задать любые на своё усмотрение.
Шаг 2
Давайте установим несколько направляющих для нашего макета чтобы он выглядел более сбалансированно. Установка нескольких направляющих также обеспечит аккуратность и поможет определить ширину нашего веб-сайта для его разработки. В верхней панели меню пройдите в View (Просмотр) > New guide (Новая направляющая) и установите несколько направляющих. Обычно, в качестве ширины сайта я использую значение в 1000 px и добавляю направляющие от краёв макета, создавая таким образом достаточное пространство для творчества.
Примечание: значение направляющих, использванные в этом руководстве: вертикальные 100рх, 600рх и 1100рх.
Совет: Также вы можете воспользоваться плагином GuideGuide что выполнять эту работу еще быстрее.
Дизайн хедера
Область хедера на любом сайте играет важнейшую роль в деле привлечения внимания посетителей и удержания их на сайте.
Главной задачей нашей посадочной страницы является убедить посетителя загрузить наше приложение. Поэтому нам необходимо сфокусироваться на описании преимуществ пользования нашим приложением и обеспечить несложную возможность его загрузки.
Шаг 1
Для начала на панели слоёв давайте создадим группу слоёв с названием Header, выбрав на верхней панели Layer (Слои) - New (Новые) - Group (Группа) или просто нажав маленькую иконку внизу панели со слоями. После этого на панели инструментов выберите Horizontal Type Tool (T), выберите шрифт PT Sans (Bold) размером в 18px, установите цвет шрифта #000000 и напишите название нашего приложения, которое будет служить логотипом, расположив его в левом верхнем углу сразу после первой вертикальной направляющей. Сверху оставьте немного свободного места, чтобы логотип не выглядел стеснённым.
Шаг 2
Теперь давайте создадим кнопку с призывом к действию, которую мы будем использовать несколько раз на нашей странице, чтобы посетитель наверняка совершил действие. Создайте новую группу слоёв с названием "CTA btn", выберите на панели инструментов инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами) (U), установите значение Radius (Радиус) в 2px, установите цвет зеленый лайм #17e594 и изобразите прямоугольник размером в 206x38 px.
После этого кликните правой кнопкой мыши по новому слою с нашей кнопкой, выберите Blending Options (Параметры наложения) и выберите параметр Stroke (Обводка). И примените темно-зеленый цвет #09ba74.
На панели инструментов вновь выберите Horizontal Type Tool (Горизонтальный текст) (T) и наберите текст для нашей кнопки. Я использовал шрифт PT Sans (Bold) размером в 12px и белого цвета #ffffff.
Шаг 3
Теперь выберите инструмент Rectangle Tool (T) и изобразите прямоугольник размером в 1200x600 px (любым цветом) и разместите его сразу под нашим минималистичным верхним меню. Я оставил 25px свободного пространства между логотипом и вновь созданным прямоугольником, этого будет вполне достаточно.
Теперь скачайте фото набора инструментов из Unsplash и разместите её над слоем с прямоугольником. После этого, удерживая клавишу Alt и наведя курсор на слой с фотографией, вы увидите маленькую стрелку, указывающую вниз, нажмите левую кнопку мыши чтобы создать Clipping Mask (Обтравочная маска), так наше изображение будет отображаться только в рамках прямоугольника.
Нажмите ctrl+T (CMD+T для Mac) чтобы изменить размер фото, не забудьте удерживать клавишу Shift чтобы сохранить пропорции изображения.
Шаг 4
Давайте добавим слой-фильтр серого цвета для нашего фона чтобы текст и изображение на нём были различимы.
Выберите тёмно-серый цвет #222325 и создайте новый слой, после этого разместите этой слой над слоем с фотографией и сделайте его Clipping Mask (обтравочной маской). После зажмите клавиши alt + backspace что выполнить заливку слоя серым цветом. Завершая шаг, уменьшите значение слоя Opacity до 80%.
Шаг 5
Вновь выберите инструмент Horizontal Type Tool (T), измените цвет на белый #FFFFFF и используя шрифт PT Sans (Bold) размером в 48px напишите главный заголовок. Не забудьте оставить сверху достаточно свободного места.
Шаг 6
Уменьшим размер шрифта до 21px, выберем начертания шрифта Normal и напишем текст с описанием, разместив ниже нашего главное заголовка. Чтобы сделать текст более сбалансированным и читаемым увеличьте значение line height (межстрочный интервал) минимум до 30рх. Разместите описание под главным заголовком, в моем случае я сделал отступ 40px.
Шаг 7
Давайте создадим еще одну кнопку призыва к действию, чтобы посетителям было понятно что необходимо делать после прочтения текста. На панели слоёв найдите группу "CTA btn" и скопируйте её, нажав сочетание клавиш CMD+j, разместите кнопку под текстом с описанием.
Шаг 8
Мы создали описание и кнопку призыва к действию для нашего продукта, теперь давайте разместим анонс для нашего продукта, чтобы показать как оно выглядит прежде чем посетитель решит его загружать.
Загрузите бесплатный мокап Samsung Galaxy S5 от Martin Adamko и загрузите его в наш документ. После этого зажмите клавишу ctrl (CMD для Mac), кликните на все слои, относящиеся к нашему мокапу и нажав правую кнопку мыши выберите из выпадающего списка пункт Convert to Smart Object (Преобразовать в Смарт-объект). Используя сочетание клавиш ctrl+T что изменить размер мокапа и разместить его рядом с нашим заголовком и описанием.
После этого, разместите скриншот экрана с приложением на нашем мокапе, нажав на соответствующий смарт-слой и сохраните его. Я использовал скриншот нового приложения Tuts+ Courses для Android.
Дизайн раздела преимуществ
Мы закончили работу над хедером. На панели слоев сверните соответствующую группу и создайте новую с названием "Benefits".
Шаг 1
На панели инструментов выберите вновь инструмент Horizontal Type Tool (Горизонтальный текст) (T) , измените цвет на темно серый #222325 похожий на тот, что мы использовали для нашего фильтра (создавайте дизайн последовательный и связный, вместо нагромождения нескольких цветов) и используя шрифт PT Sans (Bold) размером в 30px напишите убедительное заявление, разместив его ниже под нашим хедером, оставив достаточно места сверху.
Шаг 2
Сейчас у нас есть возможность убедить наших посетителей в том, что наше приложение стоит того, чтобы его скачать. Опишите преимущества нашего приложения так, чтобы люди отчетливо смогли представить их. Измените цвет на легкий серо-синий #6a7588 и напишите пару строк, объясняющих зачем человеку использовать наше приложение. Я использовал шрифт PT Sans (Regular) размером в 21px с установленным межстрочным интервалом в 32px, похожие стили были использованы для текста с описанием в хедере нашего макета.
Обратите внимание на то, чтобы расстояние между текстовыми блоками было достаточным, так мы обеспечим легкость восприятия нашего дизайна.
Шаг 3
В очередной раз давайте создадим кнопку призыва к действию для тех посетителей, кто не решался совершить действие до этого и может решиться после прочтения текста об особенностях нашего продукта. На панели слоёв скопируйте группу "CTA btn", нажав сочетание клавиш ctrl+j (CMD+J для Mac) и разместите её под слоем с текстом об особенностях. Разместите эти слои в группе слоёв "Benefits" чтобы в нашем документе был порядок.
Разработка дизайна раздела особенностей.
Мы создали блок с преимуществами, теперь можно свернуть соответствующую группу и создать новую группу слоёв с названием "Features". Здесь мы выделим некоторые особенности нашего приложения, чтобы посетитель, кто уже заинтересовался, мог больше о нём узнать.
Шаг 1
Выберите цвет светло серый #fbfbfb, мы используем другой цвет для заднего фона блока особенностей, чтобы отделить его от остальных разделов. После этого на панели инструментов выберите Rectangle Tool (U) и изобразите прямоугольник размером в 1200*700px, который будет служить задним фоном. Убедитесь, чтобы сверху было достаточно свободного места.
Шаг 2
Чтобы разделение между двумя блоками было еще более явное, давайте изобразим горизонтальную линию в 1px между двумя фонами. На панели инструментов выберите Line Tool (Линия) (U), установите значение Weight в 1px и измените цвет на темно-серый #eeeeee.
Совет: удерживайте клавишу Shift, чтобы начертить идеально ровную горизонтальную линию.
Шаг 3
Разверните группу слоев "Benefits" и найдите там слой с заголовком, нажав сочетание клавиш Ctrl+J (CMD+J для Mac) скопируйте этот слой и переместите его в группу "Features". Отредактируйте текст как считаете нужным и разместите этот слой внутри слоя с созданным серым фоном.
Шаг 4
Мы создадим три секции с особенностями, в которых будет иконка, заголовок и короткое описание. Создайте новую группу слоёв и назовите её "Feautre 1" или как-нибудь более информативно. В самом начале нашего урока перейдите по ссылке Iconfiner и загрузите оттуда иконку с силуэтом человека размером 48x48px. Кликните правой кнопкой мыши по названию данного слоя и примените следующие опции.
Вы можете заметить, что мы имитируем все стили с нашей кнопки призыва к действию.
Шаг 5
В очередной раз скопируйте слой с заголовком, разместите его в группе слоев "Feature 1" и, используя инструмент Horizontal Type Tool (T), уменьшите размер шрифта до 16px и значение line height (межстрочного интервала) до 22px.
Шаг 6
Используя тот же инструмент Horizontal Line Tool (T) напишите три короткие строчки описывающие какую-либо особенность. Убедитесь чтобы цвет этих трех строчек был как уже ранее используемый серо-синий #6a7588. Разместите слой с текстом ниже под иконкой и заголовком.
Шаг 7
Теперь сверните группу со слоями и скопируйте её два раза, нажав Ctrl+J (CMD+J для Mac). После этого напишите текст и загрузите иконки для каждой особенности нашего приложения. Для данного урока я буду использовать иконки маркера и часов из Iconfinder. Убедитесь, чтобы было достаточно расстояния между блоками для сбалансированного восприятия.
Шаг 8
Чтобы показать наше приложение еще более в лучшем свете, мы используем наш макап смартфона в другой перспективе. Я использовал перевернутый Samsung Galaxy S5 mockup и разместил там скриншот сделанный на Google Play. Кликнитеправой кнопкой мыши на слой с макапом и выберите там New Smart Object via Copy (Преобразвать в Смарт-объект) что создать независимую копию.
Чтобы оформить по своему мокап, дважды кликните по миниатюре со смарт-слоем и разместите ваш скриншот.
Дизайн раздела с отзывами.
Изобразим немного информации, отражающей социальное доверие к нашему приложению, добавив несколько отзывов от пользователей.
Шаг 1
На панели слоёв сверните все группы слоёв и создайте новую группу с названием "Testimonials". Напишите заголовок для нашего раздела как мы уже делали до этого и разместите его после заднего фона области "Features" отступив немного сверху по аналогии с предыдущим разделом.
Шаг 2
Разверните группу слоев "Features", скопируйте все слои в группу "Testimonials". Мы еще раз используем эти слои для дизайна отзывов. Перепишите текст, изменив заголовки на имена пользователей и описание на текст отзыва.
Удалите иконки и, используя инструмент Ellipse Tool (Эллипс) (U), изобразите окружность. После этого разместите слой с фото пользователя над слоем с окружностью и сделайте его Clipping Mask (обтравочной маской). Я использовал фотографии с ресурса User Inter Faces.
Шаг 3
В завершении, скопируйте только что сделанную группу слоев с отзывами и для каждого отзыва напишите свой уникальный текст и разместите фотографии пользователей.
Дизайн футера.
Сверните группу слоев "Testimonials" и создайте новую группу с названием "Footer". В этом разделе мы разместим последнюю кнопку призыва к действию и несколько ссылок на внутренние страницы сайта, чтобы посетители, прокрутившие страницу до конца могли видеть структуру нашего сайта.
Шаг 1
Разверните группу слоев "Header" и, удерживая клавишу Shift, выберите слой с прямоугольником и слой с серым фильтром. После этого нажмите сочетание клавиш ctrl+J (CMD+J для Mac) чтобы скопировать слой и переместите его в новую группу "Footer". После этого разместите выбранную вами фотографию между слоем с прямоугольником и серым фильтром сделав её Clipping Mask (обтравочной маской)
Шаг 2
Добавьте еще один заголовок мотивирующий посетителей загрузить наше приложение. Сделайте его белым цветом #ffffff чтобы он бросался в глаза на затемненном фоне. После этого, скопируйте кнопку призыва к действию из других разделов и разместите её под заголовком.
Шаг 3
Выберите инструмент Horizontal Type Tool (T) и напишите несколько внутренних ссылок для сайта. Я использовал шрифт PT Sans (Regular) белого цвета #ffffff размером в 16рх и значение межстрочного интервала в 29рх.
Шаг 4
Продублируйте текстовый слой со ссылкой и отредактируйте в соответствии с названиями разделов сайта. После этого, разместите информационную строку о копирайте в самом низу нашего футера оставив достаточно места сверху и снизу.
Поздравляю!
Браво! Мы закончили разработку нашего макета, сейчас пересмотрите еще раз все слои, удалите лишние и передавайте макет разработчикам, или, что намного лучше, сверстайте его самостоятельно!
Tomas Laurinavicius is a designer, marketer, blogger, marketing advisor at Devsolutely and co-founder of Best Writing, an all-in-one platform connecting writers with businesses.
