20 инструментов для прототипирования: от быстрого и грязного wireframe к функциональному прототипу

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

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

1. Marvel

Marvel — один из новых игроков, но достаточно крупных на рынке сервисов для прототипирования. Понятные и удобный интерфейс Marvel помогает превратить все ваши макеты, эскизы, наброски для веба или мобильного приложение в динамический презентационный материал для клиента. Исходя из опыта большинство клиентов любят смотреть на “живую” структуру сайта, чем на наброски на бумаге. С этим инструментом даже можно создавать прототипы приложений для Apple Watch — это новый тренд.

Marvel — один из новых игроков

2. InVision

InVision достойно готов помочь вам с вашим веб или мобильным проектом. Он работает с любыми платформам: Android или проект IOS. С InVision вы можете создавать кликабельные, интерактивные прототипы и макеты. InVision можно смело отнести в категорию team friendly tool для целой команды. А все потому, что прототипами можно легко делиться с членами вашей команды.

С InVision вы можете создавать кликабельные, интерактивные прототипы и макеты.

3. Proto.io

Для использования Proto.io не требуется иметь специальные coding skills. Наоборот интерфейс и логика сервиса достаточна просты, что делает его отличным инструментом для создания интерактивных прототипов для мобильных приложений.

Для использования Proto.io не требуется иметь специальные coding skills.

4. Moqups

Moqups другой не менее известный инструмент прототипирования. Но немного иной, чем кажем предыдущий. Платформа основана на HTML5. Это идеальный инструмент для создания независимых от разрешения SVG мокапов и вайрфреймов.

Платформа основана на HTML5

5. Fluid

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

Fluid представляет собой мобильное приложение для прототипирования.

6. Prott

Prott относиться к быстрому методу прототипирование из разряда collaboration tool. Он визуализирует ваши идеи от первого скетча до интерактивного прототипа, который работает как реальное приложение. Кроме того, Prott обладает замечательным дизайном и подходит для совместной работы с другими членами команды.

Prott относиться к быстрому методу прототипирование

7. Flinto

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

Flinto поражает своим идеальным балансом между быстрым прототипированием и реализмом.

8. POP

Если вы предпочитаете методы старой школы, когда прототипы рисовались от руки в силу отсутствия современного разнообразия инструментов, то POP станет для вас подходящим выбором. Все упрошено до простой степени: набрасываете идеи приложения в вашем скетчбуке, фотографируете и добавляете ссылки между , кнопками и макетами. После этого синхронизируете прототипы с Dropbox и вуаля — готовый прототип) И все это, с помощью лишь одного мобильного телефона. С таким приложением можно создавать прототипы даже стоя в пробке.

Все упрошено до простой степени

9. Pixate

Pixate — это совсем новый игрок. Эта платформа для мобильного дизайн взаимодействия. Видимо разработчики учли опыт предыдущих платформ и сделали его еще проще. Все что необходимо: загрузить слои и добавить взаимодействие или анимацию с помощью нескольких кликов мыши.

Pixate — это совсем новый игрок.

10. Axure

Axure — это мой самый первый инструмент, с которым мы прошли огонь и воду. Действительно стоящая и удобная вещь. Чтобы освоить его базовые возможности мне понадобилось не больше недели. Но, время идет и однажды нам пришлось попрощаться, так как по сравнению с тем временем, когда я с ним познакомился, на рынке даже и не пахло чем-то простым и инновационным. Моя любовь к Axure осталось в виде присутствие ярлыка на рабочем столе десктопного компьютера) Возможно такое отношение связано с тем, что возможности продукта не совсем визуально красивые, но это лишь мое мнение, поэтому я его оставлю при себе.

Axure — это мой самый первый инструмент, с которым мы прошли огонь и воду.

11. Framer

Framer можно интегрировать с Photoshop or Sketch app. Используется для создания прототипов на базе Android, IOS, также для веб. Используя Framer вы можете изобрести собственную анимацию и взаимодействие.

Используется для создания прототипов на базе Android, IOS, также для веб.

12. Webflow

Если вы хотите проектировать прототипы быстро, то WebFlow это не самый лучший вариант. Но потраченное время с лихвой окупится, когда ваш спроектированный прототип засияет. Дополнительно этот сервис предлагает собственную CMS для ваших прототипов. А еще у них крутой промоционный ролик и сделан со вкусом. Судите сами: Webflow: Design websites. Don’t code them.

Дополнительно этот сервис предлагает собственную CMS

13. Mockplus

Mockplus имеет одну существенную для современного мира особенность — это скорость! Как правило, Mockplus используется для desktop based application, но он также может быть легко использован для мобильных и веб-проектов. Чистый интерфейс в разы повышает эффективность работы, потому что проектировщик, во время работы, сосредоточивает свое внимание на самой конструкции и в меньшей степени на функциях.

Чистый интерфейс в разы повышает эффективность работы

14. Justinmind

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

Представляете, программа была создана в 2008 году.

15. Vectr

Vectr все еще в бета-версии, поэтому говорить много не придется. С Vectr, вы можете создать веб или десктоп приложение для Mac и Windows. И это совершенно бесплатно. Все прототипы с Vectr могут быть интегрированные через приложения, например со Slack.

С Vectr, вы можете создать веб или десктоп приложение для Mac и Windows.

16. Principle

Принцип инструмент прототипирования доступен только для Mac. Он поставляется с приложением ОС IOS, чтобы отразить живые прототипы. Принцип позволяет экспортировать прототипы в видео или формате GIF. Интерфейс знаком с эскиза приложения. Если вы пробовали эскиз приложения раньше, это будет довольно легко использовать его.

Принцип инструмент прототипирования доступен только для Mac.

17. PowerMockup

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

Это надстройка Microsoft PowerPoint

18. Atomic

Atomic это потрясающий инструмент прототипирования. Для работы требует только Google Chrome. Если вы используете Safari, Firefox или браузеры для Windows, это может раздражать.

Для работы требует только Google Chrome.

19. Balsamiq

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

Может интегрироваться с Google Docs

20. Adobe Comp CC

Большой и мощный инструмент от Adobe. Позволяет создавать веб, мобильные приложения и макеты для печати. Естественно легко интегрирован с Adobe инструментами проектирования, такими как Photoshop, Illustrator или InDesign. Кроме того, Adobe Comp CC работает с Adobe Stock, которое предоставляет сотни шрифтов, изображений и графики.

Большой и мощный инструмент от Adobe.

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

А каким вы пользуетесь инструментом для прототипирования интерфейсов? За что цените свой выбор?

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

«После эпохи информации наступает эпоха выбора», — дизайнер Чарльз Имз.

#ux #ui #usability #design #designer #prototyping #wireframe #tools