Существует огромное количество графических редакторов — растровые, векторные, 3д, есть даже текстовые (sic!). Когда же перед вами стоит задача: в чем же рисовать блочную разметку – вам придется выбирать. Лучше всего, конечно, попробовать каждый из них самому, чтобы определится в своих личных предпочтениях, и составить собственное мнение, но это не всегда удается.

^[1]

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

Рассматривать я буду, конечно, далеко не все подходящие редакторы, но несколько хороших, а главное качественных – рассмотрю, а вы уже выбирайте сами, какой вам больше по душе.
Начать хотелось бы с исконно проектировочных программ – Axure Pro ^[2], и MS Expression Blend ^[3] (не спешите плеваться – программа на высоте).
Итак, поехали.

Axure Pro ^[2]

Очень мощная программа, которая позволяет не просто проектировать интерфейсы, но и сразу, же переводить их в html ^[4], или chm формат ^[5] для пущего удобства (javascript ^[6] также широко используется). Т.е. вы водите мышкой в редакторе, а на выходе получаете вполне себе работающий прототип интерфейса, который спланировали ранее. Программа не дешевле остальных участников тестирования, но имеет не меньше возможностей.

Прототипирование в этой программе — легкий процесс благодаря возможности создания диаграмм и простейших сценариев на подобии продуктов Microsoft – Visio ^[7] и Outlook Express ^[8].
Работать с Axure лучше всего на небольших проектах, у которых в наличии большая и компактная функциональность. Также её можно использовать и для больших проектов, но это чревато долгим откликом программы на несильных компьютерах. Для больших же проектов аксурке банально не хватает возможностей: в частности – программирования, и создания баз данных, которые при создании полного прототипа (а не только блочной разметки) определенно нужны.

^[2]

Конкретно для создания wireframes ^[9] эта программа использует лишь малую часть своего обширного функционала, поэтому назвать Axure программой для создания блочной разметки – нельзя. Скорее она предназначена для визуализации уже спланированного на бумаге прототипа, но и исключать из списка её тоже нельзя – т.к. инструмент, очень мощный и полезный для юзабилистов.
Стоит Axure на данный момент $589.
Подробнее о работе в этой программе я напишу позже.

MS Expression Blend ^[3]

Новая линейка графических редакторов от компании Microsoft ^[10] – Expression ^[11] определенно радует своей функциональностью и внешним видом. Что примечательно – Microsoft лишь выкупила готовый продукт у небольшой гонконгской компании Creature Housе (и самих Creature House тоже выкупила), а не создала конкурента как она обычно поступает в таких случаях. В нашем случае – хотелось бы осветить программу из комплекса MS Expression – Expression Blend. Эта программа предназначена конкретно для создания wireframes ^[9], и прототипирования, поэтому функционально – она определенно лучше Axure ^[2] (для работы с блочной разметкой, конечно же).

Тут в наличии большая библиотека контролов – разнообразные кнопки, выпадающие списки, поля для ввода текста, radio-кнопки, чеклисты и прочие страшные слова. Удобная работа с wireframes ^[9] с помощью множества слоев – также в наличии.
Эта программа также заточена под визуальное создание прототипа итогом которому будет html, xaml-анимация, и javascript файлы.
Есть удобные инструменты для работы с простейшими формами – элипсы, точки, линии, и многоугольники остаются неизменными.

Программа вплотную работает с технологией MS Silverlight ^[12] (конкурент Adobe Flash ^[13]) без нужды устанавливать MS Visio с его монстроподобным интерфейсом и прочая-прочая. Есть также встроенный JS-редактор.
Еще одним из преимуществ программы является XAML-анимация ^[14], которая позволяет экспортировать результаты визуальной работы в html без потери качества. Она же создает для прототипа анимацию кнопок, и других контролов. Каждый XAML-файл могут отредактировать С# ^[15] или VB ^[16] программисты вручную, что является определенным плюсом в совместной работе дизайнера и программиста.

^[3]
Также удобна для работы с шрифтовыми интерфейсами, которые практически не используют графику – множество настроек, и функций помогут настоящим типографам сделать очередную дизайнерскую конфетку.
Программа подходит для проектирования не только веб интерфейсов, но и настольных (десткопных) приложений. Небольших приложений, правда, но…
Результатом работы может быть как статическая картинка, так и работающий html-прототип с silverlight и javascript.

Главным минусом программы является то, что дизайнерам, которые ничерта не смыслят в программировании на XML-подобных языках можно в эту программу даже не соваться, т.к. код редактировать приходится ну очень часто. Либо же им придется работать в тандеме с программистом, который знаком с этой программой и XML-языками ^[17]. Именно так я и поступаю при предоставлении клиенту работающего прототипа.

Стоит данная программа $575, что довольно ощутимо даже в сравнении с стоимостью Adobe Photoshop CS3 ($1000).

MS Visio ^[18]

Очень мощный программный комплекс для работы с визуализацией данных. Подойдет далеко не всем дизайнерам – не каждому нужны такие возможности в такой плотной упаковке. В интерфейсе легко можно запутаться. Работа также подобна визуальным редакторам выше, но существуют некоторые ощутимые проблемы. Одна из них – без знаний языка VB Script ^[16]

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

^[18]

Из плюсов можно выделить:

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

Из минусов же:

1. Ужасную производительность программы.
2. Запутанность интерфейса.
3. Сложность работы для простого дизайнера.

Стандартная версия стоит 350 долларов, за профессиональную же придется отдать 750 полновесных зеленых рублей.

Pencil Project ^[19]

Pencil Project не является программой в полном смысле этого слова. Это расширение для браузера Mozilla Firefox ^[20] (как 2й так и 3й версии). С помощью этого уникального дополнения можно свободно визуализировать интерфейсы, и проектировать блочную разметку. Самый большой плюс – это абсолютно бесплатно и под удобной лицензией – GPL 2 ^[21]. Также большим плюсом является кроссплатформенность – firefox создается под большинство популярных платформ – Windows ^[22], Mac ^[23], Linux ^[24].

Интерфейс программы радует своей лаконичностью, и при этом мощностью – тут и сетка, и удобное перетаскивание нужных элементов, редактирование текстов, библиотека паттернов и форм. Простенький визуальный редактор только плюс – не засоряет важное пространство в программе и подчеркивает только важные функции, которыми пользуется большинство дизайнеров. В общем и целом – если до этой программы я использовал для создания wireframes ^[9] преимущественно photoshop ^[25] (а для прототипирования – Expression Blend) то теперь с удовольствием использую Pencil Project вместо него.

^[19]

В общем – простое, как отвертка, приложение, которое успешно справляется со всеми нужными действиями при создании wireframes ^[9]. Крайне рекомендую пользователям Firefox.

Balsamiq Mockups ^[26]

Довольно часто проектирование интерфейсов начинается на бумажке – на обычных листах, либо в блокноте. Balsamiq Mockups развивает эту идею. Программа очень простенькая – есть множество визуалов – кнопки, списки, полосы прокрутки и прочее (есть даже облако тегов), их перетягиваем на «поле брани».

По сути – спроектировать тут можно всё. И весь интерфейс будет в зарисовки на бумаге – неровные линии, шрифт. Шрифт, кстати, подобран ну очень удачно – легкочитаемый, кириллический, и в рукописном стиле.

^[27]

Кому нужна скорость при разработке, недурный результат и простой функционал – тому нужно в обязательном порядке качать эту программу. Профессиональную лицензию я получил, написав в службу поддержки о том — кто я, и чем занимаюсь. На сайте написано, что любой блоггер, или журналист может запросить профессиональную лицензию по этому адресу ^[28] бесплатно.  Остальным же придется заплатить 79 долларов.

Выводы

Для тех, кому не нужны жуткие навороты: прототипирование в html и прочая шелуха – тому лучше использовать Pencil Project, и Balsamiq Mockups. Я, лично, отдаю преимущество первому – т.к. он абсолютно бесплатен и работает на моем любимом браузере. В то же время Balsamiq Mockups очень удобна, если нужно создать wireframes ^[9] быстро и со вкусом.
В случае же, если вам нужно еще и прототипирование, редактор кода, javascript и прочий функционал – рекомендую обратить внимание на продукт Expression Blend – красивый, функциональный интерфейс которого не оставит вас равнодушным.

Тем временем

1. Миша Квакин ^[29] раскрепостился от оков постоянной работы и стал фрилансером.

2. Сергей Чаботько ^[30] рассказывает о том, чему нужно следовать начинающим СЕО-шникам

3. Юра Гугнин ^[31] написал о своей новой работе в роли маркетолога.

4. Футуриус ^[32] пишет о МО технологии.

5. Егор Чернев ^[33] пишет о закругленных блоках с помощью css.