Вопросы Daria Khokhlova
4 925

Какими инструментами для прототипирования интерфейсов вы пользуетесь

И список из нескольких полезных сервисов.

В закладки
Аудио

Пользователи сайта Designer News поделились своими любимыми инструментами для прототипирования. В основном они пользуются продуктами от Adobe, Sketch, Figma, но выделили и несколько других сервисов.

Axure

Инструмент для создания интерактивных прототипов сайтов и мобильных приложений. Разрабатывает Axure одноименная компания, основанная в 2002 году. С помощью него можно также создавать диаграммы, оформлять документацию и так далее.

Компания предлагает бесплатный 30-дневный пробный период.

Protopie.io

Призер престижной дизайн-премии Reddot 2017 года. Инструмент позволяет создавать интерактивные прототипы без кода и запускать их на устройствах на базе iOS и Android.

Стоимость бессрочной подписки на сервис составляет $99. Есть бесплатный пробный период — 7 дней. Его можно продлить на 10 дней, зарегистрировавшись на платформе Protopie Studio.

Fluid UI

Сервис для прототипирования сайтов и мобильных приложений в браузере. Пользователи Designer News отметили его простоту и скорость.

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

Click Dummy

Плагин для Sketch, с помощью которого можно быстро создавать интерактивные HTML-страницы из статичных прототипов.

Flinto

Инструмент для прототипирования приложений на macOS и iOS. Позволяет создавать интерактивные и анимированные прототипы, делиться ими с коллегами и тестировать на нескольких устройствах. Есть бесплатная 14-дневная версия.

Framer X

Инструмент для прототипирования, в котором прототипы создаются на основе кода. При этом собрать нужный макет можно и только визуальными средствами — так что пользоваться Framer X можно и без знаний программирования. Позволяет быстро тестировать полученные прототипы и делиться ими в облаке.

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

Какие инструменты используете вы?

#дизайн #прототипирование

{ "author_name": "Daria Khokhlova", "author_type": "editor", "tags": ["\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 51, "likes": 39, "favorites": 308, "is_advertisement": false, "subsite_label": "ask", "id": 50164, "is_wide": false, "is_ugc": false, "date": "Sun, 04 Nov 2018 15:12:56 +0300" }
{ "id": 50164, "author_id": 5723, "diff_limit": 1000, "urls": {"diff":"\/comments\/50164\/get","add":"\/comments\/50164\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/50164"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199125 }

51 комментарий 51 комм.

Популярные

По порядку

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

Figma

Ответить
1

Да Figma топчик, причем думаю скоро будет и там анимация интерфейса.

Ответить
0

скорее бы

Ответить
12

олды тут?

фотошоп и инвижн, хотя накидывать на бутстрапе верстку еще лучше

Ответить
7

Олды здесь

Ответить
5

Если олды — то у Adobe был классный Fireworks, который они убили (и в итоге выпустили XD)

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

Ответить
1

фотошоп и xd (ну и иллюстратор)

Ответить
0

Охх, фотошоп, это же путь страдающей улитки

Ответить
10

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

Ответить
8

Лично мне нравится для черновиков https://balsamiq.cloud. Очень быстро всё и в облаке.

Ранее я работал в axure. Он требовательный к ноутбуку, довольно сложный и многоуровневый. Зато в нём можно что угодно делать и интерактивные элементы мутить (выпадающие списки / анимацию / итп). Когда-то мне он очень нравился, но я больше не рисую чистовые макеты, а делаю только черновые и отдаю дизайнеру чтобы рисовал уже в ФШ или скетче.

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

А за статью спасибо, узнал про парочку новых сервисов.

Ответить
7

Пффф, слабаки. Paint. За 5 минут любой прототип можно набросать.

Ответить
0

набросайте интерактивный прототип, пожалуйста

Ответить
6

Изи. Когда я получу аванс?

Ответить
0

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

Ответить
0

Плюс за старание

Ответить
0

Чтобы что, поиграть с вами в игру принеси мне камень?

Ответить
0

ахахахахах полный хохотач просто ))))))))))))))

Ответить
6

Adobe XD + Illustrator + Photoshop

Ответить
3

Так прототипирование или дизайн? По картинкам кажется, что второе.

Ответить
5

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

Ответить
3

У себя используем Adobe XD + готовый набор для вайрфрнйминга Platforma. Экспортируем страница прототипа в PNG, закидываем в Invision App, перевязываем, готово.

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

Ответить
2

С последним обновлением в Adobe XD завезли интересную штуку — авто анимацию. Для пользователей Windows довольно удобная фича. Не всегда работает как хочется, но в будущем подтянут.

Но вы только взгляните как можно использовать это https://dribbble.com/shots/5452024-Smart-Fridge-AR-Drag-Interaction-with-XD-Auto-Animate

Ответить
2

А про Figma автор забыл -_-

Ответить
0

Читайте внимательнее:
В основном они пользуются продуктами от Adobe, Sketch, Figma, но выделили и несколько других сервисов

Ответить
2

Обычно так:

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

Для новичков:

Для начинающих советую Balsamiq Mockups (десктоп версия). Она очень простая в освоении. Порог для входа минимальный.

Ответить
2

Я думал все скетчем пользуются и это стандарт уже, а про него не написали даже. Или он для других задач?

Ответить
0

Но, все-таки нормальные прототипы апп, где есть например дропдауны и драг энд дроп, на нем так себе делать

Ответить
1

Marvel, ранее Pop до поглощения

Ответить
1

Axure. Очень удобно и интерактив легко делать.

Ответить
1

а интерактивные прототипы "Protopie.io", можно потом прикручивать к разработке и коду ?

Ответить
0

Фотошоп, конечно. Это наше все :)

Ответить
0

Это да, но скетч или фигму хотя бы попробуйте.

Ответить
0

попробуйте скетч, фигма на 100+ экранах начинает _слегка_ притормаживать

Ответить
0

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

Ответить
0

не, допускать людей в свои файлы я точно не собираюсь

Ответить
0

Интересно как вы работаете в команде

Ответить
0

репозиторий

Ответить
0

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

Ответить
0

бумага и framer x

Ответить
0

Бумага - каеф. Попробуйте ipad pro + apple pencil + one note.

Ответить
0

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

Ответить
0

Sketch + Marvel + Principle

Ответить
0

Sketch cloud

Ответить
0

А где обзор на sketch, adobe xd, axure и figma ? :( Забыл про ветеранов(((

Ответить
0

Proto.io

Ответить
0

сразу дизайн рисую.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "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-уведомления
{ "page_type": "default" }