Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Огонь. Молоты. Таланты

2 996 vues

Publié le

Материалы интенсивной тренировки креативных способностей в интерактивных медиа для дизайнеров. Двухдневный курс в Екатеринбурге, больше двадцати упражнений и практических вопросов проектирования, решения задач интерактивных коммуникаций. Слайды в низком качестве, описание специальных упражнений, заданий и дополнительных материалов сокращено.

Publié dans : Design

Огонь. Молоты. Таланты

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

×