Поднимая учебные материалы по композиции, я натолкнулся на одну интересную особенность: все они говорят о статичном (неподвижном) изображении! Когда писались учебники и создавались программы обучения.
Вообще-то, изображения в интернете (в большинстве случаев) статичны и большинство правил композиции дизайна и изобразительного искусства прекрасно подходят (и даже обязательны). Например, передача скорости движения с помощью размывки. Но в Интернет есть анимация! Почему бы не дополнить ей классические способы передачи движения? Я сделал сам объект ярко выраженным смысловым центром, а анимацию "замаскировал", используя цвета, которые сливаются с окружающими, и "оживил" только ключевые элементы изображения, подчеркивающие (но не сильно) движение и его направление, с учётом перспективы.
Но! Движение само бросается в глаза. Если сделать контуры мелькающих полос чёрными, то они перетянут внимание на себя своей выразительностью. Важно не потерять статичный не анимированный смысловой центр.
Если это страничка для сайта, то должно быть меню для навигации по нему. Но как его сделать заметным и выразительным при таких мощных элементах композиции (яркий смысловой центр и анимация)? Очень просто. Есть направление движения и "главный герой". Поставим меню навигации у него на пути. Только аккуратно. Слишком большие буквы будут выглядеть серьёзным препятствием на пути и вызывать чувство неудобства при просмотре.
Добавим рамку текстовому блоку, и он станет отдельным объектом и окажется расположенным на переднем плане. Станет отстранённым от "сюжета" — изображение имеет пространственную перспективу, а "плоский" текстовый блок не может её иметь. Я поставил кнопки меню на угол рамки, подвязав меню к рамке с текстовым блоком и "убрав его с дороги" на ближний план. Направление и линия движения остались и указывают на меню, но оно теперь не "валяется на дороге" и не вызывает беспокойство за стремительного "главного героя".
Анимированная линия разделительной полосы стала (сама собой, почти без моего участия) линией равновесия. Пора подумать о балансе! Так как это пространственная композиция, то текстовый блок с рамочкой живёт своей жизнью на переднем плане. Оставим его в покое. Чем перевесить такой вес ярко выраженного смыслового центра? Хорошее решение — это использовать существующую перспективу. Так и просится линия горизонта с удалённым ключевым элементом (небольшого размера) справа. Он придаст чувство равновесия за счёт расстояния в перспективе (помните рычаг Архимеда?).
Только не слово о солнце на горизонте! Его мощный блик на капоте и тень от машины говорят очень точно о расположении солнца. Непонимание освещения — это частая ошибка. Сколько поддельных фотографий было из-за неё разоблачено. Да, красивая идея с линией горизонта, но, увы... Эту идею придётся оставить.
Нужно место для заголовка. Создать оформленное заголовка в виде графики, с подбором шрифта, градиента и т.п. — это добавить лишнего веса. Я просто набираю название обычным текстом большого размера и единственным возможным цветом в этой композиции. Но для интернета я не могу использовать всё разнообразие шрифтов и должен использовать только системные. Поигрался с таблицей стилей и успокоился. Хотя, с равновесием можно засесть на неделю.
Вроде, всё неплохо... А где же сюжетный контраст — кульминация фильма? Где то, что делает его выразительным и увлекательным? И вот теперь Интернет даёт мне огромные возможности интерактивности! Я могу привлечь пользователя в сюжет, и он сам будет вызывать события, двигая мышкой по кнопкам меню. Как всё хорошо — надпись, интрига, действие. Но... Что может быть сюжетным контрастом для движущегося автомобиля? Кирпичная стена? Ну, это избито (в прямом и переносном смысле).
О, нашёл! Рисунок на бумаге, технический эскиз этой машины. Он выражает полную статичность, являясь контрастом динамике движения. Хорошо уметь рисовать, правда?
Психология... Пройдёмся по ассоциативному ряду в композиции. Ассоциативный ряд здесь очень короткий. Сама необычность идеи хорошо запоминается (особенно в сочетании с данной статьёй) и главная моя задача — заставить вас запомнить создателя. Там большими красными буквами написано и никаких отвлекающих надписей.
Теперь, если пользователь захотел продолжения сюжета и обратился к меню, нужно правильно подать активную, а значит — более яркую информацию. Обратите внимание на появляющийся элемент кнопки "услуги" — он большой, его много. А "цены" маленькие! Поводите мышкой туда, сюда и всё быстро поймёте.
Теперь, немного поиграемся со скриптом, усложним "сюжетную линию" активными слоями (посложнее) и подшлифуем сервис — отсечение лентяев со старыми версиями броузеров, загрузочный слой, чистка кода, тестирование и т.п. Но это же только эскиз...
Дополнительные материалы:
Психология в дизайне. Статья об особенностях выполнения задач оформления в графическом дизайне.
