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

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

Тематическая связь текста с фотографией

Сегодня трудно представить современный Web-сайт без графических элементов дизайна и фотографий. Так или иначе, в той или иной форме, но фотография является неотъемлемой частью современного веб-сайта или блога. И это не удивительно. Информация представленная на сайте только лишь в виде текста выглядит скучной и неинтересной пользователю. Присутствие даже маленьких фотографий на странице предают текстовой информации бОльшую привлекательность и информативность, удерживая читателя на странице, при условии, что текст и изображения тематически связаны, и дополняют друг друга.

Восприятие текстовой информации

Опытным путем проверено, что текстовая информация дополненная изображениями, лучше усваивается читателем, а также очень нравиться поисковым системам, что способствует увеличению посещаемости сайта или блога. Именно по этой причине, господа блоггеры используют в своих статьях (к сожалению, не всегда законно) картинки и/или фотографии соответствующей тематики. Таким образом, пользователь получает больше необходимой информации, а блог, в свою очередь, растет в глазах поисковиков.

Хорошо, но причем здесь Web-дизайн? Спросите вы.

Да, действительно, контент сайта и веб-дизайн это немного разные вещи, но лишь немного. Хотим мы этого или нет, но контент веб-страницы занимает её основную часть. Во всяком случае, так должно быть. Исходя из этого, растровая или векторная графика дополняющая текстовый контент, служит мощным инструментом восприятия информации и дружелюбного отношения к сайту вцелом. В своих публикациях я стараюсь включать в материал много фотографий, или как в данном случае - скриншотов, чтобы предоставить своему читателю исчерпывающую информацию по тому или иному вопросу, которую он здесь хочет найти.

Связь графических элементов дизайна веб-страницы с графикой контента

В качестве примера, я сделал два скриншота главной страницы этого сайта, где наглядно продемонстрирована связь графики дизайна и контента.
Посмотрите на скриншот справа. Здесь можно увидеть взаимосвязь фотографий: одни изображения представляют контент, другие - это фотографии входящие в дизайн веб-страницы.

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

Сочетание графических элементов с подтверждающим цветом дизайна

Скриншот ниже наглядно демонстрирует тональную связь разнотипных элементов дизайна которые различны по размерам но связаны между собой одинаковой тональностью. Такое сочетание цвета работает как подтверждающий цвет дизайна веб-страницы, связывая нижнюю часть сайта с основной. И не важно что будет изображено на этих картинках, главное - доминирующий цвет этих элементов.

Следует отметить, что фоновая картинка в футере, в данном случае - изображение фотокамеры, не препятствует читабельности текста расположенном над ней. Запомните: нельзя под текст "подсовывать" изображение, которое делает текст нечитабельным, но об этом поговорим чуть позже.

Взаимозависимость изображений фона и контента

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

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

Вы наверняка встречали сайты, фон которых - это одна большая фотография. Основные заказчики таких дизайнов - свадебные фотографы. Такие сайты визитки есть у многих фотографов, и в общем, они не плохо смотрятся.
На скриншоте слева представлен вариант применения фотографии в качестве фона страницы. Как правило, такой фон веб-сайта выглядит эффектно и красиво, но не всегда практично, см. скриншот ниже.

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

На скриншоте ниже, фон состоит из одного маленького графического элемента, который размножаясь, заполняет все фоновое пространство веб-страницы. Такой прием используют многие веб-дизайнеры. Это существенно облегчает веб-страницу по сравнению с использованием больших фоновых изображений. Большие фоновые изображения довольно тяжелые, что негативно сказывается на времени загрузки веб-страницы с сервера. Такие файлы необходимо качественно оптимизировать, то есть сжимать перед загрузкой на сервер.

Качество фоновой картинки

Если вы хотите применить большую фоновую картинку на своем сайте, для этого необходимо подбирать такое изображение, которое при сжатии не теряет качество, то есть на котором отсутствуют Jpeg артефакты, а если теряет, то не существенно. Фоновые изображения с заметными Jpeg артефактами - это огромный минус дизайна, и свидетельство низкой квалификации веб-дизайнера.

В заключении обращаю ваше внимание на пару важных моментов, которые советую запомнить.
Грамотное применение фотографии в веб-дизайне и контенте позволит вывести ваш сайт или блог на совершенно новый уровень; используя на практике вышеперечисленные советы, вам будет проще продвигать ваш сайт или блог в топ поисковой выдачи. Старайтесь совмещать в дизайне вашего сайта красоту и функциональность без ущерба для того и другого.

Уважайте труд других людей: не используйте на вашем сайте/блоге рисунки и фотографии без разрешения их авторов. Ворованый контент не сделает вас богаче и счастливей, а вот проблем может добавить запросто. На этом все. Спасибо за внимание.

	Нужен ли сайт-визитка свадебному фотографу
	Что нужно знать заказывая сайт в веб-студии