Фотографія у Web-дизайні

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

Веб-дизайнери і фотографи ходять однією дорогою - дорогою творчості. І ті й інші в своїй творчості використовують такий інструмент обробки графіки як фотошоп. Можна продовжувати проводити паралелі між цими чудовими професіями, але сьогодні я хочу поговорити про те, як і навіщо застосовувати фотографію у веб-дизайні.

web design and photo

Тематичний зв'язок тексту з фотографією

Сьогодні важко уявити сучасний Web-сайт без графічних елементів дизайну і фотографій. Так чи інакше, в тій чи іншій мірі, але фотографія є невід'ємною частиною сучасного веб-сайту або блогу. І це не дивно. Інформація яка представлена на сайті лише у вигляді тексту, виглядає нудною і нецікавою користувачеві. Присутність навіть маленьких фотографій на сторінці надають текстовій інформації більшої привабливості та інформативності, утримуючи читача, за умови, що текст і зображення тематично пов'язані, і доповнюють один одного.

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

Дослідним шляхом доведено, що текстова інформація доповнена зображеннями, краще засвоюється читачем, а також дуже подобається пошуковим системам, що сприяє збільшенню відвідуваності сайту або блогу. Саме з цієї причини, блогери використовують у своїх статтях (на жаль, не завжди законно) картинки і/або фотографії відповідної тематики. Таким чином, користувач отримує більше необхідної інформації, а блог, в свою чергу, росте в очах пошуковиків.

Добре, але причому тут Web-дизайн? Запитаєте ви.

Так, дійсно, контент сайту та веб-дизайн це дещо різні речі, але лише трішки. Хочемо ми цього чи ні, але контент веб-сторінки займає її основну частину. У всякому разі, так має бути. Виходячи з цього, растрова або векторна графіка доповнююча текстовий контент, служить потужним інструментом сприйняття інформації та дружелюбного відношення до сайту вцілому. У своїх публікаціях я намагаюся включати в матеріал багато фотографій, або як в даному випадку - скріншотів, щоб надати своєму читачеві вичерпну інформацію по тому чи іншому питанню, яку він тут хоче знайти.

Зв'язок графічних елементів дизайну веб-сторінки з графікою контенту

елементи дизайну графіка контенту

Для наглядності я зробив два скріншоти головної сторінки цього сайту, де наочно продемонстрований зв'язок графіки дизайну і контенту.
Подивіться на скріншот праворуч. Тут можна побачити взаємозв'язок фотографій: одні зображення представляють контент, інші - це фотографії що входять до дизайну веб-сторінки.

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

Поєднання графічних елементів з підтверджуючим кольором дизайну

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

Слід зазначити, що фонова картинка в футері, в даному випадку - зображення фотокамери, не перешкоджає читабельності тексту розташованому над нею. Запам'ятайте: не можна під текст "підсовувати" зображення, яке робить текст нечитабельним, але про це поговоримо трохи пізніше.

Зв'язок графічних елементів дизайну веб-сторінки з графікою контенту

Взаємозалежність зображень фону і контенту

Важливим чинником сприйняття інформації на веб-сторінці є гармонічне поєднання кольору фону і картинок, які, в свою чергу, оточені текстовим контентом. Якщо картинки досить великі і занадто строкаті, які за тональністю не мають підтвердження в елементах дизайну, вони будуть відволікати увагу читача, що не дуже добре.

Але якщо сторінка містить тільки зображення, див. скріншот нижче, їх тональність може бути будь-якою, так як фотографії в даному випадку - це єдине джерело інформації. Отже, чим болше розмір фотографій - тим більше в них інформації. Але не варто зловживати розміром фотографій, так як це істотно збільшує вагу веб-сторінки зі всіма наслідками.

зображення фону і контенту

Ви напевно зустрічали сайти, фон яких - це одна велика фотографія. Основні замовники таких дизайнів - весільні фотографи. Такі сайти-візитки є у багатьох фотографів, і правду кажучи, вони досить не погано виглядають.
На скріншоті зліва представлений варіант застосування фотографії в якості фону сторінки. Як правило, такий фон веб-сайту виглядає ефектно і красиво, але не завжди практично, див. скріншот нижче.

На скріншоті зліва, фонова картинка (біла троянда) підходить для цієї сторінки. Контент - фотографії різної тональності, на такому тлі виглядають добре, так як фон не перетягує увагу на себе. Але ось на нижньому скріншоті, фонова картинка перешкоджає читабельності тексту, що дуже погано. З таким дизайном текст необхідно розміщувати на однотонному тлі, або ж на близькому до такого, який зображений на останньому скріншоті внизу.

фоновая картинка перешкоджає читабельності текста

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

Якість фонової картинки

Якщо ви хочете застосувати велику фонову картинку на своєму сайті, для цього необхідно підбирати таке зображення, яке при стисненні не втрачає якість, тобто на якому відсутні Jpeg артефакти, а якщо втрачає, то не суттєво. Фонові зображення з помітними Jpeg артефактами - це величезний мінус дизайну, і підтвердження низької кваліфікації веб-дизайнера.

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

Поважайте працю інших людей: не використовуйте на вашому сайті/блозі малюнки та фотографії без дозволу їх авторів. Крадений контент не зробить вас заможнішими та щасливішими, а ось проблем може додати запросто. На цьому все. Дякую за увагу.

Коментарі (наразі немає, Ваш буде першим)


    • Ліміт 2000 символів

    • залишилось:

Ще по даній темі:

© Andrey Ko 2012***
Яке доменне імя обрати для сайту фотографа
Категорії розділу
  • Всього категорій: 4

  • 2 263

Категорія
  • Автор: Andrey Ko

  • 13.12.2012

  • 3 188