Как сделать прототип сайта

Решили создать небольшую инструкцию по созданию прототипа сайта. Нам как разработчикам сайтов, очень удобно когда клиент предоставляет прототип сайта и коротенькое ТЗ, а не портянку текста со скринами из экселя.

Регистрируемся в любом из сервисов для создания прототипов.

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

Для шапки рекомендуем сверху добавить новую секцию чтобы её можно было сделать одинаковой (сквозной секцией) для всех страниц, и все наши правки применялись сразу на всех страницах. Для этого иконку секции, что вверху перетаскиваем в рабочую область и отпускаем вверху, там где написано «Вставить секцию»

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

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

Чтобы показать 80% функционала достаточно прямоугольника и текста. Но некоторые вещи лучше показать именно так как одни будут работать.

Например второе меню которое показывается при прокрутке страницы. В ТЗ это занимает лишнее место, а в прототипе делается очень просто.

Вот так:

1 — Создаем новую секцию.

2 — Делаем секцию скрытой. (Нажатием на иконку глазика)

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

(C) сервис esk.one раздел инструкции.

Покажите каким именно меню должно быть, какие элементы в нем должны быть. Часто бывает так что в ТЗ написаны одни пункты а на деле блокам просто не хватает пространства, и мы теряем время согласовывая новое меню.

Если у формы есть несколько уровней, или после отправки она должна что-то показать эдакое, все виды формы лучше тоже нарисовать.

Для этого просто дублируете ту панель обратного звонка что уже сделали, даете ей название например "Панель 2" и на кнопке отправки панели назначить что нужно показать всплывающее окно с панелью 2.

Чтобы не рисовать одно и тоже на каждой странице воспользуйтесь сквозными секциями и сквозными блоками. Это такие элементы которые пишутся и редактируются в одном месте, а меняются сразу на всем прототипе автоматически. Это сильно экономит время.

Для хедеров и футеров предусмотрена сквозная секция. Эта секция висит на всех страницах прототипа. Редактируя то-то в ней, изменения происходят на всех страницах прототипа.

Как сделать:

1 — Создать секцию или выбрать существующую.

2 — В контекстном меню выбрать пункт «Сквозная секция»

3 — Во всплывающем окне выбрать «Выделить все» и позицию добавления.

4 — Нажать кнопку «Применить»

Примечание: если после того как секция стала сквозной в прототипе создавались ещё страницы, чтобы секция появилась на них, нужно повторить пункты снова. Чтобы избежать случайных дублей, страницы на которых секция уже установлена в окне показаны не будут. Редактировать содержимое сквозной секции можно на любой странице. (C) сервис esk.one раздел инструкции.

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

На странице панелей нажимаем W и рисуем блок, который часто будет повторяться на страницах, например выпадающее меню каталога с фильтрами.

Чтобы вывести его, в рабочей области нажимаем W и рисуем (или перетаскиваем виджет враппер), в настройках враппера указываем «брать данные из панели» в списке выбираем нужную панель. Все, панель подключена, теперь блок с этой панелью можно копировать на другие страницы, если вы поправите блок в панелях, изменения на всех страницах будут применены автоматически.

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

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

Сервис сыроват еще, на вид местами не для перфекциониста) вот ссылка на сервис кому интересно esk.one