Проектирование страниц интерфейса в Adobe Fireworks

Александр ХмелевскийUI Modeling Company

О чем доклад?1. Постановка проблемы

Мы долгое время проектировали в MS Visio, чем он хорош и плох?

www.uimodeling.ru

О чем доклад?1. Постановка проблемы

Мы долгое время проектировали в MS Visio, чем он хорош и плох?

2. Где мы искали спасение?Обзор основных инструментов проектирования.

www.uimodeling.ru

О чем доклад?1. Постановка проблемы

Мы долгое время проектировали в MS Visio, чем он хорош и плох?

2. Где мы искали спасение?Обзор основных инструментов проектирования.

3. Adobe Fireworks как решениеПочему мы остановились на Fireworks?

www.uimodeling.ru

О чем доклад?1. Постановка проблемы

Мы долгое время проектировали в MS Visio, чем он хорош и плох?

2. Где мы искали спасение?Обзор основных инструментов проектирования.

3. Adobe Fireworks как решениеПочему мы остановились на Fireworks?

4. Что в итоге?Практически идеальный инструмент.

www.uimodeling.ru

Microsoft VisioПочему мы работали в Visio?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Microsoft VisioПочему мы работали в Visio?

• Скорость создания прототипов;

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Microsoft VisioПочему мы работали в Visio?

• Скорость создания прототипов;• Наличие готовых «стенсилов»;

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioПочему мы работали в Visio?

• Скорость создания прототипов;• Наличие готовых «стенсилов»;• Гибкие инструменты для создания собственных библиотек;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioПочему мы работали в Visio?

• Скорость создания прототипов;• Наличие готовых «стенсилов»;• Гибкие инструменты для создания собственных библиотек;• Наличие стилей;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioПочему мы работали в Visio?

• Скорость создания прототипов;• Наличие готовых «стенсилов»;• Гибкие инструменты для создания собственных библиотек;• Наличие стилей;• Возможность легко и быстро создавать диаграммы;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioПочему мы работали в Visio?

• Скорость создания прототипов;• Наличие готовых «стенсилов»;• Гибкие инструменты для создания собственных библиотек;• Наличие стилей;• Возможность легко и быстро создавать диаграммы;• Связь с другими продуктами MS Office;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioПочему мы работали в Visio?

• Скорость создания прототипов;• Наличие готовых «стенсилов»;• Гибкие инструменты для создания собственных библиотек;• Наличие стилей;• Возможность легко и быстро создавать диаграммы;• Связь с другими продуктами MS Office;• Экспорт в HTML и PDF.

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioГлавная проблема Visio — сам Visio

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioГлавная проблема Visio — сам Visio

• Не заточен под проектирование интерфейсов;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioГлавная проблема Visio — сам Visio

• Не заточен под проектирование интерфейсов;• Запутанный интерфейс;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioГлавная проблема Visio — сам Visio

• Не заточен под проектирование интерфейсов;• Запутанный интерфейс;• Невозможно перенастроить «горячие» клавиши;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioГлавная проблема Visio — сам Visio

• Не заточен под проектирование интерфейсов;• Запутанный интерфейс;• Невозможно перенастроить «горячие» клавиши;• Сложность работы над большими проектами;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioГлавная проблема Visio — сам Visio

• Не заточен под проектирование интерфейсов;• Запутанный интерфейс;• Невозможно перенастроить «горячие» клавиши;• Сложность работы над большими проектами;• Совместимость работы с дизайнером;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft VisioГлавная проблема Visio — сам Visio

• Не заточен под проектирование интерфейсов;• Запутанный интерфейс;• Невозможно перенастроить «горячие» клавиши;• Сложность работы над большими проектами;• Совместимость работы с дизайнером;• Эстетически непривлекательные прототипы.

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Примеры

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Где мы искали спасение?1. Adobe InDesign

Много плюсов, но изначально заточен под полиграфию и весьма ресурсоемок.

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Примеры

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Где мы искали спасение?

2. Axure ProХорошая программа, но не подходит для крупных проектов.

www.uimodeling.ru

1. Adobe InDesign Много плюсов, но изначально заточен под полиграфию и весьма ресурсоемок.

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Где мы искали спасение?

2. Axure ProХорошая программа, но не подходит для крупных проектов.

www.uimodeling.ru

1. Adobe InDesign Много плюсов, но изначально заточен под полиграфию и весьма ресурсоемок.

3. Другие программыMS Expression Blend, Norpath Studio, Adobe Flash, MS PowerPoint и многие, многие другие.

Adobe Fireworks как решениеНеужели спасение?

• Стандартный интерфейс Adobe;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Adobe Fireworks как решениеНеужели спасение?

• Стандартный интерфейс Adobe;• Наличие библиотеки готовых элементов и возможность создавать

собственные;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Adobe Fireworks как решениеНеужели спасение?

• Стандартный интерфейс Adobe;• Наличие библиотеки готовых элементов и возможность создавать

собственные;• Один файл даже для большого проекта;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Adobe Fireworks как решениеНеужели спасение?

• Стандартный интерфейс Adobe;• Наличие библиотеки готовых элементов и возможность создавать

собственные;• Один файл даже для большого проекта;• Выравнивание объектов и направляющие;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Adobe Fireworks как решениеНеужели спасение?

• Стандартный интерфейс Adobe;• Наличие библиотеки готовых элементов и возможность создавать

собственные;• Один файл даже для большого проекта;• Выравнивание объектов и направляющие;• Масштаб 1:1;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Adobe Fireworks как решениеНеужели спасение?

• Стандартный интерфейс Adobe;• Наличие библиотеки готовых элементов и возможность создавать

собственные;• Один файл даже для большого проекта;• Выравнивание объектов и направляющие;• Масштаб 1:1;• Возможность независимо менять размер каждой страницы;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Adobe Fireworks как решениеНеужели спасение?

• Стандартный интерфейс Adobe;• Наличие библиотеки готовых элементов и возможность создавать

собственные;• Один файл даже для большого проекта;• Выравнивание объектов и направляющие;• Масштаб 1:1;• Возможность независимо менять размер каждой страницы;• Эстетически привлекательные прототипы;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Adobe Fireworks как решениеНеужели спасение?

• Стандартный интерфейс Adobe;• Наличие библиотеки готовых элементов и возможность создавать

собственные;• Один файл даже для большого проекта;• Выравнивание объектов и направляющие;• Масштаб 1:1;• Возможность независимо менять размер каждой страницы;• Эстетически привлекательные прототипы;• Один инструмент для проектировщика и дизайнера;

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Adobe Fireworks как решениеНеужели спасение?

• Стандартный интерфейс Adobe;• Наличие библиотеки готовых элементов и возможность создавать

собственные;• Один файл даже для большого проекта;• Выравнивание объектов и направляющие;• Масштаб 1:1;• Возможность независимо менять размер каждой страницы;• Эстетически привлекательные прототипы;• Один инструмент для проектировщика и дизайнера;• И так далее…

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Стандартный интерфейс Adobe

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Наличие библиотеки готовых элементов и

возможность создавать собственные

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Чего мы добились в итоге?

www.uimodeling.ru

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Выравнивание объектов и направляющие

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Один инструмент для проектировщика и

дизайнера

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Иконка

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Иконка

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Иконка

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Иконка

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Иконка

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Что в итоге?Практически идеальный инструмент

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Что в итоге?Практически идеальный инструмент

• Неудобная работа с библиотекой элементов;

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Что в итоге?Практически идеальный инструмент

• Неудобная работа с библиотекой элементов;• Сложность создания редактируемых символов;

Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

www.uimodeling.ru

Что в итоге?Практически идеальный инструмент

• Неудобная работа с библиотекой элементов;• Сложность создания редактируемых символов;• …

Спасибо!Источники:www.adobe.comwww.boxesandarrows.comwww.amazedev.com/prototipirovanie-web-proektov-sobiraya-voedinowww.usethics.ru/lib/indesign_prototyping.htmlwww.birzool.com/wiresoft/www.guicci.ru/2006/12/08/axure-rp-pro-sredstvo-dlya-prototipirovaniya/ и многие другие

Александр Хмелевскийa.khmelevsky@gmail.comwww.axme.ru

www.uimodeling.ru