У цьому керівництві я познайомлю вас з процесом розробки дизайну простої посадкової сторінки з метою досягнення високої конверсії відвідувачів. В Якості прикладу ми будемо використовувати зображення додатку Tuts+, роблячи акцент на особливості та переваги нашого продукту, розміщуючи елементи призову до дії протягом сторінки.
Невід'ємні елементи для високої конверсії.
Коли ми розробляємо дизайн для висококонверсійної посадкової сторінки, щоб досягти потрібного результату необхідно дотримуватися деяких правил.
Відповідно до думки експерта по конверсії Neil Patel, для того щоб створити, посадкову сторінку яка залишає позаду всіх конкурентів, вам потрібно мати:
Заворожуюче-привабливий заголовок
переконливий підзаголовок
Фотографії
Опис вашої пропозиції
Цінна пропозиція або наочні вигоди
Послідовний виклад ваших доводів
Відгуки реальних людей
Яскравий елемент заклику до дії
Ми використаємо всі перераховані вище елементи на нашій посадковій сторінці, щоб зробити її ефективною на скільки це можливо.
Модель AIDA
Я настійно рекомендую вам поглянути на правила розробки веб-дизайну по принципам AIDA від Shaun Cronin. Принципи AIDA (Attention, Interest, Desire, Action) засновані на утриманні уваги відвідувача, його інтересу, появу у нього бажання до дії і звершення цієї дії; ці принципи можуть бути застосовні до будь-яких проектів, які засновані на спонуканні до покупки продукту або послуги.
Дослідження показали, що користувачі активно користуються скроллом сторінок, тому якщо ви викликали інтерес у користувача на першому екрані вашого сайту, вам не потрібно турбуватися про те, що ваша сторінці занадто довга. Вам потрібна довга сторінка для того, щоб розповісти приголомшливу історію вашого проекту і додати мотивуючі елементи.
A/Б тестування
Ефективна посадкова сторінка не може бути розроблена один раз і залишатиметься такою завжди. Вам необхідно проводити тестування посадочних сторінок із застосуванням різних комбінацій тексту, кольору, закликів до дії і інших елементів, щоб досягти найкращих результатів.
Перш за все нам необхідно створити новий документ (File> New ...) (Файл> Новий ...) використовуючи значення, показані нижче. Розміри для вашого документа ви можете задати будь-які на свій розсуд.
Крок 2
Давайте встановимо кілька напрямних для нашого макета щоб він виглядав більш збалансовано. Установка декількох напрямних також забезпечить акуратність і допоможе визначити ширину нашого веб-сайту для його розробки. У верхній панелі меню перейдіть в View (Перегляд)> New guide (Нова напрямна) і встановіть кілька напрямних. Зазвичай, в якості ширини сайту я використовую значення в 1000 px і додаю напрямні від країв макета, створюючи таким чином достатній простір для творчості.
Примітка: Керівні принципи використовуються для цього підручника: вертикальний 100px, 600px та 1100px.
Порада: Ви також можете використати плагін GuideGuide для Photoshop, щоб зробити цей процес ще швидшим.
Дизайн хедера
Верхній колонтитул або область "у верхній частині сторінки" грає дуже важливу роль у залучення користувачів і забезпечення того, що відвідувачів перебування на сайті.
Головним завданням нашої посадкової сторінки є переконати відвідувача завантажити наш додаток. Тому нам необхідно сфокусуватися на описі переваг користування нашим додатком і забезпечити нескладну можливість його завантаження.
Крок 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
Продублюйте текстовий шар з посиланням і відредагуйте відповідно до назв розділів сайту. Після цього, розмістіть інформаційну рядок про копірайт в самому низу нашого футера залишивши достатньо місця зверху і знизу.
Вітаю!
Браво! Ми закінчили розробку нашого макета, перегляньте ще раз всі слої, видаліть зайві і передайте макет розробникам, або, що набагато краще, зверстайте його самостійно!
