Upload
dmitry-karpov
View
2.265
Download
1
Embed Size (px)
DESCRIPTION
Материалы интенсивной тренировки креативных способностей в интерактивных медиа для дизайнеров. Двухдневный курс в Екатеринбурге, больше двадцати упражнений и практических вопросов проектирования, решения задач интерактивных коммуникаций. Слайды в низком качестве, описание специальных упражнений, заданий и дополнительных материалов сокращено.
Citation preview
дмитрий карпов 2012
дмитрий карпов 2012
15-16 сентября. Екатеринбургтренировка креативности в веб-дизайне и новых цифровых медиа, «курс-бестселлер» для практикующих профессионалов, дизайнеров и UX специалистов из комбинации оригинальных методик и известных практик digital
дмитрий карпов 2012
Часть номер ноль: «Ты что с Урала?»Часть первая: «Digital технология перемен»Часть вторая: Workshop «Огонь и молоты»
Впервые в истории глобальные перемены могут происходить с достаточной скоростью, чтобы такое понимание стало возможным для всего общества в целом. Раньше провозвестниками такого рода просветления были первым делом творцы, у которых была сила — а также смелость — провидца, чтобы слышать истинный язык внешнего мира и связывать его с миром внутренним.
Маршалл Маклюэн
дмитрий карпов 2012
Знакомимся. Люди и интерактивная среда, сайты, приложения, сервисы, устройства
дмитрий карпов 2012
Часть номер ноль: «Ты что с Урала?»Воля, пушки, соль и камень
дмитрий карпов 2012
Часть номер ноль: «Ты что с Урала?»Ермак и творческое мышление
дмитрий карпов 2012
Нам не хватает желания желать
дмитрий карпов 2012
Цифровая технология перемен
Любой технологии присущ мидасов эффект: как только в обществе возникает усиление какого-либо явления, всё остальное мироустройство тут же начинает меняться, чтобы встроить в себя эту новинку. Как только в обществе появляется новая технология, она тут же меняет всю структуру этого общества. Следовательно, новая технология — революционный по своей натуре ингредиент. Мы можем убедиться в этом, наблюдая, как развиваются электрические медиа.
Маршалл Маклюэн
дмитрий карпов 2012
Часть номер один: «Как я это делал?»Два часа на афишу...
дмитрий карпов 2012
Дизайн создает не продукт. Ценность. Ценность идеи, материала, изменяемого мира вокруг.
дмитрий карпов 2012
В чем ценность дизайна?Ценность.
Ценность удобства?Ценность экономии?Ценность качества жизни?
прием: креативное технологическоепроектирование
дизайнер в digital обязан знать и понимать технологии, изобретательно использовать возможности цифровой средыи постоянно самообучаться
дмитрий карпов 2012
прием: креативное тех-проектирование
API
место / карты / координаты
переводчик
динамический постинг (Twitter)
видео-хостинг
http://www.youtube.com/user/chromefastball
Атрибуты коммуникации бренда
скоростьизобретательность
API соц. сети
стабильность
дмитрий карпов 2012
https://developers.google.com/translate/v2/pricing?hl=ru
дмитрий карпов 2012
не знаешь что, придумай как
технологии сами дают основу для новых идей... например CSS3
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;
дмитрий карпов 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);}
дмитрий карпов 2012
• Media Queries• RGBa & HSLa• Gradients• @font-face / Google fonts• Rounded Corners• Box Shadow• Multiple Backgrounds• Visual Effects
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;
дмитрий карпов 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; }}
дмитрий карпов 2012
box-shadowbox-shadow (horizontal offset,vertical offset,optional blur distance,optional distance,optional color,optional inset)
http://narrowdesign.com/
дмитрий карпов 2012
дмитрий карпов 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'>
дмитрий карпов 2012
http://www.myfonts.com/fonts/abstrkt/lineatura/light/
дмитрий карпов 2012
шрифты изданияNY Irvin NY Vogue Goat
дмитрий карпов 2012
~бренды участвуют в производстве фильма с новой интерактивной концепцией —вовлечением пользователей социальной сети, сценарий фильма подразумевает участие совершенно разнообразных личностей, часть которых будет из записанных видео участниками интерактивного проекта
дмитрий карпов 2012
API использования видеокамеры на компьютере пользователя в большинстве случаев используют Adobe Flash (но тенденция в замещении средствами JS и альтернативами)
http://www.xarg.org/project/jquery-webcam-plugin/
дмитрий карпов 2012
Практика
дмитрий карпов 2012
Практика
фото участников практики / упражнения собственность участников :) и не публикуетсяметодика: Дмитрий Карпов
дмитрий карпов 2012
Упражнение первое
дмитрий карпов 2012
Упражнение второе
фото участников практики / упражнения собственность участников :) и не публикуетсяметодика: Дмитрий Карпов
дмитрий карпов 2012
Упражнение третье
фото участников практики / упражнения собственность участников :) и не публикуетсяметодика: Дмитрий Карпов
дмитрий карпов 2012
Упражнение четвертое
дмитрий карпов 2012
Как выковывать новые идеи для цифровой интерактивной среды
дмитрий карпов 2012
Что нужно для успешного проекта в цифровой интерактивной среде, именуемо простым уральским словом DIGITAL?Ценность. Ценность идеи, материала, изменяемого мира вокруг.
дмитрий карпов 2012
direction
interaction
graphics art
languagetechnology
ideation
дмитрий карпов 2012
direction
interaction
graphics art
languagetechnology
ideation
дмитрий карпов 2012
{Хорошая идея ничего не стоит без точной реализации, идея должна генерировать выгоду, осознаваемую, измеряемую выгоду для общества, личности, автора и давать экономичную возможность для воплощения}
дмитрий карпов 2012
direction
interaction
graphics art
languagetechnology
ideation
intuitive interfaceexperience artistic innovation
дмитрий карпов 2012
Культурные особенности
дмитрий карпов 2012
{Нет такой общности людей как «целевая аудитория», есть люди одних взглядов, общего опыта, языка, близких целей и предсказуемых возможностей. Давайте поговорим о людях соседней улицы или района. Давайте поговорим об «Уралмаше»}
дмитрий карпов 2012
Новые форматы медиа
дмитрий карпов 2012
Формат композиции в веб-дизайне
дмитрий карпов / [email protected] 2012г
cтереотипы композиции позволяют создавать привычные, хорошо знакомые информационные системы, интерфейсы, поведенческие паттерны,что помогает строить эффективное интерактивное взаимодействие
дмитрий карпов / [email protected] 2012г
основной принцип и критерий классификации композиционных принципов в особенностях навигационного блока и решении интерактивного пространства
дмитрий карпов / [email protected] 2012г
Текстовый - форматПервые сайты в сети. Дизайн средствами HTML c минимумом графики и браузерной интерпретацией по умолчанию (серый фон, синие ссылки) 1993-1996 распространенный с выравниванием по центру элементов или по левому краю экрана
дмитрий карпов / [email protected] 2012г
Конус - форматстандартные композиционные модели формат 1993-1996 распространенный с выравниванием по центру элементов
дмитрий карпов / [email protected] 2012г
LEFT - форматстандартные композиционные модели формат 1996-1999
хорошо знакомый и простойформат многих информационных ресурсоввертикальный блок навигации слева
дмитрий карпов / [email protected] 2012г
LEFT - форматстандартные композиционные модели формат 1996-1999
дмитрий карпов / [email protected] 2012г
LEFT - форматстандартные композиционные модели
формат 1996-1999 традиции вертикальной навигации с левой
стороны страницы заметно используются сегодня в веб
дмитрий карпов / [email protected] 2012г
Г- форматстандартные композиционные моделисамый распространенный 1995-2005
дмитрий карпов / [email protected] 2012г
Г- форматстандартные композиционные моделисамый распространенный 1995-2005
дмитрий карпов / [email protected] 2012г
Г- форматстандартные композиционные моделисамый распространенный 1995-2005
дмитрий карпов / [email protected] 2012г
Г- форматстандартные композиционные моделисамый распространенный 1995-2005
дмитрий карпов / [email protected] 2012г
Г- форматстандартные композиционные моделисамый распространенный 1995-2005
дмитрий карпов / [email protected] 2012г
П- форматстандартные композиционные модели широко используется 1996-2005
самый популярныйудобный, знакомыйтри блока материалов по краям экрана
дмитрий карпов / [email protected] 2012г
П- форматстандартные композиционные модели широко используется 1996-2005
дмитрий карпов / [email protected] 2012г
Диск- форматстандартная композиционная модель для промо-сайтов, корпоративных сайтов и мультимедиа дисковшироко используется 1996-1999 старая школа
дмитрий карпов / [email protected] 2012г
TOP - форматстандартные композиционные модели
простой, выразительныйлегко создает иерархию информации и делит страницу на эмоциональную и рациональную зонылегко масштабируется
дмитрий карпов / [email protected] 2012г
TOP - форматконцентрация важнейшего функционального материала и имиджевого / образного в верхней горизонтали страницы, активный headerиспользование доминирует1996-2002
cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа
дмитрий карпов / [email protected] 2012г
TOP - форматстандартные композиционные модели
cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа
дмитрий карпов / [email protected] 2012г
TOP - форматстандартные композиционные модели
cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа
дмитрий карпов / [email protected] 2012г
TOP LINE - форматстандартные композиционные модели
http://www.diesel.com/colorexposure/
дмитрий карпов / [email protected] 2012г
TOP LINE - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
TOP LINE - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
TOP LINE - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
TOP LINE - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
MID-LINE - форматстандартные композиционные модели
Центральная горизонталь
навигация содержанием сайта
через центральный блок, который создает композиционный баланс
дмитрий карпов / [email protected] 2012г
MID-LINE - форматстандартные композиционные модели
Центральная горизонтальнавигация содержанием сайтачерез центральный блок, который создает композиционный баланс
дмитрий карпов / [email protected] 2012г
MID-LINE - форматстандартные композиционные модели
http://www.hidden-heroes.net/
дмитрий карпов / [email protected] 2012г
MID-LINE - форматстандартные композиционные модели
http://www.hidden-heroes.net/
дмитрий карпов / [email protected] 2012г
MID-LINE - форматстандартные композиционные модели
http://krystalrae.com
дмитрий карпов / [email protected] 2012г
TOP-SQUARE - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
TOP-SQUARE - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
TOP-SQUARE - форматстандартные композиционные модели
cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа
дмитрий карпов / [email protected] 2012г
4-COLUMN - форматстандартные композиционные модели
http://www.legendary.com/
дмитрий карпов / [email protected] 2012г
4-COLUMN - форматстандартные композиционные модели
http://www.legendary.com/
дмитрий карпов / [email protected] 2012г
4-COLUMN - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
ступени - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
ступени - форматстандартные композиционные модели
http://www.bureau-va.com
дмитрий карпов / [email protected] 2012г
ступени - форматстандартные композиционные модели
cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа
дмитрий карпов / [email protected] 2012г
angled - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
angled - форматстандартные композиционные модели
http://htcsense.dk/
угловой наклон композиции один из самых выразительных приемов
дмитрий карпов / [email protected] 2012г
DOUBLE SLIDER - форматстандартные композиционные модели
http://www.budnitzbicycles.com/
дмитрий карпов / [email protected] 2012г
DOUBLE SLIDER - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
DOWN SLIDER - форматстандартные композиционные модели
http://graphicnovel-hybrid4.peugeot.com/start.html
дмитрий карпов / [email protected] 2012г
DOWN SLIDER - форматстандартные композиционные модели
дмитрий карпов / [email protected] 2012г
вертикальноепадение метафора композиции в погружении зрителясодержание скользит вниз и возникает плавно с внешних краев браузера
DOWN SLIDER - форматстандартные композиционные модели
http://www.newzealand.com/int/http://www.smashingmagazine.com/2012/03/08/behind-scenes-tourism-new-zealand/
дмитрий карпов / [email protected] 2012г
cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа
WATERFALL - форматтенденция 2011-12
http://pinterest.com
дмитрий карпов / [email protected] 2012г
cтереотипы композиции организация интерактивного пространствапрактические приемы проектного мышления в новых медиа
MASH-UP - гибридный форматтенденция 2011-12
http://www.pinstagram.co/
дмитрий карпов / [email protected] 2012г
MASH-UP - гибридный форматтенденция 2011-12 особенность в структурной эклектичности, комбинации совершенно разных, но хорошо знакомых принципов и паттернов
дмитрий карпов / [email protected] 2012г
MASH-UP - гибридный форматтенденция 2011-12 особенность в структурной эклектичности, комбинации совершенно разных, но хорошо знакомых принципов и паттернов
гибридный формат не значит хаотичный, в его геометрической структуре всегда есть свой модульный принцип
дмитрий карпов / [email protected] 2012г
MASH-UP - гибридный форматтенденция 2011-12 особенность в структурной эклектичности, комбинации совершенно разных, но хорошо знакомых принципов и паттернов
http://www.lust.nl/
дмитрий карпов / [email protected] 2012г
http://www.sound.philips.com
дмитрий карпов / [email protected] 2012г
http://www.sound.philips.com
дмитрий карпов / [email protected] 2012г
BOTTOM LINE — формат навигации в нижней горизонтали страницыпривычная модель композиции с управлением контентом из нижней части страницы, фактически панель инструментов(данная область привычно используется для технической информации и сигнала пользователю, что страница загрузилась)
http://www.sound.philips.com/
дмитрий карпов / [email protected] 2012г
http://lifeis.bbcearth.com/
дмитрий карпов / [email protected] 2012г
FULL SCREEN MOTION — видео-сайтвидео композиционно построенное по приемам жанра, принципам съемки и динамике монтажа с возможностью управления сценами, обычно полноэкранное изображение
http://evelyn-interactive.searchingforabby.com/
дмитрий карпов / [email protected] 2012г
FULL SCREEN MOTION — видео-сайтвидео композиционно построенное по приемам жанра, принципам съемки и динамике монтажа с возможностью управления сценами, обычно полноэкранное изображение
http://sagmeister.com/
дмитрий карпов / [email protected] 2012г
VIMETUBE — видео-интерактивинтерактивные возможности средствами формата сервиса
http://www.youtube.com/profile?annotation_id=annotation_820885&feature=iv&src_vid=4ba1BqJ4S2M&user=tippexperience
дмитрий карпов / [email protected] 2012г
http://www.ro.me/
INTERACTIVE MOTION — гибридный форматтенденция 2011-12 интерактивное 3D видео с условно свободной точкой фокуса, управление выбором точки просмотра и влиянием на композиционное положение объектов
дмитрий карпов 2012
Ошибки арт-директора
давайте обсудим отличные и заметные проекты
дмитрий карпов 2012
Ошибки арт-директора
http://zestleadership.com/
крутые иллюстрации, все жутко тормозит, после просмотра остается чувство визуального восторга и полного отсутствия впечатления от деятельности компании, как и название вымывается из восприятия потоком классных рыб
арт-директор должен понимать, что такие огромные PNG в
современных браузерах не всегда плавно плывут, а клиенты плывут
за конкретными выгодами, экспертизой и авторитетом
дмитрий карпов 2012
Ошибки арт-директора
http://zestleadership.com/
один из главных вопросов остается без ответа, красиво, но не убеждает рациональными
доводами, примерами, клиентами... много воды и черным
по черному
дмитрий карпов 2012
Ошибки арт-директора
текст графикой делать не круто, особенно в такой композиции легко реализуемой средствами CSS
арт-директору надо следить как его макет реализуется в деталях, сохраняя эстетику и не теряя заложенной функциональности
дмитрий карпов 2012
Ошибки арт-директора
интерактивные элементы и цветовое кодирование не дают очевидного сигнала к возможным действиям, временная шкала напоминает слайдер, который провоцирует потянуть, цветные горизонтальные шкалы неочевидно используют цвет, сайт старается информировать, но не стимулировать посетителя играть, что возможно было частью задачи, название кнопок основных действий на английском не упрощает понимание и достаточно выделить заголовок, а не весь блок вопроса к существующим пользователям gosloto
слишком много одинаковых визуальных акцентов, цвета, размеры объектов, много скруглений, теней под объектами и текстом
хорошая, простая идея, есть эмоциональный контакт, функционально привлекает внимание к нижнему блоку, но нет развития идеи в возможные генерируемые веселые диалоги, выглядит эскизом концепции
дмитрий карпов 2012
самое скучное, это проектирование форм регистрации, покупки,
авторизации, прелодеров, сообщений об ошибках и
страниц 404... этим и займемся
дмитрий карпов 2012
Дизайн стандартных положений
дмитрий карпов 2012
Дизайн «стандартных положений»
http://www.hidden-heroes.net/
дмитрий карпов 2012
Дизайн «стандартных положений»
http://www.ro.me/
смотрите, обучение пользователя пока загружается основное содержание
дмитрий карпов 2012
Масштабируемость решения
http://bostonglobe.com
Адаптивный дизайн
дмитрий карпов 2012
Масштабируемость
дмитрий карпов 2012
Чему учат фантастические интерфейсы
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
систему без ограничений, недостатки реальной системы как достоинства, непривычные приемы взаимодействия, неожиданные реакции обратной связи
теперь фантастический концепт поместите в условия возможной реализации, экономики и технологий
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
систему без ограничений, недостатки реальной системы как достоинства, непривычные приемы взаимодействия, неожиданные реакции обратной связи
теперь фантастический концепт поместите в условия возможной реализации, экономики и технологий
http://youtu.be/JSnB06um5r4
например, какие возможности могут появиться у интерактивных очков Google, какова возможная выгода от интеграции сервисов и новых возможностей?
как возможно взаимодействовать с очками, и по новому использовать поисковые возможности, карты, youtube, социальные сети, переводчик, хранение файлов?
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
фантастические сложные штуки, эстетика многодельности и затейливой информативности
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
любая идея требует быть зафиксированной в физическом мире, на бумаге...
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
интерфейс обеспечивает управление поступающей информацией
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
иногда интерфейс это просто красиво
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
представим себе совершенно новых существ и их возможности, представим себе интерфейс который управляется жестами или движением глаз, или мыслями
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
фантастические интерфейсы помогают расширить представления о функциональности и эстетических нормах, игнорируя ограничения, изобретая новое
а может и не нужно смотреть фантастику, а сесть и внимательно анализировать существующие приемы на массовом рынке
дмитрий карпов 2012г. [email protected]
дизайн—красиво
дмитрий карпов 2012г. [email protected]
из физической реальности в цифровую
дмитрий карпов 2012г. [email protected]
дмитрий карпов 2012
Гиперцифровая реальность
дмитрий карпов 2012
Гиперцифровая реальность
дмитрий карпов 2012
С вами разговаривает...
дмитрий карпов / [email protected] 2012г
задание: форма регистрации на сайте, пять шагов, с каждым шагом становится все веселее, познавательней, проще... отрываемся по полной
дмитрий карпов 2012
С вами разговаривает...
дмитрий карпов 2012
Талантливый интерфейс
Закон ФиттсаИнтеллектуальные методы / S.M.A.R.T / Wireframes/Features & Functionality matrix/ R.E.A.S.O.N / ПерсоныUX проектирование / landing page / Функциональное модульное зонированиеПостроение дизайн-процесса в интерактивных медиа
дмитрий карпов 2012
Закон Фиттса
дмитрий карпов 2012
Закон Фиттса
http://fww.few.vu.nl/hci/interactive/fitts/
дмитрий карпов 2012
Закон Фиттса
http://fww.few.vu.nl/hci/interactive/fitts/
дмитрий карпов 2012
Закон Фиттса
дмитрий карпов 2012
Закон Фиттса
дмитрий карпов 2012
целенаправленность как метод
Specific / Специфичный
Measurable / Измеримый
Actionable / Осуществимый Relevant / Уместный
Trackable / Отслеживаемый
http://uxdesign.smashingmagazine.com/2011/09/13/the-s-m-a-r-t-user-experience-strategy/
дмитрий карпов 2012
целенаправленность как метод
Specific / Специфичный
Measurable / Измеримый
Actionable / Осуществимый Relevant / Уместный
Trackable / Отслеживаемый
http://uxdesign.smashingmagazine.com/2011/09/13/the-s-m-a-r-t-user-experience-strategy/
результатKPI
стратегия продукта
проектирование интерфейсаопыт коллег в разработке метода
проектирование интерактивной платформы / usability and desirability
фактически проектирование Landing Pages
проектирование интерфейса
проектирование интерактивной платформы / 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
оптимизация взаимодействияпо закону Фиттса скорость принятия решений и точность действий зависит ои дистанции до объекта и его величины
правило первого экранаправило акцентаправило цветового кодирования / глубины информации
Матрица функциональности (Features & Functionality)
метод разработки интерфейса на основе анализа пользователей /потребителей
дмитрий карпов 2012г. [email protected]
работа с «персонами» или «архетипами»
http://www.f-i.com/htc/global/
детализированная виртуальная личность используемая для моделирования опыта,
мышления, интерактивного поведения для создания сценариев и характеристик
использования UI
собирательный образ коллективной личности для моделирования опыта, основных побудительных мотивов, целей и интерактивного поведения для создания универсальных, обобщенных интерактивных сценариев и характеристик UI
МОЛОТЫ ПРОЕКТИРОВАНИЯ
дмитрий карпов 2012г. [email protected]
МОЛОТЫ ПРОЕКТИРОВАНИЯ
дмитрий карпов 2012г. [email protected]
ПРОЕКТИРОВАНИЕ ЭТАПА РАЗРАБОТКИ
дмитрий карпов 2012г. [email protected]
Anton Repponen is Global Creative Director at Fi
Важнейшее качество, умение на стадии проектирования интерактивного и визуального дизайна предусмотреть оптимальное техническое решение, уменьшение числа общих макетов, создание шаблонов, упрощение деталей
ПРОЕКТИРОВАНИЕ ЭТАПА РАЗРАБОТКИ
дмитрий карпов 2012г. [email protected]
Anton Repponen is Global Creative Director at Fi
Простая структура взаимодействия проработанная на стадии дизайна wireframe позволяет оптимально и экономично разрабатывать техническое решение, учитывая возможности устройства и технологий
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
Research Empathy Acceptance Sophistication Opportunity Nature
метод разработки интерфейса
дмитрий карпов 2012г. [email protected]
Research Empathy Acceptance Sophistication Opportunity Nature
Reasonобъективные причины как сумма влияний на концепцию интерфейса, от логики функций до эстетики и кончных впечатлений
Исследование тематических материалов
Ментальное внедрение, восприятие пользователя через глубокое сопоставление себя
Принятие. Какие стереотипы существуют, что знают о продукте и функции пользователи, принятые паттерны поведения и знакомые метафоры
Разработка первичного прототипа учитывающего все привычные паттерны и сценарии пользователя
Интеграция новых возможностей в первичный прототип, реализация функциональных и информационных приоритетов
Тестирование прототипа в действии и наблюдение за естественным поведением пользователя. Корректировка «природы продукта», расширяемость, ограничения, сравнение с другими экосистемами
дмитрий карпов 2012
UX проектирование
дмитрий карпов 2012
UX проектированиебрендинговые коммуникации / проектирование интерактивной платформы / usability and desirability визуализируем желания
фактически проектирование Landing Pages
структурная система проектирования коммуникации бренда в цифровых медия (сайт, аппс, экранные презентации и инсталляции)
topline навигационный блок основных проектов (смежные промо-сервисы) базовая навигация
leadgenerator блок стимулирующий вовлечение/действие пользователя, обещание выгоды
эмоциональная зона / реализует впечатление стиля, идентификаторов бренда, атмосферы и элементов позиционирования
demo демонстрация продукта /сервиса, визуальные атрибуты демонстрирующие
обладание и функции, возможные дополнительные опции и SKU
RTB / рациональный блок, прагматичная демонстрация выгод от использования и
преимуществ
social media / интеграция возможностей социальных медиа
consumer corner / потребительский блок / форма регистрации / контактная информация, форма поиска, вход для постоянных клиентов / корзина покупок
footer / юридическая информация, контактная информация,
дмитрий карпов 2012
Процесс
брифинг встреча с клиентомпостановка задачи определение цели проекта
анализисследование возможностей решения задачи
креативный процессгенерация идей и творческих концепций
презентацияподтверждение концепции
реализациятехническое исполнение
правки корректировкатехническое исправление
публикациязавершение проекта
разработка UXинтерфейс
визуальный дизайн
разработка кодинг
технологический тестэксперимент с потенциально возможным использованием технологии стимулирующий возможности креативного процесса
Дмитрий Карпов 2012г
потребность
мотив
импульс
стимул
вовлечение
эмпатия
активация / решение / шаринг
проактивное действие
психологический паттерн функциональныйдействия дизайнера, проектирование взаимодействия
обратная связь
использование мотива личности, опредмечивание мотива в вербальном и визуальном
пространстве
создание визуального импульса инстинктивного, понятного в
секунду контакта, фиксирует внимание
стимуляция личностного интереса, раскрытие
удовлетворения мотива
расширение интереса сценариями разной активности, игр, конкурсов,
актуальный контент, скидки
личностное действие по завершению действия в реальном мире, поход в магазин, выставку,
кино, сервис, оформление заказа, завершение потребительского цикла
создание сюжета осознанного сопереживания эмоциональному
состоянию персонажаподтверждение принятого личного решение, (заполнение формы, регистрация участника акции) стимуляция распространения информации участником, ознакомление ближнего круга, используем мотивы просоциальные и самоутверждения
дмитрий карпов 2012
техническая модель
визуальная интерпретация
вербальная интерпретация
социальная интеграция
психологическая механика
задача клиента репрезентация задачи с позиции пользователя
реальный срок
набор обязательных
образов творческая интерпретация образа реализации мотива (показать власть над объектом, подчеркнуть престиж, демонстрация личного достижения, идентифицировать личность с героем)
% реализуемость модели
реализуемость визуальной коммуникации и технической
интерактивной модели
прогнозируемая реализация мотивов психологической
механики
дмитрий карпов / [email protected] 2012г
маркетинговая воронкапринцип формирования отношения потребитель&продукт
дмитрий карпов / [email protected] 2012г
маркетинговая воронкапринцип формирования отношения потребитель&продукт
AwarenessAcceptance
Trial
LoyaltyRetention / Preference
Advocacy
Accumulation
Awareness — узнавание названия бренда и его принадлежность к категории.
Acceptance — принятие бренда. То есть, потребитель не отрицает возможности приобретения.
Trial — пробная самостоятельная покупка.
Retention / Preference — потребление товара или услуги по рациональным причинам (цена, акции, наличие в ближайшем магазине и пр.) на постоянной основе.
Loyalty — потребление по эмоциональным причинам. Меньше зависит от цены,
дистрибуции и других объективны факторов. Advocacy является следствием работы с лояльностью и приводит к распространению положительных рекомендаций (word of mouth)
Accumulation — накопление знаний и опыта потребления товаров бренда, что приводит к желанию пользоваться любыми товарами, доверяя качеству (рационально) и характеру бренда (эмоционально) является следсвием работы коммуникаций не только ориентированных на потребителя, независимые media материалы.
дмитрий карпов / [email protected] 2012г
маркетинговая воронкапринцип формирования отношения потребитель&продукт
AwarenessAcceptance
Trial
LoyaltyRetention / Preference
Advocacy
Accumulation
дмитрий карпов / [email protected] 2012г
маркетинговая воронкапринцип формирования отношения потребитель&продукт
Awareness
Acceptance
Trial
Loyalty
Retention / Preference
Advocacy
Accumulation
дмитрий карпов / [email protected] 2012г
маркетинговая воронкапринцип формирования отношения потребитель&продукт
Awareness
Acceptance
Trial
Loyalty
Retention / Preference
Advocacy
Accumulation
дмитрий карпов / [email protected] 2012г
маркетинговая воронкапринцип формирования отношения потребитель&продукт
Awareness
Acceptance
Trial
Loyalty
Retention / Preference
Advocacy
Accumulation
дмитрий карпов / [email protected] 2012г
http://graphicnovel-hybrid4.peugeot.com/start.html
Awareness
Acceptance
Trial
Acceptance
дмитрий карпов / [email protected] 2012г
http://www.sound.philips.com/
дмитрий карпов / [email protected] 2012г
дополнительный фактор убежденияминимальный риск
дополнительный фактор убеждениякачество / демонстрация
Try to Buy
дмитрий карпов / [email protected] 2012г
Awareness
Acceptance
Acceptance
Trial
узнавание «...кстати, вот что посмотрю»
возможно «интересно... нравится»
хочу «уверен, мне подхолит»
вот бы мне такие «офигительно смотрится»
дмитрий карпов / [email protected] 2012г
Тайна профессии: Меньше слушай советов, больше пробуй сам
Тайна профессии: Читай в день по заметке о технологии
Тайна профессии: Пять лет назад устройство типа IPad было фантастикой, сегодня у многих, завтра у всех
Тайна профессии: Не спрашивай у пользователя мнения, дай ему готовый продукт
Тайна профессии: Лучше спорить прототипами
дмитрий карпов / [email protected] 2012г
https://vimeo.com/47875656