Дизайну посадкової сторінки (Landing Page) в Photoshop для стартапу в сфері подорожей

У цьому керівництві я буду використовувати програму Photoshop CS6 для створення простого, без зайвих елементів, макета посадкової сторінки для вигаданого стартапу зі сфери туризму.  Під час роботи ми розглянемо процес створення сітки макета за допомогою напрямних, принципи стилізації тексту, в поєднанні з великою кількістю вільного простору і створення контенту для нашого сайту з дуже ясним і якісним змістом.  В кінці роботи ви матимете повністю готовий до верстки PSD файл.

Файли до уроку

Під час проходження цього уроку вам знадобляться наступні матеріали:

• Фото веломандрівник з Unsplash
• Шрифт PT Serif з Font Squirrel
• Шрифт Aller Font з Squirrel
• Шрифт Open Sans з Font Squirrel
• Авторки користувачів з UIfaces

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

Крок 1

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

Крок 2

Тепер давайте встановимо кілька напрямних, щоб наш макет мав досталь вільного простору і виглядав збалансованим.  Я не завжди користуюся сітками, але установка декількох напрямних забезпечує піксельну точність при створенні макета і допомагає встановити ширину для нашого макета веб-сайту.  Розділіть полотно на дві половини по вертикалі щоб отримати центр для нашої композиції. У верхній панелі меню пройдіть в Перегляд (View)> Cтворити напрямну (New guide) і встановіть декілька напрямних.  Зазвичай в якості ширини сайту я використовую значення в 1000px і додаю напрямні від країв макета, створюючи таким чином достатній простір для творчості.

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

Порада: Також ви можете скористатися плагіном GuideGuide що виконувати цю роботу ще швидше.

Крок 3

Ми будемо дотримуватися організованого порядку в межах нашого робочого документа, тому давайте створимо кілька груп для наших шарів і назвемо їх Header, Features, Social Proof, Final CTA та Footer.  Дотримуючись цього етикету Photoshop ви отримуєте організований і легкий для навігації та редагування список ваших шарів.  Щоб створити групи шарів пройдіть в Шар (Layer) > Створити (New) > Группа (Група) і дайте новим групам вищезгадані назви.  Для більш швидкого створення груп просто натисніть на цю іконку:

Проектування області Header (шапка сайту)

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

Крок 1

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

Застосуйте поєднання клавіш на клавіатурі  Ctrl + T (CMD + T для Mac), далі в режимі трансформації, і змініть розмір фото так як вам необхідно.

Порада: утримуйте Shift що зберігати пропорції зображення.

Крок 2

Тепер нам потрібно додати новий шар з темним прозорим кольором щоб затемнити яскраві частини зображення, щоб на її тлі, в майбутньому розміщений текст легко відрізнявся.  Створіть новий шар над шаром з зображенням і зробіть його відсічною маскою (Сlipping Mask).  Після цього виконайте заливку нового шару темним кольором і змініть значення Непрозорість (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), як ми робили це раніше за допомогою клавіши Alt.

Зробіть всередині групи шарів Social Proof ще дві підгрупи і розмістіть в них шари, що відповідають кожному відклику, щоб було легше орієнтуватися в них.

Дизайн області фінального заклику до дії

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

Крок 1

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

Після цього, напишіть основний заголовок для цієї області і невеликий підзаголовок-опис котрий містить більш детальну інформацію.  Як ви можете бачити, я використовував точно такі ж стилі для тексту, як ті що ми вже використовували для оформлення попередньої секції. Дотримуйтеся того ж принципу для оформлення свого макета.

Крок 2

На панелі шарів відкрийте групу Header, знайдіть в ній підгрупу з шарами для форми підписки на розсилку і скопіюйте її (CMD+J), отриману копію перемістіть в групу Final CTA. Розмістимо форму під заголовком і трохи модифікуємо її, додавши зелену смужку обведення навколо області для введення email.

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

Дизайн нижнього колонтитула (Footer)

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

Зверніть увагу на те, що текст футера розміщений за межами заднього фону для основного контенту, щоб виділити його на загальному тлі.  Переконайтеся, щоб відступи зверху і знизу були однаковими, щоб все виглядало акуратно і збалансовано.

Висновок

У цьому керівництві я продемонстрував вам процес створення дуже простого і акуратного макета для сайту подорожей в форматі посадкової сторінки, що включає в себе кілька ключових розділів, які привертають увагу відвідувача і пробуджують його до дії.

На виході ми отримали гармонійний і легкий дизайн макета з сильним фокусом на зображенні у верхній частині сайту і акуратним і ясним текстом в тілі макета.  Якщо у вас виникли питання або поради, будь ласка, залишайте їх в розділі з коментарями.

Додаткові  матеріали

Якщо ви новачок в області розробки дизайну для посадочних сторінок, ми рекомендуємо кілька оглядових статей, які допоможуть тобі швидко покращити свої навички:

• Landing Page Design Principles: Open Assignment - доповнення до курсу з Tuts + від Adi Purdila
• Керівництво для початківців дизайнерів які прагнуть до збільшення конверсії від їх дизайну від Ian Yates
  
• Поради щодо створення дизайну посадочних сторінок від Keir Whitaker
  

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