Приложение для разработки интерфейсов приложений

11 бюджетных инструментов дизайнера для создания интерфейсов и макетов

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

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

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

PowerMockup — плагин для PowerPoint

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

PowerMockup работает с Office 2007, 2010 и 2013. Однопользовательская лицензия на PowerMockup стоит $59,95; стоимость лицензии для рабочей группы зависит от количества человек в ней.

Moqups — онлайн-инструмент для создания макетов и прототипов

Moqups — интерактивное приложение на HTML5, позволяющее разрабатывать векторные прототипы.

Сервис разработан 6 увлеченными программистами из Румынии, бесплатен и не требует регистрации.

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

Fluid UI — средство разработки прототипов для iOS- , Android- и Windows приложений

Fluid UI — онлайн средство для прототипирования мобильных приложений. Может быть использован как для создания простых макетов, так и сложных высококачественных макетов и прототипов. Сервис содержит библиотеки с элементами интерфейсов для iOS, Android и Windows 8 приложений.

Аккаунт для одного проекта с ограничением в 10 экранов доступен бесплатно. Платные планы начинаются с $29 в месяц.

Wireframe.cc — минималистичный бесплатный онлайн-сервис для прототипирования

Wireframe.cc отличается от других инструментов прототипирования чрезвычайно простым интерфейсом без огромного количества наворотов. Когда вы заходите на сайт сервиса wireframe.cc, вы сразу же можете начать рисовать, перетаскивая элементы мышью по рабочей области. Чтобы сохранить макет достаточно нажать кнопку «Save», после чего сервис сгенерирует уникальный URL, которым вы сможете поделиться с другими людьми или добавить его в закладки.

Wireframe.cc на данный момент бесплатен, премиум-версия с доп. функциями ожидается в ближайшее время.

Axure RP

Цены на это ПО начинаются с $289 за стандартную лицензию. Конечно, такая цена весьма велика. Однако, набор функций программы вполне оправдывает цену для некоторых категорий пользователей.

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

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

Axure — это десктопное ПО, доступное для Mac OS X и Windows.

Balsamiq Mockups — инструмент для быстрого прототипирования на основе Flash

Balsamiq Mockups — чуть ли не самый известный инструмент для прототипирования.

Продуктом, выпущенным в 2008 году силами одного программиста, в настоящее время пользуются десятки тысяч клиентов. Команда сервиса выросла до 11 штатных сотрудников.

Balsamiq Mockups стремится передать опыт рисования макетов на бумаге, поэтому прототипы выглядят не так формально, как в других программах.

Вы можете использовать Balsamiq Mockups непосредственно в браузере (потребуется Flash) или загрузить в качестве приложения Adobe AIR. Однопользовательская лицензия стоит $79.

Pencil — инструмент для прототипирования с открытым кодом

Pencil — инструмент с открытым кодом для создания GUI-макетов и прототипов. Содержит большое количество встроенных фигур, начиная от элементов общего назначения и элементов блок-схем до элементов управления пользовательских интерфейсов (речь как о десктопных приложениях, так и о мобильных).

Вы также можете скачать пользовательские коллекции элементов из раздела Download на сайте Pencil. Инструмент доступен как автономная версия для Linux, Windows и Mac OS X. Также может быть использован в качестве расширения Firefox.

UXToolbox — инструмент для прототипирования под Windows

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

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

После того, как вы закончите работу над проектом, вы сможете экспортировать макет в формат HTML, PNG, XML и Word или распечатать материалы для рабочей группы.

UXToolbox работает с Windows XP и с более поздними версиями и стоит £159 (около $240) за копию.

Mockups.me — инструмент для создания пользовательских интерфейсов

Mockups.me очень похож на Balsamiq Mockups, но имеет ряд преимуществ. В частности у Mockups.me есть приложения для IOS и Android. Кроме того, Mockups.me включает в себя встроенные коммуникационные системы для сбора обратной связи через аннотации и комментарии.

Стоимость десктопной версии Mockups.me — $49, версия для планшета доступна за $19,99, а цены за веб-версию начинается от $99 за год.

Live Wires — приложение для создания прототипов под iPad

Live Wires поможет вам протестировать и создать прототипы непосредственно на iPad. Приложение может быть использовано для создания интерактивных прототипов приложений для iPhone и iPad.

Live Wires включает в себя большую коллекцию легко настраиваемых элементов упрвления.

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

Live Wires сейчас доступен по специальной начальной цене в $9,99.

HotGloo

Мой любимый инструмент для прототипирования. Ему посвящена отдельная статья.

Резюме

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

Использовали ли вы какой-то из них? Если да, пожалуйста, поделитесь своим опытом в комментариях.

Источник

14 популярных программ для создания анимации, прототипирования и дизайна интерфейсов

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

Статья подскажет для чего хорош каждый инструмент и сориентирует по плюсам и минусам. Среди инструментов: Principle, InVision Studio, Figma и другие.

Figma свежий инструмент. Она идеальна даже для командной работы в реальном времени. Figma работает шустро и прямо в браузере. Есть также и desktop-приложение, но оно работает только при подключении интернета.

Ещё больше статей о дизайне, а также полезные сервисы можно найти на ux-journal.ru

Figma построена на технологиях electronjs, а значит вы сможете дизайнить на любой платформе: Windows, Mac, ChromeOS и даже Linux. А еще приятный бонус, ваши дизайны сохраняются моментально в облаке, а значит вся работа всегда в сохранности и готова к демонстрации клиентам.

• Работайте и штурмите одновременно всей командой дизайнеров в многопользовательском режиме;
• Доставайте инструмент где угодно: Windows, Linux, ChromeOS и Mac;
• В коробке шикарный Pen tool;Подходит для ui-дизайна мобильных приложений, просто установите на свой гаджет: Figma Mirror;
• Инструменты для передачи дизайнов в разработку;Если у вас проект в .sketch просто откройте его в Figma;Figma – бесплатный редактор (Freemium);
• [Обновление] Теперь и с арсеналом плагиновАнимации уступают в эффектности и плавности Principle и InVision Studio;

Sketch все еще очень популярный инструмент. А в связке с InVision Studio и арсеналом плагинов, Sketch дает из коробки комплексное решение по движению дизайнерских задач: от вайрфреймов и интерактивных прототипов до передачи всей дизайн-системы разработчикам.

• Работает только на Mac;
• Огромный выбор плагинов (Anima, Craft, Materialи др.);
• Наработанная база бесплатных ресурсов, среди которых: ui-киты, библиотеки, шаблоны и т.д.;
• Прекрасен в паре с Principle и Invision Studio;Уступает Figma в решении задачи командноого штурма, так как не не поддерживает совместное редактирование в многопользовательском режиме;
• Некоторые дизайнеры жалуются на Mirroring sketch artboards, когда требуется отладить дизайны прямо на мобильном гаджете;

InVision Studio – бомбический продукт для дизайна интерактивных систем (ux/ui), а возможности InVision Cloud просто отпад. Если вам нужно сделать продвинутые анимации или разработать адаптивную дизайн-систему и передать все это дело в разработку, то этот инструмент вам просто не заменим. Очень профессиональный и технологичный инструмент.

• Заточена для Windows и Mac OS;
• В InVision Studio прекрасный timeline и в нем потрясающе приятно вытачивать как UI, так и UX с учетом всех тонкостей поведения продукта;
• Студия ускоряет дизайн адаптивных лейаутов, так как заточена на этот процесс и приятные нюансы с адаптацией берет на себя;
• Расширятся возможностями Invision Cloud (сбор обратной связи, тестирование прототипов на мобильных гаджетах, менеджер дизайн-систем);
• InVision Studio бесплатный продукт, а в комплексе с InVision Cloud позволяет проверить все возможности системы на одном комплексном проекте;
• Прототипы с огромным количеством анимаций могут притормаживать;
• Позволяет создавать приятные мягкие анимации и эффекты перехода;

Adobe XD призван сделать ваш процесс прототипирования просто реактивным. Для этого здесь всегда под рукой инструменты клонирования (repeat grids), поэтому набросать макет или оперативно наполнить списки контентом – здесь как на раз два. Если вы уже использовали плагин Craft для Sketch, то считайте, что это здесь уже в доступно из коробки.

• Годится для работы на Windows и Mac OS;
• Аналог Craft для Sketch здесь уже доступен из коробки;
• Тестирование прототипов прямо на мобильных устройствах;
• Есть определенные ограничения при работе с компонентами;
• Анимации слабые (заточен на прототипирование и сборку из готовых дизайнов);

Framer X построен поверх framer.js, а значит вы можете создавать ui-компоенты для React и отлаживать UX/UI прямо в среде Framer X.

• Пока только для Mac (но облачный инструмент уже во всю разрабатывают);
• Можно импортировать .sketch;Позволяет создавать React-компоненты;
• Здесь вы можете создать любые ui-анимации и задать любое поведение в интерфейсе, так как можете прямо брать и программировать;
• Зайти в инструмент без подготовки не просто. Местами нужно инженерное мышление;
• Готовьтесь программировать;

Источник