Как создать прототип лендинга

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

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

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

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

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

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

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

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