Fireworks и дизайн сайтов.

Fireworks и дизайн сайтов.

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

Итак, профиты и преимущества Fireworks с точки зрения проектировщика интерфейсов.

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

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

Рассмотрим создание какой–то части веб–приложения, с момента когда нужно открывать Fireworks. То есть предметная область уже разжевана, бумажные прототипы нарисованы и показаны заинтересованным лицам, можно начинать махать мышкой. Итак, после бумажных (lo–fi) прототипов должны появиться еще 3 типа hi–fi прототипа:

— интерактивный прототип для тестирования на пользователях

— интерактивный прототип с комментариями и описанием исключительных ситуаций — для разработчиков бизнес–логики (back–end программистов)

— интерактивный прототип с интегрированным в него графическим дизайном — для front–end разработчика, который занимается версткой и клиентскими скриптами.

В случае когда мы используем Fireworks, все 3 прототипа — это один файл, который изменяется во времени, а не 3 разных сущности, за которыми нужно следить, и если меняется одна, то приводить к актуальному состоянию остальные две.

Итак, почему FW рулит в создании интерактивного прототипа для юзабилити тестирований? Потому что он под это, собственно, заточен. Все экраны и их состояния хранятся в одном файле, легким движением мыши можно расставлять ссылки с любого элемента на любой экран, есть встроенный инструмент для анимации чего–угодно, так мы имитировали клиентский яваскрипт, который что–то двигает/сворачивает/разворачивает/затемн яет. Экспорт в html происходит в 2 клика.

Довольно близко по возможностям тут Axure и InDesign (особенно CS5)

Почему FW рулит для графического дизайнера? Дизайнер может творить в чем угодно, но в конце концов обычно все утаскивается в Photoshop. Прототип из Fireworks в Photoshop утаскивается на ура, причем несколькими способами: можно сохранить экран как psd файл со слоями, а можно экспортировать библиотеку символов, из которых состоят все интерфейсы. Далее, графический дизайнер нарисовал все нужные элементы, пиктограммы и рюшечки, теперь это нужно затащить в прототип чтобы посмотреть как с этим дизайном выглядят все 50 экранов. Дизайнер просто копирует элементы из Фотошопа в соответствующие символы в Fireworks и волшебным образом весь прототип теперь с графическим дизайном! (ну я исхожу из того, что хороший проектировщик все рассовал по символам, и правильно настроил как слои шарятся между экранами).

Подобный трюк можно проделать в InDesign, но никак нельзя в Axure.

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

Вот графический дизайнер раскрасил последний пиксель и пора верстать. Вместо кучи psd файлов он отдает верстальщику наш прототип с графическим дизайном внутри (а мы еще успели написать комментарии для верстки, и яваскрипт–анимации показать гифами в интерактивном прототипе). Верстальщик может дальше работать как ему хочется: резать картинки из Fireworks или утащить все в Photoshop, но ориентироваться в прототипе ему будет удобнее. Кстати Fireworks — друг задротов по оптимизации веб–графики, там можно, например, без танцев с бубном создать PNG8 с разным значением альфа–канала (то есть разная прозрачность у разных пикселей).

На этом этапе Fireworks обставил даже InDesign.


Карта сайта


Информационный сайт Webavtocat.ru