Создание блок-схем в окне браузера

Иллюстрация к статье «Создание блок-схем в окне браузера»

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

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

Не буду подробно описывать что такое блок-схема, как и зачем она разрабатывается, об этом хорошо написал Ярослав Бирзул, поэтому рекомендую к прочтению. Ну и про софт для них.

Поэтому, я подробнее остановлюсь на недостатках «рисовальных» способов проектирования макета.

Что бы я поменял

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

При этом, в процессе непосредственно участвует тот кто рисует, остальные выступают в роли наблюдателей и советчиков. Но, чем больше людей принимает участие в проектировании, тем больше будет мнений и шанс найти правильное решение.

Как бы я поменял

Теперь непосредственно остановлюсь на концепции идеи, которая возникла недавно, но ближайший месяц-полтора останется без реализации с моей стороны. Банально нет времени :(

Итак, неплохим решением будет создание приложения, которым можно создавать и править блок-схему при проектировании на лету в окне браузера. Это позволит отойти от необходимости устанавливать дополнительный софт и избежать лишних затрат времени при перерисовывании элементов.

Первой версией от меня будет простая html-страничка, с использованием drag'n'drop и манипуляции с элементами страницы через DOM (добавление, удаление, изменение свойств стандартных элементов веб-страниц, манипуляции с текстом и размерами). Сохранение результата — отправка на печать (пока это самое слабое место). Дальше будет видно, стоит ли развивать идею в отдельный проект и создавать серверную часть. Во всяком случае, я открыт для сотрудничества.

Я сознательно не стал выкладывать все детали реализации идеи (хотя они есть), пусть это будет поводом для дальнейшего её обсуждения. А пока, хотелось бы увидеть в комментариях ваши мысли о ценности или бесполезности такого приложения, дополнения и критику. Любое мнение приветствуется.

* * *

Сканер блогов:

Как правильно планировать проекты. Подробная таблица со сравнением возможностей различных JavaScript галерей. Золотое сечение в веб-дизайне.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 11

  1. COTOHA, 17.01.2009 в 23:01

    хм. уже кагбе давным-давно всё есть. и майнд-мапы и блок-схемы и просто-схемы... погугли :)

    Ответить

  2. rotor, 20.01.2009 в 12:25

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

    Хотелось бы иметь под рукой что-то быстрое и простое.

    Ответить

  3. COTOHA, 20.01.2009 в 19:13

    а чем это не подошло: thinkature.com или www.gliffy.com ?

    первая как бы не бесплатная (не уверен, но найти где платить я не смог), а вторая стоит там порядка 5 баксов в месяц или (2.5 если на 10 человек купить), но не факт, что тебе платная часть понадобиться...

    Ответить

  4. rotor, 21.01.2009 в 21:29

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

    Частенько туда заглядываю не только за схемами, но и посмотреть что за новые штуковины появляются для планировщиков-юзабилистов. Правда иногда наблюдаются тормоза при использовании редактора (субъективно).

    Если интересно, ещё могу поделиться ссылками на mindmeister.com и jumpchart.com. Тоже неплохие инструменты.

    Ответить

  5. COTOHA, 22.01.2009 в 4:33

    ага-ага :) первый линк тех же авторов, что и майндмейстер. пользуюсь постоянно.

    Ответить

  6. mir, 25.01.2009 в 16:07

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

    В принципе ничего невозможного нет — незнаю как вам а мне не в напряг

    Ответить

  7. Зарина, 07.02.2009 в 14:59

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

    Ответить

  8. ДР, 14.03.2009 в 14:53

    вот тебе хорошая ссылочка :)

    vbsem.com.ua/blog/innovac...rcheskix-sajtax/

    Ответить

  9. rotor, 14.03.2009 в 15:20

    Действительно, очень хорошая. Спасибо.

    Ответить

  10. none, 23.03.2009 в 11:18

    www.evolus.vn/Pencil/

    а вот кстати тоже интересный проект — тоже можно прототипировать интерфейсы прямо из браузера, достаточно только установить этот аддон

    Ответить

  11. rotor, 24.03.2009 в 11:19

    @none

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

    Спасибо. Вопрос поиска быстрого инструмента для прототипирования можно считать закрытым :)

    Ответить

Есть что сказать?