• Українська
  • Русский
  • Як створити прототип лендингу

    Прототип лендингу  – е схема, де зображені всі елементи сторінки та іншого контенту. Це допоможе вам побачити готову версію “landing page” та її функціонал. 

    Починати роботу слід із текстів, а точніше із заголовків до них. 

    Приклад:

    1. Головна — про компанію, послуги та як оформити заявку
    2. Блок переваг – чому саме ми?
    3. Блок продукції чи послуг — демонстрація товару чи послуг
    4. Блок FAQ – відповіді на запитання, що найчастіше виникають
    5. Блок відгуки
    6. Про нас – ваша команда та концепція компанії
    7. Кнопка зателефонувати чи заповнити форму на сайті

    Які програми використовувати для створення прототипу

    Коли структура готова, можна приступати до наповнення сайту. Обираємо зручний для вас інструмент для створення прототипу. Якщо ви вже знаєте, як виглядатиме прототип, то можете намалювати його самостійно у графічному редакторі. Для обізнаних користувачів існують певні сервіси для створення лендингів. Ми рекомендуємо кілька сервісів для створення “landing page”:

    Axure RP

    Axure RP — допомагає створити інтерактивний прототип сайту. 

    Як у ньому працювати?

    Натискаємо на File і після цього New. Axure відкриває три порожні сторінки. Почнемо з назви сторінки. Щоб це зробити, потрібно натиснути правою кнопкою миші на вікно Pages та після на Rename. Не забувайте про те, що на ваш сайт будуть заходити з різних пристроїв, тому необхідно вказати необхідну ширину екрану для кожного девайсу. Це можна зробити вручну за допомогою лінійки праворуч. Але ми пропонуємо полегшити цей процес та налаштувати автоматично. Для цього натискаємо на пункти в такій послідовності: Arrange → Grid and Guides → Create Guides. Після чого з’явиться вікно, і вам потрібно задати розміри. Після цього перед нами з’являється сітка необхідної вам ширини, куди можна додавати елементи. А зробити це дуже легко: відкриваємо вікно Libraries, обираємо елемент та перетягуємо його на сітку.

    Шапка сайту – це верхній блок, де зазвичай розміщений логотип компанії та необхідні контакти. Щоб вона з’явилася на сторінці, перетягніть її віджет.

    Основні блоки на головному екрані: розміщуємо заголовок, потім заклик до дії та кнопку.

    Наступний екран – це блок із перевагами товару. Щоб показати портфоліо компанії, використовуємо слайдер. Елементи керування легко створити за допомогою горизонтальних ліній. Перетягуємо Horizontal Line на макет, клацаємо на сіре коло біля лінії та вибираємо зовнішній вигляд. 

    Створення взаємодій

    За допомогою Axure можна обрати будь-який елемент та зробити його тригером для дії. Як зробити клікабельні блоки? Натискаємо на розділ “Блог”, натискаємо Properties та обираємо пункт OnClick. Ця функція дозволяє елементу відкривати вікно за кліком мишки. Щоб налаштувати такий функціонал, натискаємо Open Link, після чого Current Window і Блог, де вказуєте яку сторінку слід відкрити. За допомогою Preview можна переглянути та перевірити як працює прототип.

    Ще одна перевага Axure в тому, що на цьому сервісі можна опублікувати прототип, а посилання дати замовнику.

    Draftium

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

    Також варто додати, що користуватися можна безкоштовною версією, якщо вам достатньо п’ятдесяти шаблонів на вибір, або оформити підписку за 100 $ на рік і отримати доступ до більш ніж трьохсот шаблонів. Після того, як ви закінчите роботу, прототип можна експортувати в Weblium – це інструмент для створення готових функціональних сайтів. Це все, що вам потрібно для того щоб запустити повноцінний сайт.

    Marvel

    Цей онлайн-інструмент на порядок складніший у користування, ніж Draftium і стане в нагоді професіоналам. У Marvel величезний функціонал, тут можна збирати прототипи з чого завгодно та як завгодно, але для цього потрібно володіти певною базою та досвідом у дизайні.

     

    Приклади прототипів лендінгів

    Тут ви можете побачити приклади того, як можуть виглядати прототипи у зазначених вище редакторах.

    Axure RP

    Draftium

    Marvel

    Висновок

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

    Останні новини

    Завітайте на наш блог – ми пишемо для вас

    5 причин використовувати автоправила в Google Ads

    Автоматизовані правила вдвічі полегшують керування Google Ads. Вони усувають помилки та допомагають заощадити ваш час на тривіальних...

    Читати далі

    Навіщо та як робити номер телефону на сайті клікабельним

    Чому важливо використовувати клікабельні номери? Пам’ятаєте момент, коли вам потрібно зателефонувати в компанію, а телефон на сайті...

    Читати далі

    Віральний контент

    Віральність — це тип контенту, який визначає можливість, з якою у читачів виникне бажання поділитися цією публікацією. Цей інструмент...

    Читати далі