31
Субботник, Москва, 3 июля 2010 года Разработчик интерфейсов Вадим Пацев Fireworks как инструмент проектирования четверг, 1 июля 2010 г.

Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

  • Upload
    yandex

  • View
    526

  • Download
    1

Embed Size (px)

DESCRIPTION

3 июля 2010 года, Я.Субботник в Москве Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Citation preview

Page 1: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Субботник, Москва, 3 июля 2010 года

Разработчик интерфейсовВадим Пацев

Fireworks как инструмент проектирования

четверг, 1 июля 2010 г.

Page 2: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

2

Картина мира

четверг, 1 июля 2010 г.

Page 3: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

3Инструмент

Картина мира

четверг, 1 июля 2010 г.

Page 4: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

4

Проектирование интерфейсов = прототипирование.

Быстро показать, как ведет себя интерфейс, заинтересованным лицам.

Не писать длинных и сложных описаний при постановке задач на производство.

Прототипирование

четверг, 1 июля 2010 г.

Page 5: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

5

Мыслим блоками

четверг, 1 июля 2010 г.

Page 6: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

6

Мыслим блоками

четверг, 1 июля 2010 г.

Page 7: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Каждая страница - набор блоков.

Блоки независимы и могут использоваться отдельно на других страницах.

...и на других проектах.

7

Мыслим блоками

четверг, 1 июля 2010 г.

Page 8: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

8

— Несколько страниц в одном документе.

— Общие блоки на страницах.

— Показать поведение блоков.

— Удобные структурные изменения.

— Удобное расширение прототипа.

Чего хочется?

четверг, 1 июля 2010 г.

Page 9: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Инструменты проектирования

Тысячи их!

9

четверг, 1 июля 2010 г.

Page 10: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Инструменты проектирования

Тысячи их!

10

четверг, 1 июля 2010 г.

Page 11: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Инструменты проектирования

Тысячи их!

11

четверг, 1 июля 2010 г.

Page 12: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Инструменты проектирования

Тысячи их!

12

четверг, 1 июля 2010 г.

Page 13: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Инструменты проектирования

Тысячи их!

13

четверг, 1 июля 2010 г.

Page 14: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Инструмент

14

четверг, 1 июля 2010 г.

Page 15: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

15

vs

четверг, 1 июля 2010 г.

Page 16: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Проектирование и макетирование Рисование и ретушь.

16

СпецификаFireworks vs Photoshop

четверг, 1 июля 2010 г.

Page 17: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Часто падает Редко падает

Fireworks vs Photoshop

17

Стабильность

четверг, 1 июля 2010 г.

Page 18: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

LayersНельзя выделить слои

простым выделением на странице.

Fireworks vs Photoshop

18

Структурные изменения

четверг, 1 июля 2010 г.

Page 19: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

А теперь, печеньки!

19

четверг, 1 июля 2010 г.

Page 20: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Pages Layer comps

Fireworks vs Photoshop

20

Несколько страниц в одном макете

четверг, 1 июля 2010 г.

Page 21: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Symbols

Common library

JSF

Smart objects.

Fireworks vs Photoshop

21

Общие блоки

четверг, 1 июля 2010 г.

Page 22: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

States

Интерактивные прототипы

Копии групп слоев (sic!)

Fireworks vs Photoshop

22

Поведение интерфейса

четверг, 1 июля 2010 г.

Page 23: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

$299 $999

Fireworks vs Photoshop

23

Цена

четверг, 1 июля 2010 г.

Page 24: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

24

Победитель

четверг, 1 июля 2010 г.

Page 25: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

25

— Выделить все страницы.

— Выделить состояния страниц.

— Общие блоки для нескольких страниц сделать символами.

— ???

— PROFIT

Ok, Fireworks. С чего начать?

четверг, 1 июля 2010 г.

Page 26: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

26

Картину мира близкой к картине мира HTML верстальщика.

Готовую, расширяемую структуру проекта в одном файле, без каши групп и слоев.

Коллекцию блоков, c каждым из которых можно работать отдельно.

И что мы получили?

четверг, 1 июля 2010 г.

Page 27: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Но это все неважно

27

четверг, 1 июля 2010 г.

Page 28: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

28

vs

четверг, 1 июля 2010 г.

Page 29: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

29

Единая предметная область и картина мира для дизайнера/проектировщика и верстальщика.

=четверг, 1 июля 2010 г.

Page 30: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Спасибо

30

четверг, 1 июля 2010 г.

Page 31: Вадим Пацев "Adobe Fireworks как инструмент для проектирования интерфейсов"

Вадим ПацевРазработчик интерфейсов

[email protected]

Twitter: @basvasilich

четверг, 1 июля 2010 г.