Лайфхакер
Лайфхакер
Лучшее
Рубрики
Рецепты
Подкасты
Сервисы
Колонки
Лучшее
Рубрики
Рецепты
Подкасты
Сервисы
Колонки
«Авторизация»
Новости
Здоровье
Спорт и фитнес
Покупки
Технологии
Отношения
Кино
Реклама
Веб-сервисыСоветы
26 апреля 2013

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

Фото автора Татьяна Koйчева
Татьяна Koйчева

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

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

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

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

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

power-mockups

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

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

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

moqups

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

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

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

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

fluid

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

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

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

wireframe

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

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

Axure RP

axure

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

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

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

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

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

balsamiq

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

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

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

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

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

pencil

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

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

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

ux

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

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

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

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

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

mockuosme

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

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

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

livew

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

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

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

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

HotGloo

prototyp1

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

Резюме

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

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

Источник: Designrfix.com
Если нашли ошибку, выделите текст и нажмите Ctrl + Enter

Лучшие предложения

5 причин купить моющий пылесос для мягкой мебели и ковров Tefal Clean It IZ5020F0

5 причин купить моющий пылесос для мягкой мебели и ковров Tefal Clean It IZ5020F0

Смартфон OnePlus Nord 6

Новинку OnePlus Nord 6 можно купить со скидкой 37% сейчас на AliExpress 

Самый популярный гайковёрт от Heimerdinger отдают со скидкой 70%

Самый популярный гайковёрт от Heimerdinger отдают со скидкой 70%

Удачный момент для покупки кроссовок с вентиляцией на распродаже AliExpress

Удачный момент для покупки кроссовок с вентиляцией на распродаже AliExpress

Фильтр с осмосом

Компактный фильтр с осмосом: эффективный, но стоит дешевле аналогов

Наушники realme Buds Air 8 Pro

Забираем наушники realme Buds Air 8 Pro со скидкой 52% на AliExpress

10 товаров с AliExpress, за которые покупатели благодарят себя

10 покупок с AliExpress, за которые люди благодарят себя

3D-принтер Bambu Lab А1 Min

Надо брать: 3D-принтер Bambu Lab А1 Mini со скидкой 48%

Это интересно
Почему после похудения килограммы возвращаются и как этого избежать

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

Что нужно знать о кислородном пятновыводителе «Елизар»: 3 главных вопроса

Что нужно знать о кислородном пятновыводителе «Елизар»: 3 главных вопроса

Это наша БигДанность: как большие данные работают в повседневной жизни

Это наша БигДанность: как большие данные работают в повседневной жизни

Реклама
Как это сделать: превратить упаковку «Золотого яблока» в полезные вещи для дома

Как это сделать: превратить упаковку «Золотого яблока» в полезные вещи для дома

Комментарии
26.04.13 16:31
Комментарий удален
Администратор
26.04.13 17:49
Спасибо, исправлю сейчас. Мой выбор на данный момент — HotGloo.
Onikoge Yo
28.04.13 22:24
У дизайнеров, как правило, есть адобовские программы. Индизайн с иллюстратором неплохо справляются с векторной графикой и с прототипированием в том числе. Зачем нужны «бюджетные инструменты», когда без серьёзных графических пакетов дизайнерить сайт — адовый мазохизм. Inkscape вообще бесплатен — рисуйте любой прототип на здоровье, и в сторону Corel больше взглянуть не захотите.
Oleg
29.04.13 14:44
Axure и Balsamiq - постоянно
Pavlo Voronyuk
29.04.13 15:00
Пробовал пользоваться Moqups и Wireframe, скажем хорошие инструменты но карандаш и бумага заменят каждый инструмент из данной статьи :)
yarako
04.07.13 14:38
бумага и карандаш хороши, когда работаете в одиночку, если же командой над прототипом будете работать, уже неудобно
Alena Pereyaslova
10.12.13 09:02
Спасибо за классную статью! Сама дизайнер и тоже придерживаюсь святой убежденности, что фотошоп или бумажка не заменят хорошей программы для мокапов)) особенно, если с прогерами работаешь в большой команде.. Мне вот интерфейсы всех видов и мастей делать надо. Ладно еще мобильные приложения, там специализированную использовать можно. А вот какую из перечисленных лучше использовать в качестве универсальной, например, для мокапов банковских терминалов???
Алексей Пономарь
10.12.13 11:11
Попробуйте все и выберите тот, который вам больше всего понравится — это не займет много времени.
Сергей Малышев
15.03.17 21:53
подскажите пожалуйста программу для прототипирования на русском языке?
Что вы могли пропустить
Как пользоваться моющим пылесосом правильно
Как пользоваться моющим пылесосом правильно
0
10 апреля
Ликбез
Советы
Отличные способы покрасить яйца на Пасху, которые работают из года в год
Отличные способы покрасить яйца на Пасху, которые работают из года в год
9 апреля
«Горящая изба»
Советы
В Азии обнаружили неизвестную популяцию древних людей, пережившую ледниковый период
В Азии обнаружили неизвестную популяцию древних людей, пережившую ледниковый период
0
6 апреля
Новости
Советы
Как пользоваться пипидастром
Как пользоваться пипидастром
0
3 апреля
Ликбез
Советы
Как это сделать: превратить упаковку «Золотого яблока» в полезные вещи для дома
Как это сделать: превратить упаковку «Золотого яблока» в полезные вещи для дома
0
2 апреля
Советы
Советы
18 вещей в доме, которые только зря занимают место. Большой чек-лист расхламления на весну
18 вещей в доме, которые только зря занимают место. Большой чек-лист расхламления на весну
1 апреля
«Горящая изба»
Советы
6 способов использовать лимонную кислоту в быту
6 способов использовать лимонную кислоту в быту
0
27 марта
Советы
Советы
Как найти квартиру мечты на Яндекс Недвижимости: 3 совета для общения с ИИ-помощником
Как найти квартиру мечты на Яндекс Недвижимости: 3 совета для общения с ИИ-помощником
0
26 марта
Советы
Советы
3 кухонных прибора, которые помогут прокачать ваши кулинарные способности
3 кухонных прибора, которые помогут прокачать ваши кулинарные способности
0
25 марта
Советы
Советы
Эти простые шаги помогут вырастить манго из косточки
Эти простые шаги помогут вырастить манго из косточки
24 марта
«Горящая изба»
Советы
Как хранить зимнюю одежду, шапки и обувь, чтобы вещи не испортились
Как хранить зимнюю одежду, шапки и обувь, чтобы вещи не испортились
0
21 марта
Советы
Советы
Как стирать кожаные штаны правильно
Как стирать кожаные штаны правильно
0
14 марта
Ликбез
Советы
Как ухаживать за стиральной машиной: 7 важных правил
Как ухаживать за стиральной машиной: 7 важных правил
2 марта
«Горящая изба»
Советы
Как ухаживать за цветами в губке
Как ухаживать за цветами в губке
0
16 февраля
Ликбез
Советы
Как почистить термос внутри и снаружи
Как почистить термос внутри и снаружи
0
15 февраля
Советы
Советы
Что вы могли пропустить
3 причины, почему смартфон iQOO Z11x — классный помощник на каждый день
3 причины, почему смартфон iQOO Z11x — классный помощник на каждый день
0
Вчера
Устройства
Устройства
Samsung показала, как изолировать мессенджер Max на смартфонах Galaxy через папку Knox
Samsung показала, как изолировать мессенджер Max на смартфонах Galaxy через папку Knox
0
Вчера
Новости
Технологии
Обзор HUAWEI nova 15 Pro — большого и автономного смартфона с отличными камерами
Обзор HUAWEI nova 15 Pro — большого и автономного смартфона с отличными камерами
0
Вчера
Устройства
Устройства
Samsung готовит аналог складного iPhone, но в формате трифолда
Samsung готовит аналог складного iPhone, но в формате трифолда
0
Вчера
Новости
Устройства
Как работает розетка с заземлением и когда она действительно нужна
Как работает розетка с заземлением и когда она действительно нужна
0
Вчера
Технологии
Технологии
На YouTube наконец можно отключить шортсы — вот как это сделать
На YouTube наконец можно отключить шортсы — вот как это сделать
0
Вчера
Android
iOS
Choclift — бесплатная утилита, которая превратит iPhone в тачбар для MacBook
Choclift — бесплатная утилита, которая превратит iPhone в тачбар для MacBook
0
Вчера
iOS
iOS
Противное мнение: ИИ-копии умерших — не милота, а тихий ужас и контент из «Чёрного зеркала»
Противное мнение: ИИ-копии умерших — не милота, а тихий ужас и контент из «Чёрного зеркала»
0
15 апреля
Технологии
Технологии
Скачайте три этих мессенджера — на случай полного отсутствия интернета
Скачайте три этих мессенджера — на случай полного отсутствия интернета
0
15 апреля
Ликбез
Технологии
Цветной E-Ink и дополнительный круглый экран: представлен смартфон HiBreak Dual
Цветной E-Ink и дополнительный круглый экран: представлен смартфон HiBreak Dual
0
15 апреля
Новости
Устройства
«С ним зайти не получится»: «Яндекс» начал блокировать свои приложения при включённом VPN
«С ним зайти не получится»: «Яндекс» начал блокировать свои приложения при включённом VPN
0
15 апреля
Новости
Технологии
В топ App Store ворвалось приложение Do it! — оно геймифицирует рутину для детей
В топ App Store ворвалось приложение Do it! — оно геймифицирует рутину для детей
0
14 апреля
Новости
Технологии
В пару кликов: как убрать человека с фото на смартфоне
В пару кликов: как убрать человека с фото на смартфоне
0
14 апреля
Технологии
Технологии
Что такое чат-бот Claude, как им пользоваться и почему он так популярен
Что такое чат-бот Claude, как им пользоваться и почему он так популярен
0
14 апреля
Ликбез
Технологии
Apple готовит премиальные умные очки в 4 стилях и с овальными камерами
Apple готовит премиальные умные очки в 4 стилях и с овальными камерами
0
13 апреля
Новости
Технологии

Новые комментарии

Аватар автора комментария
Артём Козориз8 минут назад

0 / 0

Тут, как всегда, правда где-то посередине. Да, заземление уберёт фон если он есть. В то же время, если его нет, то само по себе заземление не сделает звук лучше. Как-то так, если вкратце.
Как работает розетка с заземлением и когда она действительно нужна
Аватар автора комментария
Ev N17 минут назад

+1 / 0

Очень полезно как базовое "бытовое" знание. Конечно, если для тебя это новая информация, то это означает что ты не готов залезть туда с отвёрткой и пассатижами, но уже дает возможность задать пару-тройку правильных вопросов монтажнику\ремонтнику. Есть в статье правильный посыл - не лезть в розетку если вы в этом не разбираетесь. А пригласить специалиста и уже правильно поставить задачи и принять работу глядя на его мультиметр и понимая куда и зачем там глядеть. В принципе это еще в школе должны в ОБЖ зазубрить но это уже другая история. Спасибо автору.
Как работает розетка с заземлением и когда она действительно нужна
Аватар автора комментария
Артём Козориз19 минут назад

0 / 0

Да, действительно.
20 скрытых функций Windows 11, о которых вы могли не знать
Аватар автора комментария
Ия Зорина23 минуты назад

0 / 0

Да, и ещё пишут, что надо к врачу сходить перед тренировками, хотя если ты здоров, то не надо) Здорово вы с корзиной придумали, тоже надо попробовать. А то надоело уже придумывать, что приготовить
Как составить идеальную программу тренировок с помощью нейросетей
Лайфхакер и TRENDY BOX выпустили унисекс-бьюти-бокс — смотрите, что внутри

Лайфхакер и TRENDY BOX выпустили унисекс-бьюти-бокс — смотрите, что внутри

Лайфхакер
Информация
О проектеРубрикиРекламаРедакцияВакансииО компании«Авторизация»
Подписка
TelegramВКонтактеTwitterViberYouTubeИнициалRSS
Правила
Пользовательское соглашениеПолитика обработки персональных данныхПравила применения рекомендательных технологийПравила сообществаСогласие на обработку персональных данныхСогласие для рекламных рассылокСогласие для информационной программы
18+Копирование материалов запрещено.
Издание может получать комиссию от покупки товаров, представленных в публикациях