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

DIGITAL EXPLOSION
взрывная тренировка
креативного мышления
в интерактивных медиа
ДМИТРИЙ КАРПОВ
И КОМАНДА
лекции сменяют упражнения, темы
сменяют кейсы и примеры,
рекомендации и советы, задания
специально развивают комплекс
навыков, практика и теория,
все по делу, без воды, в интенсивном
ритме взрывающем мозг новыми
идеями, неожиданным применением
интерактивных медиа, инструментов
и пониманием природы
взаимодействий в digital

дмитрий карпов 2012


ДМИТРИЙ КАРПОВ
И КОМАНДА


КРЫМ. КОКТЕБЕЛЬ.
ПЛАН ДЕЙСТВИЙ. КОМАНДА.


почему, зачем и как


почему, зачем и как
задача, процесс
стратегия и тактика

?
Коктебель !



ДЕНЬ ПЕРВЫЙ


что это такое?


структура
знаний, навыков
и опыта в профессии

ideation

direction graphics art

interaction technology language


идея и концепция
в интерактивных проектах

ideation




комплекс основных
навыков для дизайна

ideation



experience intuitive interface artistic innovation

дизайнер в digital не
визуализатор идей,
он создает сценарии,
реализует человеческое
желание, манипулирует,
знает действие наперед,
находит нужную
визуальную форму

дмитрий карпов / desmonych@gmail.com 2012г

дизайнер в digital
должен быть взрывателем,
он способен собрать
«интерактивную бомбу»


«интерактивная
бомба»
взять задачу, достать мотивы
пользователя, взять самый популярный
сервис, внедрить провокацию, удалить баги,
смешать желания и страхи, полить
самоутверждением, в центр выгоды по
краям осколки мнений, ретвитов и репинов,
внедрить фильтры, персонифицировать
проникновение, добавить разрывных,
коротких текстов, фугасный заряд
нового опыта
и красивая и удобная оболочка сверху


дизайнер в цифровой интерактивной среде
не только проводник визуальных идей, дизайнер
является сооснователем многих известных
компаний и сервисов, как эти.
дизайнер должен мыслить категориями успешного
бизнеса, желательно своего собственного :)


этапы разработки
интерактивного проекта


управление проектом

договор исследование креативное UX дизайн визуальный дизайн разработка запуск проекта корректировка
предложение сопровождение

тз SWOT концепт эскизы карта сайта интерфейс верстка статистика корректировка

согласование wireframes иллюстрации программинг
сценарий механики

подписание анализ презентация прототипы шаблоны экранов отладка / оптимизация KPI обновление

outsource или работа фрилансеров

outsource или работа фрилансеров


этапы разработки интерактивного
проекта / вопросы к клиенту
и анализ информации

•Наличие интерактивных сервисов
•Социальные сети
•CRM активность
•Наличие промо-сайтов продуктов
•Наличие мобильных приложений
•Передача ценностей бренда
•Usability анализ
•Поисковая оптимизация


этапы разработки интерактивного
проекта / вопросы к клиенту
и анализ информации


задача клиента репрезентация
задачи с позиции
пользователя

реальный срок психологическая визуальная интерпретация
механика

вербальная интерпретация
техническая модель

социальная интеграция

% реализуемость модели

набор обязательных
образов
творческая интерпретация образа
реализации мотива (показать власть над
объектом, подчеркнуть престиж,
демонстрация личного достижения,
идентифицировать личность с героем)

прогнозируемая реализация
реализуемость визуальной коммуникации
мотивов психологической механики
и технической интерактивной модели


SMM перспективы и влияние
на развитие медиа


Общее количество сайтов, с которых
производились пины картинок, превысило
100 тысяч. На схеме приведены 20 самых
популярных из них.

http://blog.rjmetrics.com/Pinterest-Data-Analysis-An-Inside-Look/

Около 80% пинов составляют репины, то есть
картинки других пользователей, которым делается
перепост. Pinterest, таким образом, является
действительно глобальной системой обмена.
Для сравнения: исследование Hubspot показало,
что в Twitter лишь 1,4% твитов — это ретвиты.


Не ждем, что пользователи будут охотно из группы переходить
на наш сайт. Чаще всего, они этого не делают. Поэтому всю
необходимую информацию даем им в группе: цены под
фотографиями товаров, описания условий доставки и т. п.
Трафик из ВКонтакте — тянем на группу ВКонтакте. Трафик
с внешних сайтов — тянем на внешний сайт. Любые попытки
«скрестить» эти виды трафика — ведут к большим потерям
трафика в пути.

Группа ВКонтакте и ее продвижение не заменяют сайт и трафик
с поисковых систем (SEO и контекстная реклама).

http://keymarketing.ru/page/neskolko-slov-o-prodvizhenii-vkontakte


Теперь, в эпоху интернет-магазинов, amazon.com и eBay, место
на виртуальной полке не стоит ничего — и очень невеликие, но
все же продажи странных продуктов в совокупности
складываются в очень внушительные цифры. Эти нишевые
продукты, количество которых увеличивается с фантастической
скоростью в силу упрощения и удешевления производства,
составляют так называемый «длинный хвост» — который
бесконечен (равно как и спрос на него). Демократизируется и
дистрибуция: теперь независимые производители могут сами
торговать своей продукцией, через сеть; успешные прецеденты
вы и сами, наверное, знаете.
Будущее — не за хитами, а за нишевыми продуктами.


http://www.vedomosti.ru/newspaper/article/281441/obognal_televizor


идея дизайнера это
сумма факторов
культуры, экономики,
эстетики и психологии


ТНТ (тринитротолуол) не взрывается сам, даже при
темпиратуре плавления... горит, но взрыва не будет,
ему нужен детонатор

так и наш опыт, наше представление о мире требует новых
детонирующих идей, которые не возьмутся из прошлого,
но из размышлений, фантазий и бреда о будущем, смелых
концепций дизайна несуществующего, вне объективного опыта


Когда подопытным дают головоломку, а потом предлагают
перекусить, они намного чаще (по сравнению с контрольной
группой) выбирают вредный торт, чем полезный фруктовый
салат.
Опрос показал, что подопытные — студенты университета
в США — понимают, какая пища вреднее. Но в момент выбора
их сознание занято, и автоматические процессы мозга,
которые некому притормозить, делают нерациональный
выбор в пользу сладкой калорийной еды.

http://www.d.umn.edu/~dglisczi/4501web/4501Readings/Shiv(1999)FruitOrCake.pdf


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

http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107


Мозг руководствуется соображениями тактической выгоды
— например, взять то, что ближе лежит, и сэкономить доли
калорий на движении руки. Как обратить это на пользу
здоровью? Например, в салат-баре отодвигать тарелки на 25
сантиметров назад. Эксперимент годовалой давности
показал: в этой ситуации люди набирают на 8-16 процентов
меньше еды. Хотя каждый и уверен, что определяет свою
порцию волевым решением.



ДЕНЬ ВТОРОЙ


метод креативных кругов

совмещаем
несовместимое, сумма
больше чем составные
факторы


мотивы

культурный архетип мотивы

визуальные атрибуты
коммуникации

выгоды / RTB /персоны

атрибуты

Дмитрий Карпов 2012г

мотивы


Процессуально-содержательные мотивы

мотивы
Экстринсивные (внешние) мотивы

Мотив идентификации с
другим человеком
Мотив аффилиации

Мотив самоутверждения

Негативная мотивация
Мотив достижения

Мотив власти Мотив саморазвития

Просоциальные (общественно значимые) мотивы


Процессуально-содержательные мотивы

мотивы
Экстринсивные (внешние) мотивы

Мотив идентификации с
другим человеком

Мотив самоутверждения

Мотив достижения

Мотив саморазвития

Просоциальные (общественно значимые) мотивы


дух природа магия

сила
знание мотивы

время
старец культурный архетип

артефакт

возвращение

антигерой герой путешествие

смерть

феникс
дитя

мать
клад трикстер



сила

время

артефакт

антигерой возвращение

герой путешествие
дитя
смерть

феникс

клад
мать
трикстер



сила

время

артефакт

возвращение
антигерой

герой путешествие

культурный архетип культурная аллюзия смерть
дитя
феникс
герой сцена из кинофильма

трикстер сцена из книги клад мать
трикстер
старец музыкальный фрагмент

клад сюжет картины

историческое событие

известная личность


мотивы
цвета
ощущения культурный архетип
типографика
ключевой образ коммуникации бренда

звуки-образы

символы

теглайн герой

ритуал


ощущения
мотивы
цвета
культурный архетип
ключевой образ коммуникации бренда

звуки-образы

символы герой

теглайн

ритуал


мотивы

здоровье
качество жизни
коммуникации бренда
социальный статус
выгоды / RTB /персоны
соревнования

интеграция с ус-ми Apple

ощущение прогресса
и саморазвития


мотивы


качество жизни коммуникации бренда

соревнования выгоды / RTB /персоны
здоровье

ощущение прогресса и саморазвития

интеграция с ус-ми Apple


преданность марке


мотивы

сезонные факторы
ценовая категория коммуникации
УТП / преимущества
выгоды /RTB/ персоны
акции

места распространения атрибуты
ситуации потребления


мотивы

анализ конкурентов
акции



мотивы

анализ конкурентов
акции


можем / должны не можем


креативная концепция
media mix
мотивы



канал коммуникации выгоды / RTB /персоны

Outdoor
атрибуты
Ambient

Web Mobile Video SMM Online

Print

DMail

TV


media mix
мотив самоутверждения мотивы
мотив идентификации с другим человеком

таинственный клад / подарок визуальные атрибуты
символы цвета типографика
Outdoor
атрибуты
Ambient места распространения акции сезонные факторы


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


цели и задачи клиента

интегрированная кампания
цели и задачи
потребителя

media mix мотивы




Outdoor
атрибуты
Ambient


Print

DMail

TV



ДЕНЬ Третий


ПРОВЕРЯЕМ
И ОБСУЖДАЕМ
ЗАДАНИЯ


люди, медиа,
статистика


в среднем у интернет
пользователя на мобильном
установленно 20-25
приложений, 5-9 из которых
он использует еженедельно,
обычно это SM приложения

InSites Consulting


окло 53% пользователей
смартфонов в США
савнивают цены при
покупках используя
интернет

InSites Consulting


InSites Consulting


Pinterest становится
потенциально интересным
для брендов, 41% пользователей
распространяют информацию
о брендах, контент удобно
«брендировать»,
около 35% бренд-контента
публикуется в instagram
среди пользователей

InSites Consulting


пользователи в половине
случаев позитивно
комментируют бренды в соц.
сетях, только около 10%
негативно

InSites Consulting


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

хорошая идея в digital всегда экономична
и вызывает Word-Of-Mouth Marketing,
вызывает желание делиться, обсуждать,
участвовать


Архитектура каналов

BOUGHT MEDIA OWNED MEDIA EARNED MEDIA
Search (SEM) Display & SP Social Ads Social App SMS & E-mail list SMS & E-mail list сайт SM каналы

Обеспечение доступности всех Основная площадка для Трансляция имиджа
digital каналов трансляции премиального и анонсирование
brand experience digital-инноваций,
Hub всех digital коммуникаций формирование обратной связи
CRM-активностей,
репутационный менеджмент
Привлечение аудитории
(генерация траффика)


наемные медиа

концепция А

концепция Б

концепция B

BOUGHT MEDIA

OWNED MEDIA

EARNED MEDIA

собственные медиа заслуженные медиа


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

хорошая идея в digital всегда экономична
и вызывает Word-Of-Mouth Marketing,
вызывает желание делиться, обсуждать,
участвовать


упражнения


Придумать
и реализовать
любой сюжет
с использованием
пальцев одной руки
возможна реализация анимации


Придумать
сценарий
интерактивного
взаимодействия
связанный с косметическим средством
ухода за кожей


Придумать
и реализовать
концепт
несуществующего
продукта или услуги
Apple
по стандартам оформления и в стиле общения


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


маркетинговая воронка
принцип формирования отношения потребитель&продукт

Awareness — узнавание названия бренда и его
принадлежность к категории.

Acceptance — принятие бренда. То есть, потребитель не
отрицает возможности приобретения.
Awareness
Trial — пробная самостоятельная покупка.
Acceptance
Trial
Retention / Preference Retention / Preference — потребление товара или услуги по
рациональным причинам (цена, акции, наличие в
ближайшем магазине и пр.) на постоянной основе.
Loyalty
Advocacy Loyalty — потребление по эмоциональным
причинам. Меньше зависит от цены, дистрибуции и
других объективны факторов.

Accumulation
Advocacy является следствием работы с лояльностью и
приводит к распространению положительных
рекомендаций (word of mouth)

Accumulation — накопление знаний и опыта потребления
товаров бренда, что приводит к желанию пользоваться любыми
товарами, доверяя качеству (рационально) и характеру бренда
(эмоционально) является следсвием работы коммуникаций не
только ориентированных на потребителя, независимые media
материалы.



Awareness
Acceptance
Trial
Retention / Preference
Loyalty

Advocacy

Accumulation


как это работает на
примере «landing page»


только digital — только hardcore
практические приемы проектного мышления в новых медиа


от перехода к тестовой
покупке, от знакомства
к преданным отношениям
сценарии маркетинговой
воронки в digital



Awareness

Acceptance

Trial


Loyalty

Advocacy

Accumulation



ДЕНЬ Третий
(вечер)


процесс дизайна
в цифровой
интерактивной среде

возвращаемся к теме


в интерактивной среде

анализ конкурентов разработка сценариев
изучение целевой аудитории пользователя
в зависимости от договоренностей с клиентом
учитывается предварительное тестирование,
внесение корректировок в каждый этап,
создание дополнительных материалов
разработка карты сайта разработка wireframe и прототипов, что должно изначально
присутствовать в договоре, техническом
описание стратегии UX создание интерактивной задании и условиях предоставления услиу
детали реализации модели, прототипа
интерактивных сценариев

визуализация, дизайн разработка, верстка страниц
и иллюстрирование по шаблонам и прототипам,
интерактивных элементов, кодинг интерактивных
оформление контента взаимодействий,
оптимизация, отладка под
браузеры и устройства


в интерактивной среде
в зависимости от договоренностей с клиентом
встречи и согласования могут быть по этапам

анализ конкурентов разработка сценариев
обычно две встречи проходят на этапе анализа
изучение целевой аудитории пользователя и разработки креативного решения до прототипа,
встреча-презентация визуального дизайна
и финальная сдача готового функционального
1 решения с завершением юридических
формальностей и оплатой работ
разработка карты сайта разработка wireframe
описание стратегии UX создание интерактивной
детали реализации модели, прототипа
интерактивных сценариев

2

визуализация, дизайн разработка, верстка страниц
и иллюстрирование по шаблонам и прототипам,
интерактивных элементов, 3 кодинг интерактивных
оформление контента взаимодействий,
оптимизация, отладка под
браузеры и устройства


принцип
функционирования
digital promo

задача: убедительно рассказать
об интерактивной идее
решающей задачу клиента

http://www.f-i.com/google/rebrief/


этап: проектирование на бумаге,
идеи и их эскизирование,
условные детали интерфейса
в масштабе 1:1

http://www.f-i.com/broadway/iPad/

карта сайта


Wireframes


Wireframes
и пользовательские сценарии

http://www.artlebedev.ru/everything/rbe/site/process/


Дополнительно


технологии интерактивных
взаидействий и их влияние
на тенденции в дизайне


технологии в DIGITAL
— понимать, знать, уметь
без знания нет новых идей,
только адаптации чужих


многие инструменты
специально подготовили
для удобной разработки

http://twitter.github.com/bootstrap/index.html


многие инструменты
специально подготовили
для удобной разработки

http://foundation.zurb.com/


Типографика
Сетки и адаптивный дизайн
CSS3 инструмент дизайнера


новые методы:
иллюстрация пиктограмм
используя шрифт
http://pictos.cc/


новые методы:
иллюстрация пиктограмм
используя шрифт
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:
}


адаптивная сетка
средствами CSS
/* 732px, 7-column width */

@media only screen and (min-width: 768px) {

.content-sub {
width : 40.983%; /* 300px ÷ 732px = .40983 */ }

}


.content-sub {
width : 31.645%; /* 300px ÷ 948px = .31645 */ }

}


.content-sub {
width : 21.739%; /* 300px ÷ 1380px = .21739 */ }

}



http://24ways.org/2011/theres-no-formula-for-great-designs


золотого сечения


золотого сечения

http://www.pearsoniﬁed.com/typography/


CSS3 — must для дизайнера
понимать, полюбить,
использовать



• Media Queries
• RGBa & HSLa
• Gradients
• @font-face / Google fonts
• Rounded Corners
• Box Shadow
• Multiple Backgrounds
• Visual Effects



• 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



• Media Queries



• Gradients

http://www.colorzilla.com/gradient-editor/



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;


http://narrowdesign.com/
box-shadow
vertical offset,
optional distance,
optional color,
optional inset)


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;
    }



<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.


http://www.myfonts.com/fonts/abstrkt/lineatura/light/


CSS3 — Тени

box-shadow
vertical offset,
optional distance,
optional color,
optional inset)


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);
}


упражнения

как бренд может использовать подкасты?

как с выгодой можно использовать
торренты бренду?

как можно использовать любой сервис
для получения при прокрутке страницы
анимации? (pinterest, twitter, instagram)


перерыв на обед

есть что обсудить за столом :)


проектирование интерфейса



Direct Manipulation
When people directly manipulate
User Control onscreen objects instead of
using separate controls to
Users feel more in control manipulate them, they're more
of an app when behaviors engaged with the task and they
and controls are familiar Consistency more readily understand the
and 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



мышление категориями удобства
и функциональности интерфейса


метод разработки интерфейса

Research Empathy Acceptance Sophistication Opportunity Nature

дмитрий карпов 2012г. desmonych@gmail.com



Consistency Direct Manipulation Aesthetic Integrity

User Control User Control Feedback

Metaphors




Consistency Direct Manipulation

Aesthetic Integrity
User Control User Control Feedback

Metaphors



Reason
объективные
причины как
Research Empathy Acceptance Sophistication Opportunity Nature сумма влияний
на концепцию
интерфейса,
от логики функций
до эстетики
и кончных
впечатлений

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



UX стратегия,
что на самом
деле надо знать
дизайнеру


что если целевая аудитория...


примеры для обсуждения
и анализа


http://www.sound.philips.com/


https://vimeo.com/47875656


команда


фотографии с тренинга


обсудили результаты
на этом все, спасибо
«арриба», коллеги,
участники, все устали,
все работали и старались


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

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Viewers also liked

Viewers also liked (9)

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

Similar to Digital explosion материал с интенсивной тренировки (20)

More from Dmitry Karpov

More from Dmitry Karpov (10)

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