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

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

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

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

Создаем новый прототип и переходим в редактор

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

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

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

Добавляем элементы шапки

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

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

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

Вот так:

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

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

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

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

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

Делаем всплывающее окно с обратным звонком

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

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

Когда много страниц важны сквозные секции и блоки

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

Как сделать секцию сквозной

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

Как сделать:

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

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

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

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

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

Как сделать сквозной блок

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

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

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

Лайфхак

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

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

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

0
46 комментариев
Написать комментарий...
Mila Konstantinopolskaya

Ну, хорошо.
Пока он бесплатный, пока у вас глаза горят и руки делают.

А что потом?

Мне кажется, что монетизацию надо продумывать уже сейчас, когда есть работающий прототип. Так как вы втяните в своей сервис N-количество людей, они привяжутся к вам, встроят в свой процесс, а в какой-то не очень прекрасный день, у вас настроение переменится и вы забросите разработку.

Удалять жалко, но и развивать нет сил. Получается, что продукт остановится в развитии, а если сломается, что и чинить его никто не будет.

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

Для профи же есть Axure, Sketch и Adobe XD

Ответить
Развернуть ветку
Vadik Sh
Автор

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

Ответить
Развернуть ветку
Mila Konstantinopolskaya
Добровольная поддержка это и есть монетизация

Это чушь, такая форма «монетизации» не работает. Зачем платить, если можно пользоваться бесплатно?

Как-то же существуют полностью бесплатные продукты на донатах

Например?

Вы в комментариях пишите, что хотите сделать, не много не мало, а облачный аналог Axure. То есть в планах у вас конкуренция с софтом промышленного стандарта. Вы планируете оплачивать сервера, инженеров и поддержку из «донатов»? :) Серьёзно?

Ответить
Развернуть ветку
Александр Фудин

Я поддержу.

Ну тут проблемы с позиционированием на рынке,и уже как следствие наивные мечты о монетизации посредством донатов.

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

Ответить
Развернуть ветку
Mila Konstantinopolskaya

Вот, да. Именно об этом и речь.

Сама же постановка вопроса, типа «жить будем с донатов», даже немного оскорбляет и бесит. Идея классная, но рискует быть похерена за недальновидностью руководителей :(

Ответить
Развернуть ветку
Александр Фудин

мне кажется идея опоздала немного.

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

Умение работать в акшуре уже сейчас не сильно востребовано на рынке, (на западе еще боле менее, в России нафиг никому почти не надо)

Ответить
Развернуть ветку
Mila Konstantinopolskaya

Не могу ничего сказать на этот счет, так как не знакома с последними отчетами о выручке Axure и доли ее на рынке.

Однако, буквально на днях был анонс официального плагина для совместимости со Sketch :) То есть эти ребята сознают своё положение и готовы к битве.

А с их опытом это сулит только развитие Axure по всем фронтам. Гляди и цены пересмотрят.

Что касается инвижн и прочих, мне кажется, что нативное приложение всё такие лучше любого веб-аплета, даже такого вылизанного, как перечисленные вами выше.

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

Ответить
Развернуть ветку
Александр Фудин

Прочитал статью на медиуме о плагине Axure/Sketch.

Круто и хочется потестить.
Молодцы что развиваются.

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

Ответить
Развернуть ветку
Vadik Sh
Автор

"конкуренция с софтом промышленного стандарта"
Звучит круто, но там ничего такого прям невыполнимого нет. Мы для CRM-ок на заказ больше пилили чем функционал акшуры. События. Сценарии. Панели. Переменные. Все это делается без проблем.

"Вы планируете оплачивать сервера, инженеров и поддержку из «донатов»? :) Серьёзно?"
Всего не расскажу. Монетизации не то что бы не будет совсем, просто пользователям не нужно будет платить за сервис.

Ответить
Развернуть ветку
Александр Фудин

Такие инструменты как акшура очень сильно отличаются от crm-ок на заказ. Вопрос не в сложности разработки, вопрос в продвижении на рынке. Одно дело когда к вам приходят за учетной системой, а другое когда вы лезете на рынок где господствует акшура.

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

Ответить
Развернуть ветку
Mila Konstantinopolskaya

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

Для популяризации вашего сервиса одной статьи на vc не достаточно.

А написание CRM под заказ в 2018 году — это вообще странная тема, мягко говоря.

Может вы лукавите, и не «разработкой под заказ», а интеграцией готовых продуктов под бизнес-процесс клиента занимаетесь? :)

Ответить
Развернуть ветку
Vadik Sh
Автор

Мы делаем мультисайтовые системы управления с интеграцией в собственную же CRM для ловли лидов и сквозной аналитики из сетей на 100-1000 сайтов, готовых таких решений нет, хоть и 2018 год на дворе. Но и эта тема кстати тоже отживает.

Ответить
Развернуть ветку
Mila Konstantinopolskaya

Звучит масштабно, а на деле это Wordpress с мультисайтом и пачка CPA подделок от Пузата? :'))

Ладно, шутка.

Но если вы такие клёвые, то хотя бы копирайт повесьте и реквизиты заведите на сайте.

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

Ответить
Развернуть ветку
Александр Фудин

Ребят, вам действительно желаю больших успехов, но выскажусь

Большим компания где присутствует большое количество ux аналитик и проектирования нравится Axura, аналогов (прямых) ей к сожалению нет.

Другим тоже большим компаниям плевать на серые прототипы, они делаю прототипы в AdobeXD, фигме, скетче, анимируют через фреймер. (сейчас еще студия от инвижна появилась).

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

Если вы сделаете облачный аналог акушеры - вы будете крутыми.

Если вы позицинруете себя как средство быстрых прототипов для того чтобы заказчик вставил ссылку на прототип в тз - это тупиковый вариант.

Ответить
Развернуть ветку
Vadik Sh
Автор

"Если вы сделаете облачный аналог акшуры - вы будете крутыми."
Облачный аналог акшуры это и есть наша цель. Уже все продуманно для реализации. Сценарии и события для любого элемента страницы и работа с панелями в рабочей области, это все уже в ближайшем обновлении.

Ответить
Развернуть ветку
Denis Shiryaev

Рекомендую https://app.moqups.com/, приятный сервис и быстрый, много лет уже на нем.

Ответить
Развернуть ветку
Vadik Sh
Автор

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

Ответить
Развернуть ветку
Denis Shiryaev

1) Он бесплатный до 300 элементов
2) Русского и в HTML коде нет, нужен он, кек
3) Автоматизация какого рода нужна? Он умеет то что заявляет – делать прототипы, кликабельные
4) Кликабельные элементы там есть, никакой проблемы такую панель собрать на копии страниц у меня не возникало

Ответить
Развернуть ветку
Vadik Sh
Автор

"бесплатный до 300 элементов" - это как безлимит с лимитом.

Ответить
Развернуть ветку
Denis Shiryaev

"бесплатный до 300 элементов" - это как бесплатные 300 элементов, а потом придется заплатить больше, или удалить лишние элементы.

Я строил очень сложные мокапы там, многие по vc.ru в том числе, всегда хватало такого ограничения.

Ответить
Развернуть ветку
Vadik Sh
Автор

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

Ответить
Развернуть ветку
Denis Shiryaev

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

Ответить
Развернуть ветку
Vadik Sh
Автор

в комментах про Linux напишут что виндовс лучше, потому что на нем игры идут и софта больше, это будет здоровая конкуренция или некорректное сравнение, как по вашему?

Ответить
Развернуть ветку
Denis Shiryaev

Вы оказываете одинаковые услуги с этим сервисом, то есть явно ваши УТП должны быть понятны сразу из статьи, чтобы так не делали сравнивайте сами свой сервис с конкурентами, так будет проще

Ответить
Развернуть ветку
Vadik Sh
Автор

так не дают )

Ответить
Развернуть ветку
Denis Shiryaev

кек, теперь вы минусуете мои комментарии

Ответить
Развернуть ветку
Олег Ивахнов

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

Ответить
Развернуть ветку
Denis Shiryaev

*покинул чат*

Ответить
Развернуть ветку
Vadik Sh
Автор

Пришел попиарил сервис на статье про бесплатный сервис. Сам себя от фейк акка лайкнул и ушел громко хлопнув дверью. Мужик!

Ответить
Развернуть ветку
Denis Shiryaev

Я попиарил хороший сервис на который вам бы хоть чуть-чуть равняться, который еще и не нужно пиарить!

Поставлю вам минус с виртуального аккаунта еще раз!

Ответить
Развернуть ветку
Vadik Sh
Автор

"вам бы хоть чуть-чуть равняться"
в чем конкретно? хоть чуть-чуть напишите

Ответить
Развернуть ветку
Denis Shiryaev

Ну, например, в плане работы с комментариями о вашем сервисе :) То есть вместо того, чтобы обыграть как-то что-то, вы тут развели критику довольно крупного сайта который стандарт для многих людей которые строят прототипы проектов, потом обвинили меня в виртуалах, и поставили дизлайки еще ко всему – хотя бы с этого можно начать.

Ответить
Развернуть ветку
Vadik Sh
Автор

Конкретики нет. Ну ок.
Сервис я не критиковал, лишь написал что не рационально 800р платить за такой функционал. 800р в месяц я бы за облачный Axure платил, но не за возможность рисовать квадратики.
А про фейки да извините, я искренне верю что у вас есть один фанат на сайте который ходит за вами и лайкает сообщения.

Ответить
Развернуть ветку
Denis Shiryaev

И я парировал, что можно и не платить 800 рублей – тут начинается цикличность.

Переодически лайкают, да, я с этим не связан и у нас свобода голосований на сайте ;)

Ответить
Развернуть ветку
Vadik Sh
Автор

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

Ответить
Развернуть ветку
Vadik Sh
Автор

а нет, тут не снимает обратно. ну я бы снял была бы возможность.

Ответить
Развернуть ветку
Александр Фудин

Что это? зачем это здесь?

Ответить
Развернуть ветку
Vadik Sh
Автор

"Что это?" - Это полностью бесплатный сервис для создания прототипа сайта.
"зачем это здесь?" - Это здесь потому, что на этом сайте многие начинают свое дело, и чтобы просто и бесплатно поставить техническое задание на разработку сайта, им пригодится этот сервис.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
iLeonidze

Как хотите в будущем монетизировать?

Ответить
Развернуть ветку
Vadik Sh
Автор

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

Ответить
Развернуть ветку
Матвей Кондратов

Мне нравится Axure

Ответить
Развернуть ветку
Vadik Sh
Автор

Мне тоже нравится Axure реально крутой софт. Вот хотелось бы облачный сервис с таким функционалом. Его мы и пытаемся сделать. Сейчас работаем над сценариями и событиями для любого элемента, будет работать примерно как кейсы в акшуре.

Ответить
Развернуть ветку
Матвей Кондратов

Было бы очень круто)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Vadik Sh
Автор

Сервис полностью бесплатный.

Ответить
Развернуть ветку
Vadik Sh
Автор

"Если вы сделаете облачный аналог акшуры - вы будете крутыми."
Облачный аналог акшуры это и есть наша цель. Уже все продуманно для реализации. Сценарии и события для любого элемента страницы и работа с панелями в рабочей области, это все уже в ближайшем обновлении.

Ответить
Развернуть ветку
Vadik Sh
Автор

Обновление! Динамические панели.
- Теперь можно создавать любые сложные элементы интерфейса, благодаря гибкому назначению событий для любого элемента страницы. Менять вид панелей по сценариям и всевозможным событиям.
- Любому элементу страницы может быть присвоено несколько сценариев. Каждый сценарий может содержать сколько угодно действий над панелями. Каждая панель может менять свое содержание и иметь любое количество состояний (видов), а так же сколько угодно вложенных панелей, которые так же, могут содержать различные состояния.
- Теперь это полноценные динамические панели для проектирования сложных сайтов и интерфейсов.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
43 комментария
Раскрывать всегда