Разработка дизайна посадочной страницы (Landing Page) в Photoshop для стартапа в сфере путешествий
Russian (Pусский) translation by Yura Kuzichev (you can also view the original English article)

В этом руководстве я буду использовать 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
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post