Comments 39
UFO just landed and posted this here
как раз вчера искал где бы нарисовать интерфейс для нового сайта, больше всего понравился Mockflow.
Кстати, многие из этих сервисов есть в гугл хром веб стор, так удобнее попробовать и решить что больше подходит.
PS: еще Cacoo.com понравился
Кстати, многие из этих сервисов есть в гугл хром веб стор, так удобнее попробовать и решить что больше подходит.
PS: еще Cacoo.com понравился
К сожалению, большинству этих инструментов тоже бы пригодился проектировщик интерфейсов(
Здоровский инструмент для прототипирования интерфейсов — «Serena Prototype Composer». Есть бесплатная версия. Кроме, собственно, интерфейса, позволяет простенько его «оживить» плюс встроенные средства по работе с требованиями.
Перепробовав множество инструментов, пришел к выводу, что все они бесполезны и все зависит абсолютно от того, кто их делает.
Для себя остановился на Adobe Illustrator. Да, он не делает динамических прототипов, но лично я не вижу в них смысла. зато он обладает рядом функций, которые являются в прототипировании основными:
— Векторный
— Артбоарды — позволяют в одном документе делать весь сайт без напряга для машины.
— Слои
— Полный инструментарий для работы с текстом
— Свобода оперирования объектами
Да, в нем нет заготовок кнопочек и других объектов. Но поскольку он векторный, всегда можно иметь набор шаблонов, которыми можно оперировать как угодно.
Для себя остановился на Adobe Illustrator. Да, он не делает динамических прототипов, но лично я не вижу в них смысла. зато он обладает рядом функций, которые являются в прототипировании основными:
— Векторный
— Артбоарды — позволяют в одном документе делать весь сайт без напряга для машины.
— Слои
— Полный инструментарий для работы с текстом
— Свобода оперирования объектами
Да, в нем нет заготовок кнопочек и других объектов. Но поскольку он векторный, всегда можно иметь набор шаблонов, которыми можно оперировать как угодно.
Динамические прототипы можно тестировать, так как с их помощью максимально удобно проектировать взаимодействие (interaction design). Пользователи воспринимают их как сайт или программу, чего не скажешь про статичную картинку. А для блочной разметки(wireframe), которая предшествует прототипу, можно пользовать онлайн тулзы, или векторные редакторы. Все зависит от потребностей, но онлайн сервисы мне не нравятся, предпочитаю InDesign и Axure :)
Можете поделиться опытом прототипирования под inDesign или хотя бы в какую сторону копать стоит?
Рекомендую к изучению набор шаблонов и снипетов от EightShapes для InDesign, на все случаи жизни UX дизайнера — unify.eightshapes.com/.
UFO just landed and posted this here
Из чистого интереса: а с inDesign не пробовали делать то же самое?
Вчера искал инструмент для прототипирования, нашел вот такой: www.antetype.com/
А как же creately.com, cacoo.com и lucidchart.com?
Сам программист, но иногда приходится накидывать UI. Пользуюсь keynote + keynotekungfu.com/. В итоге дешево, сердито и неплохо )
Я пользуюсь google документами и шаблоном Morten Just’s Blue wireframe. Обычно wireframe расшариваю для клиента, для совместной работы. Ничего удобнее еще не видел.
Юзаю Balsamiq Mockups online-demo версию. Мне хватает. Работу можно эксрорт, импорт в xml.
Проапдейтил. Добавил несколько указанных выше инструментов, разделил на online-не'online, отсортировал по цене.
wireframesketcher.com/ — It’s a standalone software and a plug-in for any Eclipse IDE. Как дополнение к Eclipse неплох, но это не Axure. 75$ лицензия.
Увы, у каждого из этих сервисов/программ есть подводные камни с которыми сталкиваешься при более плотном использовании.
— Creatly частенько лежал, либо отказывался сохранять результаты работы.
— Axure хорош, но его скорость работы очень низкая. Еще раздражало количество ненужных действий которое приходится совершать в нем — им бы свой интерфейс допилить. Совместная работа не слишком удобна.
— Cacoo печалит тем, что имеет серьезные проблемы с экспортом. Работа команды более чем из трех человек тоже не слишком удобна.
— и т.д.
В свое время перепробовали почти все из того, что есть в статье, но подходящего на 100% не нашли. Пока пользуемся Cacoo и Axure
— Creatly частенько лежал, либо отказывался сохранять результаты работы.
— Axure хорош, но его скорость работы очень низкая. Еще раздражало количество ненужных действий которое приходится совершать в нем — им бы свой интерфейс допилить. Совместная работа не слишком удобна.
— Cacoo печалит тем, что имеет серьезные проблемы с экспортом. Работа команды более чем из трех человек тоже не слишком удобна.
— и т.д.
В свое время перепробовали почти все из того, что есть в статье, но подходящего на 100% не нашли. Пока пользуемся Cacoo и Axure
несколько лет используем Evolus Pencil для набросков интерфейсов. Путь «идея->обсуждение->первая версия» покрывает.
А киньте кто-нибудь ссылку на инструмент для прототипирования Windows Phone 7 приложений. Помнится, они хотели отказаться от SketchFlow в пользу какой-то специальной надстройки PowerPoint, где можно было бы и создавать интерфейсы и их показывать.
Вы в начале выделили несколько критериев, вот взяли бы и оценили приведенные системы по этим критериям и вывод в конце, а пока это просто список инструментов, большая часть из которого всем известна.
Цель этого списка обозначена в самой статье — показать какое есть разнообразие и этим помочь тем, кому «большая часть» этого списка известна посмотреть, какие еще есть предложения на рынке и самим попробовать подобрать себе новый инструмент. Эта задача мне показалась быстрой и полезной. Та задача о которой вы говорите несомненно является очень важной и более полезной нежели приведенный список. Но и значительно более затратной по времени. Поэтому она была отложена в светлое будующее. Всему свое время.
На мой взгляд, список слишком неоднороден. Трудно, например, рассматривать 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 прототипов десктоп и веб-приложений, имеет русскую и английскую локализацию.
Поэтому обязательно нужно выделить критерии и сгруппировать инструменты. Если этого не сделать — то список, честно говоря, будет малополезным. Он не поможет мне найти тулзу для решения конкретной задачи.
Вообще я бы начал статью с определения признаков инструментов прототипирования. Не понятно, какими свойствами должна обладать программа, чтобы считаться инструментом прототипирования. По каким соображениям, например, в списке нет популярнейшего 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 прототипов десктоп и веб-приложений, имеет русскую и английскую локализацию.
Статья называется «Инструменты прототипирования и создания wireframes», а в списке приведённых Вами инструментов львиную долю занимают средства для создания исключительно мокапов (iPlotz, MockFlow, MockupBuilder, Mockingbird, Balsamiq Mockups), что далеко не прототипы или вайрфреймы.
Средств этих инструментов хватит отсилы на очень отдалённый набросок сайта (реже приложения) — собственно они для этого и создавались, хотя иногда пытаются вырваться за эти рамки (как по мне так безуспешно). Для таких задач, обычно, бумага и карандаш на порядок лучше (да ещё и бесплатно).
Для более серьёзных проектов использование подобных инструментов себя не оправдывает — не хватает функционала, конкретики в интерфейсе и возможности создавать какие-либо (даже самые базовые) интерактивные элементы.
Средств этих инструментов хватит отсилы на очень отдалённый набросок сайта (реже приложения) — собственно они для этого и создавались, хотя иногда пытаются вырваться за эти рамки (как по мне так безуспешно). Для таких задач, обычно, бумага и карандаш на порядок лучше (да ещё и бесплатно).
Для более серьёзных проектов использование подобных инструментов себя не оправдывает — не хватает функционала, конкретики в интерфейсе и возможности создавать какие-либо (даже самые базовые) интерактивные элементы.
Полностью с вами согласен. Для этого и писал предисловие. Каждый инструмент соответствует своей задаче. Не всегда те кто ими пользуются создают серьёзные проекты.
Просто мне кажется было бы куда интереснее почитать (хотя бы минимальный) обзор средств создания прототипов/вайрфреймов (мокап средства сюда не входят), так как они находятся на достаточно интересном уровне как по цене, так и по предоставляемым возможностям.
Список же вышеприведённых инструментов (за исключением пары из них), уверен, уже слышал/видел/пощупал каждый интересующийся этой темой (иные вообще обойдут пост стороной) — тема таки не супер новая и, уверен, уже многие задавались вопросом нужно ли им прототипировать и как/на чём это делать и в своё время искали возможные варианты.
Да и появление многих из этих инструментов зачастую сопровождалось большим шумом и искуственным ажиатажем, поэтому пропустить их мимо было взгляда весьма сложно.
Список же вышеприведённых инструментов (за исключением пары из них), уверен, уже слышал/видел/пощупал каждый интересующийся этой темой (иные вообще обойдут пост стороной) — тема таки не супер новая и, уверен, уже многие задавались вопросом нужно ли им прототипировать и как/на чём это делать и в своё время искали возможные варианты.
Да и появление многих из этих инструментов зачастую сопровождалось большим шумом и искуственным ажиатажем, поэтому пропустить их мимо было взгляда весьма сложно.
Некоторые из них даже «рекламировались» на хабре в своё время.
Какой инструмент порекомендуете для ведения одновременно нескольких проектов. Т.е. нужно рассчитывать на обширную документацию.
Динамика не нужна. Прототипирование 90% для веба. Иногда для мобильных и десктопа.
платный/бесплатный не имеет значения. просто нужно понимать, за что переплачиваются деньги.
Динамика не нужна. Прототипирование 90% для веба. Иногда для мобильных и десктопа.
платный/бесплатный не имеет значения. просто нужно понимать, за что переплачиваются деньги.
На текущий момент веду свои проекты в fireworks. Причины следующие:
1. Гибкий уровень использование проработки — от базовых чернобелых протипов, до прототипов отрисованных «поверх» существующего дизайна при отрисовке дополнительных страниц
2. Вектор + Растр
3. Возможность использования встроенной архитектуры проекта проект(файл)-страницы-состояние
4. Упрощенное ( по тому что часто возникают глюки, и их приходится обходить ) взаимодействие между Fireworks-Illustrator-Photoshop. ( по факту скорее проще использовать импорт отдельных элементов, чем полностью файл ).
Ключевыми для меня являются пункты 1-3.
1. Гибкий уровень использование проработки — от базовых чернобелых протипов, до прототипов отрисованных «поверх» существующего дизайна при отрисовке дополнительных страниц
2. Вектор + Растр
3. Возможность использования встроенной архитектуры проекта проект(файл)-страницы-состояние
4. Упрощенное ( по тому что часто возникают глюки, и их приходится обходить ) взаимодействие между Fireworks-Illustrator-Photoshop. ( по факту скорее проще использовать импорт отдельных элементов, чем полностью файл ).
Ключевыми для меня являются пункты 1-3.
1. Как поставить навигационную крошку? Чтобы путешествую по прототипу, менялась автоматом в зависимости от текущего пункта в меню. Оч важный для меня))
2. Как-нибуть можно контролировать выпадающее меню? Править виджеты или создавать?
Заранее огромное спасибо
2. Как-нибуть можно контролировать выпадающее меню? Править виджеты или создавать?
Заранее огромное спасибо
Из вышеперечисленных инструментов обе задачи можно решать с помощью Axure (из собственного опыта ).
Как реализовать? Нашел в виджетах bread, но он походу позволяет прописывать только вручную, а как заставить прописывать автоматически согласно карте сайта? У меня в проекте более 300 страниц, что мне каждой вручную прописывать. А без навигационной цепочки не выжить :) Как быть? Кто даст рецепт)
Еще подскажите можно ли создавать открывающиеся меню автоматически по карте сайта или добавлять в раскрывающийся список подразделы уже с ссылками? А то получается, чтобы создать раскрывающееся меню, приходиться вручную прописывать названия и присваивать ссылки. Как нибудь из карты сайта возможно генерировать раскрывающееся меню?
Еще подскажите можно ли создавать открывающиеся меню автоматически по карте сайта или добавлять в раскрывающийся список подразделы уже с ссылками? А то получается, чтобы создать раскрывающееся меню, приходиться вручную прописывать названия и присваивать ссылки. Как нибудь из карты сайта возможно генерировать раскрывающееся меню?
Уже много лет пользуюсь Balsamiq. Хороший инструмент, но на AIR. Соответственно, начинаются дикие тормоза, когда одновременно открыто 10-15 страниц прототипа. Жутко бесит, в любом случае.
Хочется либо быстрого онлайн инструмента (как mockflow — только что попробовал, всё быстро), либо десктопного (в данном случае мне под мак).
Да, и хочется динамических шаблонов… Для Balsamiq есть сторонее приложение, которое генерирует полноценный html прототип. Странички в png конечно круто, но хочется показывать клиенту динамику иногда.
Возможно кто-то подскажет решение?!
пс.: не все пока инструменты из списка потестил, но некоторые закрывал почти сразу )))
Хочется либо быстрого онлайн инструмента (как mockflow — только что попробовал, всё быстро), либо десктопного (в данном случае мне под мак).
Да, и хочется динамических шаблонов… Для Balsamiq есть сторонее приложение, которое генерирует полноценный html прототип. Странички в png конечно круто, но хочется показывать клиенту динамику иногда.
Возможно кто-то подскажет решение?!
пс.: не все пока инструменты из списка потестил, но некоторые закрывал почти сразу )))
Sign up to leave a comment.
Инструменты прототипирования и создания wireframes