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

    Прототип лендинга  – это схема, на которой изображены все элементы страницы и другого контента на ней. Это поможет вам увидеть готовую версию “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. Она устраняет ошибки и помогает сэкономить ваше время на...

    Читать дальше

    Зачем и как делать номер телефона на сайте кликабельным

    Почему важно использовать кликабельные номера? Помните момент, когда вам нужно позвонить в компанию, а телефон на сайте указан обычным...

    Читать дальше

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

    Виральность — это тип контента, который определяет вероятность, с которой читатели захотят поделиться этой публикацией. Этот...

    Читать дальше