Проектирование страниц интерфейса в 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 как решение | Что в итоге?

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

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

www.uimodeling.ru Microsoft Visio Почему мы работали в Visio? Скорость создания прототипов ; Наличие готовых «стенсилов» ; Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Наличие готовых «стенсилов» ;

Microsoft Visio Почему мы работали в Visio? Скорость создания прототипов ; Наличие готовых «стенсилов» ; Гибкие инструменты для создания собственных библиотек ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Наличие готовых «стенсилов» ;

Гибкие инструменты для создания собственных библиотек ;

Microsoft Visio Почему мы работали в Visio? Скорость создания прототипов ; Наличие готовых «стенсилов» ; Гибкие инструменты для создания собственных библиотек ; Наличие стилей ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Наличие готовых «стенсилов» ;

Гибкие инструменты для создания собственных библиотек ;

Наличие стилей ;

Microsoft Visio Почему мы работали в Visio? Скорость создания прототипов ; Наличие готовых «стенсилов» ; Гибкие инструменты для создания собственных библиотек ; Наличие стилей ; Возможность легко и быстро создавать диаграммы ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Наличие готовых «стенсилов» ;

Гибкие инструменты для создания собственных библиотек ;

Наличие стилей ;

Возможность легко и быстро создавать диаграммы ;

Microsoft Visio Почему мы работали в Visio? Скорость создания прототипов ; Наличие готовых «стенсилов» ; Гибкие инструменты для создания собственных библиотек ; Наличие стилей ; Возможность легко и быстро создавать диаграммы ; Связь с другими продуктами MS Office; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Наличие готовых «стенсилов» ;

Гибкие инструменты для создания собственных библиотек ;

Наличие стилей ;

Возможность легко и быстро создавать диаграммы ;

Связь с другими продуктами MS Office;

Microsoft Visio Почему мы работали в Visio? Скорость создания прототипов ; Наличие готовых «стенсилов» ; Гибкие инструменты для создания собственных библиотек ; Наличие стилей ; Возможность легко и быстро создавать диаграммы ; Связь с другими продуктами MS Office; Экспорт в HTML и PDF. www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Наличие готовых «стенсилов» ;

Гибкие инструменты для создания собственных библиотек ;

Наличие стилей ;

Возможность легко и быстро создавать диаграммы ;

Связь с другими продуктами MS Office;

Экспорт в HTML и PDF.

Microsoft Visio Главная проблема Visio — сам Visio www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Microsoft Visio Главная проблема Visio — сам Visio Не заточен под проектирование интерфейсов ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Microsoft Visio Главная проблема Visio — сам Visio Не заточен под проектирование интерфейсов ; Запутанный интерфейс ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Запутанный интерфейс ;

Microsoft Visio Главная проблема Visio — сам Visio Не заточен под проектирование интерфейсов ; Запутанный интерфейс ; Невозможно перенастроить «горячие» клавиши ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Запутанный интерфейс ;

Невозможно перенастроить «горячие» клавиши ;

Microsoft Visio Главная проблема Visio — сам Visio Не заточен под проектирование интерфейсов ; Запутанный интерфейс ; Невозможно перенастроить «горячие» клавиши ; Сложность работы над большими проектами ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Запутанный интерфейс ;

Невозможно перенастроить «горячие» клавиши ;

Сложность работы над большими проектами ;

Microsoft Visio Главная проблема Visio — сам Visio Не заточен под проектирование интерфейсов ; Запутанный интерфейс ; Невозможно перенастроить «горячие» клавиши ; Сложность работы над большими проектами ; Совместимость работы с дизайнером ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Запутанный интерфейс ;

Невозможно перенастроить «горячие» клавиши ;

Сложность работы над большими проектами ;

Совместимость работы с дизайнером ;

Microsoft Visio Главная проблема Visio — сам Visio Не заточен под проектирование интерфейсов ; Запутанный интерфейс ; Невозможно перенастроить «горячие» клавиши ; Сложность работы над большими проектами ; Совместимость работы с дизайнером ; Эстетически непривлекательные прототипы . www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

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

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

Запутанный интерфейс ;

Невозможно перенастроить «горячие» клавиши ;

Сложность работы над большими проектами ;

Совместимость работы с дизайнером ;

Эстетически непривлекательные прототипы .

Примеры 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;

Adobe Fireworks как решение Неужели спасение? Стандартный интерфейс Adobe; Наличие библиотеки готовых элементов и возможность создавать собственные ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Неужели спасение?

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

Наличие библиотеки готовых элементов и возможность создавать собственные ;

Adobe Fireworks как решение Неужели спасение? Стандартный интерфейс Adobe; Наличие библиотеки готовых элементов и возможность создавать собственные ; Один файл даже для большого проекта ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Неужели спасение?

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

Наличие библиотеки готовых элементов и возможность создавать собственные ;

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

Adobe Fireworks как решение Неужели спасение? Стандартный интерфейс Adobe; Наличие библиотеки готовых элементов и возможность создавать собственные ; Один файл даже для большого проекта ; Выравнивание объектов и направляющие ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Неужели спасение?

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

Наличие библиотеки готовых элементов и возможность создавать собственные ;

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

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

Adobe Fireworks как решение Неужели спасение? Стандартный интерфейс Adobe; Наличие библиотеки готовых элементов и возможность создавать собственные ; Один файл даже для большого проекта ; Выравнивание объектов и направляющие ; Масштаб 1:1 ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Неужели спасение?

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

Наличие библиотеки готовых элементов и возможность создавать собственные ;

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

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

Масштаб 1:1 ;

Adobe Fireworks как решение Неужели спасение? Стандартный интерфейс Adobe; Наличие библиотеки готовых элементов и возможность создавать собственные ; Один файл даже для большого проекта ; Выравнивание объектов и направляющие ; Масштаб 1:1 ; Возможность независимо менять размер каждой страницы ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Неужели спасение?

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

Наличие библиотеки готовых элементов и возможность создавать собственные ;

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

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

Масштаб 1:1 ;

Возможность независимо менять размер каждой страницы ;

Adobe Fireworks как решение Неужели спасение? Стандартный интерфейс Adobe; Наличие библиотеки готовых элементов и возможность создавать собственные ; Один файл даже для большого проекта ; Выравнивание объектов и направляющие ; Масштаб 1:1 ; Возможность независимо менять размер каждой страницы ; Эстетически привлекательные прототипы ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Неужели спасение?

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

Наличие библиотеки готовых элементов и возможность создавать собственные ;

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

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

Масштаб 1:1 ;

Возможность независимо менять размер каждой страницы ;

Эстетически привлекательные прототипы ;

Adobe Fireworks как решение Неужели спасение? Стандартный интерфейс Adobe; Наличие библиотеки готовых элементов и возможность создавать собственные ; Один файл даже для большого проекта ; Выравнивание объектов и направляющие ; Масштаб 1:1 ; Возможность независимо менять размер каждой страницы ; Эстетически привлекательные прототипы ; Один инструмент для проектировщика и дизайнера ; www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Неужели спасение?

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

Наличие библиотеки готовых элементов и возможность создавать собственные ;

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

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

Масштаб 1:1 ;

Возможность независимо менять размер каждой страницы ;

Эстетически привлекательные прототипы ;

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

Adobe Fireworks как решение Неужели спасение? Стандартный интерфейс Adobe; Наличие библиотеки готовых элементов и возможность создавать собственные ; Один файл даже для большого проекта ; Выравнивание объектов и направляющие ; Масштаб 1:1 ; Возможность независимо менять размер каждой страницы ; Эстетически привлекательные прототипы ; Один инструмент для проектировщика и дизайнера ; И так далее… www.uimodeling.ru Постановка проблемы | Где мы искали спасение? | Adobe Fireworks как решение | Что в итоге?

Неужели спасение?

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

Наличие библиотеки готовых элементов и возможность создавать собственные ;

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

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

Масштаб 1:1 ;

Возможность независимо менять размер каждой страницы ;

Эстетически привлекательные прототипы ;

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

И так далее…

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.com www.boxesandarrows.com www.amazedev.com/prototipirovanie-web-proektov-sobiraya-voedino www.usethics.ru/lib/indesign_prototyping.html www.birzool.com/wiresoft/ www.guicci.ru/2006/12/08/axure-rp-pro-sredstvo-dlya-prototipirovaniya/ и многие другие Александр Хмелевский [email_address] www.axme.ru www.uimodeling.ru