Когда картинка красноречивее 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

    В общем, инструмент мне понравился. Интересно узнать ваши впечатления!

    Средняя зарплата в IT

    120 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 6 474 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 54

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                                  Обидно, что как и с фотошопом, тут стреляют из пушки по воробьм
                                                  +3
                                                  Весьма интересна вещь, поизучал поближе, вот что у меня получилось (что-то такое напоминающее 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
                                                    Пользуюсь cacoo.com Звучит по русски не очень, но очень приятный в использовании; плюс есть совместная работа.

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

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

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

                                                                Самое читаемое