Программистский подход в дизайне

23
1 Сергей Павельчук pavelchuk.ru Программистский подход в дизайне Чему дизайнер может научиться у программиста?
  • Upload

    ux
  • Category

    Software

  • view

    4.449
  • download

    5

Transcript of Программистский подход в дизайне

Page 1: Программистский подход в дизайне

1

Сергей Павельчук

pavelchuk.ru

Программистский подход в дизайнеЧему дизайнер может научиться у программиста?

Page 2: Программистский подход в дизайне

2

Обо мне

• Говорить не будем

Page 3: Программистский подход в дизайне

3

Внимание вопрос

Кто такие программисты?

Что мы о них знаем?

Page 4: Программистский подход в дизайне

4

Определяем проблему

В чем главное зло для программиста?

Page 5: Программистский подход в дизайне

5

Page 6: Программистский подход в дизайне

6

«Говнокод» в дизайне

Page 7: Программистский подход в дизайне

7

Решаемо!

Как же быть хорошим?

Что делают для этого программисты?

Page 8: Программистский подход в дизайне

8

Над чем обычно думают программисты?

• Архитектура

• Чистота кода

• Контроль версий

• Код-ревью

• Тестирование

• ООП

• Framework

Page 9: Программистский подход в дизайне

9

Архитектура• Иерархия страниц

• Связи, переходы, превращения

• Слои на одной странице VS разные страницы

Page 1 Page 2

Page 3Layer 3

Layer 2Layer 1

Page 10: Программистский подход в дизайне

10

Чистота кода• Названия элементов

• Иерархия слоев

• Комментарии

• Оптимизация

Page 11: Программистский подход в дизайне

11

Контроль версий• SVN, Mercurial, GitHub, Bitbucket

• Коммиты, чекины, откатиться

• Axure Back-Up

• Adobe CC

• Внешний SVN

Page 12: Программистский подход в дизайне

12

Код-ревью

• Сам

• Коллеги по цеху

• Коллеги не по цеху• Друзья

• Даже коты

Page 13: Программистский подход в дизайне

13

Тестирование

• Test Cases

• Идеально - до начала работы

• Ключевые моменты:

Элементы

Действия

Результат

Page 14: Программистский подход в дизайне

14

ООП• Объекты (элементы, слои, мастера)

• Вложенность

• Наследование

• Типизация

• Переиспользование

• и т.д.

Page 15: Программистский подход в дизайне

15

Framework• Библиотеки элементов:

Внешние

Внутренние

Page 16: Программистский подход в дизайне

16

Как это использовать?(парочка примеров)

Page 17: Программистский подход в дизайне

17

Самое простое - Axure Back-Up

Page 18: Программистский подход в дизайне

18

Архитектура• Логика структуры и названия элементов: любая - важно соблюдение!

Page 19: Программистский подход в дизайне

19

Axure библиотеки (аналог фреймворка)

• Готовые http://www.axure.com/community/widget-libraries

Page 20: Программистский подход в дизайне

20

Axure библиотеки (аналог фреймворка)Создать свою библиотеку: Стили, Поля, Переменные

Page 21: Программистский подход в дизайне

21

Axure библиотеки (аналог фреймворка)

Page 22: Программистский подход в дизайне

22

Мастера в Axure (переиспользование)

Page 23: Программистский подход в дизайне

Спасибо за внимание!

Дружба побеждает!

www.pavelchuk.ru