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

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

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

Для тех, кто пользовался бета-версией нашего приложения, заметным отличием финальной версии стало то, что мы убрали реалистичные (high fidelity) прототипы. Но и здесь есть интересная особенность: все элементы сделаны в самом NinjaMock. Кроме того, мы добавили возможность проставления статусов отдельных страниц прототипов (In progress, Completed, Approved).

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

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

В проекте можно создавать неограниченное количество групп, можно перемещать страницы между группами, а также менять порядок страниц в пределах группы, и т.д. Любую страницу прототипа можно выбрать как мастер страницу для любой другой страницы. Для этого просто укажите элементам footer-а якоря Left и Bottom. Сейчас большинство возможностей по созданию полноценных элементов управления скрыто от пользователя, потому что там очень много функционала, который, откровенно говоря, еще “сырой”.

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

Экспорт в PDF в векторном формате. Скоро у нас появится и такая возможность. Предположим, что всё что я делаю состоит из модулей — например товар в онлайн магазине. Намного удобнее визуально смотреть именно в том стиле, в котором они будут в конечном виде. И подозреваю, что в подавляющем большинстве случаев интерфейс не будет с таким шрифтом.

Это помогает многим людям (где-то в подсознании, наверное) концентрироваться на сценариях использования приложения и не отвлекаться на то, что шрифт не такой, цвета не нравятся и т.д.

Если под стилем вы имеете в виду просто более ровные шрифты и линии, но все же в низко-детализированном прототипе, то да, согласен – удобно было бы переключаться. У нас и тип проекта специальный для этого есть – Freehand.

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

А с инструментом прототипирования мы просто бросаем элементы и прямо на ходу обсуждаем, что и как должно работать. Да и про хабраэффект за 4 евро в месяц — просьба рассказать.

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

Позднее возможно поищу более интересные аналоги, где больше инструментов и настроек. Или один PNG файл со всеми страницами? 10. Ещё как писалось выше, очень было приятно затемнить фон левого и правого столбца с вашими инструментами и свойствами, или хотя бы подложку под макетом для контраста.

Наконец-то руки добрались сделать прототип приложения под мобилу (Андроид). Самое важное замечание: прототип при просмотре на мобильном — не интерактивен. Без интерактивности на мобильном — прототип бесполезен.

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

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

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

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

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

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

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

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

Не пропустите еще:

You may also like...