⚒️ 13 инструментов прототипирования для веб-дизайнеров

Сегодня веб-дизайнерам доступно много инструментов прототипирования. Мы рассмотрим некоторые из них в следующем порядке:

1. Framer
2. Adobe XD
3. Adobe After Effects
4. Adobe Animate CC
5. Craft Prototype
6. Principle
7. Atomic
8. Proto
9. JustinMind
10. Origami
11. Flinto
12. Webflow
13. Marvel

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

Для чего необходимо прототипирование?

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

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

Иногда прототипирование до кодирования помогает обнаружить в проекте упущенные проблемы.

Прототипирование в рамках веб-дизайна

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

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

01. Framer

• Лицензия Plus: 15$/месяц (только для Mac)
• Лицензия Enterprise: подробности по запросу

Framer предоставляет знакомое всем визуальное редактирование и гибкость при работе с кодом, что обеспечивает плавный рабочий процесс. Его дополняют предварительный просмотр экрана устройства, управление версиями и возможность без проблем поделиться проектом. Программа помогает разрабатывать новые схемы взаимодействий, чтобы в дальнейшем создавать революционные приложения. Вы можете извлекать данные с любимого API, собирать вводимую пользователями информацию для тестирования, работать с фактическими пользователями и получать обратную связь. Программа также позволяет импортировать графику из Sketch, Photoshop или Figma.

Может показаться, что Framer предназначен исключительно для работы с мобильными приложениями. Но его можно применять в проектах, не связанных с приложениями, или в качестве отдельной библиотеки. Если использовать только библиотеку Framer JS, вам не понадобится интегрированная среда разработки (IDE). По сути, это JavaScript фреймворк с открытым исходным кодом для быстрого создания прототипов. Вы можете создавать анимацию и взаимодействия, вместе с фильтрами, «физикой пружины», 3D-эффектами и т. д. Хотя CoffeeScript не требуется, в документации он есть, как и IDE.

Стоит отметить, что Framer не предназначен для создания анимации, пригодной для производственного применения. Так как в программе Framer используется собственная концепция слоев и это довольно тяжелая программа в отношении кода, ее нельзя использовать в простой (стандартной) модели DOM, в отличие от GreenSock. По сути, она размещает в DOM собственный холст, на котором запускает всю анимацию.

• https://framer.com/features/handoff
• https://framer.com/getstarted/guide
• https://framer.com/pricing/2017
• https://framer.com/getstarted/import

02. Adobe XD

• Цена: требуется подписка Adobe Creative Cloud

В одном приложении вы можете рисовать, использовать повторно и видоизменять векторные и растровые изображения для создания вайрфреймов, макетов экрана, интерактивных прототипов и пригодных для производственного применения ресурсов. Здесь вы можете работать с мощными инструментами, такими как повтор сетки (Repeat Grid), построенным специально для XD,

а также со слоями (Layers), символами (Symbols) и инструментом перо (Pen Tools) для создания UX дизайна. С помощью множества анимаций можно создавать переходы между рабочими областями. Это позволит имитировать алгоритм работы приложения / сайта. Посмотрите эти два коротких видео, как создавать прототипы в Adobe XD:

Как записать видео в Adobe XD для демонстрации интерактивности продукта клиентам или членам команды:

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

Если вы новичок, то можете пройти профессиональный курс на Udemy, состоящий из 21 лекции, который охватывает все инструменты, необходимые для начала проектирования дизайна и создания прототипов с помощью Adobe XD: How to Design & Prototype in Adobe XD

03. Adobe AfterEffects

• Цена: требуется подписка Adobe Creative Cloud

After Effects — это не совсем инструмент прототипирования для веб-сайтов и приложений (хотя вы можете использовать его в этих целях). Он помогает создать взаимодействия прототипа, если вам нужно представить клиентам анимацию макета. С помощью этого инструмента можно создавать анимированную графику для видео или эффекты анимации для веб-интерфейса.

04. Adobe Animate CC

• Цена: требуется подписка Adobe Creative Cloud

Adobe Animate — это эволюция Flash Professional. В этом инструменте используются временная шкала, ключевые кадры, разнообразные параметры экспорта. Он поддерживает сторонние JavaScript библиотеки, позволяет регулировать расположение точки обзора и т. д. Инструмент предназначен, скорее, для аниматоров, но его вполне можно использовать под свои нужды. Помните, что применение инструментов ограничено только вашим воображением. Используйте его для создания вайрфреймов веб-сайтов, тестирования анимации для приложений и т. д. Подробнее о инструменте можно узнать здесь. Как создать анимацию для вашего прототипа в Adobe Animate CC, вы можете узнать из этой статьи.

05. Craft Prototype

• Цена: бесплатно. Требуется Sketch: 99$

Этот инструмент позволяет создавать высокоточные прототипы с помощью файлов вашего проекта. Craft принадлежит к семейству Invision. Эта компания владеет многими инструментами (например, Macaw и Easee) сторонних организаций.

Craft Prototype — мощный набор инструментов, который позволяет проектировать с использованием реальных данных, создавать гайдлайны в одно нажатие. С помощью Craft Prototype можно выполнять работу прямо в Sketch; все в одном пространстве. Зеркалирование в реальном времени на ваш телефон позволяет сразу тестировать дизайн прототипов. Когда вы будете готовы поделиться проектом, можно опубликовать его прямо в Invision, чтобы сразу получить обратную связь от клиентов и основных членов команды. Этот инструмент также позволяет достичь более высокой точности движений в прототипах, предоставляя временную шкалу для визуальной корректировки ключевых кадров. Ещё вы можете генерировать HTML и CSS, нативный код Swift и документацию для разработчиков. Подробнее о продукте можно узнать в этом коротком видео с пояснениями:

06. Principle

• Цена: 129$ (только для Mac)

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

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

07. Atomic

• Версия Starter: 15 $/месяц
• Версия Pro: 25 $/месяц
• Версия Unlimited: 25 $/месяц

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

В Atomic есть встроенные инструменты рисования и разметки для проектирования с нуля или работы поверх импортированных проектов. Вы можете быстро связать проекты с помощью набора жестов и переходов для мобильных устройств или ПК.

Здесь можно использовать собственный CSS код, чтобы применять дополнительные стили. Вы также можете экспортировать свой CSS код и делиться им с другими разработчиками. Подробнее об особенностях Atomic можно узнать на этом сайте.

08. Proto

• Версия Freelancer: 24 $/месяц
• Версия Startup: 40 $/месяц
• Версия Agency: 80 $/месяц
• Версия Corporate: 160 $/месяц

Proto позволяет с легкостью создавать сложную анимацию для любой модели взаимодействий при помощи шкалы времени. Приложение включает полный набор UI библиотек, например iOS9, Material Design, Windows 10 и т. д. Проекты можно импортировать с помощью плагина для Sketch или Photoshop; импортируйте их слоями и синхронизируйте через Dropbox. Можно напрямую экспортировать UI ресурсы. Вы также можете предварительно просматривать прототипы в браузере или на устройствах с помощью приложения Proto для iOS или Android. Приложение позволяет поделиться проектом с клиентами или членами команды для совместной работы и получения обратной связи. Proto можно интегрировать в ведущие инструменты для тестирования удобства использования, что позволяет получить весомую обратную связь.

Подробнее об этих возможностях можно узнать на сайте Proto.

09. JustinMind

• Версия Pro: 19 $/месяц
• Версия Enterprise: подробности по запросу

JustinMind — программный продукт, который позволяет преобразовать простые макеты в интерактивные прототипы для iOS и Android, создавать вайрфреймы для веб и мобильных устройств. Здесь можно использовать предустановленные UI библиотеки, вставлять HTML и файлы куда угодно. Платные учетные записи дают нескольким пользователям возможность одновременно взаимодействовать с одним прототипом, что позволяет легко получить обратную связь. У приложения также есть большая библиотека уже готовых виджетов под шаблоны устройств, которые вы выбрали для проекта. Также в вашем распоряжении находятся такие элементы, как интерактивные кнопки, чекбоксы, списки и даже макеты с эффектом параллакса.

Если вы незнакомы с этим инструментом, то на сайте сможете найти отличное руководство и видео, предназначенные как для новичков, так и для профессионалов. Хотя здесь можно бесплатно поделиться проектом через браузер, нужно перейти на платную версию, чтобы совместно работать с членами своей команды. JustinMind Prototyper позволяет импортировать изображения из любого инструмента проектирования или напрямую из веб-браузера и преобразовывать их в привлекательные веб-прототипы с помощью инструмента «image hotspot» (активный участок изображения). Вы также можете экспортировать полностью функциональный HTML файл и открыть к нему общий доступ в любом браузере.

• https://www.justinmind.com/features

10. Origami

• Цена: бесплатно, только для Mac

Origami создали и используют дизайнеры Facebook. Они применяли ее для создания таких приложений, как Instagram, Messenger и Paper. Вы можете скопировать что-либо из Sketch и вставить в исходные слои Origami Studio. Программа позволяет быстро корректировать, добавлять поведение и анимировать любое свойство слоя. Она предлагает дизайнерам массу жестов и анимаций переходов, распространенных среди UI моделей.

Origami предоставляет полезные функции для интерактивного прототипирования вместе с плагинами для Sketch и Photoshop, а также библиотекой документации и форумами.

Здесь есть функция экспорта в код (Export to Code), которая позволяет конвертировать визуальный дизайн в образцы кода для iOS, Android или веба. Программа не позволяет напрямую делиться прототипами с пользователями, хотя их можно предварительно просматривать с помощью приложения Origami Live, доступного для Android и iOS. Подробнее о программе можно узнать на сайте Origami.

11. Flinto

• Бесплатный пробный период в течение 14 дней
• Веб-версия Flinto Lite: 20 $/месяц
• Приложение для Mac: 99 $

Flinto для Mac — это программный продукт, который позволяет создавать как простые прототипы в «одно касание», так и комплексные со сложными взаимодействиями. Здесь нет программирования или временной шкалы. Оно по своей сути инструмент прототипирования для дизайнеров. Вы можете размещать объекты и компоненты, где хотите. Переходы могут быть простыми или сложными, и их можно использовать повторно. Программа позволяет гибко настраивать каждый слой, включая плавность по кубической кривой Безье или с эффектами «пружины».

Здесь можно использовать «конструктор поведения» для создания микровзаимодействий в пределах одного экрана. Он отлично подходит, например, для эффектов кнопок, переключателей, зацикленной анимации и анимации на основе прокрутки.

Здесь очень легко добавлять области прокрутки на экраны: выберите слои и нажмите кнопку Scroll Group (группа прокрутки). Вы можете использовать множество настроек, создавать группы прокрутки по страницам, вложенные группы прокрутки и даже анимацию на основе прокрутки.

Все изменения, которые вы вносите в Flinto для Mac, можно сразу проверить в окне предварительного просмотра или на подключенном по WiFi iPhone или iPad с помощью бесплатной программы просмотра для iOS.

Программа Flinto для iOS доступна для бесплатной загрузки в App Store. Поэтому можно отправлять файлы Flinto кому угодно, чтобы поделиться своим проектом.

• https://www.flinto.com/mac
• https://www.flinto.com/tutorial_videos
• http://blog.flinto.com

12. WebFlow

• Версия Starter: бесплатная
• Версия Lite: 16 $/месяц
• Версия Pro: 35 $/месяц

WebFlow — еще одно веб-приложение, которое работает в последних версиях Chrome и Safari. Это значит, что сейчас оно оптимизировано под эти браузеры, но код имеет кроссбраузерную поддержку.

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

WebFlow в основном предназначен для работы с веб анимацией, взаимодействиями и адаптивным веб-дизайном. Вскоре появится версия Interactions 2.0, которая предоставит более гибкую настройку анимации и взаимодействия между контрольными точками (часто это проблемные места для дизайнеров) и упростит визуальное проектирование.

Чтобы оценить возможности Webflow, посмотрите этот демонстрационный образец. Его можно также открыть в Webflow или посмотреть код в CodePen. И еще есть видео с его созданием:

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

Сейчас доступна версия Interactions V1. Interactions 2.0 будет включать больше визуальных настроек анимации и взаимодействий типа параллакс. Это анимация на основе позиции курсора / прокрутки в реальном времени. Команда Webflow надеется запустить бета-версию в скором времени. Interactions 2.0 станет весомой причиной для дизайнеров и разработчиков использовать этот инструмент.

• https://wishlist.webflow.com/ideas/WEBFLOW-I-17
• http://3d-transforms.webflow.com
• https://webflow.com/prototyping
• https://webflow.com/feature/interactions-v2
• https://interactions.webflow.com
• https://flexbox.webflow.com

13. Marvel App

• Бесплатно (1 пользователь, 2 проекта)
• Версия Pro: 12 $/месяц
• Версия Company: 48 $/месяц

Редактор Marvel для браузера позволяет связывать проекты, добавлять жесты и переходы, чтобы сделать прототип похожим на реальное приложение или веб-сайт. С помощью него вы можете создавать прототипы для iPhone, iPad, ПК, Apple TV, Apple Watch и Android.

В Marvel есть такие возможности, как совместная работа над проектом, комментирование, а также проектирование в браузере с помощью Canvas. И еще вы можете добавлять изображения из Photoshop, Sketch или создавать их прямо в редакторе. Пользователи могут путем перетаскивания создавать в проектах активные области, которые реагируют на нажатие или касание. В Marvel есть и другие интересные возможности, например плагин для Sketch и инструмент для iOS. Приложения для iOS теперь включает Canvas (упоминался ранее). Это инструмент быстрого проектирования, который позволяет создавать макеты приложений с нуля. Он также включает Iconfinder и Unsplash, которые предоставляют базу (более миллиона) стоковых фотографий и иконок для использования в проектах.

Marvel еще поддерживает такие возможности, как назначение ролей пользователей, организацию проектов с помощью папок, синхронизацию проектов через Google Drive, настройки для встроенных видео и аудио из YouTube, Spotify, Vimeo и SoundCloud.

• https://marvelapp.com/design
• https://marvelapp.com/features
• https://marvelapp.com/sketch

Заключение

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

VIA