firehammertalante-120924192532-phpapp02

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

description

 

Transcript of firehammertalante-120924192532-phpapp02

Page 1: firehammertalante-120924192532-phpapp02

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

Page 2: firehammertalante-120924192532-phpapp02

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

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

Page 3: firehammertalante-120924192532-phpapp02

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

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

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

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

Page 4: firehammertalante-120924192532-phpapp02

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

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

Page 5: firehammertalante-120924192532-phpapp02

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

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

Page 6: firehammertalante-120924192532-phpapp02

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

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

Page 7: firehammertalante-120924192532-phpapp02

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

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

Page 8: firehammertalante-120924192532-phpapp02

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

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

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

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

Page 9: firehammertalante-120924192532-phpapp02

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

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

Page 10: firehammertalante-120924192532-phpapp02

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

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

Page 11: firehammertalante-120924192532-phpapp02

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

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

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

Page 12: firehammertalante-120924192532-phpapp02

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

Page 13: firehammertalante-120924192532-phpapp02

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

Page 14: firehammertalante-120924192532-phpapp02

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

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

API

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

переводчик

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

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

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

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

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

API соц. сети

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

Page 15: firehammertalante-120924192532-phpapp02

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

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

Page 16: firehammertalante-120924192532-phpapp02

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

Page 17: firehammertalante-120924192532-phpapp02

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

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

Page 18: firehammertalante-120924192532-phpapp02

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: firehammertalante-120924192532-phpapp02

дмитрий карпов 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: firehammertalante-120924192532-phpapp02

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

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

Page 21: firehammertalante-120924192532-phpapp02

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: firehammertalante-120924192532-phpapp02

дмитрий карпов 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: firehammertalante-120924192532-phpapp02

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

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

http://narrowdesign.com/

Page 24: firehammertalante-120924192532-phpapp02

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

Page 25: firehammertalante-120924192532-phpapp02

дмитрий карпов 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: firehammertalante-120924192532-phpapp02

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

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

Page 27: firehammertalante-120924192532-phpapp02

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

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

Page 28: firehammertalante-120924192532-phpapp02

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

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

Page 29: firehammertalante-120924192532-phpapp02

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

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

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

Page 30: firehammertalante-120924192532-phpapp02

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

Практика

Page 31: firehammertalante-120924192532-phpapp02

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

Практика

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

Page 32: firehammertalante-120924192532-phpapp02

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

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

Page 33: firehammertalante-120924192532-phpapp02

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

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

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

Page 34: firehammertalante-120924192532-phpapp02

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

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

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

Page 35: firehammertalante-120924192532-phpapp02

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

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

Page 36: firehammertalante-120924192532-phpapp02

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

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

Page 37: firehammertalante-120924192532-phpapp02

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

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

Page 38: firehammertalante-120924192532-phpapp02

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

direction

interaction

graphics art

languagetechnology

ideation

Page 39: firehammertalante-120924192532-phpapp02

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

direction

interaction

graphics art

languagetechnology

ideation

Page 40: firehammertalante-120924192532-phpapp02

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

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

Page 41: firehammertalante-120924192532-phpapp02

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

direction

interaction

graphics art

languagetechnology

ideation

intuitive interfaceexperience artistic innovation

Page 42: firehammertalante-120924192532-phpapp02

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

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

Page 43: firehammertalante-120924192532-phpapp02

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

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

Page 44: firehammertalante-120924192532-phpapp02

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

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

Page 45: firehammertalante-120924192532-phpapp02

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

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

Page 46: firehammertalante-120924192532-phpapp02

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

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

Page 47: firehammertalante-120924192532-phpapp02

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

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

Page 48: firehammertalante-120924192532-phpapp02

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

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

Page 49: firehammertalante-120924192532-phpapp02

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

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

Page 50: firehammertalante-120924192532-phpapp02

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

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

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

Page 51: firehammertalante-120924192532-phpapp02

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

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

Page 52: firehammertalante-120924192532-phpapp02

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

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

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

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

Page 53: firehammertalante-120924192532-phpapp02

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

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

Page 54: firehammertalante-120924192532-phpapp02

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

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

Page 55: firehammertalante-120924192532-phpapp02

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

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

Page 56: firehammertalante-120924192532-phpapp02

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

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

Page 57: firehammertalante-120924192532-phpapp02

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

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

Page 58: firehammertalante-120924192532-phpapp02

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

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

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

Page 59: firehammertalante-120924192532-phpapp02

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

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

Page 60: firehammertalante-120924192532-phpapp02

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

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

Page 61: firehammertalante-120924192532-phpapp02

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

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

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

Page 62: firehammertalante-120924192532-phpapp02

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

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

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

Page 63: firehammertalante-120924192532-phpapp02

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

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

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

Page 64: firehammertalante-120924192532-phpapp02

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

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

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

Page 65: firehammertalante-120924192532-phpapp02

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

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

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

Page 66: firehammertalante-120924192532-phpapp02

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

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

Page 67: firehammertalante-120924192532-phpapp02

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

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

Page 68: firehammertalante-120924192532-phpapp02

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

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

Page 69: firehammertalante-120924192532-phpapp02

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

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

Page 70: firehammertalante-120924192532-phpapp02

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

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

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

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

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

Page 71: firehammertalante-120924192532-phpapp02

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

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

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

Page 72: firehammertalante-120924192532-phpapp02

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

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

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

Page 73: firehammertalante-120924192532-phpapp02

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

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

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

Page 74: firehammertalante-120924192532-phpapp02

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

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

http://krystalrae.com

Page 75: firehammertalante-120924192532-phpapp02

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

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

Page 76: firehammertalante-120924192532-phpapp02

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

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

Page 77: firehammertalante-120924192532-phpapp02

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

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

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

Page 78: firehammertalante-120924192532-phpapp02

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

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

http://www.legendary.com/

Page 79: firehammertalante-120924192532-phpapp02

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

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

http://www.legendary.com/

Page 80: firehammertalante-120924192532-phpapp02

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

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

Page 81: firehammertalante-120924192532-phpapp02

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

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

Page 82: firehammertalante-120924192532-phpapp02

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

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

http://www.bureau-va.com

Page 83: firehammertalante-120924192532-phpapp02

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

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

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

Page 84: firehammertalante-120924192532-phpapp02

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

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

Page 85: firehammertalante-120924192532-phpapp02

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

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

http://htcsense.dk/

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

Page 86: firehammertalante-120924192532-phpapp02

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

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

http://www.budnitzbicycles.com/

Page 87: firehammertalante-120924192532-phpapp02

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

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

Page 88: firehammertalante-120924192532-phpapp02

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

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

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

Page 89: firehammertalante-120924192532-phpapp02

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

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

Page 90: firehammertalante-120924192532-phpapp02

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

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

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

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

Page 91: firehammertalante-120924192532-phpapp02

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

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

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

http://pinterest.com

Page 92: firehammertalante-120924192532-phpapp02

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

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

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

http://www.pinstagram.co/

Page 93: firehammertalante-120924192532-phpapp02

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

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

Page 94: firehammertalante-120924192532-phpapp02

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

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

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

Page 95: firehammertalante-120924192532-phpapp02

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

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

http://www.lust.nl/

Page 96: firehammertalante-120924192532-phpapp02

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

http://www.sound.philips.com

Page 98: firehammertalante-120924192532-phpapp02

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

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

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

Page 100: firehammertalante-120924192532-phpapp02

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

Page 101: firehammertalante-120924192532-phpapp02

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

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

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

Page 102: firehammertalante-120924192532-phpapp02

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

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

http://sagmeister.com/

Page 104: firehammertalante-120924192532-phpapp02

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

http://www.ro.me/

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

Page 105: firehammertalante-120924192532-phpapp02

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

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

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

Page 106: firehammertalante-120924192532-phpapp02

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

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

http://zestleadership.com/

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

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

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

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

Page 107: firehammertalante-120924192532-phpapp02

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

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

http://zestleadership.com/

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

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

по черному

Page 108: firehammertalante-120924192532-phpapp02

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

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

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

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

Page 109: firehammertalante-120924192532-phpapp02

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

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

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

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

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

Page 110: firehammertalante-120924192532-phpapp02

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

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

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

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

Page 111: firehammertalante-120924192532-phpapp02

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

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

Page 112: firehammertalante-120924192532-phpapp02

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

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

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

Page 113: firehammertalante-120924192532-phpapp02

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

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

http://www.ro.me/

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

Page 114: firehammertalante-120924192532-phpapp02

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

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

http://bostonglobe.com

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

Page 115: firehammertalante-120924192532-phpapp02

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

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

Page 116: firehammertalante-120924192532-phpapp02

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

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

Page 117: firehammertalante-120924192532-phpapp02

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

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

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

Page 118: firehammertalante-120924192532-phpapp02

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

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

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

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

Page 119: firehammertalante-120924192532-phpapp02

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

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

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

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

http://youtu.be/JSnB06um5r4

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

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

Page 120: firehammertalante-120924192532-phpapp02

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

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

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

Page 121: firehammertalante-120924192532-phpapp02

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

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

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

Page 122: firehammertalante-120924192532-phpapp02

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

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

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

Page 123: firehammertalante-120924192532-phpapp02

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

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

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

Page 124: firehammertalante-120924192532-phpapp02

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

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

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

Page 125: firehammertalante-120924192532-phpapp02

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

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

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

Page 126: firehammertalante-120924192532-phpapp02

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

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

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

Page 127: firehammertalante-120924192532-phpapp02

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

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

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

Page 128: firehammertalante-120924192532-phpapp02

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

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

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

Page 129: firehammertalante-120924192532-phpapp02

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

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

скетчинг

Page 130: firehammertalante-120924192532-phpapp02

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

Page 131: firehammertalante-120924192532-phpapp02

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

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

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

Page 132: firehammertalante-120924192532-phpapp02

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

Page 133: firehammertalante-120924192532-phpapp02

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

Page 134: firehammertalante-120924192532-phpapp02

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

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

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

Page 135: firehammertalante-120924192532-phpapp02

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

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

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

Page 136: firehammertalante-120924192532-phpapp02

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

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

Page 137: firehammertalante-120924192532-phpapp02

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

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

Page 138: firehammertalante-120924192532-phpapp02

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

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

Page 139: firehammertalante-120924192532-phpapp02

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

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

Page 140: firehammertalante-120924192532-phpapp02

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

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

Page 141: firehammertalante-120924192532-phpapp02

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

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

Page 142: firehammertalante-120924192532-phpapp02

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

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

Page 143: firehammertalante-120924192532-phpapp02

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

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

Page 144: firehammertalante-120924192532-phpapp02

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

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

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

Page 145: firehammertalante-120924192532-phpapp02

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

Закон Фиттса

Page 146: firehammertalante-120924192532-phpapp02

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

Закон Фиттса

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

Page 147: firehammertalante-120924192532-phpapp02

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

Закон Фиттса

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

Page 148: firehammertalante-120924192532-phpapp02

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

Закон Фиттса

Page 149: firehammertalante-120924192532-phpapp02

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

Закон Фиттса

Page 150: firehammertalante-120924192532-phpapp02

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

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

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

Measurable / Измеримый

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

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

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

Page 151: firehammertalante-120924192532-phpapp02

дмитрий карпов 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: firehammertalante-120924192532-phpapp02

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

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

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

Page 153: firehammertalante-120924192532-phpapp02

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

проектирование интерактивной платформы / 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: firehammertalante-120924192532-phpapp02

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

Page 155: firehammertalante-120924192532-phpapp02

ПЕРСОНЫ

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

Page 156: firehammertalante-120924192532-phpapp02

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

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

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

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

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

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

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

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

Page 157: firehammertalante-120924192532-phpapp02

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

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

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

Page 158: firehammertalante-120924192532-phpapp02

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

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

Page 159: firehammertalante-120924192532-phpapp02

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

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

http://www.axure.com

Page 160: firehammertalante-120924192532-phpapp02

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

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

http://www.axure.com

Page 161: firehammertalante-120924192532-phpapp02

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

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

https://gomockingbird.com

Page 162: firehammertalante-120924192532-phpapp02

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

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

Page 163: firehammertalante-120924192532-phpapp02

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

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

Anton Repponen is Global Creative Director at Fi

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

Page 164: firehammertalante-120924192532-phpapp02

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

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

Anton Repponen is Global Creative Director at Fi

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

Page 165: firehammertalante-120924192532-phpapp02

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

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

Research Empathy Acceptance Sophistication Opportunity Nature

Page 166: firehammertalante-120924192532-phpapp02

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

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

Research Empathy Acceptance Sophistication Opportunity Nature

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

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

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

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

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

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

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

Page 167: firehammertalante-120924192532-phpapp02

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

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

Page 168: firehammertalante-120924192532-phpapp02

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

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

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

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

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

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

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

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

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

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

преимуществ

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

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

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

Page 169: firehammertalante-120924192532-phpapp02

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

Процесс

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

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

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

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

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

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

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

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

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

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

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

Page 170: firehammertalante-120924192532-phpapp02

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

потребность

мотив

импульс

стимул

вовлечение

эмпатия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 171: firehammertalante-120924192532-phpapp02

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

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

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

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

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

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

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

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

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

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

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

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

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

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

механики

Page 172: firehammertalante-120924192532-phpapp02

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

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

Page 173: firehammertalante-120924192532-phpapp02

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

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

AwarenessAcceptance

Trial

LoyaltyRetention / Preference

Advocacy

Accumulation

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

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

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

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

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

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

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

Page 174: firehammertalante-120924192532-phpapp02

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

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

AwarenessAcceptance

Trial

LoyaltyRetention / Preference

Advocacy

Accumulation

Page 175: firehammertalante-120924192532-phpapp02

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

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

Awareness

Acceptance

Trial

Loyalty

Retention / Preference

Advocacy

Accumulation

Page 176: firehammertalante-120924192532-phpapp02

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

Page 177: firehammertalante-120924192532-phpapp02

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

Page 178: firehammertalante-120924192532-phpapp02

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

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

Awareness

Acceptance

Trial

Loyalty

Retention / Preference

Advocacy

Accumulation

Page 179: firehammertalante-120924192532-phpapp02

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

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

Awareness

Acceptance

Trial

Loyalty

Retention / Preference

Advocacy

Accumulation

Page 180: firehammertalante-120924192532-phpapp02

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

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

Awareness

Acceptance

Trial

Acceptance

Page 182: firehammertalante-120924192532-phpapp02

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

Awareness

AcceptanceTrial

Page 183: firehammertalante-120924192532-phpapp02

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

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

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

Try to Buy

Page 184: firehammertalante-120924192532-phpapp02

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

Awareness

Acceptance

Acceptance

Trial

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

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

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

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

Page 185: firehammertalante-120924192532-phpapp02

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

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

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

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

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

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

Page 187: firehammertalante-120924192532-phpapp02

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