Всевозможные инструменты и обновления для прототипирования появляются чуть ли каждый день. На сегодняшний день представлено огромное их количество, которое условно разделяются по функционалу на 3 группы:
В этой статье я собрал самые интересные и нужные (на мой взгляд) инструменты, которые пригодятся в работе каждому дизайнеру. Они подходят как для веб-сайтов так и для мобильных разработок.
Группа 1 — структура, лоу-сценари
Эти инструменты используют изображения, которые связаны между собой ссылками. Последние, в свою очередь, подвязаны к объектам. В итоге получаются статичные прототипы, которые легко отредактировать, отправить, или получить обратную связь.
Скриншот экранов с настроенными связями в Sketch
Благодаря им, можно за считанные минуты собрать инфу для первичного анализа. При этом они отличаются от мобильного приложения тем, что запутает участников и ухудшит качество тестов.
Представители этой группы — Adobe XD, Figma, и Sketch. Сравнение этих программ находится здесь. Также представителями этой группы являются Marvel и Invision.
Marvel
Простой и легкий способ для создания прототипа. Является самостоятельной программой, при этом может использоваться как дополнение к прочим дизайнерским редакторам.
Бесплатная версия позволяет создать ограниченное количество прототипов, но в мобильной версии это ограничение снято.
Invision App
Стоит это удовольствие 13 баксов в месяц. Может использоваться как самостоятельная программа, или дополнение к различным дизайнерским редакторам. Связывает экраны в Sketch, без лишних настроек. Функционал богат на дополнительные функции и сервисы. Среди которых совместная работа, собственный сток, хранение библиотек и пр.
Adobe XD
https://www.adobe.com/ru/products/xd.html
Бесплатная версия позволяет создать всего 1 прототип. Хочешь all in – выложи 10 баксов. Подробнее о программе в прошлых статьях (советы по Adobe XD, изучаем Adobe XD часть 1, изучаем Adobe XD часть 2).
Sketch
https://www.sketchapp.com — годовой абонемент 99 баксов.
Figma
https://www.figma.com
Доступна бесплатная версия.
Встроенные в дизайн редакторы инструменты прототипирования полностью закрывают функционал отдельных веб-сервисов. Имеются небольшие отличия, связанные с развитием редакторов. Например, Adobe XD сам по себе сильно отстаёт от конкурентов, а в скетче (50) пока еще нет удобного механизма шеринга, но в общих моментах все стремятся к единому опыту, лучше всех реализованному в Figma.
👍Плюсы
+ All-in-one платформа — один инструмент для всего рабочего процесса
+ Не стоит дополнительных денег.
👎Минусы
− Наследуются от инструмента. Например, Скетч запускается только на маках, а Фигма не работает без интернета.
Группа 2 — переходы между экранами, послойная анимация
Основной упор сделан на анимацию. Просматривается пародия на поведение элементов интерфейса, легкий переход между слоями. Проявляется простенькая анимация. Процесс довольно простой: задается начальное и конечное состояние экрана, а также действие, при котором запускается переход.
Пример экрана настройки анимации в Invison Studio
В итоге получаются прототипы, передающие состояние интерфейса в данный момент. При этом работать со сложными функциями они не могут.
https://projects.invisionapp.com/prototype/low-test-cjfiewxmx0057ff01vr18exfq/play/061c6fb1 — кликабельный прототип, собранный в Invision Studio
Principle
Лицензия обойдется вам 129 баксов.
Один из самых востребованных инструментов для анимации. Используется для сценариев в несколько экранов. Экспорта в код не имеет.
К преимуществам можно отнести большое сообщество и достаточное количество учебных материалов.
Недостатки: Работает только с Mac, нет возможности работать со сложными сценариями, нет онлайн-шеринга.
Invision Studio
https://www.invisionapp.com/studio
Это относительно новый инструмент, который позиционирует себя как полноценный редактор с большими функциональными возможностями. Обеспечивает удобную работу с прототипом, с легкостью редактирует анимации. К преимуществам можно отнести возможность работы на Windows, а также онлайн-шеринг. Из минусов – нет экспорта в код, имеются небольшие проблемы со стабильностью работы.
Flinto for Mac
100 $ за лицензию.
Эта программа использует тот же принцип, что и предыдущая. Сложная анимация настраивается в экране отдельного интерфейса, при этом позволяет легко редактировать, управлять и повторно использовать составляющие в последующих проектах. Недостатками являются отсутствие онлайн-шеринга и работа исключительно на Mac.
Kite Composer
100 $ лицензия.
Если вы приверженец анимации интерфейсов в After Effects, тогда эта программа для вас. Сконцентрироваться на качестве анимации поможет таймлайн, а параметры и события накладываются как фильтры. Имеется встроенный инспектор, а также экспорт кода в macOS\iOS. Рабочий процесс напоминает АЕ на минималках.
Группа 3 — программируемое поведение
Эти инструменты обеспечат целиком управляемый прототип, который использует функции устройства и данные пользователя. Такое преимущество обеспечит максимально эффективную работу приложения, а также его разработку и тестирование.
Настройка поведения прототипа в Framer
Каждый из инструментов данной группы выделяется своим подходом и способом программирования.
Haiku
Бета версия бесплатна.
Представляет собой широкий выбор возможностей для анимации интерфейсов. Имеет возможность изменять параметры объектов, подключаясь например и файлу фигма или скетч. Конечный файл экспортируется в любой формат, и на любую платформу. Недостатком этого инструмента является необходимость знания javaskript для обработки, а также работа только на Mac.
Proto.io
https://proto.io — от 24 $ в месяц
Atomic.io
доступна бесплатная версия
Возможность прописывать сложные команды прямо в окне браузера. Переменные и тонкая настройка состояний и событий дополняет привычную логику инструментов для анимации. Необходимость работы в браузере накладывает свои ограничения на процесс. Из минусов – только веб-версия.
Framer
12 долларов ежемесячно.
Пожалуй самый популярный инструмент, у которого имеется свой дизайн редактор и среда программирования.
Большой функционал, сообщество, обучающие материалы. Все для тех, кто хочет научиться программированию. Для создания сложных прототипов уходит очень много времени.В итоге получаем html в браузере, который не подходит для мобильной разработки. Минут – необходимость знания CoffeeScript.
Origami Studio
Инструмент от фейсбук, который использует свою среду программирования Quartz Composer.
Последние обновления порадовали улучшенным интерфейсом, возводя его на передний план по удобству, функционалу и логики. Раздражают только постоянные неполадки с импортом в скетч. При этом скорость и отзывчивость программы перевешивают все минусы. Преимуществом является простой и понятный функционал, возможность использовать JSON. Недостатки – проблема с оптимизацией.
Phase
По обещанию разработчиков этот инструмент сочетание таймлайна и визуального программирования. Выход – июнь 2018. Я еще не успел поклацать.
Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна для начинающих, и учиться Вам теперь станет в удовольствие!