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

October, 7 2011Мария ЧайкинаUsabilitylab

Почему одни сайты кажутся приятными и гармоничными, а другие нет?

ЗОЛОТОЕСЕЧЕНИЕ

1,618…

по горизонтали 1,618…

Числа и спираль Фибоначчи

1 1 2 3 5 8 13 21

Закон направления движения

От темного к светлому

Сохранение начатого направления движения взгляда

Движение вдоль линий и по указателям

Взгляд идет туда, куда смотрит человек на фотографии

Движение от более контарстных объектов к менее контрастным

Чего ты хочешь?

Кушать

Домой

Чтобы докладчик не мешал спать

МАСШТАБ

РАЗМЕРимеет значение

&

Понятно ли какого размера эти устройства?

КАКОЕ УСТРОЙСТВО БОЛЬШЕ?А теперь?

Почему же мы это не показываем?

КАКОЕ УСТРОЙСТВО БОЛЬШЕ?Используйте указатели масштаба

В данном случае –

человек, держащий

устройство, работает

как Указатель масштаба

Исправляем

БЛИЗОСТИЗАКОН

С кем эта девушка?

Объекты, расположенные близко друг к другу, воспринимаются связанно.

*ководство

С кем эта девушка?

Что запостилpolotra_bora?

К чему относится ссылка

Драма “Близость”?

КОНТРАСТ

обратить внимание

Контраст нужен, чтобы

Способы достижения контраста

Размер

Форма

Цвет

Расположение

Фактура и текстура

Форма

Цвет

Фактура и текстура

Вы можете прочитать текст?

МОДУЛЬНЫЕ

СЕТКИ

В удаве 38 попугаев. Попугай –это модуль сетки!*статья Алексея Черенкевича

Задачи сетки

Ускорение работы

Сбалансированность и пропорциональность

Ускорение и шаблонирование

Единообразность элементов

Колончатая сетка

Модульная сетка с одинаковыми модулями

Модульная сетка с разными модулями

Берем «холст» шириной 980 px

Определяем микромодуль

текст

Определяем микромодуль

Создаем композицию

Создаем композицию

Создаем композицию

Thank youСпасибо за внимание

Чайкина Мария

m.chaikina@usabilitylab.net