ТОП 6 сервисов для прототипирование интерфейсов

Zeplin — удобный инструмент для взаимодействия дизайнеров и разработчиков. В систему можно загрузить файлы из Photoshop или Sketch и они будут преобразованы в исходники и спецификации для разработчиков. Сервис отличается простотой использования. После регистрации пользователю предлагается посмотреть видеокурс по использованию платформы. Как правило, этого бывает достаточно, чтобы понять все принципы работы с инструментом. Преимущества Zeplin:

• Удобное управление и понятный интерфейс с минималистичным оформлением.
• Возможность работы в любом браузере или в десктопном приложении. Существуют программы под Windows и MacOS.
• В создаваемые проекты можно добавлять комментарии для других специалистов.
• Отсутствие необходимости создавать графические исходники вручную.
• Сервис интегрируется со Slack для быстрого обмена информацией.

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

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

Преимущества NinjaMock:

• Простота и удобство использования редактора.
• Возможность поделиться проектом нажатием одной кнопки.
• Комментирование прототипа.
• Макеты можно экспортировать в pdf, png, html.
• Высокая скорость работы редактора, отсутствие ошибок.

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

В бесплатной версии можно создавать до трех проектов. Созданные объекты будут находиться в публичном доступе. Для разработки большего количества макетов и работы с приватными объектами потребуется оформить платную подписку на сервис. Основной функционал платной и бесплатной версии не различается.

Marsy — веб-приложение для верстальщиков. Включает обширный набор инструментов для работы с psd файлами. Возможности сервиса:

• Определение стиля элементов.
• Показ расстояния между объектами.
• Скачивание изображений.
• Копирование оформления. Вставка нескольких скопированных элементов в разные места в режиме мультикурсора.
• Просмотр списка использованных шрифтов и цветов.
• Сохранение изображения в jpg и png.
• Использование направляющих из Photoshop;
• Формирование svg файла для векторных изображений.

Marsy — аналог сервисов Avocode, Zeplin, имеющий некоторые уникальные дополнительные возможности. Проект создан одним человеком. Автор активно взаимодействует с пользователями, получая обратную связь о работе платформы. Разработчик системы постоянно работает над ее функционалом, исправляет ошибки и неточности, добавляет новые возможности. Одна из особенностей приложения — удобство и простота использования. Все действия выполняются в визуальном редакторе. Большинство функций выполняется в один или несколько кликов мыши. Сервис предоставляется бесплатно. Все возможности доступны после регистрации на сайте. При желании пользователь может добровольно поддержать разработчика донатом.

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

Основные возможности системы:

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

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

Базовая версия платформы распространяется бесплатно. В ней можно создать один прототип. Профессиональный тариф позволяет работать над неограниченным количеством объектов и имеет некоторые дополнительные возможности.

Moqups — онлайн-редактор для создания прототипов сайтов. Используется для взаимодействия разработчика с дизайнером и заказчиком. Прототип показывает, как будет выглядеть готовый сайт, где будут расположены смысловые блоки, содержание текстовой составляющей. Созданный в редакторе макет понятен для восприятия любому пользователю, даже не имеющему навыков в программировании. Такие объекты дают наглядное представление о результатах работы, позволяют легко внести исправления в соответствии с пожеланиями заказчика. Макеты составляются в визуальном конструкторе. Элементы можно перетаскивать мышью на нужное место. Дополнительные возможности Moqups:

• Выбор масштаба страницы.
• Использование шаблонов.
• Редактирование текста.
• Командная работа (неограниченное количество пользователей).
• Настройки конфиденциальности.
• Экспорт макетов в png и pdf.
• Выгрузка в Dropbox и Google Drive.

Сервис представляет собой веб-приложение. В нем можно работать с любого устройства. Интерфейс представлен только на английском языке. Новым пользователям доступен пробный период. Существуют разные тарифные планы, в том числе без оплаты. Базовый тариф позволяет создать один проект, содержащий не более 300 элементов. Для работы над большим количеством макетов потребуется оплатить подписку.

Balsamiq Mockups — инструмент для создания прототипов сайтов и мобильных приложений. Ключевое преимущество платформы — скорость создания макетов. Разработанные объекты относятся к категории low-fidelity mockups (макеты с низкой степенью детализации).

Элементы интерфейса системы:

• Стандартное меню, включающее элементы File, Edit, View и Help.
• Быстрый поиск и добавление деталей.
• Панель редактирования прототипа.
• Библиотека элементов пользовательского интерфейса. Детали сгруппированы по категориям.
• Рабочее поле.

Одна из отличительных особенностей Balsamiq Mockups — необычное оформление интерфейса. Он как будто нарисован от руки. Интерфейс доступен только на английском языке. Все действия выполняются в визуальном редакторе. Инструмент удобен и понятен для работы. При создании первого проекта пользователь может пользоваться подсказками системы.

Цена использования сервиса зависит от количества создаваемых проектов. Пользователь может выбрать для покупки облачную версию платформы, десктопное приложение (MAC и Windows) или модуль для интеграции с Jira, Google Drive и Confluence. Для всех тарифных планов предусмотрен 30-дневный пробный период. Функционал тестовой версии не ограничен.