Как создаются современные прототипы сайтов?

Собственно интересует вопрос с помощью чего создаются прототипы сайтов?
Поисковик конечно отвечает на этот вопрос. Но проверять эту кучу вариантов нет времени.
Интересует опыт людей. В искомом решении ожидается увидеть какую-то систему отступов, размеров шрифтов, что бы этим было легко управлять. Т.е. изменив размер шрифта в шапке, что бы он изменился на всех страницах прототипа автоматически.
Какие существуют универсальные инструменты для создания прототипов сайтов?
Уточнение: под прототипом понимается создание каркаса сайта в виде схематических блоков для проработки структуры сайта и утверждения его с клиентом.
  • Вопрос задан
  • 2885 просмотров
Решения вопроса 3
Kadzi
@Kadzi
Ом
Сергей, вас раскачает Figma.

Без лишних слов:

Фишки фигмы
Обзор фигмы

Все то, что вы спросили, там есть. В одном месте.
В умелых руках (понимание формы и пропорций, цвета, композиции, типографики) такие программы просто восхитительны.

p.s не углубляйтесь, попробуйте фигму в течение нескольких часов, если вам покажется, что этого мало, пробуйте скетчи и т.д
Ответ написан
Комментировать
mixail_fet
@mixail_fet
Дизайнер веб-интерфейсов
Из декстопных приложений, самый лучший вариант Axure - там и стили для шрифтов, там и шапка с футером в виде компонентов и удобный набор инструментов, заточенный под прототипы.

Если говорить о онлайн сервисах, я использовал moqups.com.
Ответ написан
tilion
@tilion
Веб-дизайнер
По началу в нашей компании эскизы рисовали кто в чём горазд, было так себе. Потом купили AxureRP, стало получше. Практически отпало желание рисовать эскизы и прототипы красивыми, теряя на это время, плюс, появилась возможность показать динамику - всплывающие окна, сложные формы (комплексы инпутов) и прочее. Но, по непонятным причинам, она не прижилась. Возможно, из-за сложного интерфейса, который, по сравнению с любой другой программой для прототипирования, монструозен и кошмарен. Но это по прежнему самый сильный инструмент (после прототипирования кодом, но это уже не инструмент). Сейчас мы рисуем эскизы в скетче, потому что, передав такие эскизы дизайнеру, он сразу работает с некоей основой макета, а не перерисовывает эскизы из чужих jpg, это должно ускорить работу, но пока не ясно так ли это. Оживляем прототип в Invision, но это сомнительный способ когда надо показать динамику (да даже работа с появляющимися в нужном месте объектах кривая), ждём InVision Studio.

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

В скетче система отступов регулируется плагином Anima AutoLayout.
Размеры шрифтов - встроенным функционалом скетча, очень удобным.
Любой модуль может быть символом, то есть, повторяющимся на разных страницах. Причём, текстовую информацию внутри символа (если есть текстовые слои) можно менять, не меняя символ в целом.

Если у вас винда, то стоит присмотреться к Adobe XD или веб-версии Figma.

Многие рисуют прототипы (именно прототипы - функциональные эскизы, то есть, эскизы, в которых демонстрируется функционал интерфейса, а не просто статичные jpg или html) сразу в анимации, показывая разные сценарии использования интерфейса, где прокликивается каждый ключевой элемент.
Ответ написан
Пригласить эксперта
Ответы на вопрос 7
sim3x
@sim3x
html + sass/less/stylus
Ответ написан
@agent_tremolo
UX/UI дизайнер
Если хотите работать над сеткой и шрифтами, то sketch - там прекрасно назначаются стили и символы для изменения на всех страницах.
Но прототип реально этого не требует. Если он реально детализирован, то внимание уделяется взаимодействию с элементами, а не их дизайну. Если вы будете работать на этапе прототипа с кеглем, сеткой и вертикальным ритмом, вы завязнете в этих деталях и можете упустить реально критичные детали UX. Шрифты и отступы на этом этапе ставятся грубо - лишь бы в экран влезало.
Поэтому набрасывайте лучше в Axure RP/
Главное, донести этот подход для клиента. :)
Ответ написан
Комментировать
livetyping
@livetyping
Кое-что знаю о разработке и маркетинге в digital
Мы чаще всего рисуем экраны в Скече и потом склеиваем в интерактивный прототип через Marvel. Похоже больше на дизайн, чем на схематичный прототип, клиентам нравится.
Подробнее написали про бесплатный софт для прототипирования тут:
https://livetyping.com/ru/blog/besplatnye-programm...
Ответ написан
Комментировать
lukoie
@lukoie
Скетч или Адоуби ХД
Ответ написан
Комментировать
@McBernar
Прототипы — трата времени.
Но если уж очень хочется — скетч/фигма могут все это сделать. Просто рисуйте прямоугольники.
И есть axure, который монстр, но очень функциональный.
Ответ написан
DarkMode
@DarkMode
Made out of meat.
Ответ написан
Комментировать
SeoHueo
@SeoHueo
Верстальщик, сео-специалист, предприниматель
Есть простенькие полу-бесплатные сервисы, вроде wireframe.cc . Сперва бумажка и ручка, чтобы в голове наметить что к чему, а потом wireframe - 2-3 часа и прототип готов
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы