Веб-разработка

индекс
236,88

Когда картинка красноречивее 1024 слов – прототипирование с MockingBird

image Для написания ТЗ я задался вопросом поиска простого и удобного средства создания прототипов веб-страниц. Хотелось чего-то бесплатного и в онлайне, некой альтернативы Axure. Такой сервис удалось найти, его я и предлагаю вашему вниманию. Итак, встречайте www.gomockingbird.com – сервис, позволяющий создавать очень красивые прототипы легко и удобно.
Помимо представления самого сервиса, этим постом хотелось также привлечь внимание общественности к полезной практике прототипирования.

MockingBird – основана на Cappuccino и выглядит совсем как десктопное приложение с возможностью экспорта отрисованных прототипов в PNG и PDF.

Возможности


Рассмотрим возможности, описанные на официальном сайте:

Быстрое создание прототипов за счет наличия большого количества визуальных элементов страниц в «палитре» и применении drag&drop:
image

Возможность использовать ссылки на другие страницы прототипа и при просмотре переходить интерактивно между ними:
image

Возможность поделиться (share) простой ссылкой, а не отправкой по email кучи файлов:
image

Возможности подробнее


image
MockingBird сделана для прототипирования сайтов и веб-приложений, поэтому в ней уже есть все самые используемые элементы интерфейса.
image
Создавайте столько страниц, сколько вам нужно, связывайте их ссылками, переставляйте их легко и удобно.
image
Система является полностью онлайновой, поэтому вам нет необходимости что-то инсталлировать или загружать. Вы, как и ваши клиенты, можете получить доступ к вашим прототипам через интернет отовсюду.
image
Легкое и удобное изменение размеров объектов изменяет и размер текста внутри них, что позволяет создавать прототипы быстрее.
image
Вы можете создавать аккуратные и понятные прототипы, не загроможденные ненужными деталями.
image
Удобство использования достигается за счет множества приятных мелочей, таких как, например, выравнивание по сетке.


Примеры


image
image

Результат


image

В общем, инструмент мне понравился. Интересно узнать ваши впечатления!
+121
21 марта 2010, 15:00
252

комментарии (54)

+2
CB9TOIIIA #
В принципе хорошенький сервис :) Благодарю
0
alexanderr #
то же Axure только онлайн.

Вот бы сделали что то типо Axure + MS Expression Web

Чтобы можно было создавать динамичные прототипы но просто.
+2
huze #
Давно и успешно пользуюсь аналогичным продуктом от Balsamiq. Полнофункциональное демо позволяет прототипировать бесплатно. =)
+3
LAT85 #
сервис, описанный топикастером мне кажется более удобным
0
huze #
Это замечательно, что сервисы такого рода появляются вновь и вновь! Ведь идея прототипирования лежит на поверхности и каждый с самых младых лет пользуется этим приемом, только потом почему-то забывает. И чем больше таких сервисов, тем лучше!
0
Santiago26 #
Чёрт! Спасибо огромное. Думал у них только air-приложение есть.
0
huze #
Давно и успешно пользуюсь аналогичным продуктом от Balsamiq. Полнофункциональное демо позволяет прототипировать бесплатно. =)
+11
huze #
Хабр сглючило и я бесплатно отправил две копии комментария. Простите. =)
+1
andreysmind #
Действительно легко и удобно прототипы делать.
0
dima117 #
отличный сервис!

посмотрите еще вот этот: www.balsamiq.com/demos/mockups/Mockups.html
+1
dima117 #
мм… да… пока писал комментарий, его уже написали за меня :)
0
huze #
=) Да ещё и два раза. Ничего страшного, наши комментарии показывают другим аналоги, что есть хорошее дополнение к статье.
+4
lexxscorp #
Если это всё бесплатно, то красота! Спасибо, друг. Давно я такое искал.
–5
pizzZ #
А я использую Axure PR. Когда только попробовал, прыгал от счастья, что нашел эту программу. Всем советую. Есть возможность делать динамичные прототипы. Библиотеки часто используемых элементов совсем упрощает разработку.
+1
SergeyACTIVITI #
Axure RP
0
Vorchun #
купите, ок?
+1
project #
Сервис замечательный, но как быть если прототипами решил позаниматься например в самолете, поезде и т.п. месте где интернет недоступен? Ну ведь согласитесь, что не всегда в командироквке есть не то что быстрый, а вобще интернет.
На самом деле если разработчики сделают интеграцию офлайн программ с онлайн-сервисом.
Кстати, лучше Axure RP пока программ не видел. А учитывая что они недавно выпустили бета версию под Mac OS, то для меня это просто незаменимая программа.
+1
everzet #
590$… Как-то слишком дорого для одной программы. Тем более если сравнивать с OmniGraffle за 120$ и большими возможностями.
+1
project #
OmniGraffle — это скорее некий аналог MindManager или MS Visio.
Там и даже близко нет возможности создать полнофункциональный HTML прототип, тут-же сделать спецификацию (считай почти ТЗ) в Word… а 590$ по сравнению со стоимостью одного ТЗ у нас в компании, окупиться за счет одного маленького проекта. Кроме того продукты OmniGroup созданы только под MacOS.
Что мне действительно нравится у OmniGroup это OmniPlan… этот продукт во много раз удобнее и презентабельнее MS Project и прочих аналогов.

В общем я считаю что надо идти от задачи. И если вам для того чтобы решить задачу достаточно OmniGraffle, то мне без MindManager и Axure RP никак не обойтись. Поверьте, постоянно пытаюсь найти продукт, который сможет объединить в себе все необходимое и будет кроссплатформенным… пока таких нет.
–2
Azy #
ненене, чувак
ты просто не видел konigi.com/tools/omnigraffle-wireframe-stencils
+1
project #
Об этом — знаю. Я же указал, что OmniGraffle похожа на Visio.
Я упор сделал на экспорт в HTML и Word… + кросплатформенность.
+1
BReal #
Великолепный сервис, но вот Opera…
+2
FlamingDeth #
Бальзамик, которым вдохновлялись авторы Mockingbird, вызывает больше доверия, т.к. 1)сделан на более зрелой технологии (AIR vs Cappuccino) и 2)за ним стоит dedicated команда, которая регулярно все обновляет и фиксит, не отвлекаясь на зарабатывание денег в других местах.
+1
lexxscorp #
Что-то некоторые возможности мне недоступны. Например, сделать реальные ссылки между страницами. Пользуюсь ФФ 3.6 под убунтой. На скриншотах показывают значок ссылки под соответствующим элементом, у меня же он не появляется. Могу только поменять текст ссылки.
0
lexxscorp #
Нашёл-таки как. Надо кликнуть левой клавишей мыши по нужной странице в списке слева (клавишу не отпускать) и перетащить на нужный текстовый элемент, кнопку или ссылку.
0
lexxscorp #
Так же авторы пишут про какой-то premium service. Где можно посмотреть? И что они предлагают за деньги?
+1
Shark #
Открыл для себя Capuccino. Спасибо вам, автор :)
0
yarikus #
Только сегодня искал что-то подобное, но ничего не понравилось. Потом полез читать хабр и вот оно — удобный онлайновый инструмент. Спасибо автору статьи.
+1
Lord_Daedra #
Спасибо, мне было очень интересно узнать про этот сервис.

А какие вообще есть альтернативные инструменты для решения подобных задач?..
+2
vizlot #
Вот еще интересный продукт www.coutline.com Вроде бы функциональнее предлагаемого, также бесплатен.
+1
MindiveR #
Да, там неплохо и бета-тест бесплатен.
На сайте указано «For Sign Up, please contact us: info@coutline.com». Так вот, кинул вчера вечером заявку туда — на английском с дублированием по-русски. Ответили уже сегодня утром и дали допуск. Ответили, кстати, тоже на двух языках, сказывается язык разработчика :)
0
almozavr #
Помотросил и бросил Пользовался.
Могу сказать, что продуманности функционала не хватает, а это тормозит разработку в целом :(
0
graphictest #
Интересно, что именно вам помешало в работе?
0
almozavr #
В основном это косяки в работе. Всего, правда, я уже не припомню (автосохранение, которое не сохраняет порой, съезды при верстке и др.). Да и не хочется кидать камни в сторону пока еще бесплатного продукта — будет развиваться и дорабатываться, будет хорошо, я только за :)
0
graphictest #
Ок. Спасибо. У нас, видимо, не очень налажена связь с нашими пользователями. Обычно, все баги лечатся на месте
–1
graphictest #
Я бы не сравнивал эти продукты.
coutline.com предназначен не только для прототипирования, но и для дизайна, документирования и совместной рабты команды.
Дизайн элементов выполняется родными Хтмл-объектами… это дает 100% приблежения макета к оригиналу…
Поэтому там, конечно, нет гламурных виджетов… Тут, что кому нравится.
–1
syndicut #
Я пользовался Pencil — это плагин для Firefox, но сейчас вроде появился как standalone приложение.
+3
Saabolet #
Должен признать, что очень хороший вариант. Пару коментариев.

1) Нет возможностей Как в Axure работать с Masters. Я например часто их использую. Это группы элементов, которые как в библиотеку сохраняются и могут быть использованы по всему сайту. Естественно можно править их в одном месте и по всему проекту они моментально изменяются. Типовые элементы я выношу именно в мастера. Например шапка с навигацией, элемент списка и т.п. Поскольку часто проект правится, очень удобно когда можно поправить один мастер.

2) Не хватает «заметок» к элементу. А для онлайн проекта самый кайф (чего естественно лишен Axure), когда коллега/клиент добавляют свои комментарии к элементу. Вот здесь это не реализовано. Либо я не разглядел.

3) К сожалению, не отображаются изменения в расшаренном дизайне. Если клиент смотрит, и при этом дизайнер что-то поправил и, разумеется сохранил, клиенту надо перезагрузить страницу.

Т.е. предварительно мысль следующая:

Этот сервис отлично подходит для разработки концепта страниц небольших проектов, с очевидной и не требующих доп. комментариев схемой. Либо для предварительного эскиза прототипа :)

Но, что для меня например, самое ценное — это минимизация (!) интерфейса. Т.е. ничто не отвлекает от главного. Меня, например, часто затягивают фенечки и возможности Axure и вместо того, чтобы додлеать весь проект, начинаю делать из прототипа дизайн :) А тут такое не выйдет.
+2
mironov_anton #
Да-да, насчет минимизации в точку.
Когда нужно просто набросать концепт и обсудить по аське, сделали для себя gridpapr.com
+1
d1p #
Интересный инструмент.

Расширение функционала планируется?
0
mironov_anton #
Расширение планируется, но так как основные разработчики не зарегистрированы на хабре, то пишите им в feedback.
+1
d1p #
Благодарю.
0
Vorchun #
Должен согласится. Masters — этого многим не хватает. По сути — это шаблоны.

Многие Axure используют только для рисования. А ведь его главная сила — интерактивные шаблоны. Показ заказчику не набора картинок, а живого прототипа.

Обидно, что как и с фотошопом, тут стреляют из пушки по воробьм
+3
Lord_Daedra #
Весьма интересна вещь, поизучал поближе, вот что у меня получилось (что-то такое напоминающее youtube :-) ) gomockingbird.com/mockingbird/index.html?project=edeaac52706cb1dd9b9cbdb104b94fb14363acc9

но сразу понял один (и большой) недостаток — нет сетки… хочется сетку 960gs и blueprint

Написал в предложениях об этом разработчикам. Хабр, проголосуй, поддержи мой запрос на эту фичу
forums.gomockingbird.com/forums/44049-feedback-feature-requests/suggestions/583007-blueprint-and-960gs-grides-integration?ref=title
+1
G_A_V #
Пользуюсь cacoo.com Звучит по русски не очень, но очень приятный в использовании; плюс есть совместная работа.

П.С. Сижу на хабре давно но не дают голосовать, нет кармы :-|
0
eugenex15 #
тормозит все это жутко.
но идея впечатляет!
0
Snowcore #
А вы в Chrome попробуйте :)
0
eugenex15 #
а я в нем и пробовал!
0
Snowcore #
В Chrome все работает достаточно быстро. Лично я — очень доволен.
0
svfedorof #
Ура! Первая достойная замена мой любимой Axure RP. Будем пробовать в бою. Спасибо.
0
devIceMan #
Действительно отличный сервис. После детального изучения, возможно, буду рекомендовать как замену используемому FlairBuilder. Спасибо автору за статью.
0
Vorchun #
Кто ищет что-то другое, тот найдет много по запросу «online wireframes». Я почти все (на что есть демо или бесплатный тариф) перепробовал. Понравились: iPlotz, Flair Builder и Balsamiq. MockingBird — очень не понравился. Как функционально, так и внешне. Плюс были косяки в Chrome.

Axure не пользуюсь из-за ее цены. Остановился на Pencil. Использую как standalone приложение. Версию 1.1 вполне можно считать рабочей.
0
Snowcore #
Сервис просто обалденный!
Хотелось бы, чтобы была возможность группировать страницы по папкам. Написал разработчикам feature request.
0
GRuff #
а поделитесь ссылкой на свое творение?
и, кстати, есть ли там возможность сеточку кастомовую на фон положить?

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