A.Khmelevsky & L.Eidinov — Wireframing and designing in Adobe Fireworks
48
Adobe Fireworks как единый инструмент проектировщика и дизайнера интерфейсов Александр Хмелевский Лев Эйдинов UI Modeling Company
-
Upload
alexander-khmelevsky -
Category
Design
-
view
7.443 -
download
1
description
Презентация нашего выступления на ClientTech 2008 на тему «Adobe Fireworks как единый инструмент проектировщика и дизайнера интерфейсов». Александр Хмелевский и Лев Эйдинов
Transcript of A.Khmelevsky & L.Eidinov — Wireframing and designing in Adobe Fireworks
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.
www.uimodeling.ru
Adobe Fireworks как решение
www.uimodeling.ru
Adobe Fireworks как решениеМы нашли выход?
• Одна программа для работы проектировщика и дизайнера;
www.uimodeling.ru
Adobe Fireworks как решениеМы нашли выход?
• Одна программа для работы проектировщика и дизайнера;• Стандартный интерфейс Adobe;
www.uimodeling.ru
Adobe Fireworks как решениеМы нашли выход?
• Одна программа для работы проектировщика и дизайнера;• Стандартный интерфейс Adobe;• Единый файл для работы проектировщика и дизайнера;
www.uimodeling.ru
Adobe Fireworks как решениеМы нашли выход?
• Одна программа для работы проектировщика и дизайнера;• Стандартный интерфейс Adobe;• Единый файл для работы проектировщика и дизайнера;• Дизайнеру не нужно перерисовывать объекты интерфейса;
www.uimodeling.ru
Adobe Fireworks как решениеМы нашли выход?
• Одна программа для работы проектировщика и дизайнера;• Стандартный интерфейс Adobe;• Единый файл для работы проектировщика и дизайнера;• Дизайнеру не нужно перерисовывать объекты интерфейса;• Интеграция с Adobe Photoshop;
www.uimodeling.ru
Adobe Fireworks как решениеМы нашли выход?
• Одна программа для работы проектировщика и дизайнера;• Стандартный интерфейс 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Краткий обзор функциональности
• Многостраничные документы;• Шаблон страницы;• Общие слои — уменьшаем размер файлов и другие плюсы;• Создание символов. Что такое 9slices и чем они полезны?
www.uimodeling.ru
Создание символов. Что такое 9slices и чем они полезны?
Символы в Fireworks реализованы точно так же как и во Flash. Технология 9slices позволяет менять размер элемента не ухудшая его качество.
www.uimodeling.ru
Работа в Adobe FireworksКраткий обзор функциональности
• Многостраничные документы;• Шаблон страницы;• Общие слои — уменьшаем размер файлов и другие плюсы;• Создание символов. Что такое 9slices и чем они полезны?• Символы с изменяемыми параметрами (Rich Symbols);
www.uimodeling.ru
Символы с изменяемыми параметрами (Rich Symbols)
Вставляем символ в документ.
www.uimodeling.ru
Символы с изменяемыми параметрами (Rich Symbols)
Изменяем параметры.
www.uimodeling.ru
Символы с изменяемыми параметрами (Rich Symbols)
Получаем результат.
www.uimodeling.ru
Работа в Adobe FireworksКраткий обзор функциональности
• Многостраничные документы;• Шаблон страницы;• Общие слои — уменьшаем размер файлов и другие плюсы;• Создание символов. Что такое 9slices и чем они полезны?• Символы с изменяемыми параметрами (Rich Symbols);• Библиотека готовых элементов;
www.uimodeling.ru
Библиотека готовых элементов
В Fireworks есть библиотека готовых интерфейсных элементов. Кроме того, можно создавать свои библиотеки и использовать их в нескольких проектах. Реализована функция не очень удобно, но тем не менее крайне полезна и значительно увеличивает скорость работы.
www.uimodeling.ru
Работа в Adobe FireworksКраткий обзор функциональности
• Многостраничные документы;• Шаблон страницы;• Общие слои — уменьшаем размер файлов и другие плюсы;• Создание символов. Что такое 9slices и чем они полезны?• Символы с изменяемыми параметрами (Rich Symbols);• Библиотека готовых элементов;• Выравнивание объектов при помощи Smart Guides;
www.uimodeling.ru
Выравнивание объектов при помощи Smart Guides
SmartGuides позволяют выравнивать объекты относительно друг друга без использования панели Align.
www.uimodeling.ru
Работа в Adobe FireworksКраткий обзор функциональности
• Многостраничные документы;• Шаблон страницы;• Общие слои — уменьшаем размер файлов и другие плюсы;• Создание символов. Что такое 9slices и чем они полезны?• Символы с изменяемыми параметрами (Rich Symbols);• Библиотека готовых элементов;• Выравнивание объектов при помощи Smart Guides;• Стили — лучше чем ничего, но не идеальны (Styles).
www.uimodeling.ru
Стили (Styles)
После внесения изменений в элемент, применяющий конкретный стиль, это изменение можно назначить остальным элементам, использующим этот стиль. Стили могут применяться не только к тексту, но и к графическим объектам. Каждому стилю можно задать свое название. Реализована панель в виде графического превью стилей.
www.uimodeling.ru
Не стоит строить иллюзий
www.uimodeling.ru
Не стоит строить иллюзийВсе таки есть существенные проблемы
• Немереный аппетит к оперативной памяти;
www.uimodeling.ru
Не стоит строить иллюзийВсе таки есть существенные проблемы
• Немереный аппетит к оперативной памяти;• Глюки интерфейса;
www.uimodeling.ru
Не стоит строить иллюзийВсе таки есть существенные проблемы
• Немереный аппетит к оперативной памяти;• Глюки интерфейса;• Не слишком серьезное отношение Adobe к продукту;
www.uimodeling.ru
Не стоит строить иллюзийВсе таки есть существенные проблемы
• Немереный аппетит к оперативной памяти;• Глюки интерфейса;• Не слишком серьезное отношение Adobe к продукту;• Неудобство работы со стилями;
www.uimodeling.ru
Не стоит строить иллюзийВсе таки есть существенные проблемы
• Немереный аппетит к оперативной памяти;• Глюки интерфейса;• Не слишком серьезное отношение Adobe к продукту;• Неудобство работы со стилями;• Неудобство работы с библиотекой элементов;
www.uimodeling.ru
Не стоит строить иллюзийВсе таки есть существенные проблемы
• Немереный аппетит к оперативной памяти;• Глюки интерфейса;• Не слишком серьезное отношение Adobe к продукту;• Неудобство работы со стилями;• Неудобство работы с библиотекой элементов;• Сложность создания редактируемых символов;
www.uimodeling.ru
Не стоит строить иллюзийВсе таки есть существенные проблемы
• Немереный аппетит к оперативной памяти;• Глюки интерфейса;• Не слишком серьезное отношение Adobe к продукту;• Неудобство работы со стилями;• Неудобство работы с библиотекой элементов;• Сложность создания редактируемых символов;• …
