Огонь. Молоты. Таланты. Дизайн-тренинг.

Материалы двухдневного интенсива по креативным методикам в интерактивном дизайне. Веб-дизайн и разработка приложений. Генерация идей, проектная организация, эфективная работа и решение маркетинговых задач средствами интерактивных медиа.

Transcript

1. дмитрий карпов 2012
2. дмитрий карпов 2012 15-16 сентября. Екатеринбург тренировка креативности в веб-дизайне и новых цифровых медиа, «курс-бестселлер» для практикующих профессионалов, дизайнеров и UX специалистов из комбинации оригинальных методик и известных практик digital
3. дмитрий карпов 2012 Часть номер ноль: «Ты что с Урала?» Часть первая: «Digital технология перемен» Часть вторая: Workshop «Огонь и молоты» Впервые в истории глобальные перемены могут происходить с достаточной скоростью, чтобы такое понимание стало возможным для всего общества в целом. Раньше провозвестниками такого рода просветления были первым делом творцы, у которых была сила — а также смелость — провидца, чтобы слышать истинный язык внешнего мира и связывать его с миром внутренним. Маршалл Маклюэн
4. дмитрий карпов 2012 Знакомимся. Люди и интерактивная среда, сайты, приложения, сервисы, устройства
5. дмитрий карпов 2012 Часть номер ноль: «Ты что с Урала?» Воля, пушки, соль и камень
6. дмитрий карпов 2012 Часть номер ноль: «Ты что с Урала?» Ермак и творческое мышление
7. дмитрий карпов 2012 Нам не хватает желания желать
8. дмитрий карпов 2012 Цифровая технология перемен Любой технологии присущ мидасов эффект: как только в обществе возникает усиление какого-либо явления, всё остальное мироустройство тут же начинает меняться, чтобы встроить в себя эту новинку. Как только в обществе появляется новая технология, она тут же меняет всю структуру этого общества. Следовательно, новая технология — революционный по своей натуре ингредиент. Мы можем убедиться в этом, наблюдая, как развиваются электрические медиа. Маршалл Маклюэн
9. дмитрий карпов 2012 Часть номер один: «Как я это делал?» Два часа на афишу...
10. дмитрий карпов 2012 Дизайн создает не продукт. Ценность. Ценность идеи, материала, изменяемого мира вокруг.
11. дмитрий карпов 2012 В чем ценность дизайна? Ценность. Ценность удобства? Ценность экономии? Ценность качества жизни?
12. прием: креативное технологическое проектирование
13. дизайнер в digital обязан знать и понимать технологии, изобретательно использовать возможности цифровой среды и постоянно самообучаться
14. дмитрий карпов 2012 прием: креативное тех-проектирование API место / карты / координаты переводчик динамический постинг (Twitter) видео-хостинг http://www.youtube.com/user/chromefastball Атрибуты коммуникации бренда скорость изобретательность API соц. сети стабильность
15. дмитрий карпов 2012 https://developers.google.com/translate/v2/pricing?hl=ru
16. дмитрий карпов 2012
17. не знаешь что, придумай как технологии сами дают основу для новых идей... например CSS3
18. CSS3 дмитрий карпов 2012 • Media Queries • RGBa & HSLa • Gradients • @font-face / Google fonts • Rounded Corners • Box Shadow • Multiple Backgrounds • Visual Effects Color • RGBa (255, 255, 255, 0.5); • HSLa (360, 100%, 50%, 0.5); border-radius border-radius: 10px; box-shadow box-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset) • min-width • max-width • device-width • min-device-width • max-device-width • orientation • -webkit-min-device-pixel-ratio <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" /> opacity: 0.5; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; opacity: 1;
19. дмитрий карпов 2012 • Media Queries • RGBa & HSLa • Gradients • @font-face / Google fonts • Rounded Corners • Box Shadow • Multiple Backgrounds • Visual Effects Color • RGBa (255, 255, 255, 0.5); • HSLa (360, 100%, 50%, 0.5); border-radius border-radius: 10px; box-shadow box-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset) <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" /> opacity: 0.5; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; opacity: 1; #alfa_type_color {color:hsla(44, 100%, 33%, .70);}
20. дмитрий карпов 2012 • Media Queries • RGBa & HSLa • Gradients • @font-face / Google fonts • Rounded Corners • Box Shadow • Multiple Backgrounds • Visual Effects
21. CSS3 дмитрий карпов 2012 • Media Queries • RGBa & HSLa • Gradients • @font-face / Google fonts • Rounded Corners • Box Shadow • Multiple Backgrounds • Visual Effects Color • RGBa (255, 255, 255, 0.5); • HSLa (360, 100%, 50%, 0.5); border-radius border-radius: 10px; box-shadow box-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset) • min-width • max-width • device-width • min-device-width • max-device-width • orientation • -webkit-min-device-pixel-ratio <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" /> opacity: 0.5; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; opacity: 1;
22. дмитрий карпов 2012 • Media Queries • RGBa & HSLa • Gradients • @font-face / Google fonts • Rounded Corners • Box Shadow • Multiple Backgrounds • Visual Effects <link href="media- queries.css" rel="stylesheet" type="text/ css"> Размер экрана меньше 980px (адаптивный макет) Для размера экрана меньше 980px применим следующие правила: pagewrap = ширина 95%; content = ширина 60%; sidebar = ширина 30%. Вариант с использованием media queries. Для определенных разрешений мы допускаем или запрещаем показ изображений (img), через CSS (display: none;). Современные браузеры адаптированы так, что по умолчанию не загружают изображения, которые отключены для показа. Этот CSS будет применяться для размеря экрана меньше 480px, которая соответствует ширине iPhone в альбомной ориентации. html = отключаем регулировку размера шрифта. По умолчанию iPhone увеличивает размер шрифта, для более комфортного чтения. Вы можете это отключить добавив - webkit-text-size-adjust: none; main-nav = сбрасываем размер шрифта до 90%. @media screen and (max- width: 480px) { html { -webkit-text-size-adjust: none; } #main-nav a { font-size: 90%; padding: 10px 8px; } }
23. дмитрий карпов 2012 box-shadow box-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset) http://narrowdesign.com/
24. дмитрий карпов 2012
25. дмитрий карпов 2012 @font-face { font-family: 'Righteous'; font-style: normal; font-weight: 400; src: local('Righteous'), local('Righteous-Regular'), url(http://themes.googleusercontent.com/static/fonts/righteous/v2/w5P- SI7QJQSDqB3GziL8XbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'); } @font-face { font-family: 'Sorts Mill Goudy'; font-style: normal; font-weight: 400; src: local('Sorts Mill Goudy Regular'), local('SortsMillGoudy-Regular'), url(http://themes.googleusercontent.com/static/fonts/sortsmillgoudy/v3/ JzRrPKdwEnE8F1TDmDLMUtsZ51dqzBwIdH2JuTl9mv4.woff) format('woff'); } http://rule-of-three.co.uk/ <link href='http:// fonts.googleapis.com/css? family=Sorts+Mill+Goudy: 400,400italic|Merriweather:300| Righteous' rel='stylesheet' type='text/css'>
26. дмитрий карпов 2012 http://www.myfonts.com/fonts/abstrkt/lineatura/light/
27. дмитрий карпов 2012 шрифты издания NY Irvin NY Vogue Goat
28. дмитрий карпов 2012 ~бренды участвуют в производстве фильма с новой интерактивной концепцией —вовлечением пользователей социальной сети, сценарий фильма подразумевает участие совершенно разнообразных личностей, часть которых будет из записанных видео участниками интерактивного проекта
29. дмитрий карпов 2012 API использования видеокамеры на компьютере пользователя в большинстве случаев используют Adobe Flash (но тенденция в замещении средствами JS и альтернативами) http://www.xarg.org/project/jquery-webcam-plugin/
30. дмитрий карпов 2012 Практика
31. дмитрий карпов 2012 Практика фото участников практики / упражнения собственность участников :) и не публикуется методика: Дмитрий Карпов
32. дмитрий карпов 2012 Упражнение первое
33. дмитрий карпов 2012 Упражнение второе фото участников практики / упражнения собственность участников :) и не публикуется методика: Дмитрий Карпов
34. дмитрий карпов 2012 Упражнение третье фото участников практики / упражнения собственность участников :) и не публикуется методика: Дмитрий Карпов
35. дмитрий карпов 2012 Упражнение четвертое
36. дмитрий карпов 2012 Как выковывать новые идеи для цифровой интерактивной среды
37. дмитрий карпов 2012 Что нужно для успешного проекта в цифровой интерактивной среде, именуемо простым уральским словом DIGITAL? Ценность. Ценность идеи, материала, изменяемого мира вокруг.
38. дмитрий карпов 2012 direction interaction graphics art language technology ideation
39. дмитрий карпов 2012 direction interaction graphics art language technology ideation
40. дмитрий карпов 2012 {Хорошая идея ничего не стоит без точной реализации, идея должна генерировать выгоду, осознаваемую, измеряемую выгоду для общества, личности, автора и давать экономичную возможность для воплощения}
41. дмитрий карпов 2012 direction interaction graphics art language technology ideation intuitive interface experience artistic innovation
42. дмитрий карпов 2012 Культурные особенности
43. дмитрий карпов 2012 {Нет такой общности людей как «целевая аудитория», есть люди одних взглядов, общего опыта, языка, близких целей и предсказуемых возможностей. Давайте поговорим о людях соседней улицы или района. Давайте поговорим об «Уралмаше»}
44. дмитрий карпов 2012 Новые форматы медиа
45. дмитрий карпов 2012 Формат композиции в веб-дизайне
46. дмитрий карпов / desmonych@gmail.com 2012г cтереотипы композиции позволяют создавать привычные, хорошо знакомые информационные системы, интерфейсы, поведенческие паттерны, что помогает строить эффективное интерактивное взаимодействие
47. дмитрий карпов / desmonych@gmail.com 2012г основной принцип и критерий классификации композиционных принципов в особенностях навигационного блока и решении интерактивного пространства
48. дмитрий карпов / desmonych@gmail.com 2012г Текстовый - формат Первые сайты в сети. Дизайн средствами HTML c минимумом графики и браузерной интерпретацией по умолчанию (серый фон, синие ссылки) 1993-1996 распространенный с выравниванием по центру элементов или по левому краю экрана
49. дмитрий карпов / desmonych@gmail.com 2012г Конус - формат стандартные композиционные модели формат 1993-1996 распространенный с выравниванием по центру элементов
50. дмитрий карпов / desmonych@gmail.com 2012г LEFT - формат стандартные композиционные модели формат 1996-1999 хорошо знакомый и простой формат многих информационных ресурсов вертикальный блок навигации слева
51. дмитрий карпов / desmonych@gmail.com 2012г LEFT - формат стандартные композиционные модели формат 1996-1999
52. дмитрий карпов / desmonych@gmail.com 2012г LEFT - формат стандартные композиционные модели формат 1996-1999 традиции вертикальной навигации с левой стороны страницы заметно используются сегодня в веб
53. дмитрий карпов / desmonych@gmail.com 2012г Г- формат стандартные композиционные модели самый распространенный 1995-2005
54. дмитрий карпов / desmonych@gmail.com 2012г Г- формат стандартные композиционные модели самый распространенный 1995-2005
55. дмитрий карпов / desmonych@gmail.com 2012г Г- формат стандартные композиционные модели самый распространенный 1995-2005
56. дмитрий карпов / desmonych@gmail.com 2012г Г- формат стандартные композиционные модели самый распространенный 1995-2005
57. дмитрий карпов / desmonych@gmail.com 2012г Г- формат стандартные композиционные модели самый распространенный 1995-2005
58. дмитрий карпов / desmonych@gmail.com 2012г П- формат стандартные композиционные модели широко используется 1996-2005 самый популярный удобный, знакомый три блока материалов по краям экрана
59. дмитрий карпов / desmonych@gmail.com 2012г П- формат стандартные композиционные модели широко используется 1996-2005
60. дмитрий карпов / desmonych@gmail.com 2012г Диск- формат стандартная композиционная модель для промо-сайтов, корпоративных сайтов и мультимедиа дисковшироко используется 1996-1999 старая школа
61. дмитрий карпов / desmonych@gmail.com 2012г TOP - формат стандартные композиционные модели простой, выразительный легко создает иерархию информации и делит страницу на эмоциональную и рациональную зоны легко масштабируется
62. дмитрий карпов / desmonych@gmail.com 2012г TOP - формат концентрация важнейшего функционального материала и имиджевого / образного в верхней горизонтали страницы, активный header использование доминирует1996-2002 cтереотипы композиции организация интерактивного пространства практические приемы проектного мышления в новых медиа
63. дмитрий карпов / desmonych@gmail.com 2012г TOP - формат стандартные композиционные модели cтереотипы композиции организация интерактивного пространства практические приемы проектного мышления в новых медиа
64. дмитрий карпов / desmonych@gmail.com 2012г TOP - формат стандартные композиционные модели cтереотипы композиции организация интерактивного пространства практические приемы проектного мышления в новых медиа
65. дмитрий карпов / desmonych@gmail.com 2012г TOP LINE - формат стандартные композиционные модели http://www.diesel.com/ colorexposure/
66. дмитрий карпов / desmonych@gmail.com 2012г TOP LINE - формат стандартные композиционные модели
67. дмитрий карпов / desmonych@gmail.com 2012г TOP LINE - формат стандартные композиционные модели
68. дмитрий карпов / desmonych@gmail.com 2012г TOP LINE - формат стандартные композиционные модели
69. дмитрий карпов / desmonych@gmail.com 2012г TOP LINE - формат стандартные композиционные модели
70. дмитрий карпов / desmonych@gmail.com 2012г MID-LINE - формат стандартные композиционные модели Центральная горизонталь навигация содержанием сайта через центральный блок, который создает композиционный баланс
71. дмитрий карпов / desmonych@gmail.com 2012г MID-LINE - формат стандартные композиционные модели Центральная горизонталь навигация содержанием сайта через центральный блок, который создает композиционный баланс
72. дмитрий карпов / desmonych@gmail.com 2012г MID-LINE - формат стандартные композиционные модели http://www.hidden-heroes.net/
73. дмитрий карпов / desmonych@gmail.com 2012г MID-LINE - формат стандартные композиционные модели http://www.hidden-heroes.net/
74. дмитрий карпов / desmonych@gmail.com 2012г MID-LINE - формат стандартные композиционные модели http://krystalrae.com
75. дмитрий карпов / desmonych@gmail.com 2012г TOP-SQUARE - формат стандартные композиционные модели
76. дмитрий карпов / desmonych@gmail.com 2012г TOP-SQUARE - формат стандартные композиционные модели
77. дмитрий карпов / desmonych@gmail.com 2012г TOP-SQUARE - формат стандартные композиционные модели cтереотипы композиции организация интерактивного пространства практические приемы проектного мышления в новых медиа
78. дмитрий карпов / desmonych@gmail.com 2012г 4-COLUMN - формат стандартные композиционные модели http://www.legendary.com/
79. дмитрий карпов / desmonych@gmail.com 2012г 4-COLUMN - формат стандартные композиционные модели http://www.legendary.com/
80. дмитрий карпов / desmonych@gmail.com 2012г 4-COLUMN - формат стандартные композиционные модели
81. дмитрий карпов / desmonych@gmail.com 2012г ступени - формат стандартные композиционные модели
82. дмитрий карпов / desmonych@gmail.com 2012г ступени - формат стандартные композиционные модели http://www.bureau-va.com
83. дмитрий карпов / desmonych@gmail.com 2012г ступени - формат стандартные композиционные модели cтереотипы композиции организация интерактивного пространства практические приемы проектного мышления в новых медиа
84. дмитрий карпов / desmonych@gmail.com 2012г angled - формат стандартные композиционные модели
85. дмитрий карпов / desmonych@gmail.com 2012г angled - формат стандартные композиционные модели http://htcsense.dk/ угловой наклон композиции один из самых выразительных приемов
86. дмитрий карпов / desmonych@gmail.com 2012г DOUBLE SLIDER - формат стандартные композиционные модели http://www.budnitzbicycles.com/
87. дмитрий карпов / desmonych@gmail.com 2012г DOUBLE SLIDER - формат стандартные композиционные модели
88. дмитрий карпов / desmonych@gmail.com 2012г DOWN SLIDER - формат стандартные композиционные модели http://graphicnovel-hybrid4.peugeot.com/start.html
89. дмитрий карпов / desmonych@gmail.com 2012г DOWN SLIDER - формат стандартные композиционные модели
90. дмитрий карпов / desmonych@gmail.com 2012г вертикальное падение метафора композиции в погружении зрителя содержание скользит вниз и возникает плавно с внешних краев браузера DOWN SLIDER - формат стандартные композиционные модели http://www.newzealand.com/int/ http://www.smashingmagazine.com/2012/03/08/behind-scenes-tourism-new-zealand/
91. дмитрий карпов / desmonych@gmail.com 2012г cтереотипы композиции организация интерактивного пространства практические приемы проектного мышления в новых медиа WATERFALL - формат тенденция 2011-12 http://pinterest.com
92. дмитрий карпов / desmonych@gmail.com 2012г cтереотипы композиции организация интерактивного пространства практические приемы проектного мышления в новых медиа MASH-UP - гибридный формат тенденция 2011-12 http://www.pinstagram.co/
93. дмитрий карпов / desmonych@gmail.com 2012г MASH-UP - гибридный формат тенденция 2011-12 особенность в структурной эклектичности, комбинации совершенно разных, но хорошо знакомых принципов и паттернов
94. дмитрий карпов / desmonych@gmail.com 2012г MASH-UP - гибридный формат тенденция 2011-12 особенность в структурной эклектичности, комбинации совершенно разных, но хорошо знакомых принципов и паттернов гибридный формат не значит хаотичный, в его геометрической структуре всегда есть свой модульный принцип
95. дмитрий карпов / desmonych@gmail.com 2012г MASH-UP - гибридный формат тенденция 2011-12 особенность в структурной эклектичности, комбинации совершенно разных, но хорошо знакомых принципов и паттернов http://www.lust.nl/
96. дмитрий карпов / desmonych@gmail.com 2012г http://www.sound.philips.com
97. дмитрий карпов / desmonych@gmail.com 2012г http://www.sound.philips.com
98. дмитрий карпов / desmonych@gmail.com 2012г BOTTOM LINE — формат навигации в нижней горизонтали страницы привычная модель композиции с управлением контентом из нижней части страницы, фактически панель инструментов (данная область привычно используется для технической информации и сигнала пользователю, что страница загрузилась) http://www.sound.philips.com/
99. дмитрий карпов / desmonych@gmail.com 2012г http://lifeis.bbcearth.com/
100. дмитрий карпов / desmonych@gmail.com 2012г
101. дмитрий карпов / desmonych@gmail.com 2012г FULL SCREEN MOTION — видео-сайт видео композиционно построенное по приемам жанра, принципам съемки и динамике монтажа с возможностью управления сценами, обычно полноэкранное изображение http://evelyn-interactive.searchingforabby.com/
102. дмитрий карпов / desmonych@gmail.com 2012г FULL SCREEN MOTION — видео-сайт видео композиционно построенное по приемам жанра, принципам съемки и динамике монтажа с возможностью управления сценами, обычно полноэкранное изображение http://sagmeister.com/
103. дмитрий карпов / desmonych@gmail.com 2012г VIMETUBE — видео-интерактив интерактивные возможности средствами формата сервиса http://www.youtube.com/profile? annotation_id=annotation_820885&feature=iv&src_vid=4ba1BqJ4S2M&user=tippexperience
104. дмитрий карпов / desmonych@gmail.com 2012г http://www.ro.me/ INTERACTIVE MOTION — гибридный формат тенденция 2011-12 интерактивное 3D видео с условно свободной точкой фокуса, управление выбором точки просмотра и влиянием на композиционное положение объектов
105. дмитрий карпов 2012 Ошибки арт-директора давайте обсудим отличные и заметные проекты
106. дмитрий карпов 2012 Ошибки арт-директора http://zestleadership.com/ крутые иллюстрации, все жутко тормозит, после просмотра остается чувство визуального восторга и полного отсутствия впечатления от деятельности компании, как и название вымывается из восприятия потоком классных рыб арт-директор должен понимать, что такие огромные PNG в современных браузерах не всегда плавно плывут, а клиенты плывут за конкретными выгодами, экспертизой и авторитетом
107. дмитрий карпов 2012 Ошибки арт-директора http://zestleadership.com/ один из главных вопросов остается без ответа, красиво, но не убеждает рациональными доводами, примерами, клиентами... много воды и черным по черному
108. дмитрий карпов 2012 Ошибки арт-директора текст графикой делать не круто, особенно в такой композиции легко реализуемой средствами CSS арт-директору надо следить как его макет реализуется в деталях, сохраняя эстетику и не теряя заложенной функциональности
109. дмитрий карпов 2012 Ошибки арт-директора интерактивные элементы и цветовое кодирование не дают очевидного сигнала к возможным действиям, временная шкала напоминает слайдер, который провоцирует потянуть, цветные горизонтальные шкалы неочевидно используют цвет, сайт старается информировать, но не стимулировать посетителя играть, что возможно было частью задачи, название кнопок основных действий на английском не упрощает понимание и достаточно выделить заголовок, а не весь блок вопроса к существующим пользователям gosloto слишком много одинаковых визуальных акцентов, цвета, размеры объектов, много скруглений, теней под объектами и текстом хорошая, простая идея, есть эмоциональный контакт, функционально привлекает внимание к нижнему блоку, но нет развития идеи в возможные генерируемые веселые диалоги, выглядит эскизом концепции
110. дмитрий карпов 2012 самое скучное, это проектирование форм регистрации, покупки, авторизации, прелодеров, сообщений об ошибках и страниц 404... этим и займемся
111. дмитрий карпов 2012 Дизайн стандартных положений
112. дмитрий карпов 2012 Дизайн «стандартных положений» http://www.hidden-heroes.net/
113. дмитрий карпов 2012 Дизайн «стандартных положений» http://www.ro.me/ смотрите, обучение пользователя пока загружается основное содержание
114. дмитрий карпов 2012 Масштабируемость решения http://bostonglobe.com Адаптивный дизайн
115. дмитрий карпов 2012 Масштабируемость
116. дмитрий карпов 2012 Чему учат фантастические интерфейсы
117. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com представим себе...
118. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com систему без ограничений, недостатки реальной системы как достоинства, непривычные приемы взаимодействия, неожиданные реакции обратной связи теперь фантастический концепт поместите в условия возможной реализации, экономики и технологий
119. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com систему без ограничений, недостатки реальной системы как достоинства, непривычные приемы взаимодействия, неожиданные реакции обратной связи теперь фантастический концепт поместите в условия возможной реализации, экономики и технологий http://youtu.be/JSnB06um5r4 например, какие возможности могут появиться у интерактивных очков Google, какова возможная выгода от интеграции сервисов и новых возможностей? как возможно взаимодействовать с очками, и по новому использовать поисковые возможности, карты, youtube, социальные сети, переводчик, хранение файлов?
120. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com фантастические сложные штуки, эстетика многодельности и затейливой информативности
121. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com фантастика и реальность
122. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com любая идея требует быть зафиксированной в физическом мире, на бумаге...
123. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com фантастика и реальность
124. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com фантастика и реальность
125. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com фантастика и реальность
126. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com фантастика и реальность
127. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com интерфейс обеспечивает управление поступающей информацией
128. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com иногда интерфейс это просто красиво
129. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com скетчинг
130. дмитрий карпов 2012г. desmonych@gmail.com
131. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com представим себе совершенно новых существ и их возможности, представим себе интерфейс который управляется жестами или движением глаз, или мыслями
132. дмитрий карпов 2012г. desmonych@gmail.com
133. дмитрий карпов 2012г. desmonych@gmail.com
134. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com фантастика и реальность
135. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com фантастические интерфейсы помогают расширить представления о функциональности и эстетических нормах, игнорируя ограничения, изобретая новое
136. а может и не нужно смотреть фантастику, а сесть и внимательно анализировать существующие приемы на массовом рынке дмитрий карпов 2012г. desmonych@gmail.com
137. дизайн—красиво дмитрий карпов 2012г. desmonych@gmail.com
138. из физической реальности в цифровую дмитрий карпов 2012г. desmonych@gmail.com
139. дмитрий карпов 2012 Гиперцифровая реальность
140. дмитрий карпов 2012 Гиперцифровая реальность
141. дмитрий карпов 2012 С вами разговаривает...
142. дмитрий карпов / desmonych@gmail.com 2012г задание: форма регистрации на сайте, пять шагов, с каждым шагом становится все веселее, познавательней, проще... отрываемся по полной
143. дмитрий карпов 2012 С вами разговаривает...
144. дмитрий карпов 2012 Талантливый интерфейс Закон Фиттса Интеллектуальные методы / S.M.A.R.T / Wireframes/Features & Functionality matrix/ R.E.A.S.O.N / Персоны UX проектирование / landing page / Функциональное модульное зонирование Построение дизайн-процесса в интерактивных медиа
145. дмитрий карпов 2012 Закон Фиттса
146. дмитрий карпов 2012 Закон Фиттса http://fww.few.vu.nl/hci/interactive/fitts/
147. дмитрий карпов 2012 Закон Фиттса http://fww.few.vu.nl/hci/interactive/fitts/
148. дмитрий карпов 2012 Закон Фиттса
149. дмитрий карпов 2012 Закон Фиттса
150. дмитрий карпов 2012 целенаправленность как метод Specific / Специфичный Measurable / Измеримый Actionable / Осуществимый Relevant / Уместный Trackable / Отслеживаемый http://uxdesign.smashingmagazine.com/2011/09/13/the-s-m-a-r-t-user-experience-strategy/
151. дмитрий карпов 2012 целенаправленность как метод Specific / Специфичный Measurable / Измеримый Actionable / Осуществимый Relevant / Уместный Trackable / Отслеживаемый http://uxdesign.smashingmagazine.com/2011/09/13/the-s-m-a-r-t-user-experience-strategy/ результат KPI стратегия продукта
152. проектирование интерфейса опыт коллег в разработке метода проектирование интерактивной платформы / usability and desirability фактически проектирование Landing Pages
153. проектирование интерфейса проектирование интерактивной платформы / usability and desirability фактически проектирование Landing Pages A B C D определение групп задач построение иерархии важности и зависимости А главные B базовые C вспомогательные D дополнительные A B C D сценарий взаимодействия построение модели взаимодействия на основе ментальной модели и поведенческой A что увидит пользователь? B что подумает? C что сделает? D что получит? какой опыт приобретет? ABCD ABCD ABCD ABCD A B C D оптимизация взаимодействия по закону Фиттса скорость принятия решений и точность действий зависит ои дистанции до объекта и его величины правило первого экрана правило акцента правило цветового кодирования / глубины информации
154. Матрица функциональности (Features & Functionality )
155. ПЕРСОНЫ дмитрий карпов 2012г. desmonych@gmail.com
156. метод разработки интерфейса на основе анализа пользователей /потребителей дмитрий карпов 2012г. desmonych@gmail.com работа с «персонами» или «архетипами» http://www.f-i.com/htc/global/ детализированная виртуальная личность используемая для моделирования опыта, мышления, интерактивного поведения для создания сценариев и характеристик использования UI собирательный образ коллективной личности для моделирования опыта, основных побудительных мотивов, целей и интерактивного поведения для создания универсальных, обобщенных интерактивных сценариев и характеристик UI
157. WIREFRAMES ПРОЕКТИРОВАНИЕ дмитрий карпов 2012г. desmonych@gmail.com http://www.f-i.com/htc/global/
158. МОЛОТЫ ПРОЕКТИРОВАНИЯ дмитрий карпов 2012г. desmonych@gmail.com
159. МОЛОТЫ ПРОЕКТИРОВАНИЯ дмитрий карпов 2012г. desmonych@gmail.com http://www.axure.com
160. МОЛОТЫ ПРОЕКТИРОВАНИЯ дмитрий карпов 2012г. desmonych@gmail.com http://www.axure.com
161. МОЛОТЫ ПРОЕКТИРОВАНИЯ дмитрий карпов 2012г. desmonych@gmail.com https://gomockingbird.com
162. МОЛОТЫ ПРОЕКТИРОВАНИЯ дмитрий карпов 2012г. desmonych@gmail.com
163. ПРОЕКТИРОВАНИЕ ЭТАПА РАЗРАБОТКИ дмитрий карпов 2012г. desmonych@gmail.com Anton Repponen is Global Creative Director at Fi Важнейшее качество, умение на стадии проектирования интерактивного и визуального дизайна предусмотреть оптимальное техническое решение, уменьшение числа общих макетов, создание шаблонов, упрощение деталей
164. ПРОЕКТИРОВАНИЕ ЭТАПА РАЗРАБОТКИ дмитрий карпов 2012г. desmonych@gmail.com Anton Repponen is Global Creative Director at Fi Простая структура взаимодействия проработанная на стадии дизайна wireframe позволяет оптимально и экономично разрабатывать техническое решение, учитывая возможности устройства и технологий
165. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com Research Empathy Acceptance Sophistication Opportunity Nature
166. метод разработки интерфейса дмитрий карпов 2012г. desmonych@gmail.com Research Empathy Acceptance Sophistication Opportunity Nature Reason объективные причины как сумма влияний на концепцию интерфейса, от логики функций до эстетики и кончных впечатлений Исследование тематических материалов Ментальное внедрение, восприятие пользователя через глубокое сопоставление себя Принятие. Какие стереотипы существуют, что знают о продукте и функции пользователи, принятые паттерны поведения и знакомые метафоры Разработка первичного прототипа учитывающего все привычные паттерны и сценарии пользователя Интеграция новых возможностей в первичный прототип, реализация функциональных и информационных приоритетов Тестирование прототипа в действии и наблюдение за естественным поведением пользователя. Корректировка «природы продукта», расширяемость, ограничения, сравнение с другими экосистемами
167. дмитрий карпов 2012 UX проектирование
168. дмитрий карпов 2012 UX проектирование брендинговые коммуникации / проектирование интерактивной платформы / usability and desirability визуализируем желания фактически проектирование Landing Pages структурная система проектирования коммуникации бренда в цифровых медия (сайт, аппс, экранные презентации и инсталляции) topline навигационный блок основных проектов (смежные промо-сервисы) базовая навигация leadgenerator блок стимулирующий вовлечение/действие пользователя, обещание выгоды эмоциональная зона / реализует впечатление стиля, идентификаторов бренда, атмосферы и элементов позиционирования demo демонстрация продукта /сервиса, визуальные атрибуты демонстрирующие обладание и функции, возможные дополнительные опции и SKU RTB / рациональный блок, прагматичная демонстрация выгод от использования и преимуществ social media / интеграция возможностей социальных медиа consumer corner / потребительский блок / форма регистрации / контактная информация, форма поиска, вход для постоянных клиентов / корзина покупок footer / юридическая информация, контактная информация,
169. дмитрий карпов 2012 Процесс брифинг встреча с клиентом постановка задачи определение цели проекта анализ исследование возможностей решения задачи креативный процесс генерация идей и творческих концепций презентация подтверждение концепции реализация техническое исполнение правки корректировка техническое исправление публикация завершение проекта разработка UX интерфейс визуальный дизайн разработка кодинг технологический тест эксперимент с потенциально возможным использованием технологии стимулирующий возможности креативного процесса
170. Дмитрий Карпов 2012г потребность мотив импульс стимул вовлечение эмпатия активация / решение / шаринг проактивное действие психологический паттерн функциональный действия дизайнера, проектирование взаимодействия обратная связь использование мотива личности, опредмечивание мотива в вербальном и визуальном пространстве создание визуального импульса инстинктивного, понятного в секунду контакта, фиксирует внимание стимуляция личностного интереса, раскрытие удовлетворения мотива расширение интереса сценариями разной активности, игр, конкурсов, актуальный контент, скидки личностное действие по завершению действия в реальном мире, поход в магазин, выставку, кино, сервис, оформление заказа, завершение потребительского цикла создание сюжета осознанного сопереживания эмоциональному состоянию персонажа подтверждение принятого личного решение, (заполнение формы, регистрация участника акции) стимуляция распространения информации участником, ознакомление ближнего круга, используем мотивы просоциальные и самоутверждения
171. дмитрий карпов 2012 техническая модель визуальная интерпретация вербальная интерпретация социальная интеграция психологическая механика задача клиента репрезентация задачи с позиции пользователя реальный срок набор обязательных образов творческая интерпретация образа реализации мотива (показать власть над объектом, подчеркнуть престиж, демонстрация личного достижения, идентифицировать личность с героем) % реализуемость модели реализуемость визуальной коммуникации и технической интерактивной модели прогнозируемая реализация мотивов психологической механики
172. дмитрий карпов / desmonych@gmail.com 2012г маркетинговая воронка принцип формирования отношения потребитель&продукт
173. дмитрий карпов / desmonych@gmail.com 2012г маркетинговая воронка принцип формирования отношения потребитель&продукт Awareness Acceptance Trial Loyalty Retention / Preference Advocacy Accumulation Awareness — узнавание названия бренда и его принадлежность к категории. Acceptance — принятие бренда. То есть, потребитель не отрицает возможности приобретения. Trial — пробная самостоятельная покупка. Retention / Preference — потребление товара или услуги по рациональным причинам (цена, акции, наличие в ближайшем магазине и пр.) на постоянной основе. Loyalty — потребление по эмоциональным причинам. Меньше зависит от цены, дистрибуции и других объективны факторов. Advocacy является следствием работы с лояльностью и приводит к распространению положительных рекомендаций (word of mouth) Accumulation — накопление знаний и опыта потребления товаров бренда, что приводит к желанию пользоваться любыми товарами, доверяя качеству (рационально) и характеру бренда (эмоционально) является следсвием работы коммуникаций не только ориентированных на потребителя, независимые media материалы.
174. дмитрий карпов / desmonych@gmail.com 2012г маркетинговая воронка принцип формирования отношения потребитель&продукт Awareness Acceptance Trial Loyalty Retention / Preference Advocacy Accumulation
175. дмитрий карпов / desmonych@gmail.com 2012г маркетинговая воронка принцип формирования отношения потребитель&продукт Awareness Acceptance Trial Loyalty Retention / Preference Advocacy Accumulation
176. дмитрий карпов / desmonych@gmail.com 2012г
177. дмитрий карпов / desmonych@gmail.com 2012г
178. дмитрий карпов / desmonych@gmail.com 2012г маркетинговая воронка принцип формирования отношения потребитель&продукт Awareness Acceptance Trial Loyalty Retention / Preference Advocacy Accumulation
179. дмитрий карпов / desmonych@gmail.com 2012г маркетинговая воронка принцип формирования отношения потребитель&продукт Awareness Acceptance Trial Loyalty Retention / Preference Advocacy Accumulation
180. дмитрий карпов / desmonych@gmail.com 2012г http://graphicnovel-hybrid4.peugeot.com/start.html Awareness Acceptance Trial Acceptance
181. дмитрий карпов / desmonych@gmail.com 2012г http://www.sound.philips.com/
182. дмитрий карпов / desmonych@gmail.com 2012г Awareness Acceptance Trial
183. дмитрий карпов / desmonych@gmail.com 2012г дополнительный фактор убеждения минимальный риск дополнительный фактор убеждения качество / демонстрация Try to Buy
184. дмитрий карпов / desmonych@gmail.com 2012г Awareness Acceptance Acceptance Trial узнавание «...кстати, вот что посмотрю» возможно «интересно... нравится» хочу «уверен, мне подхолит» вот бы мне такие «офигительно смотрится»
185. дмитрий карпов / desmonych@gmail.com 2012г Тайна профессии: Меньше слушай советов, больше пробуй сам Тайна профессии: Читай в день по заметке о технологии Тайна профессии: Пять лет назад устройство типа IPad было фантастикой, сегодня у многих, завтра у всех Тайна профессии: Не спрашивай у пользователя мнения, дай ему готовый продукт Тайна профессии: Лучше спорить прототипами
186. дмитрий карпов / desmonych@gmail.com 2012г https://vimeo.com/47875656
187. дмитрий карпов / desmonych@gmail.com 2012г