Разработка дизайна посадочной страницы (Landing Page) в Photoshop для стартапа в сфере путешествий

В этом руководстве я буду использовать Photoshop CS6 для создания простого, где не будет ничего лишнего,  макета посадочной страницы для вымышленного стартапа из сферы туризма. Во время работы мы рассмотрим процесс создания сетки макета с помощью направляющих, принципы стилизации текста, в сочетании с большим количеством свободного пространства и создания контента для нашего сайта с очень ясным и качественным содержанием. В конце работы наш PSD файл будет готов перейти в руки умелых разработчиков для его вёрстки.

Материалы урока. 

Во время прохождения этого урока вам понадобятся следующие материалы: 

• Фото велопутешественника из Unsplash
• Шрифт PT Serif из Font Squirrel
• Шрифт Aller из Font Squirrel
• Шрифт Open Sans из Font Squirrel
• Аватарки пользователей из UIfaces

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

Шаг 1

Для начала создадим новый документ File (Файл) > New (Создать) используя настройки, показанные ниже:

Шаг 2

Теперь давайте установим несколько направляющих, чтобы наш макет имел достаточно свободного пространства и выглядел сбалансированным. Я редко пользуюсь готовыми сетками, но установка нескольких направляющих обеспечивает пиксельную точность при создании макета и помогает установить ширину для нашего макета веб-сайта.  Разделяя рабочую область на две части вертикальной направляющей, мы получаем центр для нашей композиции. В верхней панели меню пройдите в View (Просмотр) > New guide (Новая направляющая) и установите нескольконаправляющих. Обычно в качестве ширины сайта я использую значение в 1000px и добавляю направляющие от краёв макета, создавая таким образом достаточное пространство для творчества. 

Примечание: значения для направляющих для нашего макета: 200рх, 260рх, 700рх, 1140рх, и 1200рх.

Совет: Также вы можете воспользоваться плагином GuideGuide что выполнять эту работу еще быстрее.

Шаг 3

Мы будем соблюдать организованный порядок внутри нашего рабочего документа, поэтому давайте создадим несколько групп для наших слоёв и назовем их Header, Features, Social Proof, Final CTA и Footer.  Придерживаясь этого Photoshop этикета вы  будете иметь организованно сложенный и легкий для навигации список ваших слоев. Чтобы создать группы слоёв пройдите в Layer (Слой) > New (Новый) > Group (Группа) и дайте новым группам вышеупомянутые названия. Для более быстрого создания групп просто нажмите на эту иконку: 

Дизайн области Header (хедера)

Хедер является очень важной частью каждого сайта так как информация на нём даёт возможность убедить нового посетителя, что ваш сайт заслуживает внимания и остаться на нём. Дизайнеру необходимо использовать впечатляющие изображения с ясным содержанием, с возможностью совершить какое-либо действие посетителем (кнопки, формы и проч.)

Шаг 1

Первым делом изменим цвет заднего фона на какой-нибудь более легкий для глаз, в моем случае я буду использовать светло серый цвет #ebebeb. После этого, на панели слоёв выбрав группу Header и выбрав инструмент Rectangle Tool (U), нарисуем прямоугольник размером 1000*600px и разместим его между двумя вертикальными направляющими. После этого загрузите фотографию велопутешественника, переместите её в фотошоп и разместите на панели слоёв над слоем с нашим прямоугольником. Далее, удерживайте клавишу Alt и наведите курсор между двумя слоями, вы увидите стрелку направленную вниз - нажмите левую кнопку мыши.  Только что вы создали Clipping Mask (обтравочная маска).

На клавиатуре примените сочетание клавиш Ctrl+T (CMD+T для Mac), включив режим трансформации, и измените размер фото так как вам необходимо. 

Совет: удерживайте клавишу Shift что сохранять пропорции изображения. 

Шаг 2

Теперь нам нужно добавить новый слой с тёмным прозрачным цветом чтобы затемнить яркие части изображения, чтобы на её фоне, в будущем размещенный текст легко различался.  Создайте новый слой над слоем с изображением и, также, сделайте его обтравочной маской. После этого выполните заливку данного слоя тёмным цветом и измените значение Opacity (непрозрачность) до 20%, так мы полностью сохраняем видимость изображения. 

Шаг 3

Давайте разместим в верхней части сайта простой логотип, являющийся обычным текстом. Давайте разместим в верхней части сайта простой логотип, являющийся обычным текстом. На панели инструментов выберите Horizontal Type Tool (T) и напишите название вашего стартапа, разместив его в левом верхнем углу сайта.  Убедитесь чтобы ваш логотип был читаемым и имел вокруг себя достаточно свободного места.  Размещение логотипа в этой части сайта является самой распространенной практикой в web-дизайне и там его ожидают увидеть сами посетители.  

Я использовал шрифт Aller для логотипа и шрифт Open Sans для пунктов меню. 

Шаг 4

Теперь давайте займемся основным описанием сайта, его слоганом. Вам всегда необходимо придерживаться правила для размера слогана в одно или два предложения, чтобы он был коротким и легкочитаемым.   Я использовал шрифт Open Sans размером в 32px для написания слогана, делая акцент на "you travel" используя жирное начертание. 

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

Отмечу, что я разместил наш слоган там, где он будет смотреться контрастно и легко воспринимаемым посетителями сайта. 

Шаг 5

Напишите простой призыв к действию (call to action), который могут совершить ваши посетители. В моем случае это предложение для посетителей оформить подписку на новости. Для этого я использовал шрифт PT Serif (Italic) размером в 14px. 

Шаг 6

Создадим простую email форму которая позволит нашим посетителям внести в неё их email адреса и подписаться на рассылку. Создайте новую группу слоев и назовите её Email form. Используйте инструмент Rounded Rectangle Tool (U) с загруглением в 3px, что создать простую белую (#FFFFFF) область для ввода текста. 

Шаг 7

Добавьте подпись внутри формы для посетителей чтобы они могли понять куда нужно вводить email адрес и создайте призывающую к действию кнопку.  Я использовал шрифт Open Sans (Semibold) размером в 13px серого цвета #bdbdbd для текста внутри формы и шрифт Open Sans (Bold) размером 13px белого цвета (#FFFFFF) для текста кнопки. Используйте бросающийся в глаза цвет для вашей кнопки, чтобы выделить её и привлечь внимание посетителя. 

Для этого я использовал зеленый цвет (#51a200).  Выберите на панели инструментов Rectangle Tool (U) и изобразите прямоугольную фигуру идущую сразу после текстовой формы. После этого зажмите клавишу Alt и слой с зелёным прямоугольником сделайте его Clipping Mask (обтравочной маской)

Дизайн раздела о преимуществах.

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

Шаг 1

Сверните группу слоев Header, нажав на маленькую стрелку возле названия группы.  Теперь нам необходимо создать задний фон для области, где будет размещен весь контент нашего сайта. Я использовал инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами) (U) с радиусом в 5px и цветом #ffffff

Разместите ваш новый слой с изображенной фигурой над слоем с основным бэкграундом нашего макета. 

Шаг 2

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

Когда вы пишите привлекательное описание для вашего стартапа, старайтесь чтобы ваш текст был легко усваиваемым и не слишком длинным. Используйте  различную толщину шрифта, его размер и цвет, чтобы создать визуальную и смысловую иерархию вашего текста. Очень важно делать достаточное количество отступов между словами.  Для моего текста я использовал шрифт Open Sans темно-серого #545454 и светло-серого #a2a2a2 цвета.

Дизайн раздела с отзывами. 

Шаг 1

Теперь разработаем дизайн для второй области нашего макета, которая должна помочь посетителям нашего сайта составить своё мнение о нас и принять верное решение.   Мы изобразим данную область как две колонки с отзывами. 

Первым делом нам необходимо отделить предыдущую область изящным и аккуратным образом.  Для этого я использовал инструмент Line Tool (U) и изобразил линию в 1px светлого серого цвета #e8e8e8.

Шаг 2

Сверните группу слоёв Features и разверните группу слоёв Social Proof. Дайте разделу ключевой заголовок, используя те же размеры, что использовали до этого. Ключевым  фактором в достижении аккуратного и привлекательного дизайна является последовательность, поэтому примененные ранее цвета и размеры применяйте для последующих аналогичных элементов.

Для нашего раздела я использовал два фиктивных отзыва от двух фиктивных людей. Для абзаца в кавычках я использовал шрифт PT Serif, для остального текст использовался ранее упомянутый Open Sans с различными значениями толщины и размерами шрифта.

Шаг 3

Как вы можете заметить, я оставил немного места перед именами наших фиктивных пользователей. Используйте сервис User Inter Faces чтобы скачать пару аватарок. После этого, на панели инструментов выберите Elipse Tool (U) и удерживая клавишу Shift изобразите ровный круг. После этого скопируйте и вставьте изображение с аватаркой над слоем с кругом и сделайте его Clipping Mask (Обтравочной маской), как делали это до этого. 

Сделайте внутри группы слоёв Social Proof еще две подгруппы и разместите в них слои, соответствующие каждому отзыву, чтобы было легче ориентироваться в них. 

Дизайн области финального призыва к действию

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

Шаг 1

Давайте визуально отделим предыдущий раздел от нового раздела, используя аналогичный способ, что и в описании выше. На панели слоёв найдите слой слой с нашей линией-разделителем, выберите его и просто нажмите ctrl+j (CMD+j для Mac) чтобы скопировать его и после этого переместите нашу линию ниже под отзывы, отставит достаточно места сверху.

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

Шаг 2

На панели слоев откройте группу Header, найдите в ней подгруппу со слоями для формы подписки на рассылку и скопируйте её, переместив в группу Final CTA. Разместим форму под заголовком и немного модифицируем её, добавив зеленую обводку вокруг области для ввода email. 

Для этого выберите слой с областью для ввода email адреса, нажмите правую кнопку мыши и выберите Blending Options (Параметры наложения)... для параметра Stroke (Обводка) задайте следующие значения. Цвет я использовал такой: #51a200

Дизайн футера

Мы закончили разработку дизайна для финального призыва к действию, на панели слоев сверните группу Final CTA и раскройте группу Footer.  Завершая работу над нашим макетом, давайте добавим несколько ссылок на внутренние страницы нашего сайта и под ними напишем обычный текст о копирайте.  Для написания ссылок я использовал шрифт Open Sans (Semibold).

Обратите внимание на то, что текст футера размещен за пределами заднего фона для основного контента, чтобы выделить его на общем фоне. Убедитесь, чтобы отступы сверху и снизу были одинаковыми, чтобы всё выглядело аккуратно и сбалансировано. 

Заключение

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

На выходе мы получили гармоничный и легкий дизайн макета с сильным фокусом на изображении в верхней части сайта и аккуратным и ясным текстом в теле макета. Если у вас какие-либо вопросы или советы, пожалуйста, оставляйте их в разделе с комментариями. 

Дополнительные материалы

Если вы новичок в области разработки дизайна для посадочных страниц, мы рекомендуем несколько обзорных статей, которые помогут тебе быстро улучшить свои навыки:

• Landing Page Design Principles: Open Assignment - дополнение к курсу с Tuts+ от Adi Purdila
• Руководство для начинающих дизайнеров стремящихся к увеличению конверсии их дизайна от Ian Yates
  
• Советы по созданию дизайна посадочных страниц от Keir Whitaker
  

Если вам необходима  помощь в создании вашего дизайна для посадочной страницы, воспользуйтесь потрясающей коллекцией Envato Studio, в которой вы можете найти для себя что-то полезное. Вы также можете взглянуть на коллекцию шаблонов посадочных страниц в Envato Market