Данила Ковчий "Homo Universale: куда расти веб-дизайнерам" Я.Субботник в Челябинске в рамках конференции UWDC О докладе: На собственном опыте продемонстрирует, как можно и нужно расширять фронт работы веб-дизайнера; объяснит, какие инструменты, кроме фотошопов, следует освоить любому, кто проектирует веб-интерфейсы.

1. Homo Universale
Куда расти веб-дизайнеру
Данила Ковчий
дизайнер интерфейсов
Я.Субботник, Челябинск, 25 февраля 2012

2. Веб-дизайнер —
человек, непрерывно
ищущий альтернативу
программированию
2

3. Веб-дизайнер?
Нет
Да
Верстать умеешь?
Да
Молодец!
Нет
Рисовать умеешь?
Да
Нет
3

4. Дизайнер должен
разбираться в материале,
с которым работает
4

5. Миф
Реальность
5

6. Миф
Реальность
Не забиваю голову
версткой и мыслю
свободно
6

7. Миф
Реальность
Не забиваю голову Решения — компиляция
версткой и мыслю однажды увиденного;
свободно
сомнения — возможно
ли такое сделать
7

8. Миф
Реальность
Не забиваю голову Решения — компиляция
версткой и мыслю однажды увиденного;
свободно
сомнения — возможно
ли такое сделать
Не трачу время
на верстку, быстро
рисую в фотошопе
8

9. Миф
Реальность
Не забиваю голову Решения — компиляция
версткой и мыслю однажды увиденного;
свободно
сомнения — возможно
ли такое сделать
Не трачу время
Куча времени
на верстку, быстро на обновление элемента
рисую в фотошопе
по всем макетам; плоская
организация элементов в
inDesign
9

10. Миф
Реальность
Не забиваю голову Решения — компиляция
версткой и мыслю однажды увиденного;
свободно
сомнения — возможно
ли такое сделать
Не трачу время
Куча времени
на верстку, быстро на обновление элемента
рисую в фотошопе
по всем макетам; плоская
организация элементов в
inDesign
Я узкий специалист,
которого ценят
10

11. Миф
Реальность
Не забиваю голову Решения — компиляция
версткой и мыслю однажды увиденного;
свободно
сомнения — возможно
ли такое сделать
Не трачу время
Куча времени
на верстку, быстро на обновление элемента
рисую в фотошопе
по всем макетам; плоская
организация элементов в
inDesign
Я узкий специалист,
Правда? Ведь дизайнеров,
которого ценят
как собак нерезаных
11

12. Чего еще лишает
фотошоп:
Реальности
Динамики
Быстрой работы
12

13. Реальность
Это прототип,
который можно потискать,
который поднимет новые вопросы
в логике взаимодействия
13

14. 14

15. Динамика
Когда красиво не только во сне,
но и в реальности
15

16. 16

17. 17

18. 18

19. 19

20. Ссылка
Ссылка
20

21. Ссылка
Ссылка
Ссылка
Ссылка
21

22. Быстрая работа
Таблицы
Списки
Стили текста
Однородные элементы
22

23. Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
23

24. Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
Имя
Должность
Отдел
24

25. Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
25

26. Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
Имя
Должность
Отдел
Зарплата
26

27. Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
27

28. Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
Имя
Зарплата
Отдел
Должность
28

29. Итого:
29

30. XSLT
30

31. Почему XSLT?
31

32. Автомобильные маршруты
32

33. Каждый участок
маршрута вмещает:
Маневр
33

34. Каждый участок
маршрута вмещает:
Ориентир
Маневр
34

35. Каждый участок
маршрута вмещает:
Ориентир
Склеенный маневр
Маневр
35

36. Каждый участок
маршрута вмещает:
Ориентир
Склеенный маневр
Маневр
Панорамы и камеры
36

37. Каждый участок
маршрута вмещает:
Ориентир
Склеенный маневр
Маневр
Панорамы и камеры
Дорожные знаки
37

38. Каждый участок
маршрута вмещает:
Ориентир
Склеенный маневр
Маневр
Пробки
Панорамы и камеры
Дорожные знаки
38

39. Каждый участок
маршрута вмещает:
Название улицы
Ориентир
Склеенный маневр
Маневр
Пробки
Панорамы и камеры
Дорожные знаки
39

40. Каждый участок
маршрута вмещает:
Название улицы
Ориентир
Склеенный маневр
Длина участка
Маневр
Пробки
Панорамы и камеры
Дорожные знаки
40

41. Каждый участок
маршрута вмещает:
Название улицы
Ориентир
Склеенный маневр
Длина участка
Маневр
Пробки
Панорамы и камеры
Режим работы участка и плата за проезд
Дорожные знаки
41

42. Название улицы
Ориентир
Склеенный маневр
Длина участка
Маневр
Пробки
Панорамы и камеры
Режим работы участка и плата за проезд
Дорожные знаки
42

43. cmd + N

44. cmd + N

45. cmd + N

46. cmd + N

47. А что будет если...
А где то?
А где это?
Забыл про знаки
Ты еще не учел ряд ситуаций
Мы еще скоро научимся
Все слиплось,
делать вот это
попробуй разрядить
Что важнее показать?
47

48. 48

49. Название улицы
Ориентир
Склеенный маневр
Длина участка
Маневр
Пробки
Панорамы и камеры
Режим работы участка и плата за проезд
Дорожные знаки
49

50. Маневр
Ориентир
Склеенный маневр
Панорамы и камеры
Дорожные знаки
Пробки
Режим работы участка и плата за проезд
Название улицы
Длина участка
50

51. Маневр тип=перекресток-налево
пробкикрасные/пробки
длина500/
длинаулицаПионерская/
улицаориентирпосле церкви/
ориентирведутся_работы/заметка
тип=платный участок/камера//
Маневр
51

52. Для узла «Маневр», который содержит в себе
атрибут «Камера» выведи иконку камеры
xsl:template match=Маневр
div
xsl:apply-templates/
div
/xsl:template
xsl:template match=Маневр/камера
img src=камера.png/
/xsl:template
52

53. Таким способом было
учтено:
Словарь маневров
Контекстные речевые обороты
Перебор всех наборов атрибутов участка
Вывод чисел с условиями для округления
Несколько вариантов с разными стилями
53

54. 54

55. 55

56. Выборы президента
56

57. 57

58. 58

59. 59

60. 60

61. Почему XSLT?
61

62. Почему XSLT?
Самостоятельная технология
62

63. Почему XSLT?
Самостоятельная технология
Реализует логику вывода любой сложности
63

64. Почему XSLT?
Самостоятельная технология
Реализует логику вывода любой сложности
Собирает шаблоны в структуру
64

65. Почему XSLT?
Самостоятельная технология
Реализует логику вывода любой сложности
Собирает шаблоны в структуру
Организует мышление
65

66. Почему XSLT?
Самостоятельная технология
Реализует логику вывода любой сложности
Собирает шаблоны в структуру
Организует мышление
Данные встают на первое место
66

68. Данила Ковчий
дизайнер интерфейсов
@kovchiy