Изображения в web дизайне. Как изображения влияют на дизайн.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заказать создание сайта >>
от SEOKlub
+- (Пока нет голосов)
Loading...Loading...
Автор: Никита Смирнов
Статьи по теме:
Читайте нас:
по электронной почте


 

Яндекс.Метрика
SEOklub.ru © 2009 - 2016. Копирование материалов без активной ссылки на сайт запрещено.
Задать вопрос
Позвонить вам
Предложить тему статьи
Заказать услугу
Заказать сайт
Заказать услугу