Почему трудно менять готовый дизайн сайта.

Поговорим немного о композиции в изображении. Поднимая учебные материалы по композиции, я натолкнулся на одну интересную особенность: все они говорят о статичном (неподвижном) изображении! Когда писались учебники и создавались учебные программы, о будущих возможностях Интернет-технологий ещё не знали. А что, если вдохнуть жизни...?

Вообще-то, изображения в Интернет (в большинстве случаев) статичны и большинство законов дизайна и изобразительного искусства прекрасно подходят (и даже обязательны). Например, передача скорости движения с помощью размывки. Но в Интернет есть анимация! Почему бы не дополнить ей классические способы передачи движения? Я сделал сам объект ярко выраженным смысловым центром, а анимацию "замаскировал", используя цвета, которые сливаются с окружающими, и "оживил" только ключевые элементы изображения, подчеркивающие (но не сильно) движение и его направление, с учётом перспективы. Но! Движение - само бросается в глаза. Если сделать контуры мелькающих полос чёрными, то они перетянут внимание на себя своей выразительностью. Важно не потерять статический смысловой центр.

Стоп! Я же делаю страничку для сайта! Значит, должно быть меню для навигации по нему. Но как его сделать заметным и выразительным при таких мощных элементах композиции (яркий смысловой центр и анимация)? Очень просто: есть направление движения и "летящий главный герой". Поставим меню у него на пути. Только аккуратно. Слишком большие буквы будут выглядеть "серьёзным препятствием" и вызывать чувство неудобства при просмотре. Текстовый блок с рамкой кажется расположенным на переднем плане и отстранённым от "сюжета" (изображение имеет пространственную перспективу, а текстовый блок не может её иметь). Я поставил кнопки меню на угол рамки, подвязав меню к рамке с текстовым блоком и убрав его с "дороги" на ближний план. Направление и линия движения остались и указывают на меню, но оно теперь не "валяется на дороге", вызывая беспокойство за "стремительного главного героя".

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

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

Психология... Пройдёмся по ассоциативному ряду в композиции. Это, вообще-то, секретные данные и только для внутреннего пользования, но вы же ни кому не расскажете, да? Ассоциативный ряд здесь очень короткий. Сама необычность идеи хорошо запоминается (особенно в сочетании с данной статьёй :) и главная моя задача - заставить вас запомнить создателя ("6 FLOOR"). Там большими красными буквами написано и ни каких отвлекающих надписей. Это пассивная информация. Теперь, если пользователь захотел продолжения сюжета и обратился к меню, нужно "правильно" подать активную (а значит - более яркую) информацию. Обратите внимание на появляющийся элемент кнопки "услуги" - он большой, его много; а "цены" - маленькие! Поводите мышкой туда, сюда и всё быстро "поймёте". Прикладная психология... Кстати, если быть до конца искренним, то это соответствует действительности. И всё, что написано в комментариях - полная правда.

Теперь, немного поиграемся со скриптом, усложним "сюжетную линию" активными слоями (посложнее... мы же не первый год в web дизайне...) и подшлифуем сервис - отсечение лентяев с 3-ми версиями браузеров, загрузочный слой, чистка кода, тестирование и т.п. Вылизывать можно долго, но это же только эскиз...

Посмотрим, что же получилось? Да, неплохо... Но уже надоело... Вот в следующей работе я развернусь и такое придумаю...! А может, эта работа будет уже для вас?