SlideShare una empresa de Scribd logo
1 de 47
OOO «Ричмедиа»
Алексей Жуков
Ведущий дизайнер
Шайхутдинов Ринат
Руководитель проектов
OOO «Ричмедиа»
• Акцентирование
• Контрастирование
• Балансировка
• Выравнивание
• Повторение
• Обеспечение удобства восприятия
ООО «Ричмедиа» , iSpring Solutions, Inc. 2
Эмоции
ООО «Ричмедиа» , iSpring Solutions, Inc. 3
Эмоции
ООО «Ричмедиа» , iSpring Solutions, Inc. 4
Эмоции
ООО «Ричмедиа» , iSpring Solutions, Inc. 5
Songza
ООО «Ричмедиа» , iSpring Solutions, Inc. 6
Основные принципыl дизайна…
ООО «Ричмедиа» , iSpring Solutions, Inc. 7
Yes =)
It works?
Спроектируйте форму регистрации пользователя
ООО «Ричмедиа» , iSpring Solutions, Inc. 8
• Фамилия, Имя
• Телефон
• Страна
• Компания
Цель:Чтобы как можно больше
пользователей заказывали
услугу отставляя контакты:
OOO «Ричмедиа»
Познание
Эмоции
Ассоциации
ООО «Ричмедиа» , iSpring Solutions, Inc. 9
OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 10
Проектирование взаимодействия
ООО «Ричмедиа» , iSpring Solutions, Inc. 11
Где кнопка? И почему?
ООО «Ричмедиа» , iSpring Solutions, Inc. 12
Нужно учитывать как мозг интерпретирует значение
цвета, тени и т.д
ООО «Ричмедиа» , iSpring Solutions, Inc. 13
OOO «Ричмедиа»
Возникла из исследований восприятия.
В центре её внимания — характерная тенденция психики
к организации опыта в доступное пониманию целое.
ООО «Ричмедиа» , iSpring Solutions, Inc. 14
ООО «Ричмедиа» , iSpring Solutions, Inc. 15
Кристиан фон Эренфельс (1859—1932)
«Целое — это некая реальность,
отличная от суммы его частей»
Принципы
ООО «Ричмедиа» , iSpring Solutions, Inc. 16
Принцип схожести Принцип замкнутости
Принцип близостиСмежность.
Близость стимулов во времени и пространстве.
Смежность может предопределять восприятие,
когда одно событие вызывает другое.
Общая зона.
Люди склонны воспринимать движущиеся в
одном направлении элементы более
взаимосвязанными, чем элементы статические
или движущиеся в разных направлениях.
Видите фигуры?
ООО «Ричмедиа» , iSpring Solutions, Inc. 17
• Возможно, люди не замечают на вашей веб-
странице того, что вы так тща- тельно и долго
размещали на ней в надежде удивить мир?
Человеческое восприятие зависит от уровня
подготовки, знаний, степени знакомства с
тем материалом, на который смотрит
человек, и ментальных моделей человека.
• Ваши предположения о том, что люди видят
на веб-странице, возможно, совсем не
соответствует тому, что они действительно
видят.
• Вы можете убедить людей видеть вещи
определенным образом.
OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 18
Гештальт-психология и группирование элементов
веб-страниц
ООО «Ричмедиа» , iSpring Solutions, Inc. 19
Близость
ООО «Ричмедиа» , iSpring Solutions, Inc. 20
Схожесть
ООО «Ричмедиа» , iSpring Solutions, Inc. 21
Симметрия
ООО «Ричмедиа» , iSpring Solutions, Inc. 22
Общая зона
ООО «Ричмедиа» , iSpring Solutions, Inc. 23
OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 24
Так ли важна привлекательноcть?
ООО «Ричмедиа» , iSpring Solutions, Inc. 25
Вопреки распространенному мнению,
приятные вещи будут воспринимается как
простые в использовании и эффективные.
Комментарий нейробиолога
ООО «Ричмедиа» , iSpring Solutions, Inc. 26
“Emotion is not a luxury: it is an expression of
basic mechanisms of life regulation developed
in evolution, and is indispensable for survival.
It plays a critical role in virtually all aspects of
learning, reasoning, and creativity. Somewhat
surprisingly, it may play a role in the
construction of consciousness.”*
*Damasio, antonio. “emotions and Feelings: a neurobiological Perspective.” Feelings and Emotions, The Amsterdam Symposium. 2004.
Antonio Damasio
Эмоции — это не роскошь, а необходимое условие разума.
Они создают шкалу ценностей, опираясь на которую мы может
решить, что важно, что нет, что дорого, что красиво, что ценно.
Какому автомату вы доверите кредитку? =)
ООО «Ричмедиа» , iSpring Solutions, Inc. 27
50 миллисекунд (1/20ая секунды) нужно
пользователю, чтобы сформировать первое
впечатление о Web странице.
Влияние эстетики на производительность
ООО «Ричмедиа» , iSpring Solutions, Inc. 28
Привлекательные вещи работают лучше.
• Kurosu and kashimura, 1995; NoamTractinsky, 1997.
• “The Influence of Design aesthetics in usability testing:
effects on user Performance and Perceived usability,” (Sonderegger and Sauer, 2009)
OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 29
Эмоциональные ассоциации
ООО «Ричмедиа» , iSpring Solutions, Inc. 30
iPod shuffle
ООО «Ричмедиа» , iSpring Solutions, Inc. 31
HTC
ООО «Ричмедиа» , iSpring Solutions, Inc. 32
OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 33
ООО «Ричмедиа» , iSpring Solutions, Inc. 34
Call to action
ООО «Ричмедиа» , iSpring Solutions, Inc. 35
ООО «Ричмедиа» , iSpring Solutions, Inc. 36
ООО «Ричмедиа» , iSpring Solutions, Inc. 37
ООО «Ричмедиа» , iSpring Solutions, Inc. 38ООО «Ричмедиа» , iSpring Solutions, Inc. 38
OOO «Ричмедиа»
• Мощный инструмент
• Привлекать внимание к определённым частям страниц
ООО «Ричмедиа» , iSpring Solutions, Inc. 39
Facebook
ООО «Ричмедиа» , iSpring Solutions, Inc. 40
Уменьшили деактивацию на 7
percent. На один миллион
пользователей стало меньше
деактивировать свой аккаунт.
OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 41
ООО «Ричмедиа» , iSpring Solutions, Inc. 42
ООО «Ричмедиа» , iSpring Solutions, Inc. 43
ООО «Ричмедиа» , iSpring Solutions, Inc. 44
ООО «Ричмедиа» , iSpring Solutions, Inc. 45
ООО «Ричмедиа» , iSpring Solutions, Inc. 46
ООО «Ричмедиа» , iSpring Solutions, Inc. 47

Más contenido relacionado

Destacado

принципы проектирования интерфейсов
принципы проектирования интерфейсовпринципы проектирования интерфейсов
принципы проектирования интерфейсов
Рома Клюкин
 
Cartagena 5 day bootcamp on Meeting Architecture general presentation
Cartagena 5 day bootcamp on Meeting Architecture general presentationCartagena 5 day bootcamp on Meeting Architecture general presentation
Cartagena 5 day bootcamp on Meeting Architecture general presentation
Meeting Design Institute
 

Destacado (10)

принципы проектирования интерфейсов
принципы проектирования интерфейсовпринципы проектирования интерфейсов
принципы проектирования интерфейсов
 
Applying sciences to meetings & events
Applying sciences to meetings & eventsApplying sciences to meetings & events
Applying sciences to meetings & events
 
The FRESH Conference case
The FRESH Conference caseThe FRESH Conference case
The FRESH Conference case
 
Unilever tv online format
Unilever tv online formatUnilever tv online format
Unilever tv online format
 
ReFRESHing Social Media
ReFRESHing Social MediaReFRESHing Social Media
ReFRESHing Social Media
 
Дизайн для недизайнеров
Дизайн для недизайнеровДизайн для недизайнеров
Дизайн для недизайнеров
 
The FRESH Drinks Reception IMEX America 2013
The FRESH Drinks Reception IMEX America 2013The FRESH Drinks Reception IMEX America 2013
The FRESH Drinks Reception IMEX America 2013
 
Cartagena 5 day bootcamp on Meeting Architecture general presentation
Cartagena 5 day bootcamp on Meeting Architecture general presentationCartagena 5 day bootcamp on Meeting Architecture general presentation
Cartagena 5 day bootcamp on Meeting Architecture general presentation
 
The FRESH Conference programme - Copenhagen, 26-28 January 2014 - #FRESH14
The FRESH Conference programme - Copenhagen, 26-28 January 2014 - #FRESH14The FRESH Conference programme - Copenhagen, 26-28 January 2014 - #FRESH14
The FRESH Conference programme - Copenhagen, 26-28 January 2014 - #FRESH14
 
The Meeting Architect’s Toolbox for meeting & event design 2013 - 2014
The Meeting Architect’s Toolbox for meeting & event design 2013 - 2014The Meeting Architect’s Toolbox for meeting & event design 2013 - 2014
The Meeting Architect’s Toolbox for meeting & event design 2013 - 2014
 

Similar a Эмоциональный web-дизайн

Cкетчинг и прототипирование web-страниц
Cкетчинг и прототипирование web-страницCкетчинг и прототипирование web-страниц
Cкетчинг и прототипирование web-страниц
Rinat Shaikhutdinov
 
Элементы дизайна сайтов
Элементы дизайна сайтовЭлементы дизайна сайтов
Элементы дизайна сайтов
Rinat Shaikhutdinov
 
Цвета в web-дизайне
Цвета в web-дизайнеЦвета в web-дизайне
Цвета в web-дизайне
Rinat Shaikhutdinov
 
Расширение арсенала PowerPoint для online-презентаций и продвижения идей
Расширение арсенала PowerPoint для online-презентаций и продвижения идейРасширение арсенала PowerPoint для online-презентаций и продвижения идей
Расширение арсенала PowerPoint для online-презентаций и продвижения идей
Rinat Shaikhutdinov
 
Шрифты и мультимедиа в web-дизайне
Шрифты и мультимедиа в web-дизайнеШрифты и мультимедиа в web-дизайне
Шрифты и мультимедиа в web-дизайне
Rinat Shaikhutdinov
 
Кратко про Интерфейсы
Кратко про ИнтерфейсыКратко про Интерфейсы
Кратко про Интерфейсы
Rinat Shaikhutdinov
 
[Leadmachine] trends 2013
[Leadmachine] trends 2013[Leadmachine] trends 2013
[Leadmachine] trends 2013
ConcertWith.me
 
Digital marketing outlook russia №1
Digital marketing outlook russia №1Digital marketing outlook russia №1
Digital marketing outlook russia №1
Evgeniy Eremeev
 
как опередить конкурентов (UIDG 4 Site2009)
как опередить конкурентов (UIDG 4 Site2009)как опередить конкурентов (UIDG 4 Site2009)
как опередить конкурентов (UIDG 4 Site2009)
UIDesign Group
 
юзабилити не существует
юзабилити не существуетюзабилити не существует
юзабилити не существует
Samson Bezmyatezhny
 

Similar a Эмоциональный web-дизайн (20)

Cкетчинг и прототипирование web-страниц
Cкетчинг и прототипирование web-страницCкетчинг и прототипирование web-страниц
Cкетчинг и прототипирование web-страниц
 
Элементы дизайна сайтов
Элементы дизайна сайтовЭлементы дизайна сайтов
Элементы дизайна сайтов
 
Цвета в web-дизайне
Цвета в web-дизайнеЦвета в web-дизайне
Цвета в web-дизайне
 
Расширение арсенала PowerPoint для online-презентаций и продвижения идей
Расширение арсенала PowerPoint для online-презентаций и продвижения идейРасширение арсенала PowerPoint для online-презентаций и продвижения идей
Расширение арсенала PowerPoint для online-презентаций и продвижения идей
 
Шрифты и мультимедиа в web-дизайне
Шрифты и мультимедиа в web-дизайнеШрифты и мультимедиа в web-дизайне
Шрифты и мультимедиа в web-дизайне
 
Кратко про Интерфейсы
Кратко про ИнтерфейсыКратко про Интерфейсы
Кратко про Интерфейсы
 
[Leadmachine] trends 2013
[Leadmachine] trends 2013[Leadmachine] trends 2013
[Leadmachine] trends 2013
 
Digital Marketing Outlook Russia
Digital Marketing Outlook RussiaDigital Marketing Outlook Russia
Digital Marketing Outlook Russia
 
Digital marketing outlook russia 2012 (3)
Digital marketing outlook russia 2012 (3)Digital marketing outlook russia 2012 (3)
Digital marketing outlook russia 2012 (3)
 
Digital marketing outlook russia №1
Digital marketing outlook russia №1Digital marketing outlook russia №1
Digital marketing outlook russia №1
 
QB Interactive
QB InteractiveQB Interactive
QB Interactive
 
Pres
PresPres
Pres
 
Когда стоит забыть о дизайн-мышлении и вспомнить о дизайн-исследованиях
Когда стоит забыть о дизайн-мышлении и вспомнить о дизайн-исследованияхКогда стоит забыть о дизайн-мышлении и вспомнить о дизайн-исследованиях
Когда стоит забыть о дизайн-мышлении и вспомнить о дизайн-исследованиях
 
презентация Landing page atk group
презентация Landing page atk groupпрезентация Landing page atk group
презентация Landing page atk group
 
Готовые PR-решения для вашего банка
Готовые PR-решения для вашего банкаГотовые PR-решения для вашего банка
Готовые PR-решения для вашего банка
 
как опередить конкурентов (UIDG 4 Site2009)
как опередить конкурентов (UIDG 4 Site2009)как опередить конкурентов (UIDG 4 Site2009)
как опередить конкурентов (UIDG 4 Site2009)
 
Общее собрание директоров
Общее собрание директоровОбщее собрание директоров
Общее собрание директоров
 
юзабилити не существует
юзабилити не существуетюзабилити не существует
юзабилити не существует
 
iPad меняет представление о ПК
iPad меняет представление о ПКiPad меняет представление о ПК
iPad меняет представление о ПК
 
Как iPad ломает представление о компьютерах… и открывает новые возможности дл...
Как iPad ломает представление о компьютерах… и открывает новые возможности дл...Как iPad ломает представление о компьютерах… и открывает новые возможности дл...
Как iPad ломает представление о компьютерах… и открывает новые возможности дл...
 

Más de Rinat Shaikhutdinov

Структурирование информации. Краткая вводная
Структурирование информации. Краткая вводнаяСтруктурирование информации. Краткая вводная
Структурирование информации. Краткая вводная
Rinat Shaikhutdinov
 
Что такое цифровой продукт, и почему интерфейс теперь очень важен
Что такое цифровой продукт, и почему интерфейс теперь очень важенЧто такое цифровой продукт, и почему интерфейс теперь очень важен
Что такое цифровой продукт, и почему интерфейс теперь очень важен
Rinat Shaikhutdinov
 
Построение бизнес-моделей
Построение бизнес-моделейПостроение бизнес-моделей
Построение бизнес-моделей
Rinat Shaikhutdinov
 
Что почитать по интернет маркетингу
Что почитать по интернет маркетингуЧто почитать по интернет маркетингу
Что почитать по интернет маркетингу
Rinat Shaikhutdinov
 
Методы монетизации интернет-проектов
Методы монетизации интернет-проектовМетоды монетизации интернет-проектов
Методы монетизации интернет-проектов
Rinat Shaikhutdinov
 
Веб аналитика и оценка эффективности сайта
Веб аналитика и оценка эффективности сайтаВеб аналитика и оценка эффективности сайта
Веб аналитика и оценка эффективности сайта
Rinat Shaikhutdinov
 
Маркетинг в социальных сетях
Маркетинг в социальных сетяхМаркетинг в социальных сетях
Маркетинг в социальных сетях
Rinat Shaikhutdinov
 
Контекстная реклама
Контекстная рекламаКонтекстная реклама
Контекстная реклама
Rinat Shaikhutdinov
 
Контент маркетинг
Контент маркетингКонтент маркетинг
Контент маркетинг
Rinat Shaikhutdinov
 
Алгоритм привлечения клиентов
Алгоритм привлечения клиентовАлгоритм привлечения клиентов
Алгоритм привлечения клиентов
Rinat Shaikhutdinov
 
Технические моменты создания сайта
Технические моменты создания сайтаТехнические моменты создания сайта
Технические моменты создания сайта
Rinat Shaikhutdinov
 
Правила юзабилити
Правила юзабилитиПравила юзабилити
Правила юзабилити
Rinat Shaikhutdinov
 
Портрет потенциального клиента
Портрет потенциального клиентаПортрет потенциального клиента
Портрет потенциального клиента
Rinat Shaikhutdinov
 
Видение, миссия, цель, стратегия, план
Видение, миссия, цель, стратегия, планВидение, миссия, цель, стратегия, план
Видение, миссия, цель, стратегия, план
Rinat Shaikhutdinov
 
Быстрое прототипирование сайтов
Быстрое прототипирование сайтовБыстрое прототипирование сайтов
Быстрое прототипирование сайтов
Rinat Shaikhutdinov
 
Сколько стоит создание сайта
Сколько стоит создание сайтаСколько стоит создание сайта
Сколько стоит создание сайта
Rinat Shaikhutdinov
 
Какие сайты бывают
Какие сайты бываютКакие сайты бывают
Какие сайты бывают
Rinat Shaikhutdinov
 

Más de Rinat Shaikhutdinov (20)

Гештальт-принципы дизайна для разработчиков
Гештальт-принципы дизайна для разработчиковГештальт-принципы дизайна для разработчиков
Гештальт-принципы дизайна для разработчиков
 
Структурирование информации. Краткая вводная
Структурирование информации. Краткая вводнаяСтруктурирование информации. Краткая вводная
Структурирование информации. Краткая вводная
 
Что такое цифровой продукт, и почему интерфейс теперь очень важен
Что такое цифровой продукт, и почему интерфейс теперь очень важенЧто такое цифровой продукт, и почему интерфейс теперь очень важен
Что такое цифровой продукт, и почему интерфейс теперь очень важен
 
Построение бизнес-моделей
Построение бизнес-моделейПостроение бизнес-моделей
Построение бизнес-моделей
 
Что почитать по интернет маркетингу
Что почитать по интернет маркетингуЧто почитать по интернет маркетингу
Что почитать по интернет маркетингу
 
Методы монетизации интернет-проектов
Методы монетизации интернет-проектовМетоды монетизации интернет-проектов
Методы монетизации интернет-проектов
 
Веб аналитика и оценка эффективности сайта
Веб аналитика и оценка эффективности сайтаВеб аналитика и оценка эффективности сайта
Веб аналитика и оценка эффективности сайта
 
Маркетинг в социальных сетях
Маркетинг в социальных сетяхМаркетинг в социальных сетях
Маркетинг в социальных сетях
 
Контекстная реклама
Контекстная рекламаКонтекстная реклама
Контекстная реклама
 
Контент маркетинг
Контент маркетингКонтент маркетинг
Контент маркетинг
 
Search engine optimization
Search engine optimizationSearch engine optimization
Search engine optimization
 
Алгоритм привлечения клиентов
Алгоритм привлечения клиентовАлгоритм привлечения клиентов
Алгоритм привлечения клиентов
 
Технические моменты создания сайта
Технические моменты создания сайтаТехнические моменты создания сайта
Технические моменты создания сайта
 
Правила юзабилити
Правила юзабилитиПравила юзабилити
Правила юзабилити
 
Правила дизайна
Правила дизайнаПравила дизайна
Правила дизайна
 
Портрет потенциального клиента
Портрет потенциального клиентаПортрет потенциального клиента
Портрет потенциального клиента
 
Видение, миссия, цель, стратегия, план
Видение, миссия, цель, стратегия, планВидение, миссия, цель, стратегия, план
Видение, миссия, цель, стратегия, план
 
Быстрое прототипирование сайтов
Быстрое прототипирование сайтовБыстрое прототипирование сайтов
Быстрое прототипирование сайтов
 
Сколько стоит создание сайта
Сколько стоит создание сайтаСколько стоит создание сайта
Сколько стоит создание сайта
 
Какие сайты бывают
Какие сайты бываютКакие сайты бывают
Какие сайты бывают
 

Эмоциональный web-дизайн