Ноябрь 2017
Автор: Рубрика: Web дизайн Комментариев нет

Создание прототипа сайта в moqup


Создание прототипа сайта в moqup

После того как мы сделали девять этапов создания landing page, посмотреть этапы можно тут.

Мы приступаем к созданию прототипа сайта в программе.

Удобно будет делать прототип онлайн в интернете, чтобы можно было поделиться ссылкой с другим человеком для уточнения и редактирования блоков, элементов, форм захвата, текста перед созданием дизайна в photoshop.

Рассмотрим самую лучшую программу для прототипа сайта.

Топ три программ для прототипа сайта онлайн.

Рассмотрим три самых популярных сервиса создания прототипа и выберем один, для подробного рассмотрения всех частей программы.

1). moqup. Лучшая программа для прототипа.

moqup. Лучшая программа для прототипа.

2). wireframe. На втором месте программа на английском языке. Отсутствует блок в программе меню для сайта.

wireframe на втором месте.

3).  ninjamock. Есть инструкция на сайте.

ninjamock. Есть инструкция на сайте.

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

На данный момент выбор остановился на moqup.

Настройка работы программы moqup перед работой.

В программе moqups легко и быстро интуитивно разобраться, как сделать прототип сайта.

Изначально сделаем разбиение на квадратные ячейки, как колонки.

  1. Заходим в пункт меню workspace и установим сетку show paper grid.
  2. В этом меню в page settings зададим ширину полотна 1440 пикселей. Получится 18 целых ячеек. Оставим по три ячейки слева и права. Посередине полотна делаем в 12 ячейках прототип, как он будет в 12 колонках bootstrap сетки в photoshop. В трех боковых ячейках можно делать сноски с описанием блоков и показывать изображения, которые будут во всю ширину сайта.

Настройка работы программы moqup

Как работать в moqup.

Создадим простой прототип сайта по шагам.

Начнем с оформления шапки сайта.

Как сделать шапку сайта в photoshop, рассказано тут.

  1. В верхнем углу сайта всегда устанавливают логотип. Оформим логотип из изображения image, перетянем мышкой из панели инструментов картинку и поместим слева на 3 ячейки. Снизу добавим надпись в текстовом поле text area, также перетянем в рабочую область и напишем внутри название организации.
  2. Создадим посередине меню, для этого из панели всех инструментов программы moqup берем инструмент horizontal menu и устанавливаем за логотипом, в ячейках пропишем свои названия. Чтобы указать активный элемент меню напишем спереди символ *. Регулировать размеры меню можно мышкой как в photoshop потянуть за край блока.
  3. Добавим телефон справа в блок text area. Для цифр телефона используем инструмент first name. Чтобы поменять цвет текста или размер шрифта, то перейдем в правую часть программы moqup и сделаем настройку. Также можно выставить любой современный шрифт, так как moqup поддерживает большое количество font family. Под телефоном делаем ссылку underline комбинацией клавиш ctrl+u или выберем из меню, которое автоматически подсвечивается при оформление текста.

Как сделать шапку в moqup

Оформим заголовок и форму связи в moqup.

  1. Заголовки делаем инструментом heading, также мышкой перетаскиваем в рабочую область прототипа и устанавливаем где нужно. Сделаем три заголовка разными цветами и размером шрифта.
  2. Определим область формы обратной связи полем text area, поместим под заголовком и растянем. У формы будет заголовок heading, текст в поле first name и поле ввода добавим инструментом text input. Под формой добавим большую красивую кнопку. Красивую кнопку для верстки можно сделать в генераторе кнопки. Копка добавляется инструментом button, в правой части выберем цвет кнопки и закруглим углы в пункте меню rounded corners. Текст внутри кнопки редактируется двумя нажатием на слово button и пишется свой.
  3. В соседних 5 ячейках добавим карусель из тематических изображений. Карусель нарисуем инструментом image, внизу добавим кружки инструментом circle. Сделаем один кружок подходящего размера и скопируем в буфер комбинацией ctrl+c, теперь при нажатии клавиш ctrl+v, добавим несколько кружков копий и разместим по линии.

Оформим заголовок и форму связи в moqup

Шапка прототипа сайта готова.

Сделаем вторую секцию карусель landin page.

Секция будет с каруселью. В верстке карусель можно сделать на плагине owl carousel.

Второй способ сделать bootstrap карусель.

Добавим заголовок второго уровня секции инструментом heading.

Заголовок будет по центру.

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

Под заголовком оформим карусель из двух треугольников по бокам.

Треугольник служит индикатором переключения слайдов.

Из панели инструментов возьмем triangle и перенесем в проект, чтобы перевернуть треугольник на 90 градусов, используем в правой части moqup свойство rotation, по умолчанию задано 0 градусов.

Второй треугольник скопируем из первого.

Между треугольниками добавим 4 слайда инструментом image и под каждым изображением подзаголовок третьего уровня или текст.

прототип в moqup секции карусель landin page

Делаем в прототипе сайта блок мои преимущества.

Копируем заголовок от карусели и меняем название.

В этом блоке будет шесть основных преимуществ, которые закрывают боли заказчика.

У каждого преимущества будет логотип со смыслом в кружке, в одной стилистике с другими картинками.

Как сверстать такой блок можно читать тут.

Кружки делаем инструментом circle, также как и точки для карусели в шапке сайта.

Добавим подзаголовок у преимущества с ключевым запросом каждый подробно как делать, seo внутреннюю оптимизацию landing page читать тут.

в прототипе сайта блок мои преимущества

Секция прототипа moqup обсудить проект и портфолио.

По середине прототипа делаем вторую форму захвата.

Форм обратной связи должно быть минимум три на лендинге.

Как правильно делать форму захвата рассказано тут.

  1. Форма захвата состоит из заголовка, поля ввода телефона text input и кнопки button. Кнопку копируем из шапки сайта. Кнопки на сайте должны быть одинаковые в одном стиле.
  2. Секция портфолио состоит из трех блоков сделанных инструментом placeholder. Верстка секции портфолио с всплывающим окном.

прототипа moqup обсудить проект и портфолио

Прототип секции пакетные решения.

Секция с тарифами на услуги, часто встречается на landing page.

Все про верстку секции тарифов с ценой можно посмотреть тут.

Секция состоит из заголовка и подзаголовков с названием тарифа.

Получится три тарифа, поэтому будет три колонки.

В колонках укажем преимущества каждого тарифа.

В колонке каждую ячейку сделаем инструментом text area и будем копировать первую ячейку, чтобы были одинаковые размеры у всех.

Под колонкой делаем цену в поле и кнопку button, которую также копируем из предыдущего раздела.

Возможно добавить вторую новую кнопку получить бесплатную консультацию.

Прототип секции пакетные решения

Делаем прототип секции схема работы.

  1. Пишем заголовок и делаем абзац seo текста из основных преимуществ в работе, производстве.
  2. Перечисляем все этапы производства товара или услуги. Можно такую же схему сделать на предмет доставки товара. Указав все движения товара от упаковки до доставки по шагам.

Секция ответы на вопросы.

Желательно включать данную секцию в прототип, чтобы покупатель мог закрывать все боли.

В верстке данную секцию можно реализовать на tabs, подробно написано тут.

Делаем заголовок и ниже список всех основных болей.

Секция отзывов и форма очереди.

  • Секцию отзывов также реализуем, как и вторую сверху секцию карусели.
  • Форма очередь будет третей по счету на лендинге. Все формы будут разные выбираем из восьми какую использовать.

Последний прототип секции контакты.

Секция в верстке называется footer.

  1. Делаем заголовок по центру, как и все выше.
  2. Указываем электронную почту, телефон, ссылки на социальные сети, режим работы.

В самом низу делаем яндекс карту с красивым указанием местоположения.

прототип секции контакты в сервисе moqup

Комментариев нет