48
Некоторые принципы визуального дизайна. Элементы опыта взаимодействия по Гарретту 3-е занятие

Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

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

3-е занятие

Page 2: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Пояснение к режимам

Autodesk Sketchbook Pro 2

Page 3: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Процесс проектирования

– Видение и осознание продукта

– Изучение пользователей: опыт, мотивы, цели, задачи, сценарии

– Проектирование

– Тестирование спроектированного

– Прототипирование

– Тестирование прототипов и реальных систем

– Проектирование и тестирование в процессе итерационной разработки

Page 4: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

План занятия

– Домашка

– Шесть шляп мышления

– Типы интерфейсов: временные и монопольные

– Принципы тяготения и плотности

– Элементы опыта взаимодействия Гарретта

Page 5: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Организация проверки задания

– Остаточные вопросы, 10

– 2 лучших решения, 20

– Мысли о процессе, «как», 10

– Улучшение лучшего решения, 10

– Перерыв, 10

Page 6: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Шесть шляп мышления Эдвард Де Боно

Белая

Красная

Черная

Желтая

Зеленая

Синяя

информация

эмоции

критика

преимущества

идеи, возможности

над-мышление

Page 7: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Временные и монопольные

Page 8: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Монопольные

Page 9: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Монопольные

Page 10: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Монопольные

Page 11: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Временные

Page 12: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Принципы тяготения и плотности

Page 13: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Принцип тяготения

Page 14: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Артем Дэп, «Стереотипная сетка. Часть первая. Принцип тяготения в дизайне»

Page 15: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 16: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 17: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Артем Дэп, «Стереотипная сетка. Часть первая. Принцип тяготения в дизайне»

Page 18: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 19: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 20: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Принцип плотности относительности

Page 21: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Принцип плотности относительности

Page 22: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Артем Дэп, «Стереотипная сетка. Часть вторая. Принцип плотности»

Page 23: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Артемий Лебедев, «Ководство», § 136. Теория близости

частный случай

фото — minarai

Page 24: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

относительность

Page 25: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

КонтрастРитмВыравниваниеСхожесть

по мотивам презентации Джеффа Паттона «User Experience Distilled» agileproductdesign.com/presentations

частные случаи

Page 26: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Контраст

Page 27: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 28: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 29: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Ритм, повторение

Page 30: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 31: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 32: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Выравнивание

фото — tofu minx

Page 33: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 34: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Схожесть

Page 35: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Элементы опыта взаимодействия

Page 36: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Jesse James Garrett’s Elements of User Experience http://www.jjg.net/elements/

«Раскраска»

Компоновка

Структура

Требования

Стратегия

Page 37: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Dude’s Law

Value = Why / HowЦенность = Зачем / Как

David Hussman, dude,

software antropologist

Page 38: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

«Раскраска»

Компоновка

Структура

Требования

Стратегия

Page 39: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

«Раскраска»

Компоновка

Структура

Требования

Стратегия

Page 40: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

панели задач

диалоги

визарды

«Раскраска»

Компоновка

Структура

Требования

Стратегия

Page 41: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Задачи пользователя:• ввод чисел• ввод текст• ввод формул• форматирование ячейки• сортировка• фильтрация• построение графиков• сохранение данных• импорт данных• экспорт данных• печать• …..

«Раскраска»

Компоновка

Структура

Требования

Стратегия

Page 42: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Цели бизнеса• вытеснить конкурирующие

продукты• побудить к покупке других

интегрированных продуктов• сделать xls-формат основным

форматом обмена• …

Потребители• бухгалтеры• бизнесмены• домохозяйки• …

Среды использования• настольный компьютер в офисе• ноутбук в самолете• PDA в автомобиле• …

«Раскраска»

Компоновка

Структура

Требования

Стратегия

Page 43: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Jesse James Garrett’s Elements of User Experience http://www.jjg.net/elements/

«Раскраска»

Компоновка

Структура

Требования

Стратегия

Page 44: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Page 45: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Статьи Артема Дэпа

Стереотипная сетка. Часть первая. Принцип тяготения в дизайне. http://artem-dap.livejournal.com/6110.html

Стереотипная сетка. Часть вторая. Принцип плотности. http://artem-dap.livejournal.com/6198.html

Стереотипная сетка. Часть вторая. Принцип плотности второго порядка. Графическая рифма. http://artem-dap.livejournal.com/7593.html

Стереотипная сетка. Часть третья. Принцип перспективы. Выкладки. http://artem-dap.livejournal.com/68464.html

Диджитальный подход к перспективе (в частности в интерфейсной среде)

http://artem-dap.livejournal.com/163258.html

В поисках альтернативной сетки (диджитальная сетка) http://artem-dap.livejournal.com/274990.html

Диджитальный подход к текстовому набору http://artem-dap.livejournal.com/173891.html

Page 46: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Домашка

Тестовое задание проектировщику интерфейсов «Рамблер»

http://dzimin.ru/rambler/vacancy_test.html

Page 47: Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия

Ретроспектива занятия