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

Another_rus 11 ноября 2011 в 17:54 74,2k
Навеяно долгими поисками различных систем прототипирования и желанием поделиться этим опытом. В данном посте отсутсвуют сложные системы типа 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% полноту и с вашей помощью будет пополняться. Ну и в конечном итоге — чем пользоваться каждый из нас должен решить сам.
Проголосовать:
+39
Сохранить: