user experience 2011: Принципы композиции и модульные сетки при...
DESCRIPTION
Доклад с конференции User Experience 2011TRANSCRIPT
![Page 1: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/1.jpg)
Принципы композиции и модульные сетки при проектировании сайтов
October, 7 2011Мария ЧайкинаUsabilitylab
![Page 2: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/2.jpg)
Почему одни сайты кажутся приятными и гармоничными, а другие нет?
![Page 3: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/3.jpg)
ЗОЛОТОЕСЕЧЕНИЕ
![Page 4: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/4.jpg)
![Page 5: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/5.jpg)
![Page 6: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/6.jpg)
![Page 7: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/7.jpg)
1,618…
![Page 8: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/8.jpg)
![Page 9: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/9.jpg)
по горизонтали 1,618…
![Page 10: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/10.jpg)
![Page 11: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/11.jpg)
![Page 12: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/12.jpg)
![Page 13: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/13.jpg)
![Page 14: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/14.jpg)
Числа и спираль Фибоначчи
1 1 2 3 5 8 13 21
![Page 15: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/15.jpg)
![Page 16: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/16.jpg)
![Page 17: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/17.jpg)
![Page 18: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/18.jpg)
![Page 19: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/19.jpg)
![Page 20: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/20.jpg)
![Page 21: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/21.jpg)
![Page 22: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/22.jpg)
Закон направления движения
От темного к светлому
Сохранение начатого направления движения взгляда
Движение вдоль линий и по указателям
Взгляд идет туда, куда смотрит человек на фотографии
Движение от более контарстных объектов к менее контрастным
![Page 23: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/23.jpg)
Чего ты хочешь?
Кушать
Домой
Чтобы докладчик не мешал спать
![Page 24: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/24.jpg)
МАСШТАБ
РАЗМЕРимеет значение
&
![Page 25: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/25.jpg)
Понятно ли какого размера эти устройства?
![Page 26: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/26.jpg)
КАКОЕ УСТРОЙСТВО БОЛЬШЕ?А теперь?
![Page 27: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/27.jpg)
Почему же мы это не показываем?
![Page 28: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/28.jpg)
КАКОЕ УСТРОЙСТВО БОЛЬШЕ?Используйте указатели масштаба
В данном случае –
человек, держащий
устройство, работает
как Указатель масштаба
![Page 29: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/29.jpg)
Исправляем
![Page 30: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/30.jpg)
БЛИЗОСТИЗАКОН
![Page 31: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/31.jpg)
С кем эта девушка?
![Page 32: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/32.jpg)
Объекты, расположенные близко друг к другу, воспринимаются связанно.
*ководство
С кем эта девушка?
![Page 33: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/33.jpg)
Что запостилpolotra_bora?
![Page 34: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/34.jpg)
К чему относится ссылка
Драма “Близость”?
![Page 35: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/35.jpg)
КОНТРАСТ
![Page 36: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/36.jpg)
обратить внимание
Контраст нужен, чтобы
![Page 37: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/37.jpg)
Способы достижения контраста
Размер
Форма
Цвет
Расположение
Фактура и текстура
![Page 38: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/38.jpg)
Форма
Цвет
Фактура и текстура
![Page 39: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/39.jpg)
Вы можете прочитать текст?
![Page 40: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/40.jpg)
![Page 41: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/41.jpg)
МОДУЛЬНЫЕ
СЕТКИ
![Page 42: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/42.jpg)
В удаве 38 попугаев. Попугай –это модуль сетки!*статья Алексея Черенкевича
![Page 43: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/43.jpg)
Задачи сетки
Ускорение работы
Сбалансированность и пропорциональность
Ускорение и шаблонирование
Единообразность элементов
![Page 44: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/44.jpg)
Колончатая сетка
![Page 45: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/45.jpg)
Модульная сетка с одинаковыми модулями
![Page 46: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/46.jpg)
Модульная сетка с разными модулями
![Page 47: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/47.jpg)
Берем «холст» шириной 980 px
![Page 48: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/48.jpg)
Определяем микромодуль
текст
![Page 49: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/49.jpg)
Определяем микромодуль
![Page 50: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/50.jpg)
Создаем композицию
![Page 51: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/51.jpg)
Создаем композицию
![Page 52: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/52.jpg)
Создаем композицию
![Page 53: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/53.jpg)
![Page 54: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/54.jpg)
![Page 55: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/55.jpg)
![Page 56: User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов](https://reader034.vdocuments.site/reader034/viewer/2022052307/557ef0dfd8b42ad17d8b4bd5/html5/thumbnails/56.jpg)