Adobe Fireworks как единый инструмент проектировщика и дизайнера интерфейсов Александр Хмелевский Лев Эйдинов UI Modeling Company

www.uimodeling.ru О чем доклад? 1. Постановка проблемы Чем плохо сочетание MS Visio/Adobe Photoshop ? Почему мы икали альтернативу?

www.uimodeling.ru О чем доклад? 1. Постановка проблемы Чем плохо сочетание MS Visio/Adobe Photoshop ? Почему мы икали альтернативу? 2. Adobe Fireworks как решение Процесс взаимодействия проектировщика и дизайнера при работе с Adobe Fireworks .

www.uimodeling.ru О чем доклад? 1. Постановка проблемы Чем плохо сочетание MS Visio/Adobe Photoshop ? Почему мы икали альтернативу? 2. Adobe Fireworks как решение Процесс взаимодействия проектировщика и дизайнера при работе с Adobe Fireworks . 3. Работа в Adobe Fireworks К раткий обзор функциональности.

www.uimodeling.ru Сочетание Visio/Photoshop

www.uimodeling.ru Сочетание Visio/Photoshop Почему мы искали альтернативу ? Разные форматы файлов ;

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

Разные форматы файлов ;

www.uimodeling.ru Сочетание Visio/Photoshop Почему мы искали альтернативу ? Разные форматы файлов ; Приходится практически заново создавать все объекты уже спроектированного интерфейса ;

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

Разные форматы файлов ;

Приходится практически заново создавать все объекты уже спроектированного интерфейса ;

www.uimodeling.ru Сочетание Visio/Photoshop Почему мы искали альтернативу ? Разные форматы файлов ; Приходится практически заново создавать все объекты уже спроектированного интерфейса ; Проблематичность внесения изменений в интерфейс ;

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

Разные форматы файлов ;

Приходится практически заново создавать все объекты уже спроектированного интерфейса ;

Проблематичность внесения изменений в интерфейс ;

www.uimodeling.ru Сочетание Visio/Photoshop Почему мы искали альтернативу ? Разные форматы файлов ; Приходится практически заново создавать все объекты уже спроектированного интерфейса ; Проблематичность внесения изменений в интерфейс ; Усложненный процесс взаимодействия дизайнера и проектировщика ;

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

Разные форматы файлов ;

Приходится практически заново создавать все объекты уже спроектированного интерфейса ;

Проблематичность внесения изменений в интерфейс ;

Усложненный процесс взаимодействия дизайнера и проектировщика ;

www.uimodeling.ru Сочетание Visio/Photoshop Почему мы искали альтернативу ? Разные форматы файлов ; Приходится практически заново создавать все объекты уже спроектированного интерфейса ; Проблематичность внесения изменений в интерфейс ; Усложненный процесс взаимодействия дизайнера и проектировщика ; Постоянное переключение между двумя разными программами при работе дизайнера ;

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

Разные форматы файлов ;

Приходится практически заново создавать все объекты уже спроектированного интерфейса ;

Проблематичность внесения изменений в интерфейс ;

Усложненный процесс взаимодействия дизайнера и проектировщика ;

Постоянное переключение между двумя разными программами при работе дизайнера ;

www.uimodeling.ru Сочетание Visio/Photoshop Почему мы искали альтернативу ? Разные форматы файлов ; Приходится практически заново создавать все объекты уже спроектированного интерфейса ; Проблематичность внесения изменений в интерфейс ; Усложненный процесс взаимодействия дизайнера и проектировщика ; Постоянное переключение между двумя разными программами при работе дизайнера ; Visio нет под MacOS.

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

Разные форматы файлов ;

Приходится практически заново создавать все объекты уже спроектированного интерфейса ;

Проблематичность внесения изменений в интерфейс ;

Усложненный процесс взаимодействия дизайнера и проектировщика ;

Постоянное переключение между двумя разными программами при работе дизайнера ;

Visio нет под MacOS.

www.uimodeling.ru Adobe Fireworks как решение

www.uimodeling.ru Adobe Fireworks как решение Мы нашли выход? Одна программа для работы проектировщика и дизайнера ;

Мы нашли выход?

Одна программа для работы проектировщика и дизайнера ;

www.uimodeling.ru Adobe Fireworks как решение Мы нашли выход? Одна программа для работы проектировщика и дизайнера ; Стандартный интерфейс Adobe;

Мы нашли выход?

Одна программа для работы проектировщика и дизайнера ;

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

www.uimodeling.ru Adobe Fireworks как решение Мы нашли выход? Одна программа для работы проектировщика и дизайнера ; Стандартный интерфейс Adobe; Единый файл для работы проектировщика и дизайнера ;

Мы нашли выход?

Одна программа для работы проектировщика и дизайнера ;

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

Единый файл для работы проектировщика и дизайнера ;

www.uimodeling.ru Adobe Fireworks как решение Мы нашли выход? Одна программа для работы проектировщика и дизайнера ; Стандартный интерфейс Adobe; Единый файл для работы проектировщика и дизайнера ; Дизайнеру не нужно перерисовывать объекты интерфейса ;

Мы нашли выход?

Одна программа для работы проектировщика и дизайнера ;

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

Единый файл для работы проектировщика и дизайнера ;

Дизайнеру не нужно перерисовывать объекты интерфейса ;

www.uimodeling.ru Adobe Fireworks как решение Мы нашли выход? Одна программа для работы проектировщика и дизайнера ; Стандартный интерфейс Adobe; Единый файл для работы проектировщика и дизайнера ; Дизайнеру не нужно перерисовывать объекты интерфейса ; Интеграция с Adobe Photoshop;

Мы нашли выход?

Одна программа для работы проектировщика и дизайнера ;

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

Единый файл для работы проектировщика и дизайнера ;

Дизайнеру не нужно перерисовывать объекты интерфейса ;

Интеграция с Adobe Photoshop;

www.uimodeling.ru Adobe Fireworks как решение Мы нашли выход? Одна программа для работы проектировщика и дизайнера ; Стандартный интерфейс Adobe; Единый файл для работы проектировщика и дизайнера ; Дизайнеру не нужно перерисовывать объекты интерфейса ; Интеграция с Adobe Photoshop; Возможность быстро вносить изменения в спроектированный интерфейс на стадии дизайна.

Мы нашли выход?

Одна программа для работы проектировщика и дизайнера ;

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

Единый файл для работы проектировщика и дизайнера ;

Дизайнеру не нужно перерисовывать объекты интерфейса ;

Интеграция с Adobe Photoshop;

Возможность быстро вносить изменения в спроектированный интерфейс на стадии дизайна.

www.uimodeling.ru Работа в Adobe Fireworks

www.uimodeling.ru Работа в Adobe Fireworks Краткий обзор функциональности Многостраничные документы ;

Краткий обзор функциональности

Многостраничные документы ;

www.uimodeling.ru Многостраничные документы Fireworks позволяет создавать многостраничные документы. Каждая страница пронумерована, ей можно задать своё имя, можно менять порядок страниц.

www.uimodeling.ru Работа в Adobe Fireworks Краткий обзор функциональности Многостраничные документы ; Шаблон страницы ;

Краткий обзор функциональности

Многостраничные документы ;

Шаблон страницы ;

www.uimodeling.ru Шаблон страницы Шаблон позволяет создавать элементы, которые будут присутствовать на всех страницах документа. Например, ссылки на карту сайта и форму обратной связи в верхней части страницы.

www.uimodeling.ru Работа в Adobe Fireworks Краткий обзор функциональности Многостраничные документы ; Шаблон страницы ; Общие слои — уменьшаем размер файлов и другие плюсы ;

Краткий обзор функциональности

Многостраничные документы ;

Шаблон страницы ;

Общие слои — уменьшаем размер файлов и другие плюсы ;

www.uimodeling.ru Общие слои Shared Layers — очень удобная функция. Позволяет размещать однотипные элементы интерфейса на нескольких страницах одновременно. При этом все изменения вносимые в элемент так же будут отображаться на всех страницах, на которых он расположен. Кроме того, использование «Общих слоев» значительно уменьшает размер файла и ресурсоемкость программы.

www.uimodeling.ru Работа в Adobe Fireworks Краткий обзор функциональности Многостраничные документы ; Шаблон страницы ; Общие слои — уменьшаем размер файлов и другие плюсы ; Создание символов. Что такое 9 slices и чем они полезны ?

Краткий обзор функциональности

Многостраничные документы ;

Шаблон страницы ;

Общие слои — уменьшаем размер файлов и другие плюсы ;

Создание символов. Что такое 9 slices и чем они полезны ?

www.uimodeling.ru Создание символов. Что такое 9 slices и чем они полезны? Символы в Fireworks реализованы точно так же как и во Flash . Технология 9 slices позволяет менять размер элемента не ухудшая его качество.

www.uimodeling.ru Работа в Adobe Fireworks Краткий обзор функциональности Многостраничные документы ; Шаблон страницы ; Общие слои — уменьшаем размер файлов и другие плюсы ; Создание символов. Что такое 9 slices и чем они полезны ? Символы с изменяемыми параметрами (Rich Symbols);

Краткий обзор функциональности

Многостраничные документы ;

Шаблон страницы ;

Общие слои — уменьшаем размер файлов и другие плюсы ;

Создание символов. Что такое 9 slices и чем они полезны ?

Символы с изменяемыми параметрами (Rich Symbols);

www.uimodeling.ru Символы с изменяемыми параметрами ( Rich Symbols ) Вставляем символ в документ.

www.uimodeling.ru Символы с изменяемыми параметрами ( Rich Symbols ) Изменяем параметры.

www.uimodeling.ru Символы с изменяемыми параметрами ( Rich Symbols ) Получаем результат.

www.uimodeling.ru Работа в Adobe Fireworks Краткий обзор функциональности Многостраничные документы ; Шаблон страницы ; Общие слои — уменьшаем размер файлов и другие плюсы ; Создание символов. Что такое 9 slices и чем они полезны ? Символы с изменяемыми параметрами (Rich Symbols); Библиотека готовых элементов ;

Краткий обзор функциональности

Многостраничные документы ;

Шаблон страницы ;

Общие слои — уменьшаем размер файлов и другие плюсы ;

Создание символов. Что такое 9 slices и чем они полезны ?

Символы с изменяемыми параметрами (Rich Symbols);

Библиотека готовых элементов ;

www.uimodeling.ru Библиотека готовых элементов В Fireworks есть библиотека готовых интерфейсных элементов. Кроме того, можно создавать свои библиотеки и использовать их в нескольких проектах. Реализована функция не очень удобно, но тем не менее крайне полезна и значительно увеличивает скорость работы.

www.uimodeling.ru Работа в Adobe Fireworks Краткий обзор функциональности Многостраничные документы ; Шаблон страницы ; Общие слои — уменьшаем размер файлов и другие плюсы ; Создание символов. Что такое 9 slices и чем они полезны ? Символы с изменяемыми параметрами (Rich Symbols); Библиотека готовых элементов ; Выравнивание объектов при помощи Smart Guides;

Краткий обзор функциональности

Многостраничные документы ;

Шаблон страницы ;

Общие слои — уменьшаем размер файлов и другие плюсы ;

Создание символов. Что такое 9 slices и чем они полезны ?

Символы с изменяемыми параметрами (Rich Symbols);

Библиотека готовых элементов ;

Выравнивание объектов при помощи Smart Guides;

www.uimodeling.ru Выравнивание объектов при помощи Smart Guides SmartGuides позволяют выравнивать объекты относительно друг друга без использования панели Align.

www.uimodeling.ru Работа в Adobe Fireworks Краткий обзор функциональности Многостраничные документы ; Шаблон страницы ; Общие слои — уменьшаем размер файлов и другие плюсы ; Создание символов. Что такое 9 slices и чем они полезны ? Символы с изменяемыми параметрами (Rich Symbols); Библиотека готовых элементов ; Выравнивание объектов при помощи Smart Guides; Стили — лучше чем ничего, но не идеальны (Styles) .

Краткий обзор функциональности

Многостраничные документы ;

Шаблон страницы ;

Общие слои — уменьшаем размер файлов и другие плюсы ;

Создание символов. Что такое 9 slices и чем они полезны ?

Символы с изменяемыми параметрами (Rich Symbols);

Библиотека готовых элементов ;

Выравнивание объектов при помощи Smart Guides;

Стили — лучше чем ничего, но не идеальны (Styles) .

www.uimodeling.ru Стили ( Styles) После внесения изменений в элемент, применяющий конкретный стиль, это изменение можно назначить остальным элементам, использующим этот стиль. Стили могут применяться не только к тексту, но и к графическим объектам. Каждому стилю можно задать свое название. Реализована панель в виде графического превью стилей.

www.uimodeling.ru Не стоит строить иллюзий

www.uimodeling.ru Не стоит строить иллюзий Все таки есть существенные проблемы Немереный аппетит к оперативной памяти ;

Все таки есть существенные проблемы

Немереный аппетит к оперативной памяти ;

www.uimodeling.ru Не стоит строить иллюзий Все таки есть существенные проблемы Немереный аппетит к оперативной памяти ; Глюки интерфейса ;

Все таки есть существенные проблемы

Немереный аппетит к оперативной памяти ;

Глюки интерфейса ;

www.uimodeling.ru Не стоит строить иллюзий Все таки есть существенные проблемы Немереный аппетит к оперативной памяти ; Глюки интерфейса ; Не слишком серьезное отношение Adobe к продукту ;

Все таки есть существенные проблемы

Немереный аппетит к оперативной памяти ;

Глюки интерфейса ;

Не слишком серьезное отношение Adobe к продукту ;

www.uimodeling.ru Не стоит строить иллюзий Все таки есть существенные проблемы Немереный аппетит к оперативной памяти ; Глюки интерфейса ; Не слишком серьезное отношение Adobe к продукту ; Неудобство работы со стилями ;

Все таки есть существенные проблемы

Немереный аппетит к оперативной памяти ;

Глюки интерфейса ;

Не слишком серьезное отношение Adobe к продукту ;

Неудобство работы со стилями ;

www.uimodeling.ru Не стоит строить иллюзий Все таки есть существенные проблемы Немереный аппетит к оперативной памяти ; Глюки интерфейса ; Не слишком серьезное отношение Adobe к продукту ; Неудобство работы со стилями ; Неудобство работы с библиотекой элементов ;

Все таки есть существенные проблемы

Немереный аппетит к оперативной памяти ;

Глюки интерфейса ;

Не слишком серьезное отношение Adobe к продукту ;

Неудобство работы со стилями ;

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

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

Все таки есть существенные проблемы

Немереный аппетит к оперативной памяти ;

Глюки интерфейса ;

Не слишком серьезное отношение Adobe к продукту ;

Неудобство работы со стилями ;

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

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

www.uimodeling.ru Не стоит строить иллюзий Все таки есть существенные проблемы Немереный аппетит к оперативной памяти ; Глюки интерфейса ; Не слишком серьезное отношение Adobe к продукту ; Неудобство работы со стилями ; Неудобство работы с библиотекой элементов ; Сложность создания редактируемых символов ; …

Все таки есть существенные проблемы

Немереный аппетит к оперативной памяти ;

Глюки интерфейса ;

Не слишком серьезное отношение Adobe к продукту ;

Неудобство работы со стилями ;

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

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

…

Спасибо! www.uimodeling.ru Александр Хмелевский [email_address] www.axme.ru Лев Эйдинов [email_address] www.eidinov.ru