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

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

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

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

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

15-16 сентября. Екатеринбургтренировка креативности в веб-дизайне и новых цифровых медиа, «курс-бестселлер» для практикующих профессионалов, дизайнеров и UX специалистов из комбинации оригинальных методик и известных практик digital

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

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

Часть номер ноль: «Ты что с Урала?»Часть первая: «Digital технология перемен»Часть вторая: Workshop «Огонь и молоты»

Впервые в истории глобальные перемены могут происходить с достаточной скоростью, чтобы такое понимание стало возможным для всего общества в целом. Раньше провозвестниками такого рода просветления были первым делом творцы, у которых была сила — а также смелость — провидца, чтобы слышать истинный язык внешнего мира и связывать его с миром внутренним.

Маршалл Маклюэн

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

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

Знакомимся. Люди и интерактивная среда, сайты, приложения, сервисы, устройства

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

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

Часть номер ноль: «Ты что с Урала?»Воля, пушки, соль и камень

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

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

Часть номер ноль: «Ты что с Урала?»Ермак и творческое мышление

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

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

Нам не хватает желания желать

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

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

Цифровая технология перемен

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

Маршалл Маклюэн

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

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

Часть номер один: «Как я это делал?»Два часа на афишу...

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

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

Дизайн создает не продукт. Ценность. Ценность идеи, материала, изменяемого мира вокруг.

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

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

В чем ценность дизайна?Ценность.

Ценность удобства?Ценность экономии?Ценность качества жизни?

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

прием: креативное технологическоепроектирование

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

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

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

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

прием: креативное тех-проектирование

API

место / карты / координаты

переводчик

динамический постинг (Twitter)

видео-хостинг

http://www.youtube.com/user/chromefastball

Атрибуты коммуникации бренда

скоростьизобретательность

API соц. сети

стабильность

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

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

https://developers.google.com/translate/v2/pricing?hl=ru

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

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

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

не знаешь что, придумай как

технологии сами дают основу для новых идей... например CSS3

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

CSS3

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

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

Color• RGBa (255, 255, 255, 0.5);• HSLa (360, 100%, 50%, 0.5);

border-radiusborder-radius: 10px;

box-shadowbox-shadow (horizontal offset,vertical offset,optional blur distance,optional distance,optional color,optional inset)

• min-width• max-width• device-width• min-device-width• max-device-width• orientation• -webkit-min-device-pixel-ratio

<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobile.css" />

opacity: 0.5;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;-webkit-transition-timing-function: ease;opacity: 1;

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

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

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

Color• RGBa (255, 255, 255, 0.5);• HSLa (360, 100%, 50%, 0.5);

border-radiusborder-radius: 10px;

box-shadowbox-shadow (horizontal offset,vertical offset,optional blur distance,optional distance,optional color,optional inset)

<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobile.css" />

opacity: 0.5;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;-webkit-transition-timing-function: ease;opacity: 1;

#alfa_type_color {color:hsla(44, 100%, 33%, .70);}

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

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

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

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

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

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

Color• RGBa (255, 255, 255, 0.5);• HSLa (360, 100%, 50%, 0.5);

border-radiusborder-radius: 10px;

box-shadowbox-shadow (horizontal offset,vertical offset,optional blur distance,optional distance,optional color,optional inset)

• min-width• max-width• device-width• min-device-width• max-device-width• orientation• -webkit-min-device-pixel-ratio

<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobile.css" />

opacity: 0.5;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;-webkit-transition-timing-function: ease;opacity: 1;

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

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

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

<link href="media-queries.css" rel="stylesheet" type="text/css">

Размер экрана меньше 980px (адаптивный макет)

Для размера экрана меньше 980px применим следующие правила:pagewrap = ширина 95%;content = ширина 60%;sidebar = ширина 30%.

Вариант с использованием media queries. Для определенных разрешений мы допускаем или запрещаем показ изображений (img), через CSS (display: none;). Современные браузеры адаптированы так, что по умолчанию не загружают изображения, которые отключены для показа.

Этот CSS будет применяться для размеря экрана меньше 480px, которая соответствует ширине iPhone в альбомной ориентации.html = отключаем регулировку размера шрифта. По умолчанию iPhone увеличивает размер шрифта, для более комфортного чтения. Вы можете это отключить добавив -webkit-text-size-adjust: none;main-nav = сбрасываем размер шрифта до 90%.

@media screen and (max-width: 480px) {   html {      -webkit-text-size-adjust: none;   }   #main-nav a {      font-size: 90%;      padding: 10px 8px;   }}

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

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

box-shadowbox-shadow (horizontal offset,vertical offset,optional blur distance,optional distance,optional color,optional inset)

http://narrowdesign.com/

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

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

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

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

@font-face { font-family: 'Righteous'; font-style: normal; font-weight: 400; src: local('Righteous'), local('Righteous-Regular'), url(http://themes.googleusercontent.com/static/fonts/righteous/v2/w5P-SI7QJQSDqB3GziL8XbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');}@font-face { font-family: 'Sorts Mill Goudy'; font-style: normal; font-weight: 400; src: local('Sorts Mill Goudy Regular'), local('SortsMillGoudy-Regular'), url(http://themes.googleusercontent.com/static/fonts/sortsmillgoudy/v3/JzRrPKdwEnE8F1TDmDLMUtsZ51dqzBwIdH2JuTl9mv4.woff) format('woff');}

http://rule-of-three.co.uk/

<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic|Merriweather:300|Righteous' rel='stylesheet' type='text/css'>

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

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

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

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

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

шрифты изданияNY Irvin NY Vogue Goat

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

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

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

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

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

API использования видеокамеры на компьютере пользователя в большинстве случаев используют Adobe Flash (но тенденция в замещении средствами JS и альтернативами)

http://www.xarg.org/project/jquery-webcam-plugin/

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

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

Практика

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

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

Практика

фото участников практики / упражнения собственность участников :) и не публикуетсяметодика: Дмитрий Карпов

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

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

Упражнение первое

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

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

Упражнение второе

фото участников практики / упражнения собственность участников :) и не публикуетсяметодика: Дмитрий Карпов

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

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

Упражнение третье

фото участников практики / упражнения собственность участников :) и не публикуетсяметодика: Дмитрий Карпов

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

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

Упражнение четвертое

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

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

Как выковывать новые идеи для цифровой интерактивной среды

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

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

Что нужно для успешного проекта в цифровой интерактивной среде, именуемо простым уральским словом DIGITAL?Ценность. Ценность идеи, материала, изменяемого мира вокруг.

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

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

direction

interaction

graphics art

languagetechnology

ideation

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

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

direction

interaction

graphics art

languagetechnology

ideation

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

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

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

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

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

direction

interaction

graphics art

languagetechnology

ideation

intuitive interfaceexperience artistic innovation

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

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

Культурные особенности

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

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

{Нет такой общности людей как «целевая аудитория», есть люди одних взглядов, общего опыта, языка, близких целей и предсказуемых возможностей. Давайте поговорим о людях соседней улицы или района. Давайте поговорим об «Уралмаше»}

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

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

Новые форматы медиа

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

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

Формат композиции в веб-дизайне

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

дмитрий карпов / [email protected] 2012г

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

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

дмитрий карпов / [email protected] 2012г

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

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

дмитрий карпов / [email protected] 2012г

Текстовый - форматПервые сайты в сети. Дизайн средствами HTML c минимумом графики и браузерной интерпретацией по умолчанию (серый фон, синие ссылки) 1993-1996 распространенный с выравниванием по центру элементов или по левому краю экрана

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

дмитрий карпов / [email protected] 2012г

Конус - форматстандартные композиционные модели формат 1993-1996 распространенный с выравниванием по центру элементов

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

дмитрий карпов / [email protected] 2012г

LEFT - форматстандартные композиционные модели формат 1996-1999

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

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

дмитрий карпов / [email protected] 2012г

LEFT - форматстандартные композиционные модели формат 1996-1999

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

дмитрий карпов / [email protected] 2012г

LEFT - форматстандартные композиционные модели

формат 1996-1999 традиции вертикальной навигации с левой

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

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

дмитрий карпов / [email protected] 2012г

Г- форматстандартные композиционные моделисамый распространенный 1995-2005

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

дмитрий карпов / [email protected] 2012г

Г- форматстандартные композиционные моделисамый распространенный 1995-2005

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

дмитрий карпов / [email protected] 2012г

Г- форматстандартные композиционные моделисамый распространенный 1995-2005

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

дмитрий карпов / [email protected] 2012г

Г- форматстандартные композиционные моделисамый распространенный 1995-2005

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

дмитрий карпов / [email protected] 2012г

Г- форматстандартные композиционные моделисамый распространенный 1995-2005

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

дмитрий карпов / [email protected] 2012г

П- форматстандартные композиционные модели широко используется 1996-2005

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

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

дмитрий карпов / [email protected] 2012г

П- форматстандартные композиционные модели широко используется 1996-2005

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

дмитрий карпов / [email protected] 2012г

Диск- форматстандартная композиционная модель для промо-сайтов, корпоративных сайтов и мультимедиа дисковшироко используется 1996-1999 старая школа

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

дмитрий карпов / [email protected] 2012г

TOP - форматстандартные композиционные модели

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

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

дмитрий карпов / [email protected] 2012г

TOP - форматконцентрация важнейшего функционального материала и имиджевого / образного в верхней горизонтали страницы, активный headerиспользование доминирует1996-2002

cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа

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

дмитрий карпов / [email protected] 2012г

TOP - форматстандартные композиционные модели

cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа

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

дмитрий карпов / [email protected] 2012г

TOP - форматстандартные композиционные модели

cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа

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

дмитрий карпов / [email protected] 2012г

TOP LINE - форматстандартные композиционные модели

http://www.diesel.com/colorexposure/

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

дмитрий карпов / [email protected] 2012г

TOP LINE - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

TOP LINE - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

TOP LINE - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

TOP LINE - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

MID-LINE - форматстандартные композиционные модели

Центральная горизонталь

навигация содержанием сайта

через центральный блок, который создает композиционный баланс

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

дмитрий карпов / [email protected] 2012г

MID-LINE - форматстандартные композиционные модели

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

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

дмитрий карпов / [email protected] 2012г

MID-LINE - форматстандартные композиционные модели

http://www.hidden-heroes.net/

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

дмитрий карпов / [email protected] 2012г

MID-LINE - форматстандартные композиционные модели

http://www.hidden-heroes.net/

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

дмитрий карпов / [email protected] 2012г

MID-LINE - форматстандартные композиционные модели

http://krystalrae.com

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

дмитрий карпов / [email protected] 2012г

TOP-SQUARE - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

TOP-SQUARE - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

TOP-SQUARE - форматстандартные композиционные модели

cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа

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

дмитрий карпов / [email protected] 2012г

4-COLUMN - форматстандартные композиционные модели

http://www.legendary.com/

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

дмитрий карпов / [email protected] 2012г

4-COLUMN - форматстандартные композиционные модели

http://www.legendary.com/

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

дмитрий карпов / [email protected] 2012г

4-COLUMN - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

ступени - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

ступени - форматстандартные композиционные модели

http://www.bureau-va.com

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

дмитрий карпов / [email protected] 2012г

ступени - форматстандартные композиционные модели

cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа

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

дмитрий карпов / [email protected] 2012г

angled - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

angled - форматстандартные композиционные модели

http://htcsense.dk/

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

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

дмитрий карпов / [email protected] 2012г

DOUBLE SLIDER - форматстандартные композиционные модели

http://www.budnitzbicycles.com/

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

дмитрий карпов / [email protected] 2012г

DOUBLE SLIDER - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

DOWN SLIDER - форматстандартные композиционные модели

http://graphicnovel-hybrid4.peugeot.com/start.html

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

дмитрий карпов / [email protected] 2012г

DOWN SLIDER - форматстандартные композиционные модели

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

дмитрий карпов / [email protected] 2012г

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

DOWN SLIDER - форматстандартные композиционные модели

http://www.newzealand.com/int/http://www.smashingmagazine.com/2012/03/08/behind-scenes-tourism-new-zealand/

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

дмитрий карпов / [email protected] 2012г

cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа

WATERFALL - форматтенденция 2011-12

http://pinterest.com

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

дмитрий карпов / [email protected] 2012г

cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа

MASH-UP - гибридный форматтенденция 2011-12

http://www.pinstagram.co/

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

дмитрий карпов / [email protected] 2012г

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

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

дмитрий карпов / [email protected] 2012г

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

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

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

дмитрий карпов / [email protected] 2012г

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

http://www.lust.nl/

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

дмитрий карпов / [email protected] 2012г

http://www.sound.philips.com

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

дмитрий карпов / [email protected] 2012г

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

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

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

дмитрий карпов / [email protected] 2012г

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

дмитрий карпов / [email protected] 2012г

FULL SCREEN MOTION — видео-сайтвидео композиционно построенное по приемам жанра, принципам съемки и динамике монтажа с возможностью управления сценами, обычно полноэкранное изображение

http://evelyn-interactive.searchingforabby.com/

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

дмитрий карпов / [email protected] 2012г

FULL SCREEN MOTION — видео-сайтвидео композиционно построенное по приемам жанра, принципам съемки и динамике монтажа с возможностью управления сценами, обычно полноэкранное изображение

http://sagmeister.com/

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

дмитрий карпов / [email protected] 2012г

http://www.ro.me/

INTERACTIVE MOTION — гибридный форматтенденция 2011-12 интерактивное 3D видео с условно свободной точкой фокуса, управление выбором точки просмотра и влиянием на композиционное положение объектов

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

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

Ошибки арт-директора

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

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

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

Ошибки арт-директора

http://zestleadership.com/

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

арт-директор должен понимать, что такие огромные PNG в

современных браузерах не всегда плавно плывут, а клиенты плывут

за конкретными выгодами, экспертизой и авторитетом

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

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

Ошибки арт-директора

http://zestleadership.com/

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

доводами, примерами, клиентами... много воды и черным

по черному

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

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

Ошибки арт-директора

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

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

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

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

Ошибки арт-директора

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

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

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

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

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

самое скучное, это проектирование форм регистрации, покупки,

авторизации, прелодеров, сообщений об ошибках и

страниц 404... этим и займемся

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

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

Дизайн стандартных положений

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

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

Дизайн «стандартных положений»

http://www.hidden-heroes.net/

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

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

Дизайн «стандартных положений»

http://www.ro.me/

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

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

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

Масштабируемость решения

http://bostonglobe.com

Адаптивный дизайн

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

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

Масштабируемость

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

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

Чему учат фантастические интерфейсы

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

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

дмитрий карпов 2012г. [email protected]

представим себе...

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

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

дмитрий карпов 2012г. [email protected]

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

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

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

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

дмитрий карпов 2012г. [email protected]

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

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

http://youtu.be/JSnB06um5r4

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

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

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

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

дмитрий карпов 2012г. [email protected]

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

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

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

дмитрий карпов 2012г. [email protected]

фантастика и реальность

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

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

дмитрий карпов 2012г. [email protected]

любая идея требует быть зафиксированной в физическом мире, на бумаге...

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

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

дмитрий карпов 2012г. [email protected]

фантастика и реальность

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

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

дмитрий карпов 2012г. [email protected]

фантастика и реальность

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

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

дмитрий карпов 2012г. [email protected]

фантастика и реальность

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

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

дмитрий карпов 2012г. [email protected]

фантастика и реальность

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

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

дмитрий карпов 2012г. [email protected]

интерфейс обеспечивает управление поступающей информацией

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

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

дмитрий карпов 2012г. [email protected]

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

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

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

дмитрий карпов 2012г. [email protected]

скетчинг

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

дмитрий карпов 2012г. [email protected]

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

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

дмитрий карпов 2012г. [email protected]

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

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

дмитрий карпов 2012г. [email protected]

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

дмитрий карпов 2012г. [email protected]

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

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

дмитрий карпов 2012г. [email protected]

фантастика и реальность

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

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

дмитрий карпов 2012г. [email protected]

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

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

а может и не нужно смотреть фантастику, а сесть и внимательно анализировать существующие приемы на массовом рынке

дмитрий карпов 2012г. [email protected]

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

дизайн—красиво

дмитрий карпов 2012г. [email protected]

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

из физической реальности в цифровую

дмитрий карпов 2012г. [email protected]

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

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

Гиперцифровая реальность

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

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

Гиперцифровая реальность

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

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

С вами разговаривает...

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

дмитрий карпов / [email protected] 2012г

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

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

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

С вами разговаривает...

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

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

Талантливый интерфейс

Закон ФиттсаИнтеллектуальные методы / S.M.A.R.T / Wireframes/Features & Functionality matrix/ R.E.A.S.O.N / ПерсоныUX проектирование / landing page / Функциональное модульное зонированиеПостроение дизайн-процесса в интерактивных медиа

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

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

Закон Фиттса

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

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

Закон Фиттса

http://fww.few.vu.nl/hci/interactive/fitts/

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

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

Закон Фиттса

http://fww.few.vu.nl/hci/interactive/fitts/

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

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

Закон Фиттса

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

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

Закон Фиттса

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

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

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

Specific / Специфичный

Measurable / Измеримый

Actionable / Осуществимый Relevant / Уместный

Trackable / Отслеживаемый

http://uxdesign.smashingmagazine.com/2011/09/13/the-s-m-a-r-t-user-experience-strategy/

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

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

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

Specific / Специфичный

Measurable / Измеримый

Actionable / Осуществимый Relevant / Уместный

Trackable / Отслеживаемый

http://uxdesign.smashingmagazine.com/2011/09/13/the-s-m-a-r-t-user-experience-strategy/

результатKPI

стратегия продукта

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

проектирование интерфейсаопыт коллег в разработке метода

проектирование интерактивной платформы / usability and desirability

фактически проектирование Landing Pages

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

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

проектирование интерактивной платформы / usability and desirability

фактически проектирование Landing Pages

A

B

C

D

определение групп задачпостроение иерархии важности и зависимости

А главныеB базовыеC вспомогательныеD дополнительные

A

B

C

D

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

A что увидит пользователь?B что подумает?C что сделает?D что получит? какой опыт приобретет?

ABCD

ABCD

ABCD

ABCD

A

BC

D

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

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

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

Матрица функциональности (Features & Functionality)

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

ПЕРСОНЫ

дмитрий карпов 2012г. [email protected]

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

метод разработки интерфейса на основе анализа пользователей /потребителей

дмитрий карпов 2012г. [email protected]

работа с «персонами» или «архетипами»

http://www.f-i.com/htc/global/

детализированная виртуальная личность используемая для моделирования опыта,

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

использования UI

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

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

WIREFRAMES ПРОЕКТИРОВАНИЕ

дмитрий карпов 2012г. [email protected]

http://www.f-i.com/htc/global/

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

МОЛОТЫ ПРОЕКТИРОВАНИЯ

дмитрий карпов 2012г. [email protected]

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

МОЛОТЫ ПРОЕКТИРОВАНИЯ

дмитрий карпов 2012г. [email protected]

http://www.axure.com

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

МОЛОТЫ ПРОЕКТИРОВАНИЯ

дмитрий карпов 2012г. [email protected]

http://www.axure.com

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

МОЛОТЫ ПРОЕКТИРОВАНИЯ

дмитрий карпов 2012г. [email protected]

https://gomockingbird.com

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

МОЛОТЫ ПРОЕКТИРОВАНИЯ

дмитрий карпов 2012г. [email protected]

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

ПРОЕКТИРОВАНИЕ ЭТАПА РАЗРАБОТКИ

дмитрий карпов 2012г. [email protected]

Anton Repponen is Global Creative Director at Fi

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

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

ПРОЕКТИРОВАНИЕ ЭТАПА РАЗРАБОТКИ

дмитрий карпов 2012г. [email protected]

Anton Repponen is Global Creative Director at Fi

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

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

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

дмитрий карпов 2012г. [email protected]

Research Empathy Acceptance Sophistication Opportunity Nature

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

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

дмитрий карпов 2012г. [email protected]

Research Empathy Acceptance Sophistication Opportunity Nature

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

Исследование тематических материалов

Ментальное внедрение, восприятие пользователя через глубокое сопоставление себя

Принятие. Какие стереотипы существуют, что знают о продукте и функции пользователи, принятые паттерны поведения и знакомые метафоры

Разработка первичного прототипа учитывающего все привычные паттерны и сценарии пользователя

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

Тестирование прототипа в действии и наблюдение за естественным поведением пользователя. Корректировка «природы продукта», расширяемость, ограничения, сравнение с другими экосистемами

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

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

UX проектирование

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

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

UX проектированиебрендинговые коммуникации / проектирование интерактивной платформы / usability and desirability визуализируем желания

фактически проектирование Landing Pages

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

topline навигационный блок основных проектов (смежные промо-сервисы) базовая навигация

leadgenerator блок стимулирующий вовлечение/действие пользователя, обещание выгоды

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

demo демонстрация продукта /сервиса, визуальные атрибуты демонстрирующие

обладание и функции, возможные дополнительные опции и SKU

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

преимуществ

social media / интеграция возможностей социальных медиа

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

footer / юридическая информация, контактная информация,

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

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

Процесс

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

анализисследование возможностей решения задачи

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

презентацияподтверждение концепции

реализациятехническое исполнение

правки корректировкатехническое исправление

публикациязавершение проекта

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

визуальный дизайн

разработка кодинг

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

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

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

потребность

мотив

импульс

стимул

вовлечение

эмпатия

активация / решение / шаринг

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

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

обратная связь

использование мотива личности, опредмечивание мотива в вербальном и визуальном

пространстве

создание визуального импульса инстинктивного, понятного в

секунду контакта, фиксирует внимание

стимуляция личностного интереса, раскрытие

удовлетворения мотива

расширение интереса сценариями разной активности, игр, конкурсов,

актуальный контент, скидки

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

кино, сервис, оформление заказа, завершение потребительского цикла

создание сюжета осознанного сопереживания эмоциональному

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

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

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

техническая модель

визуальная интерпретация

вербальная интерпретация

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

психологическая механика

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

реальный срок

набор обязательных

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

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

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

интерактивной модели

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

механики

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

дмитрий карпов / [email protected] 2012г

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

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

дмитрий карпов / [email protected] 2012г

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

AwarenessAcceptance

Trial

LoyaltyRetention / Preference

Advocacy

Accumulation

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

Acceptance — принятие бренда. То есть, потребитель не отрицает возможности приобретения.  

Trial — пробная самостоятельная покупка.

Retention / Preference — потребление товара или услуги по рациональным причинам (цена, акции, наличие в ближайшем магазине и пр.) на постоянной основе.

Loyalty — потребление по эмоциональным причинам. Меньше зависит от цены,

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

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

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

дмитрий карпов / [email protected] 2012г

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

AwarenessAcceptance

Trial

LoyaltyRetention / Preference

Advocacy

Accumulation

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

дмитрий карпов / [email protected] 2012г

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

Awareness

Acceptance

Trial

Loyalty

Retention / Preference

Advocacy

Accumulation

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

дмитрий карпов / [email protected] 2012г

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

дмитрий карпов / [email protected] 2012г

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

дмитрий карпов / [email protected] 2012г

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

Awareness

Acceptance

Trial

Loyalty

Retention / Preference

Advocacy

Accumulation

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

дмитрий карпов / [email protected] 2012г

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

Awareness

Acceptance

Trial

Loyalty

Retention / Preference

Advocacy

Accumulation

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

дмитрий карпов / [email protected] 2012г

http://graphicnovel-hybrid4.peugeot.com/start.html

Awareness

Acceptance

Trial

Acceptance

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

дмитрий карпов / [email protected] 2012г

Awareness

AcceptanceTrial

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

дмитрий карпов / [email protected] 2012г

дополнительный фактор убежденияминимальный риск

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

Try to Buy

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

дмитрий карпов / [email protected] 2012г

Awareness

Acceptance

Acceptance

Trial

узнавание «...кстати, вот что посмотрю»

возможно «интересно... нравится»

хочу «уверен, мне подхолит»

вот бы мне такие «офигительно смотрится»

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

дмитрий карпов / [email protected] 2012г

Тайна профессии: Меньше слушай советов, больше пробуй сам

Тайна профессии: Читай в день по заметке о технологии

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

Тайна профессии: Не спрашивай у пользователя мнения, дай ему готовый продукт

Тайна профессии: Лучше спорить прототипами

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

дмитрий карпов / [email protected] 2012г