Digital explosion материал с интенсивной тренировки

2,342 views
2,249 views

Published on

Фрагмент материалов к семинару и тренингу по креативному мышлению и проектной разработке интерактивных

Published in: Design

Digital explosion материал с интенсивной тренировки

  1. 1. DIGITAL EXPLOSION взрывная тренировка креативного мышления в интерактивных медиа ДМИТРИЙ КАРПОВ И КОМАНДА лекции сменяют упражнения, темы сменяют кейсы и примеры, рекомендации и советы, задания специально развивают комплекс навыков, практика и теория, все по делу, без воды, в интенсивном ритме взрывающем мозг новыми идеями, неожиданным применением интерактивных медиа, инструментов и пониманием природы взаимодействий в digital дмитрий карпов 2012
  2. 2. дмитрий карпов 2012
  3. 3. дмитрий карпов 2012
  4. 4. взрывная тренировкакреативного мышленияв интерактивных медиаДМИТРИЙ КАРПОВИ КОМАНДА дмитрий карпов 2012
  5. 5. КРЫМ. КОКТЕБЕЛЬ.ПЛАН ДЕЙСТВИЙ. КОМАНДА. дмитрий карпов 2012
  6. 6. почему, зачем и какдмитрий карпов 2012
  7. 7. почему, зачем и как задача, процесс стратегия и тактика ?Коктебель ! дмитрий карпов 2012
  8. 8. взрывная тренировкакреативного мышленияв интерактивных медиаДЕНЬ ПЕРВЫЙ дмитрий карпов 2012
  9. 9. что это такое? дмитрий карпов 2012
  10. 10. структуразнаний, навыкови опыта в профессии ideation direction graphics art interaction technology language дмитрий карпов 2012
  11. 11. идея и концепцияв интерактивных проектах ideation direction graphics art interaction technology language дмитрий карпов 2012
  12. 12. комплекс основныхнавыков для дизайнав интерактивных медиа ideation direction graphics art interaction technology language experience intuitive interface artistic innovation дмитрий карпов 2012
  13. 13. дизайнер в digital невизуализатор идей,он создает сценарии,реализует человеческоежелание, манипулирует,знает действие наперед,находит нужнуювизуальную форму дмитрий карпов / desmonych@gmail.com 2012г
  14. 14. дизайнер в digitalдолжен быть взрывателем,он способен собрать«интерактивную бомбу» дмитрий карпов / desmonych@gmail.com 2012г
  15. 15. «интерактивнаябомба»взять задачу, достать мотивыпользователя, взять самый популярныйсервис, внедрить провокацию, удалить баги,смешать желания и страхи, политьсамоутверждением, в центр выгоды покраям осколки мнений, ретвитов и репинов,внедрить фильтры, персонифицироватьпроникновение, добавить разрывных,коротких текстов, фугасный заряднового опытаи красивая и удобная оболочка сверху дмитрий карпов / desmonych@gmail.com 2012г
  16. 16. дизайнер в цифровой интерактивной средене только проводник визуальных идей, дизайнерявляется сооснователем многих известныхкомпаний и сервисов, как эти.дизайнер должен мыслить категориями успешногобизнеса, желательно своего собственного :) дмитрий карпов / desmonych@gmail.com 2012г
  17. 17. этапы разработкиинтерактивного проекта дмитрий карпов 2012
  18. 18. управление проектом договор исследование креативное UX дизайн визуальный дизайн разработка запуск проекта корректировка предложение сопровождение тз SWOT концепт эскизы карта сайта интерфейс верстка статистика корректировкасогласование wireframes иллюстрации программинг сценарий механикиподписание анализ презентация прототипы шаблоны экранов отладка / оптимизация KPI обновление outsource или работа фрилансеров outsource или работа фрилансеров дмитрий карпов / desmonych@gmail.com 2012г
  19. 19. этапы разработки интерактивногопроекта / вопросы к клиентуи анализ информации •Наличие интерактивных сервисов •Социальные сети •CRM активность •Наличие промо-сайтов продуктов •Наличие мобильных приложений •Передача ценностей бренда •Usability анализ •Поисковая оптимизация дмитрий карпов 2012
  20. 20. этапы разработки интерактивногопроекта / вопросы к клиентуи анализ информации дмитрий карпов 2012
  21. 21. задача клиента репрезентация задачи с позиции пользователя реальный срок психологическая визуальная интерпретация механика вербальная интерпретациятехническая модель социальная интеграция % реализуемость модели набор обязательных образов творческая интерпретация образа реализации мотива (показать власть над объектом, подчеркнуть престиж, демонстрация личного достижения, идентифицировать личность с героем) прогнозируемая реализацияреализуемость визуальной коммуникации мотивов психологической механики и технической интерактивной модели дмитрий карпов 2012
  22. 22. задача клиента репрезентация задачи с позиции пользователя реальный срок психологическая визуальная интерпретация механика вербальная интерпретациятехническая модель социальная интеграция % реализуемость модели набор обязательных образов творческая интерпретация образа реализации мотива (показать власть над объектом, подчеркнуть престиж, демонстрация личного достижения, идентифицировать личность с героем) прогнозируемая реализацияреализуемость визуальной коммуникации мотивов психологической механики и технической интерактивной модели дмитрий карпов 2012
  23. 23. дмитрий карпов / desmonych@gmail.com 2012г
  24. 24. SMM перспективы и влияниена развитие медиа дмитрий карпов 2012
  25. 25. Общее количество сайтов, с которых производились пины картинок, превысило 100 тысяч. На схеме приведены 20 самых популярных из них.http://blog.rjmetrics.com/Pinterest-Data-Analysis-An-Inside-Look/Около 80% пинов составляют репины, то естькартинки других пользователей, которым делаетсяперепост. Pinterest, таким образом, являетсядействительно глобальной системой обмена.Для сравнения: исследование Hubspot показало,что в Twitter лишь 1,4% твитов — это ретвиты. дмитрий карпов 2012
  26. 26. дмитрий карпов 2012
  27. 27. дмитрий карпов / desmonych@gmail.com 2012г
  28. 28. Не ждем, что пользователи будут охотно из группы переходитьна наш сайт. Чаще всего, они этого не делают. Поэтому всюнеобходимую информацию даем им в группе: цены подфотографиями товаров, описания условий доставки и т. п.Трафик из ВКонтакте — тянем на группу ВКонтакте. Трафикс внешних сайтов — тянем на внешний сайт. Любые попытки«скрестить» эти виды трафика — ведут к большим потерямтрафика в пути.Группа ВКонтакте и ее продвижение не заменяют сайт и трафикс поисковых систем (SEO и контекстная реклама). http://keymarketing.ru/page/neskolko-slov-o-prodvizhenii-vkontakte дмитрий карпов / desmonych@gmail.com 2012г
  29. 29. Теперь, в эпоху интернет-магазинов, amazon.com и eBay, местона виртуальной полке не стоит ничего — и очень невеликие, новсе же продажи странных продуктов в совокупностискладываются в очень внушительные цифры. Эти нишевыепродукты, количество которых увеличивается с фантастическойскоростью в силу упрощения и удешевления производства,составляют так называемый «длинный хвост» — которыйбесконечен (равно как и спрос на него). Демократизируется идистрибуция: теперь независимые производители могут самиторговать своей продукцией, через сеть; успешные прецедентывы и сами, наверное, знаете.Будущее — не за хитами, а за нишевыми продуктами. дмитрий карпов / desmonych@gmail.com 2012г
  30. 30. http://www.vedomosti.ru/newspaper/article/281441/obognal_televizor дмитрий карпов / desmonych@gmail.com 2012г
  31. 31. идея дизайнера этосумма факторовкультуры, экономики,эстетики и психологии дмитрий карпов / desmonych@gmail.com 2012г
  32. 32. взрывная тренировкакреативного мышленияв интерактивных медиаДЕНЬ ПЕРВЫЙ дмитрий карпов 2012
  33. 33. ТНТ (тринитротолуол) не взрывается сам, даже притемпиратуре плавления... горит, но взрыва не будет,ему нужен детонатортак и наш опыт, наше представление о мире требует новыхдетонирующих идей, которые не возьмутся из прошлого,но из размышлений, фантазий и бреда о будущем, смелыхконцепций дизайна несуществующего, вне объективного опыта дмитрий карпов / desmonych@gmail.com 2012г
  34. 34. Когда подопытным дают головоломку, а потом предлагаютперекусить, они намного чаще (по сравнению с контрольнойгруппой) выбирают вредный торт, чем полезный фруктовыйсалат.Опрос показал, что подопытные — студенты университетав США — понимают, какая пища вреднее. Но в момент выбораих сознание занято, и автоматические процессы мозга,которые некому притормозить, делают нерациональныйвыбор в пользу сладкой калорийной еды. http://www.d.umn.edu/~dglisczi/4501web/4501Readings/Shiv(1999)FruitOrCake.pdf дмитрий карпов / desmonych@gmail.com 2012г
  35. 35. Перила лестницы, ведущей с верхних этажей в подвал, напервом обязаны обрываться: спускаться сложнее, но зато вовремя пожара толпа перепуганных людей не будет попадать втупик, пролетев первый этаж без остановки. С подачи медиковдизайнерам придется страховать человечество не откатастроф во внешнем мире, а от собственных вредныхпривычек http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107 дмитрий карпов / desmonych@gmail.com 2012г
  36. 36. Мозг руководствуется соображениями тактической выгоды— например, взять то, что ближе лежит, и сэкономить доликалорий на движении руки. Как обратить это на пользуздоровью? Например, в салат-баре отодвигать тарелки на 25сантиметров назад. Эксперимент годовалой давностипоказал: в этой ситуации люди набирают на 8-16 процентовменьше еды. Хотя каждый и уверен, что определяет своюпорцию волевым решением. дмитрий карпов / desmonych@gmail.com 2012г
  37. 37. взрывная тренировкакреативного мышленияв интерактивных медиаДЕНЬ ВТОРОЙ дмитрий карпов 2012
  38. 38. метод креативных круговсовмещаемнесовместимое, суммабольше чем составныефакторы дмитрий карпов / desmonych@gmail.com 2012г
  39. 39. мотивы культурный архетип мотивы визуальные атрибуты коммуникациивыгоды / RTB /персоны атрибутыДмитрий Карпов 2012г
  40. 40. мотивыДмитрий Карпов 2012г
  41. 41. Процессуально-содержательные мотивы мотивы Экстринсивные (внешние) мотивы Мотив идентификации с другим человеком Мотив аффилиации Мотив самоутвержденияНегативная мотивация Мотив достижения Мотив власти Мотив саморазвития Просоциальные (общественно значимые) мотивы Дмитрий Карпов 2012г
  42. 42. Процессуально-содержательные мотивы мотивыЭкстринсивные (внешние) мотивы Мотив идентификации с другим человеком Мотив самоутверждения Мотив достижения Мотив саморазвития Просоциальные (общественно значимые) мотивы Дмитрий Карпов 2012г
  43. 43. дух природа магия сила знание мотивывремя старец культурный архетипартефакт возвращение антигерой герой путешествие смерть феникс дитя мать клад трикстер Дмитрий Карпов 2012г
  44. 44. дух природа магия сила знание мотивывремя старец культурный архетипартефакт антигерой возвращение герой путешествие дитя смерть феникс клад мать трикстер Дмитрий Карпов 2012г
  45. 45. дух природа магия сила знание мотивы время старец культурный архетип артефакт возвращение антигерой герой путешествиекультурный архетип культурная аллюзия смерть дитя феникс герой сцена из кинофильма трикстер сцена из книги клад мать трикстер старец музыкальный фрагмент клад сюжет картины историческое событие известная личность Дмитрий Карпов 2012г
  46. 46. мотивы цвета ощущения культурный архетип типографика визуальные атрибутыключевой образ коммуникации брендазвуки-образы символы теглайн герой ритуал Дмитрий Карпов 2012г
  47. 47. ощущения мотивы цвета культурный архетип типографика визуальные атрибутыключевой образ коммуникации брендазвуки-образы символы герой теглайн ритуал Дмитрий Карпов 2012г
  48. 48. мотивы культурный архетип здоровье визуальные атрибуты качество жизни коммуникации бренда социальный статус выгоды / RTB /персоны соревнованияинтеграция с ус-ми Apple ощущение прогресса и саморазвития Дмитрий Карпов 2012г
  49. 49. мотивы культурный архетип визуальные атрибуты качество жизни коммуникации бренда соревнования выгоды / RTB /персоны здоровьеощущение прогресса и саморазвития интеграция с ус-ми Apple социальный статус преданность марке Дмитрий Карпов 2012г
  50. 50. мотивы культурный архетип сезонные факторы визуальные атрибуты ценовая категория коммуникации УТП / преимущества выгоды /RTB/ персоны акцииместа распространения атрибуты ситуации потребления Дмитрий Карпов 2012г
  51. 51. мотивы культурный архетип сезонные факторы визуальные атрибуты ценовая категория коммуникации УТП / преимущества выгоды /RTB/ персоныанализ конкурентов акции места распространения атрибуты ситуации потребления Дмитрий Карпов 2012г
  52. 52. мотивы культурный архетип сезонные факторы визуальные атрибуты ценовая категория коммуникации УТП / преимущества выгоды /RTB/ персоны анализ конкурентов акции места распространения атрибуты ситуации потребленияможем / должны не можем Дмитрий Карпов 2012г
  53. 53. креативная концепция media mix мотивы культурный архетип визуальные атрибуты коммуникации канал коммуникации выгоды / RTB /персоны Outdoor атрибуты AmbientWeb Mobile Video SMM Online Print DMail TV Дмитрий Карпов 2012г
  54. 54. креативная концепция media mix мотив самоутверждения мотивы мотив идентификации с другим человеком культурный архетип таинственный клад / подарок визуальные атрибуты коммуникации символы цвета типографика канал коммуникации выгоды / RTB /персоны социальный статус Outdoor атрибуты Ambient места распространения акции сезонные факторы Web Mobile Video SMM Online Printактивные фанаты члены команды лидеры мнений DMail TV Advertising Agency: F/Nazca Saatchi & Saatchi, Brazil Creative Directors: Fabio Fernandes, Eduardo Lima, Alexandre Soares Creatives: Leandro Dolfini, Rafael Merel, Marcelo Ribeiro Account Services: Marcello Penna, Gisela Assumpção, Camila Hamaoui, Gustavo Saab Planners: José Porto, Utymo Oliveira, Diego Dumont Graphic Producers: Jomar Farias, Leandro Ferreira Media: Lica Bueno, Sandro Cachiello Дмитрий Карпов 2012г
  55. 55. цели и задачи клиента интегрированная кампания цели и задачи потребителя креативная концепция media mix мотивы культурный архетип визуальные атрибуты коммуникации канал коммуникации выгоды / RTB /персоны Outdoor атрибуты AmbientWeb Mobile Video SMM Online Print DMail TV Дмитрий Карпов 2012г
  56. 56. взрывная тренировкакреативного мышленияв интерактивных медиаДЕНЬ Третий дмитрий карпов 2012
  57. 57. ПРОВЕРЯЕМИ ОБСУЖДАЕМЗАДАНИЯ дмитрий карпов / desmonych@gmail.com 2012г
  58. 58. люди, медиа,статистика дмитрий карпов / desmonych@gmail.com 2012г
  59. 59. люди, медиа,статистика дмитрий карпов / desmonych@gmail.com 2012г
  60. 60. в среднем у интернетпользователя на мобильномустановленно 20-25приложений, 5-9 из которыхон использует еженедельно,обычно это SM приложения InSites Consulting дмитрий карпов / desmonych@gmail.com 2012г
  61. 61. окло 53% пользователейсмартфонов в СШАсавнивают цены припокупках используяинтернет InSites Consulting дмитрий карпов / desmonych@gmail.com 2012г
  62. 62. InSites Consultingдмитрий карпов / desmonych@gmail.com 2012г
  63. 63. Pinterest становитсяпотенциально интереснымдля брендов, 41% пользователейраспространяют информациюо брендах, контент удобно«брендировать»,около 35% бренд-контентапубликуется в instagramсреди пользователей InSites Consulting дмитрий карпов / desmonych@gmail.com 2012г
  64. 64. пользователи в половинеслучаев позитивнокомментируют бренды в соц.сетях, только около 10%негативно InSites Consulting дмитрий карпов / desmonych@gmail.com 2012г
  65. 65. креативная концепция должна всегдаучитывать два факторапервый экономический, идея можетзначительно снижать издержки производства,например используя существующие тех.площадки и экономическизаинтересованные «третьи стороны»второе прогнозировать расширение охватааудиториихорошая идея в digital всегда экономичнаи вызывает Word-Of-Mouth Marketing,вызывает желание делиться, обсуждать,участвовать дмитрий карпов / desmonych@gmail.com 2012г
  66. 66. Архитектура каналов BOUGHT MEDIA OWNED MEDIA EARNED MEDIASearch (SEM) Display & SP Social Ads Social App SMS & E-mail list SMS & E-mail list сайт SM каналыОбеспечение доступности всех Основная площадка для Трансляция имиджаdigital каналов трансляции премиального и анонсирование brand experience digital-инноваций, Hub всех digital коммуникаций формирование обратной связи CRM-активностей, репутационный менеджмент Привлечение аудитории (генерация траффика) дмитрий карпов / desmonych@gmail.com 2012г
  67. 67. наемные медиа концепция А концепция Б концепция B BOUGHT MEDIA OWNED MEDIA EARNED MEDIAсобственные медиа заслуженные медиа дмитрий карпов / desmonych@gmail.com 2012г
  68. 68. креативная концепция должна всегдаучитывать два фактора.первый экономический, идея можетзначительно снижать издержки производства,например используя существующиетех. площадки и экономическизаинтересованные «третьи стороны»второе прогнозировать расширениеохвата аудиториихорошая идея в digital всегда экономичнаи вызывает Word-Of-Mouth Marketing,вызывает желание делиться, обсуждать,участвовать дмитрий карпов / desmonych@gmail.com 2012г
  69. 69. упражнениядмитрий карпов 2012
  70. 70. Придуматьи реализоватьлюбой сюжетс использованиемпальцев одной рукивозможна реализация анимации дмитрий карпов / desmonych@gmail.com 2012г
  71. 71. Придумать сценарий интерактивного взаимодействия связанный с косметическим средством ухода за кожейдмитрий карпов / desmonych@gmail.com 2012г
  72. 72. Придумать и реализовать концепт несуществующего продукта или услуги Appleпо стандартам оформления и в стиле общения дмитрий карпов / desmonych@gmail.com 2012г
  73. 73. дмитрий карпов / desmonych@gmail.com 2012г
  74. 74. маркетингу в цифровой средене хватает творческого,изобретательного подхода,он больше формулирует цели,а не стимулирует решения,знаниями, экспертизой,а должно быть иначе дмитрий карпов / desmonych@gmail.com 2012г
  75. 75. маркетинговая воронка принцип формирования отношения потребитель&продукт Awareness — узнавание названия бренда и его принадлежность к категории. Acceptance — принятие бренда. То есть, потребитель не отрицает возможности приобретения.  Awareness Trial — пробная самостоятельная покупка. Acceptance Trial Retention / Preference Retention / Preference — потребление товара или услуги по рациональным причинам (цена, акции, наличие в ближайшем магазине и пр.) на постоянной основе. Loyalty Advocacy Loyalty — потребление по эмоциональным причинам. Меньше зависит от цены, дистрибуции и других объективны факторов. Accumulation Advocacy является следствием работы с лояльностью и приводит к распространению положительных рекомендаций (word of mouth) Accumulation — накопление знаний и опыта потребления товаров бренда, что приводит к желанию пользоваться любыми товарами, доверяя качеству (рационально) и характеру бренда (эмоционально) является следсвием работы коммуникаций не только ориентированных на потребителя, независимые media материалы. дмитрий карпов / desmonych@gmail.com 2012г
  76. 76. маркетинговая воронка принцип формирования отношения потребитель&продукт Awareness Acceptance TrialRetention / Preference Loyalty Advocacy Accumulation дмитрий карпов / desmonych@gmail.com 2012г
  77. 77. как это работает напримере «landing page» дмитрий карпов 2012
  78. 78. дмитрий карпов / desmonych@gmail.com 2012г
  79. 79. дмитрий карпов / desmonych@gmail.com 2012г
  80. 80. только digital — только hardcoreпрактические приемы проектного мышления в новых медиа дмитрий карпов / desmonych@gmail.com 2012г
  81. 81. дмитрий карпов / desmonych@gmail.com 2012г
  82. 82. от перехода к тестовойпокупке, от знакомствак преданным отношениямсценарии маркетинговойворонки в digital дмитрий карпов 2012
  83. 83. маркетинговая воронка принцип формирования отношения потребитель&продукт Awareness Acceptance TrialRetention / Preference Loyalty Advocacy Accumulation дмитрий карпов / desmonych@gmail.com 2012г
  84. 84. маркетинговая воронка принцип формирования отношения потребитель&продукт Awareness Acceptance TrialRetention / Preference Loyalty Advocacy Accumulation дмитрий карпов / desmonych@gmail.com 2012г дмитрий карпов 2012
  85. 85. взрывная тренировка креативного мышления в интерактивных медиа ДЕНЬ Третий (вечер)дмитрий карпов 2012
  86. 86. процесс дизайнав цифровойинтерактивной среде возвращаемся к теме дмитрий карпов 2012
  87. 87. процесс дизайна в интерактивной средеанализ конкурентов разработка сценариевизучение целевой аудитории пользователя в зависимости от договоренностей с клиентом учитывается предварительное тестирование, внесение корректировок в каждый этап, создание дополнительных материаловразработка карты сайта разработка wireframe и прототипов, что должно изначально присутствовать в договоре, техническомописание стратегии UX создание интерактивной задании и условиях предоставления услиудетали реализации модели, прототипаинтерактивных сценариев визуализация, дизайн разработка, верстка страниц и иллюстрирование по шаблонам и прототипам, интерактивных элементов, кодинг интерактивных оформление контента взаимодействий, оптимизация, отладка под браузеры и устройства дмитрий карпов 2012
  88. 88. процесс дизайна в интерактивной среде в зависимости от договоренностей с клиентом встречи и согласования могут быть по этапаманализ конкурентов разработка сценариев обычно две встречи проходят на этапе анализаизучение целевой аудитории пользователя и разработки креативного решения до прототипа, встреча-презентация визуального дизайна и финальная сдача готового функционального 1 решения с завершением юридических формальностей и оплатой работразработка карты сайта разработка wireframeописание стратегии UX создание интерактивнойдетали реализации модели, прототипаинтерактивных сценариев 2 визуализация, дизайн разработка, верстка страниц и иллюстрирование по шаблонам и прототипам, интерактивных элементов, 3 кодинг интерактивных оформление контента взаимодействий, оптимизация, отладка под браузеры и устройства дмитрий карпов 2012
  89. 89. принцип функционирования digital promo задача: убедительно рассказать об интерактивной идее решающей задачу клиента http://www.f-i.com/google/rebrief/дмитрий карпов 2012
  90. 90. этап: проектирование на бумаге,идеи и их эскизирование,условные детали интерфейсав масштабе 1:1 http://www.f-i.com/broadway/iPad/
  91. 91. http://www.f-i.com/google/rebrief/http://www.f-i.com/broadway/iPad/
  92. 92. карта сайтаhttp://www.f-i.com/google/rebrief/
  93. 93. карта сайтаhttp://www.f-i.com/broadway/iPad/
  94. 94. Wireframeshttp://www.f-i.com/google/rebrief/
  95. 95. Wireframes карта сайта и пользовательские сценарииhttp://www.artlebedev.ru/everything/rbe/site/process/
  96. 96. http://www.f-i.com/google/rebrief/
  97. 97. http://www.f-i.com/google/rebrief/
  98. 98. взрывная тренировкакреативного мышленияв интерактивных медиаДополнительно дмитрий карпов 2012
  99. 99. технологии интерактивныхвзаидействий и их влияниена тенденции в дизайне дмитрий карпов 2012
  100. 100. технологии в DIGITAL— понимать, знать, уметьбез знания нет новых идей,только адаптации чужих дмитрий карпов 2012
  101. 101. многие инструментыспециально подготовилидля удобной разработки http://twitter.github.com/bootstrap/index.html дмитрий карпов 2012
  102. 102. многие инструментыспециально подготовилидля удобной разработки http://foundation.zurb.com/ дмитрий карпов 2012
  103. 103. Типографика Сетки и адаптивный дизайнCSS3 инструмент дизайнера дмитрий карпов 2012
  104. 104. новые методы:иллюстрация пиктограммиспользуя шрифт http://pictos.cc/ дмитрий карпов 2012
  105. 105. новые методы:иллюстрация пиктограммиспользуя шрифт http://pictos.cc/ @font-face { font-family: Pictos; src: url(pictos-web.eot); src: local(☺), url(pictos-web.woff) format(woff), url(pictos-web.ttf) format(truetype), url(pictos-web.svg#webfontIyfZbseF) format(svg); } .icon { font-family: Pictos; font-size: 22px: } дмитрий карпов 2012
  106. 106. адаптивная сеткасредствами CSS/* 732px, 7-column width */@media only screen and (min-width: 768px) { .content-sub { width : 40.983%; /* 300px ÷ 732px = .40983 */ }}/* 948px, 9-column width */@media only screen and (min-width: 992px) { .content-sub { width : 31.645%; /* 300px ÷ 948px = .31645 */ }}/* 1380px, 13-column width */@media only screen and (min-width: 1382px) { .content-sub { width : 21.739%; /* 300px ÷ 1380px = .21739 */ }} дмитрий карпов 2012
  107. 107. адаптивная сетка средствами CSS http://24ways.org/2011/theres-no-formula-for-great-designsдмитрий карпов 2012
  108. 108. адаптивная сеткасредствами CSS дмитрий карпов 2012
  109. 109. адаптивная сеткасредствами CSS дмитрий карпов 2012
  110. 110. типографиказолотого сечения дмитрий карпов 2012
  111. 111. типографиказолотого сечения дмитрий карпов 2012
  112. 112. типографика золотого сеченияhttp://www.pearsonified.com/typography/ дмитрий карпов 2012
  113. 113. CSS3 — must для дизайнера понимать, полюбить, использовать дмитрий карпов 2012
  114. 114. CSS3 — must для дизайнера понимать, полюбить, использовать• Media Queries• RGBa & HSLa• Gradients• @font-face / Google fonts• Rounded Corners• Box Shadow• Multiple Backgrounds• Visual Effects дмитрий карпов 2012
  115. 115. CSS3 — must для дизайнера понимать, полюбить, использовать• Media Queries <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"• RGBa & HSLa href="mobile.css" />• Gradients• @font-face / Google fonts• Rounded Corners• Box Shadow• Multiple Backgrounds• Visual Effects дмитрий карпов 2012
  116. 116. CSS3 — must для дизайнера понимать, полюбить, использовать• Media Queries дмитрий карпов 2012
  117. 117. CSS3 — must для дизайнера понимать, полюбить, использовать <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" /> • min-width• Media Queries • max-width • device-width • min-device-width• RGBa & HSLa • max-device-width • orientation • -webkit-min-device-pixel-ratio border-radius border-radius: 10px;• Gradients box-shadow• @font-face / Google fonts box-shadow (horizontal offs vertical offset,• Rounded Corners optional blur distance,• Box Shadow optional distance, optional color,• Multiple Backgrounds opacity: 0.5; -webkit-transition-property: opacity; optional inset)• Visual Effects -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; opacity: 1; дмитрий карпов 2012
  118. 118. CSS3 — must для дизайнера понимать, полюбить, использовать• Gradients http://www.colorzilla.com/gradient-editor/ дмитрий карпов 2012
  119. 119. CSS3 — must для дизайнера понимать, полюбить, использовать box-shadow box-shadow (horizontal offset,• Rounded Corners vertical offset, optional blur distance,• Box Shadow optional distance, optional color,• Multiple Backgrounds optional inset)• Visual Effects opacity: 0.5; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; opacity: 1; дмитрий карпов 2012
  120. 120. http://narrowdesign.com/box-shadowbox-shadow (horizontal offset,vertical offset,optional blur distance,optional distance,optional color,optional inset) дмитрий карпов 2012
  121. 121. CSS3 — Типографикадмитрий карпов 2012
  122. 122. CSS3 — Типографика h1 a {           text-decoration: none;           color: #fff;           position: absolute;           -webkit-mask-image:  -webkit-gradient(linear, left top, left bottom, bottom, from(rgba(0,0,0,1)), color- stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));           text-shadow: 0 2px 0 #e9e9e9;           -webkit-transition: all .3s;           -moz-transition: all .3s;           transition: all .3s;       }  дмитрий карпов 2012
  123. 123. CSS3 — Типографика <div class="text">.text p{ font-family: Verdana; -moz-column-count: 2; <p> -moz-column-gap: 1em; Nancy Drew is a fictional character in various -webkit-column-count: 2; mystery fiction series. She was created by Edward Stratemeyer and first appeared in 1930. -webkit-column-gap: 1em; The books have been ghostwritten by a number column-count: 2; of authors and are published under the collective column-gap: 1em; pseudonym Carolyn Keene. line-height: 1.5em; </p> color: rgb(70,50,35); <p>} Over the decades the character has evolved in response to changes in American culture and tastes. In the 1980s a new series was created, The Nancy Drew Files, which featured an older and more professional Nancy as well as romantic plots. </p> </div> Nancy Drew is a fictional character in various mystery fiction Over the decades the character has evolved in response to series. She was created by Edward Stratemeyer and first changes in American culture and tastes. In the 1980s a new appeared in 1930. The books have been ghostwritten by a series was created, The Nancy Drew Files, which featured an number of authors and are published under the collective older and more professional Nancy as well as romantic plots. pseudonym Carolyn Keene. дмитрий карпов 2012
  124. 124. <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
  125. 125. http://www.myfonts.com/fonts/abstrkt/lineatura/light/дмитрий карпов 2012
  126. 126. CSS3 — Тениbox-shadowbox-shadow (horizontal offset,vertical offset,optional blur distance,optional distance,optional color,optional inset) дмитрий карпов 2012
  127. 127. CSS3 — Тени<h1> </h1> H1{ text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } дмитрий карпов 2012
  128. 128. дмитрий карпов 2012
  129. 129. упражнениядмитрий карпов 2012
  130. 130. упражнениякак бренд может использовать подкасты?как с выгодой можно использоватьторренты бренду?как можно использовать любой сервисдля получения при прокрутке страницыанимации? (pinterest, twitter, instagram) дмитрий карпов 2012
  131. 131. перерыв на обедесть что обсудить за столом :) дмитрий карпов 2012
  132. 132. проектирование интерфейса дмитрий карпов 2012
  133. 133. проектирование интерфейса Direct Manipulation When people directly manipulate User Control onscreen objects instead of using separate controls toUsers feel more in control manipulate them, theyre moreof an app when behaviors engaged with the task and theyand controls are familiar Consistency more readily understand theand predictable. results of their actions. Consistency in the interface allows people to transfer their knowledge and skills from one app to another. Metaphors When virtual objects and actions in an app are metaphors for objects and Aesthetic Integrity Feedback actions in the real world, users quickly grasp how to People expect immediate use the app. feedback when they operate a control, and they appreciate status updates during lengthy operations. http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Principles/Principles.html#//apple_ref/doc/uid/TP40006556-CH5-SW1 дмитрий карпов 2012
  134. 134. проектирование интерфейсамышление категориями удобстваи функциональности интерфейса дмитрий карпов 2012
  135. 135. метод разработки интерфейсаResearch Empathy Acceptance Sophistication Opportunity Nature дмитрий карпов 2012г. desmonych@gmail.com
  136. 136. метод разработки интерфейсаResearch Empathy Acceptance Sophistication Opportunity Nature Consistency Direct Manipulation Aesthetic Integrity User Control User Control Feedback Metaphors дмитрий карпов 2012г. desmonych@gmail.com
  137. 137. метод разработки интерфейсаResearch Empathy Acceptance Sophistication Opportunity Nature Consistency Direct Manipulation Aesthetic Integrity User Control User Control Feedback Metaphors дмитрий карпов 2012г. desmonych@gmail.com
  138. 138. метод разработки интерфейса Reason объективные причины какResearch Empathy Acceptance Sophistication Opportunity Nature сумма влияний на концепцию интерфейса, от логики функций до эстетики и кончных впечатленийИсследование Ментальное Принятие. Какие Разработка Интеграция новых Тестирование прототипатематических внедрение, стереотипы первичного возможностей в действии и наблюдениематериалов восприятие существуют, что знают прототипа в первичный за естественным поведением пользователя через о продукте и функции учитывающего прототип, пользователя. Корректировка глубокое пользователи, все привычные реализация «природы продукта», сопоставление себя принятые паттерны паттерны функциональных расширяемость, ограничения, поведения и знакомые и сценарии и информационных сравнение с другими метафоры пользователя приоритетов экосистемами дмитрий карпов 2012г. desmonych@gmail.com
  139. 139. дмитрий карпов / desmonych@gmail.com 2012г
  140. 140. дмитрий карпов / desmonych@gmail.com 2012г
  141. 141. дмитрий карпов / desmonych@gmail.com 2012г
  142. 142. проектирование интерфейсаUX стратегия,что на самомделе надо знатьдизайнеру дмитрий карпов 2012
  143. 143. упражнениядмитрий карпов 2012
  144. 144. что если целевая аудитория... дмитрий карпов / desmonych@gmail.com 2012г
  145. 145. примеры для обсужденияи анализа дмитрий карпов 2012
  146. 146. http://www.sound.philips.com/дмитрий карпов / desmonych@gmail.com 2012г
  147. 147. дмитрий карпов / desmonych@gmail.com 2012г
  148. 148. https://vimeo.com/47875656дмитрий карпов / desmonych@gmail.com 2012г
  149. 149. команда дмитрий карпов / desmonych@gmail.com 2012г
  150. 150. фотографии с тренинга дмитрий карпов / desmonych@gmail.com 2012г
  151. 151. дмитрий карпов 2012
  152. 152. обсудили результатына этом все, спасибо«арриба», коллеги,участники, все устали,все работали и старались дмитрий карпов 2012
  153. 153. дмитрий карпов 2012

×