Die Photoshop, die!

Современные технологии позволяют разработчикам создавать удивительные отзывчивые сайты, браузерные и даже мобильные приложения. Как же запечатлеть всю эту динамику на статичном холсте? И стоит ли? Почему дизайнеру важно знать хотя бы немного о верстке, а верстальщику иметь представление о процессе дизайна? Ответы на все вопросы в рассказе об актуальном подходе «Без фотошопа».

Transcript

1. DIE PHOTOSHOP, DIE! СТОИТ ЛИ ПРОПУСКАТЬ __ В ПРОЦЕССЕ РАЗРАБОТКИ ДИЗАЙНА или Илья  Пухальский, EPAM  Systems
2. @witchfinderx 2
3. О чем будет идти речь? 3
4. 1. Мощь веба 2. Процесс разработки дизайна. 3. Проблемы старого подхода. Что же делать? 4. Достоинства и недостатки такого подхода. 5. И напоследок... 4
6. Мощь веба 6
8. HTML5 and friends! 8
9. MOZILLA POPCORN http://maker.mozillapopcorn.org/ 9
10. RUMPETROLL GAME http://rumpetroll.com 10
11. FIREFOX OS http://www.mozilla.org/en-US/firefoxos/ 11
12. FIREFOX OS http://www.mozilla.org/en-US/firefoxos/ 12
13. FIREFOX OS: ЗВОНКИ http://www.mozilla.org/en-US/firefoxos/ 13
14. FIREFOX OS: СООБЩЕНИЯ http://www.mozilla.org/en-US/firefoxos/ 14
16. SINGLE ELEMENT MACBOOK http://dribbble.com/shots/685851-Single-Element-CSS-Macbook-Pro 16
17. REVEAL.JS http://lab.hakim.se/reveal-js/ 17
18. RISE OF MOBILE 18
20. 800x600, 1024x768, ... 20
21. КОНТЕКСТ ВЗАИМОДЕЙСТВИЯ 21
22. КОНТЕКСТ ВЗАИМОДЕЙСТВИЯ СЕГОДНЯ 22
24. 29 июня 2007 24
27. К 2015-ому году количество пользователей мобильного интернета будет превышать количество пользователей с десктопа http://mobithinking.com/mobile-­‐marketing-­‐tools/latest-­‐mobile-­‐stats 27
29. Процесс разработки 29
30. Анализ Проектирование Разработка Внедрение Спасибо, Этан Маркотт и Энди Кларк 30
31. Анализ Проектирование Разработка Внедрение 31
32. Анализ Проектирование Разработка Внедрение 32
33. И в чем проблема? 33
35. Холст имеет жесткие рамки 35
36. Результат статичен 36
37. Photoshop сложен в освоении 37
38. Акцент на внешний вид и расфокусировка на детали 38
39. Проблемы со шрифтами 39
40. Двойная работа 40
41. PS не учитывает возможности браузеров 41
42. Над макетами сложно работать командой 42
43. — Ох уж этот «макаронник»! Взять нож на перестрелку... 43
44. И что же делать? 44
45. Дизайн не работает, если он отделен от процесса разработки. — Энди Кларк 45
46. Анализ Проектирование Разработка Внедрение 46
47. УСКОРИТЕЛИ УСКОРИТЕЛИ 47
48. CSS-препроцессоры и библиотеки примесей 48
49. FOUNDATION http://foundation.zurb.com 49
50. LESS FRAMEWORK http://lessframework.com 50
51. TWITTER BOOTSTRAP twitter.github.com/bootstrap/ 51
52. GRIDPACK gridpack.com 52
53. TYPECAST beta.typecastapp.com 53
54. LETTERING.JS letteringjs.com 54
55. FITTEXT.JS fittextjs.com 55
56. LIVERELOAD http://livereload.com 56
57. CODEKIT http://incident57.com/codekit/ 57
59. BROWSERSTACK browserstack.com 59
60. Системы контроля версий и платформы 60
61. Достоинства и недостатки подхода 61
62. Достоинства 62
63. Возможность решать проблемы перекомпоновки на лету 63
64. А давайте использовать вместо "прототипировать в браузере" фразу "принимать решения в браузере" — Дэн Молл 64
65. Контент-ориентированность 65
66. Контент предшествует дизайну. При отсутствии контента дизайн является всего лишь украшательством. — Джефри Зельдман 66
67. Экономия времени 67
68. Простота кастомизации и изменений 68
69. Настоящее взаимодействие 69
70. Простота презентации клиенту 70
71. Возможность поставки с самого начала 71
72. Недостатки 72
73. Photoshop – очень старая привычка 73
74. Необходимо уметь программировать 74
75. Плохо работает для eye-candy макетов 75
76. Подход может не работать для клиента 76
77. Клиенты должны быть партнерами. Они не дополнение вашей команды, они и есть ваша команда. — Дэн Молл 77
78. И в заключение 78
79. Пропускать ли в процессе разработки дизайна? 79
80. 42. 80
81. Зависит от контекста. 81
82. Лучший путь: разработка дизайна в браузере и полировка в Photoshop* 82
83. Материалы readlists.com/8d4ee617 83
84. alignedcode.com 84
86. basecamp.com/one-page-project 86
87. talent.itv.com 87
88. ВОПРОСЫ? 88
89. @witchfinderx 89
90. @witchfinderx 89