Изображения в web дизайне

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

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

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

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

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

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

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

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

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

Я старался не сильно углубляться в термины и названия, но если вам что-то не понятно, то:

--если вы обычный пользователь - не обращайте внимания.

--если вы потенциальный заказчик - оцените количество возможностей.

--если вы дизайнер и, что-то не поняли - то вы не дизайнер. Вам нужно или учиться, или расслабиться.

Свои мнения (плохие или хорошие - всё равно, главное - конкретные) оставляйте у нас на форуме. Мне очень интересно узнать, что вы думаете. С удовольствием, опубликую интересные сообщения.