Компания
21,86
рейтинг
9 января 2014 в 13:06

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

Привет %username%! У нас отличные новости: вышла официальная версия NinjaMock — онлайн-сервиса для создания прототипов. Теперь ты можешь рисовать отличные прототипы веб- и мобильных приложений совершенно бесплатно!



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

Самые интересные возможности


Полноценная бесплатная версия

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

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

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

Бумажный стиль

Пример прототипа нарисованного в NinjaMock

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

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


Элементы

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


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

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


Изменение масштаба

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


Комментарии и уведомления

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

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

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


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


Показ проекта (sharing)

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

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

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

Экспорт и навигация на бумаге

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

Пример 1

Пример 2


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


Организация страниц и проектов

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

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

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


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

Совместная работа пользователей

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

Приятные мелочи


Умное позиционирование элементов

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


Якоря

Так как большое количество элементов являются контейнерами, и очень часто нужно сохранить относительное расположение элементов внутри контейнера, мы добавили поддержку якорей (Anchors).
Вот, например, как это можно сделать с группой.
Видео


Мастер страницы

Любую страницу прототипа можно выбрать как мастер страницу для любой другой страницы. Несколько интересных возможностей:
  • Используя якоря, можно легко сделать sticky footer для веб сайта (footer, который всегда находится внизу страницы, независимо от ее высоты). Для этого просто укажите элементам footer-а якоря Left и Bottom.
  • С помощью мастер страниц очень легко отображать различные состояния данной страницы. Например, если на вашей странице показывается диалог, создайте пустую страницу, выберите вашу страницу как мастер и просто нарисуйте диалог. Таким образом вам не придется дублировать страницу целиком, что сэкономит время при внесении изменений на странице.


Горячие клавиши

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

Над чем мы сейчас работаем


  1. Контроль версий. Каждый проект уже сейчас сохраняется в Git репозитории. Мы работаем над тем, чтобы пользователи могли удобно использовать возможности системы контроля версий.
  2. Элементы управления, созданные пользователями. Как я писал выше, все элементы созданы с использованием векторного редактора внутри самого NinjaMock. Сейчас большинство возможностей по созданию полноценных элементов управления скрыто от пользователя, потому что там очень много функционала, который, откровенно говоря, еще “сырой”. Мы будем постепенно открывать все эти возможности для вас. Сейчас уже можно добавить собственный элемент (Asset), скоро мы включим возможность создавать пользовательские свойства.
  3. Экспорт в PDF в векторном формате. Многие пользователи просят добавить нас возможность экспортировать векторные элементы, чтобы, например использовать их в Adobe Illustrator. Скоро у нас появится и такая возможность.
  4. Copy/Paste — сейчас можно копировать элементы только внутри проекта. Использование HTML5 Clipboard API позволит нам добавить возможность копировать между проектами, и даже между различными приложениями.


Конкуренты


Мы считаем, что наше приложение во многих аспектах гораздо лучше, чем все наши конкуренты. Мы прилагаем их список, чтобы вы сами смогли сравнить и убедиться.
balsamiq.com
proto.io
moqups.com
mockflow.com
hotgloo.com

Здесь представлен лишь маленький список того, что умеет NinjaMock. Если вам интересно узнать больше возможностей приложения — заходите на сайт ninjamock.com и начинайте прототипировать!
Автор: @NinjaMock
NinjaMock
рейтинг 21,86
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Комментарии (123)

  • +5
    Офигенная вещь, спасибо.
    • +3
      Спасибо, мы старались :)
      • +1
        Еще бы генерация HTML страниц была по макету… Или это я не нашел?
        • +3
          Пока этого нет, но вы можете добавить идею uservoice
          • 0
            Запостил идею, другим ленивым людям она тоже понравится. Спасибо за труды!
  • 0
    Комменты это хорошо, а если будут комменты к объектам и их статусы, будет вообще чума. Но всё равно останусь на axure, тк пока только в нём можно начать со низко-детализированного эскиза и закончить полноценным интерактивным прототипом.
    • 0
      А можете рассказать, чуть подробнее, как вы используете комменты к объектам и статусы в своей работе?
      • 0
        Предположим, что всё что я делаю состоит из модулей — например товар в онлайн магазине. У него есть какая-то карточка, которая отображается в списке, и логично предположить, что могут быть корректировки к это карточке, и если она готова, то она будет готова везде, где используется, как вариант на главной, на странице категории и, допустим, в корзине.
        • +2
          Ну если я правильно понял, то такой функционал у нас уже поддерживается. Вы можете нарисовать карточку и добавить ее в My Assets в тулбокс, выделив элементы и в контекстном меню выбрав Assets->Convert to asset.
          После этого эту карточку можно будет использовать на любой странице, и если поменять сам asset, то карточка автоматически изменится везде где используется.

          Еще у а accet'a, есть состояния (правда они пока не доступны для пользователей — но скоро будут :) ). Через состояния у нас реализованы многие элементы, такие как чек боксы или кнопки (например disabled состояние).
      • 0
        и чем больше система и чем больше её состояний, тем важнее становится работа именно с объектами, а не со страницами.
        И появляется вопрос о прототипах, близких к реальности, тк в таких системах, чаще всего слишком много разносторонней информации, что бы дизайнер мог самостоятельно принять решение о том как выполнить тот или иной элемент.
  • +1
    Мне нравится! Можно и побаловаться и более серьезно что-то набросать.
  • 0
    Приложение понравилось, мультик если честно не очень
  • +1
    А для моков только эпилептичный шрифт есть?
    • +2
      Ну шрифт можно поменять в настройках
      Картинка

      • +1
        А Roboto планируется?
        • +1
          Пока нет, но добавьте идею на нашем uservoice. Если проголосует достаточно людей, то обязательно добавим.
  • +17
    Любое приложение станет в два раза круче, если в его названии есть слово «ниндзя»!
  • 0
    Как вовремя, а то нашел довольно удобный инструмент Axure, но покупать лицензию из за пары макетов в полгода очень не хочется. Спасибо!
  • 0
    Нравится.
  • +1
    А будет ли поддержка Desktop интерфейса Windows?
    • 0
      Возможно. Вы можете добавить идею на нашем uservoice. Если проголосует достаточно людей, то обязательно добавим.
      А вообще почти все контролы используемые на desktop есть в проекте web.
      • +1
        Спасибо за информацию. В любом случае, специализированные макеты под десктоп не помешают. Если есть кто солидарный, проголосуйте.
        • 0
          Тоже проголосовал.
          Только, я боюсь, что может возникнуть много коллизий при попытке синхронизаций локальной и online копии.
          • 0
            «Андрей Михайлов commented · January 9, 2014 10:35 am
            В данном случае, речь про макеты десктопа, а не про отдельную версию программы под десктоп.»
  • 0
    Спасибо за ваш проект. Первые впечатления положительные- все удобно, на своих местах, не вызывает чувства «вот же засунули куда».
    Единственное замечание по интерфейсу (ИМХО), сделать фон рабочей области и панелей инструментов разными. Например панели инструментов светло серым. Это отделит рабочую область, а также будут более четко видны различные контролы (и в свойствах и в элементах)
    В общем большое спасибо и успехов вам в развитии!
    • +1
      Спасибо. У нас в планах переработать интерфейс редактора, пока мы склоняемся сделать его в темных тонах, что то вроде нового фотошопа.
  • 0
    Я сейчас в шаге от покупки Axure. В чем Ваши преимущества перед ним?
    (десктоп ПО или веб-сервис для меня не принципиально)
    • +1
      Не очень разумно сравнивать с акшурой, так как последная позволяет создавать не мокапы а полноценные прототипы с интерэкшеном.
    • +2
      Мы с Axure немного в разных весовых категориях. Как написал delch это зависит от того какие у вас цели.
      Если нужно проработать концепцию приложения, отработать навигацию между страницами, быстро получить отзывы от заказчика или колег и вам пока не важно как будет выглядеть финальный дизайн — тогда мы лучше: мы проще в использовании и бесплатно :)

      А если нужен полоценный (близкий к реальному приложению по виду и поведению) прототип то тогда это Axure.
      • 0
        Чем у вас проще в использовании? Как проектировщик с 4-летним опытом скажу, что ничего сравнимого с Axure нет вообще именно по простоте использования. Совсем не объязательно там делать что-то динамическое и красивое, я ее выбрал в начале именно из-за скорости и четкости работы и с тех пор ни одного нормального конкурента не появилось… уж не знаю, в чем дело.
        • 0
          вы совершенно правы, мне бальзамик после неё показался дико сложным и неудобным. А научиться Axure так вообще за пару дней без проблем совершенно.
          • 0
            Научиться на базовом уровне — я бы сказал дело пары минут :)
            • 0
              Ну точно не сложнее любого другого софта из этой области )
  • +1
    Очень нехватает таких мелочей как перемещения с зажатыми контролом (для копирования), шифтом (для сохранения направления), или масштабирования с шифтом (для сохранения пропорций). Не представляю как без этих функций можно работать :)

    Так вообще неплохо, но ваш дизайн местами вымораживает. Скажем вот это уж совсем непотребство — habrastorage.org/storage3/769/352/b8c/769352b8c840df493fc77064ce1756b1.png
    • +1
      Спасибо за отзыв. Перемещение с копированием у нас есть, только не с контролом а с альтом (это связано с браузерными ограичениями). А шифт для сохранения направления и пропорций добавим.
  • 0
    Неплохо. Только не понял некоторые моменты.
    Например, как мне в контролле «tab bar» изменить активный таб? Как изменить число элементов в List?
    Я говорю про Android-моки.
    • 0
      Для таб бара: выберите нужный таб (нужно 2 клика, вначале выделить сам таб бар, следующий клик выделит таб, такой подход работает для всех контрлов). В свойствах справа появится чекбокс Selected. Если его выбрать то выделенный таб станет активным.

      Для List'а есть несколько вариантов, в тулбоксе есть list item его можно просто перетащить в list. Или же выбрать List item внутри List контрола и просто его скопировать Ctrl+D (сделает копию).
      Так же если List контрол выделен, то если сделать один клик на лист айтем в тулбоксе, то он сам добавиться в выделенный List.
  • 0
    Вроде бы корректно работает в Firefox, даже с не 100% масштабом, что не может не радовать. Почему-то многие тулзы для прототипирования нормально работают только на вебките, а с масштабированием так и вообще все начинает ехать.
    • +2
      Мы и в IE работаем :)
      • +4
        А с какой версии (просто любопытно)? сочувственный вздох frontend-разработчика
        • 0
          IE 10
          • 0
            В IE 11 не работает создание проектов под windows phone и windows 8. Кстати, windows 8 не ограничивается одним только Surface. Почему бы этот тип проекта не назвать windows 8 или еще как-то?
            • 0
              Мы же говорили в IE 10 :) А если серьезно, то не могли бы вы уточнить (можно в личку), что именно происходит? Просто висит анимация загрузки и ничего не происходит? Есть ли ошибки в консоли? Мы перепроверили на ноутбуках, воспроизвести пока не удалось.

              По поводу названия типа проекта – хорошее замечание, во внимание приняли.
              • 0
                Попробуйте открыть в IE 11 на телефоне Windows Phone или в Windows 8 в IE в Metro режиме (такой режим доступен если IE выбран браузером по умолчанию)

                Если практической ценности открывать в телефоне я не вижу, то вот в метро было бы интересно закрепить страницу как приложение.
          • 0
            А, ну это норм. Я-то думал, вы подобное в ИЕ 6-7 заставили работать :)
  • +1
    На первый взгляд очень круто, спасибо!

    Пара вопросов:
    Планируется ли мобильное (для планшетов) приложение (чтоб можно было работать оффлайн и потом синхронизировать)?
    Можно ли комменты привязывать к элементам интерфейса?
    • 0
      Привязки пока нет, добавьте идею на наш uservoice
      Запрос на мобильное приложение уже есть на uservoice так что можете просто проголосовать, но пока у нас в планах сделать оффлайн приложения для Google Chrome.
  • 0
    Ребята, я гляжу как вы доработали дизайн и хочу выразить восторг и почтение! И скорость радует.
    Я рад, что приложил руку к этому инструменту. Так держать!
    • 0
      Спасибо за отзыв и за помощь!
  • 0
    Выглядит симпатично, но кое-что не попалось на глаза: есть ли возможность автоматически создать карту экранов?
    • 0
      Пока нет, но вы можете добавить идею на наш uservoice
      • 0
        Добавлено. Поддержите, если кому-нибудь еще интересно.
  • +2
    Вот расскажите мне, откуда такая страсть mock framework'ов к таким шрифтам? Это ведь нечитабельно ниразу:

    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Это понятно. А смысл? Один сделал, все остальные как под копирку. Намного удобнее визуально смотреть именно в том стиле, в котором они будут в конечном виде. И подозреваю, что в подавляющем большинстве случаев интерфейс не будет с таким шрифтом.
        • +3
          Смысл такого стиля как раз в том, чтобы было не похоже на финальный дизайн. Это помогает многим людям (где-то в подсознании, наверное) концентрироваться на сценариях использования приложения и не отвлекаться на то, что шрифт не такой, цвета не нравятся и т.д.
          В бета версии NinjaMock мы, кстати, поддерживали реалистический стиль прототипов, но перед релизом мы его убрали. Основной причиной стало то, что для построения реалистических прототипов большинство пользователей используют Photoshop или Illustrator, а на данный момент мы не готовы конкурировать с продуктами Adobe.
          • +1
            Спорное удобство. Было бы супер — смотреть дизайн в обоих стилях, переключаясь.
            • 0
              Если под стилем вы имеете в виду просто более ровные шрифты и линии, но все же в низко-детализированном прототипе, то да, согласен – удобно было бы переключаться. Не так давно, кстати, в Balsamiq появилась такая возможность. Можете добавить идею на нашем uservoice.
              Если же имеется в виду высоко-детализированный стиль, то я тоже с вами согласен :) Здесь просто вопрос в том, каким образом создается такой стиль. Мы пока что ориентируемся на то, что такие дизайны будут создаваться в Photoshop/Illustrator, а потом возможно будут импортироваться обратно в NinjaMock как картинки. У нас и тип проекта специальный для этого есть – Freehand.
    • 0
      Мы очень долго пытались найти «рукописный» шрифт с поддержкой кирилицы, и это лучшее из того что сейчас можно найти. Но, мы работаем над созданием своего собственного шрифта. А шрифт можете в проекте поменять (в свойствах лейбла).
  • 0
    Очень круто!
    Отдельный респект за честное позиционирование по отношению к конкурентам, список аналогов в конце статьи очень порадовал.

    Обязательно попробую поюзать в работе.
  • 0
    Юзаю платный moqups. Вы создали достойного конкурента, молодцы! Бесплатные 3 проекта приватны?
    • +1
      Да, все проекты приватны.
  • +1
    После коммента к прошлогодней статье разрабы данного сервиса задолбили в скайп вопросами и уточнениями что и как мне нужно. Обалденная клиентоориентированность! Надо сказать — все обсужденное воплатили. Молодцы!

    З.Ы. Сервис пользую с тех пор.
    • +1
      Спасибо за отзыв и особенно за вашу помощь на ранних этапах развития.
  • 0
    Flat тени на буквах в кнопках делать css'ом — смело!
    • 0
      Да, long shadows сейчас в моде. Мы, кстати, использовали compass, так что сделать такие тени получилось очень просто.
  • 0
    Непонятно только — у таблиц можно удалять строки/столбцы?
    • 0
      Да, если выбрать таблицу то слева и сверху появляются синие хидеры. Если нажать на один из них то выделится соответствующая строка/столбец. Потом просто нажать Del на клавиатуре.
      • 0
        Спасибо. Хотя сдаётся мне, что не шибко это интуитивно. Ожидаешь чего-то похожего на процедуру добавления (которая, как раз, очень наглядна), только наоборот, типа — нажать ALT и увидеть как плюс превращается в минус, или клацать правой кнопкой по строке и найти пункт «удалить» в контекстном меню — в общем, всё то, что обычно происходит в десктопных приложениях. А оно не совсем так.
        • 0
          Спасибо. Принято во внимание.
      • 0
        И ещё (извините, забыл сразу спросить) — псевдовекторные объекты (стрелки и проч.) вращать не получится?
        • 0
          Нет, вращение пока что не поддерживается. Можете добавить идею на наш uservoice. Спасибо.
  • +9
    >В одной из следующих статей мы можем рассказать, как мы выдержали хабра- и реддит-эффект на хостинге за 4 евро в месяц.

    Очень бы хотелось почитать про это. Было бы здорово, если бы начали рассказывать прям здесь, пусть поверхностно, для затравки. А то аж неловко стало за свой ежемесячный инвойс от хостера. И это без всяких «хабра-реддит эффектов»…
    • +5
      Сайт у нас сделан как SPA (Single Page Application) приложение. Наш дешевый хостинг мы используем исключительно для двух целей: отдачи изначального html (одинакового для всех пользователей и очень маленького по размеру) и обработки запросов данных в формате JSON. Весь остальной html хранится у нас на CDN и запрашивается из браузера. При таком подходе у нас существенно уменьшается объем трафика к нашему дешевому серверу и даже увеличивается скорость загрузки страниц в браузере.

      В отдельной статье мы можем рассказать, какие технологии и библиотеки мы использовали, а так же как автоматизировать процесс сборки такого сайта в continuous integration. Кому еще интересно, плюсуйте, пожалуйста, комментарий от Frespot.
  • 0
    Случайно нашел баг.
    * создал прототип для iPhone.
    * поставил элемент текстового поля на экран
    * кликнул на нем
    * в свойства в поле witdh написал 100%
    * страница перестала отвечать на действия мышью и через некоторое время chromе предложил ее убить.

    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
    • 0
      Спасибо, поправим.
  • +1
    Очень полезное приложение. Спасибо большое!
  • +1
    Хотел попробовать и спроектировал приложение. Очень круто.
  • +1
    Еще бы добавить возможность колонки ставить на фон… Это удобно, например, для последующего использования дизайнером и при верстке с использованием CSS фреймворков (960gs, Twitter Bootstrap и т.п.).
    • 0
      Хорошая идея, можете добавить или проголосовать на нашем uservoice. Была похожая идея о пользовательских линиях привязки, можно ее использовать, наверное.
      • 0
        Проголосовал. Да, можно использовать линии привязки (наиболее универсальное решение), только нужно сделать возможность сохранять пресеты этих линий, чтобы я, например, сделал набор нужных мне линий привязки и сохранил для использования в последующих проектах. Это было бы супер.
  • +1
    Спасибо вам!
  • +1
    Очень удобный сервис, давно такой ждал!
  • 0
    Отличный сервис. Но в моём 31-м хроме за 5 минут работы раз десять получал:
    «Aw, Snap! Something went wrong while displaying this webpage...»

    Хорошо хоть Save успел сделать :)
    • 0
      Хм, очень странно. А можете в личку написать: Какая ОС, сколько оперативной памяти, и может какие плагины стоят в хроме?
  • 0
    Почему бы не привести здесь несколько альтернатив:
    • gomockingbird.com – удобный в использовании и бесплатный online-сервис прототипирования;
    • wireframe.cc – необычный бесплатный сервис с минималистичным интерфейсом, реализующим принцип «Выделил — выбрал объект». Если будет развиваться, то замечательно;
    • moqups.com – еще один бесплатный сервис;

    До кучи: 16 (онлайн) инструментов для создания прототипов.

    Но не веб-сервисами же едины, есть и desktop-приложения:

    Прототипируйте на здоровье.

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

    К тому же программы прототипирования не учитывают специфические компоненты интерфейса, взять к примеру: круглые изображения с hover-эффектами, parralax-эффекты, диагональные слайдеры и прочие аккордеоны… я надеюсь, что вы поняли мысль. Лучше вооружитесь чем-то вроде Twitter Bootstrap и сразу приступайте к работе. Деньги же, которые вы сэкономите на Mockup, Wireframe инструментах можно будет потратить на что-то более важное. Например: купить графический планшет, который, кстати, тоже является инструментом прототипирования, или SSD.
    • 0
      + realtimeboard.com
      • 0
        Интересный сервис, спасибо. Но я пока не нашел, как добавить готовые элементы (кнопки и пр).
      • 0
        Ужасный сервис… Я начал им пользоваться, и со злости чуть не расколотил ноут. Все очень плохо и ни разу не интуитивно. Пока доперло как сделать диаграмму, сломал мозг.
    • 0
      Все веб сервисы, которые вы привели, как раз урезают бесплатную версию: в gomockingbird можно создавать только 10 страниц в проекте, в wireframe.cc – только 1 страницу и нельзя экспортировать, а в moqups (который у нас, кстати, есть в списке конкурентов) – нельзя, например, использовать мастер страницы.
      Да, есть еще много онлайн инструментов, мы лишь привели список наиболее успешных, по нашему мнению.

      По прототипированию с помощью сторонних инструментов не совсем с вами согласен. Я, например, программист/верстальщик, достаточно хорошо знаю Photoshop. Но с помощью Twitter Bootstrap я не могу быстро объяснить коллеге-дизайнеру, что именно я имею в виду. Сначала надо что-то написать, потом обновить страницу, потом посмотреть, а иногда еще и поправить. А с инструментом прототипирования мы просто бросаем элементы и прямо на ходу обсуждаем, что и как должно работать. Но об этом, наверное, целую отдельную статью можно написать.
  • 0
    Не нашел как вставить свои картинки
    • 0
      1. Можно просто перетянуть из проводника (эксплорера или файндера, если вы на маке).
      2. Можно добавить элемент Image, кликнуть два раза и на вкладке My загрузить картинку.

      Картинка
      image
  • 0
    Молодцы, очень классно. Не думаете о мобильной версии, как отдельном приложении? (пока едешь в метро, как раз прототипировать интерфейсы хочется, когда рядом компьютер, хочется сразу уже в бой). Да и про хабраэффект за 4 евро в месяц — просьба рассказать.
    • 0
      Спасибо. Мобильной версии пока в ближайших планах нет. Идея у нас на uservoice уже есть, но пока мало кто голосует за нее.
  • 0
    Подскажите, пожалуйста, где настраивается (и вообще настраивается ли?) качество экспорта?
    • 0
      Качество экспорта в PDF не настраивается. Мы пока что вставляем в файл картинки, а иногда прототип надо уменьшать, чтобы поместилось на листок А4. Но мы работаем сейчас надо экспортом в PDF в векторном формате, что должно значительно улучшить качество экспорта.
      • 0
        а что по поводу качества экспорта в PNG?
        • 0
          хм, а это похоже баг, поправим.
  • 0
    Спасибо за интересный сервис! Видимо, есть еще Джедаи на этой планете.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Хабраэффект у нас уже позади. Это временные инфраструктурные проблемы у нашего хостинга, которые, к сожалению, зацепили нашу базу данных. Извините за неудобства.
  • 0
    Сервис понравился.

    Увеличьте максимальный размер шрифта, в некоторых случаях 90 недостаточно. :)
    • 0
      Хорошо, а сколько будет достаточно :)?
      • 0
        Не знаю, может на сколько позволяет размер рабочей области.

        Это может быть виджет
        например
        image
        или надпись на пол-экрана
        например
        image
        или что-нибудь другое.

        Ещё хотелось бы правильные фигуры рисовать — с зажатой Ctrl или автоматически фиксировался размер, как при размещении объекта по центру.
  • 0
    Наконец дошли руки попробовать. Шикарный сервис. До этого пользовался wiframe.cc и пробовал Axure, но ваш понравился с первой минуты и намного больше.
  • 0
    Сервис интересный, но:

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

    Минусы:
    1. В бесплатной версии создание только 3х макетов. Ограничение загружаемых картинок (50МБ).
    2. При увеличении высоты макета сдвигаются области некоторых текстовых элементов и их контент сдвигается по макету вниз. Вероятно, те у которых отсутствуют обе галки (Scale with text, Multiline).
    3. Нельзя настроить цвет линии разделителя(separator).
    4. Некорректное сохранение(вывод) некоторых элементов при экспорте(пробовал в PNG), также при экспорте в PNG хотелось бы получать PNG, а не zip-архив. Например, текст исчезает, если ширина блока не вмещает ширину данного слова, если текст написан например вертикально, и ширина текстового блока составляет 1 символ. Если взять навигационный набор меню и фон активного пункта перекрасить вручную, то он будет всё равно на тёмной подложке, если справа в настройках не снять с него галку (Selected).
    5. Если дублировать проект, то названия дубликатов после закрытия браузера становятся все исходного проекта. Например, создав проект(макет) «Главная», дублировать его и назвать «Каталог» и изменить и сохранить, то позднее название «Каталог» сново изменится на «Главная» по непонятной причине.
    6. Недостаточный набор цветов в градации серого (8 мало, хотя бы 12), на мой взгляд неверная генерация веб-цвета «ff000000».
    7. Нельзя настроить стиль отдельных слов в текстовом блоке. При выделении одного слова и нажав «B»(жирный), все слова блока становятся жирными.
    8. Неудобное использование при редактировании текста, а именно появление инпута с увеличенным размером шрифта, зачем(для слепых)? Это затрудняет разработку дизайна, когда необходимо поймать максимальное число символов.
    9. line-height нельзя сделать меньше 1.
  • 0
    Спасибо за очень детальный фидбек.
    1. Ну это гораздо больше чем предлагают все конкуренты. Мы считаем что это более чем достаточно для персонального использования, если же вы используете это как компания, и наш сервис помогает вам зарабатывать деньги — то мы хотим получить их маленькую часть, чтобы мы могли поддерживать и развивать наш сервис :)
    2. Не совсем понятно про какой макет вы говорите, можете пожалуйста уточнить?
    3. Хм, спасибо что написали — это баг. Исправим.
    4.1 PNG — а не ZIP. Вы имеете в виду что хотели бы экспортировать только одну страницу? Или один PNG файл со всеми страницами?
    >> Если взять навигационный набор меню и фон активного пункта перекрасить вручную, то он будет всё равно на тёмной подложке, если справа в настройках не снять с него галку (Selected). Исправим, спасибо.
    5. Это уже исправили, скоро появится в продакшене.
    6. В палитру вы можете сами добавлять цвета, но спасибо за фибек, мы добавим больше стандартных цветов.
    7. Мы уже получали такой фибек и работаем над такой возомжностью.
    8. Инпут увеличивается только если зум страницы меньше 100%, и он увеличивается до 100%.
    9. Не думали что это кому нибуть нужно :) а можете пожалуйста привести пример где такой нужно использовать?
    • 0
      1. Ок, удачи в развитии.
      2. Макет, справа и внизу этого белого листа есть такие маленькие ярлычки, чтобы сужать и расширять область (высоту и ширину страницы). Вот когда тянешь вверх или вниз нижний ярлычок, то вместе с этим в разных местах страницы некоторые области текстового блока(например label) почему-то съезжают, точнее увеличиваются или уменьшаются по высоте, на сколько ты изменил страницу. А если в этом блоке стояла центровка по-вертикали по центру, то текст этих блоков уезжает неизвестно куда по странице.
      3. +
      4. 1 макет — 1 PNG при экспорте. Только одну страницу. Если страниц много или папка, то разумнее конечно в ZIP. Но если нужно только текущий открытый макет, то зачем его заворачивать в архив. Приходиться его потом распаковывать и переименовывать, так как у него внутри лежит необходимая PNG с дефолтным названием.
      5. При экспорте таже проблема с названием проектов.
      6. +, может эксклюзивные цвета с 1 голубого увеличить тоже до 3х например добавить красный и зелёный.
      7. С центровкой внутри тоже бы хотелось иметь внутренний эксклюзивный цвет. Ещё было бы неплохо аналогично пунктом навигационных меню привязывать картинку в текстовый блок слева или справа с обтеканием текста.
      8. Дело даже не в увеличении, дело в самом инпуте с белой подложкой(её возможно следует убрать) и барами типа overflow:auto. Если бы их стандартных не было, а был бы полупрозрачный тоненький в стиле apple, было бы лучше. Или хотя бы барами как они выглядят у вас сейчас когда мы прокручиваем макет вверх или вниз, 2х пиксельная полоска.
      9. Это очень нужно. Должен быть шаг в 0.1 от 0 до 1. Применяется это когда необходимо какой-либо текст уплотнить по-вертикали. Часто встречается приходиться делать 0.8em или меньше. Но в явной степени это было необходимо когда я пытался написать вертикально текст, так как у вас нет такой опции, я писал 1 букву на 1 строке, и межстрочное расстояние уменьшить никак нельзя.
      10. Ещё как писалось выше, очень было приятно затемнить фон левого и правого столбца с вашими инструментами и свойствами, или хотя бы подложку под макетом для контраста.
    • 0
      Продолжаю пользоваться всё это время вашим сервисом, сменил своё мнение, сервис действительно очень хороший, и аналогов ему нет.
      Axure слишком тяжела.

      Хотелось бы добавить ещё на мой взгляд необходимую настройку:
      11. Возможность устанавливать шрифт, например во всём макете поменять ваш чудо-шрифт на Arial, связано это с нереальностью макета. Не всегда удобно писать таким шрифтом, должен быть выбор. + его читаемость на маленьких размерах желает лучшего, поэтому приходиться затруднительным составление детализации макета, хотя бы примерных размеров и отступов.
  • 0
    Очень не хватает возможности создания интерактивного прототипа как в fluidui.com, invisionapp.com.

    Чтобы можно было на устройстве пощёлкать будущее приложение.
    • 0
      Вы имеете в виду не хватает анимации? На устройстве можно пощелкать уже сейчас. Нужно кликнуть на share кнопку в приложении, там будет QR код, если его отсканировать с телефона — то приложение откроется на телефоне в режими просмотра.
      • 0
        Я имею в виду открытие другой страницы при нажатии на контроле.
        • 0
          Это можно делать начиная с первой бета версии, у каждого контрола есть свойство PageLink
          • 0
            Благодарю, сначала не заметил.
  • 0
    В одной из следующих статей мы можем рассказать, как мы выдержали хабра- и реддит-эффект на хостинге за 4 евро в месяц. Пишите в комментариях, если это интересно.
    Конечно же рассказывайте! Очень интересно! :)
    • 0
      назовите, пожалуйста, ваш замечательный хостинг
  • 0
    Наконец-то руки добрались сделать прототип приложения под мобилу (Андроид). И в результате — облом.

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

    Ну и сразу по мобильному прототипу пожелания россыпью:
    1. При просмотре в браузере на макете телепона желательно добавить хотя бы кнопку Back.
    2. В наборе ссылок должна быть ссылка «на предыдущую страницу», с которой пришли. Не статичное указание, а именно history.go(-1) из JavaSсript.
    3. Группировку страниц найти получилось абсолютно случайно.
    4. Не хватает контекстного меню. Даже в браузере можно повесить обработчик на правый клик при просмотре прототипа. Хотя бы при редактировании добавить в Page Linking возможность указать при каком событии какую ссылку открывать. Ну и создавать несколько линков. Стандартный кейс: тап по элементу списка открывает его, длинный тап — вызов контекстного меню.
  • 0
    К сожалению не нашел для андроид-проекта верхнего (батарея, уровень сигнала) и нижнего (кнопки назад, домой, etc) баров. Или плохо искал?
  • 0
    Упал сайт? Белый экран с футером и шапкой и больше ничего.
    ninjamock.com/
  • 0
    Добавьте, пожалуйста, привязку аккаунта к социальным сервисам, чтобы на один и тот же аккаунт можно было логиниться через твиттер, гугл и т.д.
  • 0
    Какое то невиданное кол-во гюков в сервисе. :(
    • 0
      угу, недавнее обновление сломало мне весь проект
  • 0
    Error! Could not saves changes to the server. Please do not close your browser. Reconnecting...
    В общем, дорогие хабрапользователи, не советую пользоваться данным севисом, так как получили ошибку о том, что система не может сохранить данные на сервер. Сохранить невозможно, экспортить текущее состояние нельзя, в новой вкладке приложение не запускается, в результате многочасовая работа пошла коту под хвост.
    Проблема этих ребят даже не в том, что они в течение нескольких лет не могут исправить данную ошибку (на оф. форуме не одна подобная жалоба раз, два, три), а в том, что эта ошибка НЕ ВИДНА! Там нет красного большого баннера «ВАША РАБОТА МОЖЕТ НЕ СОХРАНИТЬСЯ», а маленький текст в статус-баре.

    В общем, такие дела. Ну, или, хотя бы, следите за статус-баром внизу экрана, и не делайте слишком много локальных изменений без теста в другом устройстве/браузере.

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

Самое читаемое Дизайн