Оффтоп Vadik Sh
1 110

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

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

В закладки

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

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

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

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

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

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

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

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

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

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

Вот так:

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать:

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

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

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

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

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

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

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

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

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

Лайфхак

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Vadik Sh", "author_type": "self", "tags": [], "comments": 48, "likes": 5, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 37417, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 37417, "author_id": 162764, "diff_limit": 1000, "urls": {"diff":"\/comments\/37417\/get","add":"\/comments\/37417\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/37417"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

48 комментариев 48 комм.

Популярные

По порядку

Написать комментарий...
2

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

А что потом?

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

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

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

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

Ответить
0

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

Ответить
1

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

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

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

Например?

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

Ответить
2

Я поддержу.

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

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

Ответить
0

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

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

Ответить
1

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

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

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

Ответить
1

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

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

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

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

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

Ответить
0

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

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

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

Ответить
0

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

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

Ответить
0

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

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

Ответить
0

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

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

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

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

Ответить
0

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

Ответить
0

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

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

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

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

Ответить
2

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

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

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

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

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
3

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
0

так не дают )

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
2

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

Ответить

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

0

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить

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

0

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

Ответить
0

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

Ответить
0

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

Ответить

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

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления