Блочная разметка. Программы

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

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

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

Axure Pro

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

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

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

MS Expression Blend

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

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

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

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

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

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

MS Visio

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

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

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

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

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

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

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

Pencil Project

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

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

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

Balsamiq Mockups

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

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

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

Выводы

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

Тем временем

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

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

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

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

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

• Похожие заметки:

  • Блочная разметка в проектировании
  • Выловим баги
  • Не заставляйте меня думать
  • Область реагирования