NinjaMock — бесплатное приложение для прототипирования интерфейсов

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

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

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

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

Мы считаем, что неэффективно прототипировать в реалистичном (high fidelity) стиле. Весь прошлый год мы провели, встречаясь с большими и маленькими командами, разрабатывающими мобильные приложения и веб-сайты — как в России, так и за рубежом. Мы осваивали тонкости процесса работы — от создания прототипов до финального дизайна. В результате мы достигли дзен-совершенства в создании низкодетальных “бумажных” прототипов.

На текущий момент мы поддерживаем следующие платформы:

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

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

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

Нам очень нравится пользоваться Google Docs, в особенности — функцией комментирования. Поэтому, когда разрабатывалась аналогичная функциональность в NinjaMock, мы брали пример с Google Docs. В результате у нас появился интуитивный и привычный всем способ комментирования прототипов — с поддержкой ответов на комментарии, изменения статусов комментариев, а также уведомлений по электронной почте.

Кроме того, мы добавили возможность проставления статусов отдельных страниц прототипов (In progress, Completed, Approved). Это позволяет вам легко определить, насколько близко к завершению находится ваш дизайн.

Вот так это выглядит в самом приложении:

А так на специальной странице отображается статус проекта:

В NinjaMock есть возможность отправить прототип клиенту, чтобы получить о нем отзывы. Достаточно лишь открыть доступ к проекту (нажав на кнопку share) и отправить ссылку по почте или любым другим способом. Но мы пошли немного дальше, вместе со ссылкой генерируем специальный QR-код, отсканировав который, например с телефона, можно запустить прототип прямо на устройстве и посмотреть, как он будет работать.

QR код настоящий.

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

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

В NinjaMock есть возможность экспорта в PDF и PNG, с возможностью печати комментариев и ссылок на страницы. Между собой, мы называем это “бумажной навигацией” — если для элемента задана ссылка перехода на другую страницу, мы это указываем специальной сноской с номером страницы, на которую ведет ссылка:

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

Многие наши конкуренты, например Axure, позволяют создавать дерево страниц. Мы общались со многими дизайнерами и мало кто смог объяснить, что это значит, когда одна страница является дочерней для другой — каждый понимает это по-своему. Вместо этого, мы решили воспроизвести привычный многим опыт использования PowerPoint, показывая миниатюры страниц для более быстрой и легкой навигации.

Для логической организации проекта, мы дали пользователям возможность создавать именованные группы страниц. В проекте можно создавать неограниченное количество групп, можно перемещать страницы между группами, а также менять порядок страниц в пределах группы, и т.д.

Для организации проектов в NinjaMock мы воспроизвели опыт работы с файлами на вашем компьютере: проекты можно группировать по папкам, папки можно перетаскивать в другие папки и т.д. Это ваша собственная файловая система в облаке!

В NinjaMock есть специальный тип учетной записи — ProPlus. Администратор ProPlus может добавлять и удалять пользователей, а также назначать им различные роли и права. На данный момент, можно выбрать одну из трех ролей (Administrator, Designer, Reviewer), хотя мы и реализовали очень гибкую систему прав. Если будут запросы пользователей, мы реализуем более гибкие способы настройки ролей.