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

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

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

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

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

Анимированная линия разделительной полосы стала сама по себе линией равновесия. Теперь можно подумать о балансе! Учитывая, что  это пространственная композиция, то текстовый блок с рамочкой, находясь на переднем плане, живёт своей жизнью. Оставим его в покое. Каким образом можно перевесить такой вес ярко выраженного смыслового центра? Если использовать существующую перспективу, то это будет хорошим решением. Очень напрашивается линия горизонта с удалённым ключевым элементом маленького размера справа. Она придаст чувство равновесия за счёт расстояния в перспективе.

Очень красивая, идея композиции с линией горизонта, но, эту идею необходимо оставить, ибо мы  в интернете. У страницы должен быть свой хозяин, поэтому нужно место для названия.  Можно набрать название, используя обычный текст большого размера и использовать один из цветов, который доступный в этой композиции.

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

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

Об этом подробнее на сайте:

http://dizain.seoklub.ru/dizain1.html