Пользователь
0,0
рейтинг
11 ноября 2011 в 17:54

Дизайн → Инструменты прототипирования и создания wireframes

Навеяно долгими поисками различных систем прототипирования и желанием поделиться этим опытом. В данном посте отсутсвуют сложные системы типа iRise или IBM Rational Rose, ввиду того что они являются не столько и далеко не только системами простого прототипирования, да и стоимость этих решений подходит предприятиям немалого маштаба. Этот пост о чем-то более земном.



Немного теории. Данные проверенные опытным путем:

Каждый проект имеет своего заказчика. Это может быть директор крупной кампании, разработчик, менеджер digital агенства, дизайнер… да много кто. В каждом конкретном случае это накладывает определенные ограничения на то, насколько должен быть проработан протип.
Я имею ввиду следующие вещи:
  • Количество прототипов и очевидность ( по клику, визуально-схематично ) переходов между ними
  • Наличие состояний одного протипа ( пример: блок контактов, который выглядит по разному в зависимости от того, владелец этого списка на него смотрит или гость )
  • Наличие комментариев к элементам
  • Банальные «красивости» в прототипе — красивые формы, иконочки, картинки и прочее. По опыту — одна из самых полезных вещей, чтобы убедить заказчика, что идея будет работать


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

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

Online-инструменты

Cacoo

Тип: Online
Цена: есть бесплатный аккаунт
Link: http://www.cacoo.com/

iPlotz

Тип: Online
Цена: есть бесплатная версия
Link: http://iplotz.com

MockFlow

Тип: Online
Цена: есть бесплатные аккаунты
Link: http://www.mockflow.com/

Mockup Builder (beta)

Тип: Online / Silverlight
Цена: на текущий момент — бесплатная
Link: http://mockupbuilder.com

Creately

Тип: Desktop/Online
Цена: 5$
Link: http://www.creately.com/

Lucidchart

Тип: Online
Цена: 5$
Link: http://www.lucidchart.com/

Mockingbird

Тип: Online
Цена: 9$/месяц
Link: https://gomockingbird.com

Pidoco

Тип: Online
Цена: от 9$/месяц
Link: https://pidoco.com

HotGloo

Тип: Online
Цена: 14$/месяц
Link: http://www.hotgloo.com

ProtoShare

Тип: Online
Цена: от 49$/месяц
Link: http://www.protoshare.com

Desktop-инструменты

Pencil

Тип: Firefox Addon
Цена: Free
Link: http://pencil.evolus.vn

Serena Prototype Composer

Тип: Desktop
Цена: Free
Link: http://www.serena.com

Creately

Тип: Desktop/Online
Цена: 5$
Link: http://www.creately.com/

Balsamiq Mockups

Тип: Desktop, Adobe AIR
Цена: 79$
Link: http://www.balsamiq.com

FlairBuilder

Тип: Desktop, Adobe AIR
Цена: 99$
Link: http://www.flairbuilder.com

Omnigraffle

Тип: Mac OSX App
Цена: 99$
Link: http://www.omnigroup.com

Antetype

Тип: Desktop
Цена: 289$
Link: http://www.antetype.com/

Adobe Fireworks

Тип: Desktop
Цена: 299$
Link: http://www.adobe.com/products/fireworks.html

Axure

Тип: Desktop
Цена: 589$
Link: http://www.axure.com/

Список не претендует на 100% полноту и с вашей помощью будет пополняться. Ну и в конечном итоге — чем пользоваться каждый из нас должен решить сам.
Дмитрий Амроян @Another_rus
карма
11,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

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

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

  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Да, согласен. Хотя есть элементы которые не пересекаются. Обязательно изучу тот список и обновлю этот. Есть ощущение, что в результате мы получил более полный up-to-date список.
      • +2
        Картинки вещь хорошая, чтобы сразу составить впечатления. Спасибо, что вставляете.
  • +1
    как раз вчера искал где бы нарисовать интерфейс для нового сайта, больше всего понравился Mockflow.
    Кстати, многие из этих сервисов есть в гугл хром веб стор, так удобнее попробовать и решить что больше подходит.

    PS: еще Cacoo.com понравился
  • +7
    К сожалению, большинству этих инструментов тоже бы пригодился проектировщик интерфейсов(
    • 0
      Иногда складывается впечатление, что эти тулзы делают программисты для интерфейс дизайнеров :) Что выходит, сами понимаете, программа для программирования :)
  • +2
    Здоровский инструмент для прототипирования интерфейсов — «Serena Prototype Composer». Есть бесплатная версия. Кроме, собственно, интерфейса, позволяет простенько его «оживить» плюс встроенные средства по работе с требованиями.
  • 0
    Перепробовав множество инструментов, пришел к выводу, что все они бесполезны и все зависит абсолютно от того, кто их делает.

    Для себя остановился на Adobe Illustrator. Да, он не делает динамических прототипов, но лично я не вижу в них смысла. зато он обладает рядом функций, которые являются в прототипировании основными:
    — Векторный
    — Артбоарды — позволяют в одном документе делать весь сайт без напряга для машины.
    — Слои
    — Полный инструментарий для работы с текстом
    — Свобода оперирования объектами

    Да, в нем нет заготовок кнопочек и других объектов. Но поскольку он векторный, всегда можно иметь набор шаблонов, которыми можно оперировать как угодно.
    • +2
      Динамические прототипы можно тестировать, так как с их помощью максимально удобно проектировать взаимодействие (interaction design). Пользователи воспринимают их как сайт или программу, чего не скажешь про статичную картинку. А для блочной разметки(wireframe), которая предшествует прототипу, можно пользовать онлайн тулзы, или векторные редакторы. Все зависит от потребностей, но онлайн сервисы мне не нравятся, предпочитаю InDesign и Axure :)
      • 0
        Можете поделиться опытом прототипирования под inDesign или хотя бы в какую сторону копать стоит?
        • 0
          Рекомендую к изучению набор шаблонов и снипетов от EightShapes для InDesign, на все случаи жизни UX дизайнера — unify.eightshapes.com/.
    • НЛО прилетело и опубликовало эту надпись здесь
      • –1
        Я за СПО, но к сожалению Inkskape не дает нужного удобства. В продакшене его применять сложно, увы.

        А Fireworks хоть и затачивается под сайты, но тоже довольно геморный.
    • 0
      Из чистого интереса: а с inDesign не пробовали делать то же самое?
      • 0
        InDesign все же под другое заточен. И в нем нет свободного пространства.
        • 0
          Не совсем вас понимаю.
  • +2
    Вчера искал инструмент для прототипирования, нашел вот такой: www.antetype.com/
  • +1
    А как же creately.com, cacoo.com и lucidchart.com?
  • 0
    Сам программист, но иногда приходится накидывать UI. Пользуюсь keynote + keynotekungfu.com/. В итоге дешево, сердито и неплохо )
  • 0
    Я пользуюсь google документами и шаблоном Morten Just’s Blue wireframe. Обычно wireframe расшариваю для клиента, для совместной работы. Ничего удобнее еще не видел.
  • 0
    Юзаю Balsamiq Mockups online-demo версию. Мне хватает. Работу можно эксрорт, импорт в xml.
  • 0
    Проапдейтил. Добавил несколько указанных выше инструментов, разделил на online-не'online, отсортировал по цене.
  • 0
    wireframesketcher.com/ — It’s a standalone software and a plug-in for any Eclipse IDE. Как дополнение к Eclipse неплох, но это не Axure. 75$ лицензия.

  • 0
    Увы, у каждого из этих сервисов/программ есть подводные камни с которыми сталкиваешься при более плотном использовании.

    — Creatly частенько лежал, либо отказывался сохранять результаты работы.
    — Axure хорош, но его скорость работы очень низкая. Еще раздражало количество ненужных действий которое приходится совершать в нем — им бы свой интерфейс допилить. Совместная работа не слишком удобна.
    — Cacoo печалит тем, что имеет серьезные проблемы с экспортом. Работа команды более чем из трех человек тоже не слишком удобна.
    — и т.д.

    В свое время перепробовали почти все из того, что есть в статье, но подходящего на 100% не нашли. Пока пользуемся Cacoo и Axure
  • 0
    несколько лет используем Evolus Pencil для набросков интерфейсов. Путь «идея->обсуждение->первая версия» покрывает.
  • 0
    А киньте кто-нибудь ссылку на инструмент для прототипирования Windows Phone 7 приложений. Помнится, они хотели отказаться от SketchFlow в пользу какой-то специальной надстройки PowerPoint, где можно было бы и создавать интерфейсы и их показывать.
  • 0
    Вы в начале выделили несколько критериев, вот взяли бы и оценили приведенные системы по этим критериям и вывод в конце, а пока это просто список инструментов, большая часть из которого всем известна.
    • 0
      Цель этого списка обозначена в самой статье — показать какое есть разнообразие и этим помочь тем, кому «большая часть» этого списка известна посмотреть, какие еще есть предложения на рынке и самим попробовать подобрать себе новый инструмент. Эта задача мне показалась быстрой и полезной. Та задача о которой вы говорите несомненно является очень важной и более полезной нежели приведенный список. Но и значительно более затратной по времени. Поэтому она была отложена в светлое будующее. Всему свое время.
  • +3
    На мой взгляд, список слишком неоднороден. Трудно, например, рассматривать Pencil и Axure в одном ряду, поскольку первый предназначен для создания статичных «карандашных» скетчей, а второй — интерактивных hi-fi прототипов. Их нельзя сравнивать и рассматривать как альтернативные решения. Эти инструменты созданы для решения совершенно разных задач.
    Поэтому обязательно нужно выделить критерии и сгруппировать инструменты. Если этого не сделать — то список, честно говоря, будет малополезным. Он не поможет мне найти тулзу для решения конкретной задачи.

    Вообще я бы начал статью с определения признаков инструментов прототипирования. Не понятно, какими свойствами должна обладать программа, чтобы считаться инструментом прототипирования. По каким соображениям, например, в списке нет популярнейшего Visio, но есть его маковый аналог Omnigraffle? Почему в списке нет Excel, Power Point и Photoshop, ведь в них тоже прототипируют? Все подобные вопросы отпадут, если вы чётко сформулируете признаки инструментов прототипирования и будете их придерживаться при пополнении списка.

    Если говорить о самих инструментах прототипирования, то помимо разделения на online/offline и представления цены я бы, как минимум, выделил следующие критерии:
    1. Визуальная достоверность создаваемых прототипов:
    — low-fidelity (скетчи, наброски, вайрфреймы)
    — hi-fidelity (внешний вид прототипа приближён к реальной системе)
    2. Интерактивность создаваемых прототипов:
    — статичные
    — интерактивные
    3. Для десктоп-тулзов нужно явно указать ОС, на которых они будут работать (например, указанный тип для Axure «Десктоп» совсем не говорит о том, что он идёт на Win и на Mac OS, но не работает на Linux)
    4. Тип прототипируемых приложений:
    — веб-приложения, сайты
    — дестоп (настольные) приложения
    — приложения для мобильных ОС
    5. Наличие перевода (локализации)

    Я являюсь продакт-менеджером инструмента прототипирования GUI Machine, «варюсь» на этом рынке уже достаточно давно и понимаю, что поверхностного обзора для выбора подходящей тулзы не достаточно.

    Предлагаю добавить наш инструмент в список. В соответствии с выделенными критериями, GUI Machine является десктоп-инструментом (идёт на Windows, Mac OS, Linux) для создания интерактивных hi-fi прототипов десктоп и веб-приложений, имеет русскую и английскую локализацию.
  • +2
    Статья называется «Инструменты прототипирования и создания wireframes», а в списке приведённых Вами инструментов львиную долю занимают средства для создания исключительно мокапов (iPlotz, MockFlow, MockupBuilder, Mockingbird, Balsamiq Mockups), что далеко не прототипы или вайрфреймы.

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

    Для более серьёзных проектов использование подобных инструментов себя не оправдывает — не хватает функционала, конкретики в интерфейсе и возможности создавать какие-либо (даже самые базовые) интерактивные элементы.
    • 0
      Полностью с вами согласен. Для этого и писал предисловие. Каждый инструмент соответствует своей задаче. Не всегда те кто ими пользуются создают серьёзные проекты.
      • +1
        Просто мне кажется было бы куда интереснее почитать (хотя бы минимальный) обзор средств создания прототипов/вайрфреймов (мокап средства сюда не входят), так как они находятся на достаточно интересном уровне как по цене, так и по предоставляемым возможностям.

        Список же вышеприведённых инструментов (за исключением пары из них), уверен, уже слышал/видел/пощупал каждый интересующийся этой темой (иные вообще обойдут пост стороной) — тема таки не супер новая и, уверен, уже многие задавались вопросом нужно ли им прототипировать и как/на чём это делать и в своё время искали возможные варианты.

        Да и появление многих из этих инструментов зачастую сопровождалось большим шумом и искуственным ажиатажем, поэтому пропустить их мимо было взгляда весьма сложно.
      • 0
        Некоторые из них даже «рекламировались» на хабре в своё время.
  • 0
    Какой инструмент порекомендуете для ведения одновременно нескольких проектов. Т.е. нужно рассчитывать на обширную документацию.

    Динамика не нужна. Прототипирование 90% для веба. Иногда для мобильных и десктопа.

    платный/бесплатный не имеет значения. просто нужно понимать, за что переплачиваются деньги.
    • 0
      На текущий момент веду свои проекты в fireworks. Причины следующие:

      1. Гибкий уровень использование проработки — от базовых чернобелых протипов, до прототипов отрисованных «поверх» существующего дизайна при отрисовке дополнительных страниц
      2. Вектор + Растр
      3. Возможность использования встроенной архитектуры проекта проект(файл)-страницы-состояние
      4. Упрощенное ( по тому что часто возникают глюки, и их приходится обходить ) взаимодействие между Fireworks-Illustrator-Photoshop. ( по факту скорее проще использовать импорт отдельных элементов, чем полностью файл ).

      Ключевыми для меня являются пункты 1-3.
  • 0
    1. Как поставить навигационную крошку? Чтобы путешествую по прототипу, менялась автоматом в зависимости от текущего пункта в меню. Оч важный для меня))
    2. Как-нибуть можно контролировать выпадающее меню? Править виджеты или создавать?

    Заранее огромное спасибо
    • 0
      Из вышеперечисленных инструментов обе задачи можно решать с помощью Axure (из собственного опыта ).
      • 0
        Как реализовать? Нашел в виджетах bread, но он походу позволяет прописывать только вручную, а как заставить прописывать автоматически согласно карте сайта? У меня в проекте более 300 страниц, что мне каждой вручную прописывать. А без навигационной цепочки не выжить :) Как быть? Кто даст рецепт)

        Еще подскажите можно ли создавать открывающиеся меню автоматически по карте сайта или добавлять в раскрывающийся список подразделы уже с ссылками? А то получается, чтобы создать раскрывающееся меню, приходиться вручную прописывать названия и присваивать ссылки. Как нибудь из карты сайта возможно генерировать раскрывающееся меню?
  • 0
    Уже много лет пользуюсь Balsamiq. Хороший инструмент, но на AIR. Соответственно, начинаются дикие тормоза, когда одновременно открыто 10-15 страниц прототипа. Жутко бесит, в любом случае.

    Хочется либо быстрого онлайн инструмента (как mockflow — только что попробовал, всё быстро), либо десктопного (в данном случае мне под мак).

    Да, и хочется динамических шаблонов… Для Balsamiq есть сторонее приложение, которое генерирует полноценный html прототип. Странички в png конечно круто, но хочется показывать клиенту динамику иногда.

    Возможно кто-то подскажет решение?!

    пс.: не все пока инструменты из списка потестил, но некоторые закрывал почти сразу )))

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