Як вибрати хорошу обкладинку для свого веб-сайту?


22

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

Що робить ефективну обкладинку / фонову фотографію? Що я маю пам’ятати, шукаючи зображення або плануючи зробити та відредагувати деякі для свого сайту?


1
Зараз модно мати великі фонові VIDEOS.
користувач11153

1
Добре зроблено, один з кращих самостійно відповів на питання про сайті (я не можу згадати якісь - або інші, так що, можливо , краще). :)
Дом

Відповіді:


30

Вам справді потрібно слідувати тенденції?

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

Зважаючи на це, слід пам’ятати про багато речей, вибираючи фонове зображення для вашого веб-сайту. Оскільки ця відповідь така тривала, ось короткий перелік; Я наводжу докладніше про кожен, включаючи приклади, наведені нижче.

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

Переконайтесь, що зображення пов'язане із вмістом

Неспоріднене фото не принесе нічого, крім шкоди. Як і все, що є у вашому дизайні, якщо воно не відповідає безпосередньо вашим цілям веб-сайту, то позбудьтесь цього. Переконайтеся, що це безпосередньо пов’язано із вмістом навколо нього , а не чимось згодом. Зображення має мати додатковий контекст, який приносить якийсь текст чи макет, щоб допомогти користувачам зрозуміти, що це сайт, а не просто статичне зображення.

введіть тут опис зображення


Переконайтесь, що на зображенні написано те, що ви хочете

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

введіть тут опис зображення

Само собою зрозуміло, що образ повинен бути візуально привабливим. Детальніше про риси, щоб зображення було привабливим, нижче.


Переконайтесь, що зображення є відносно унікальним

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

введіть тут опис зображення


Використовуйте зображення реальних речей

Існує щось про реальне зображення (навіть дуже редаговану версію), яке має великий вплив на нас як людей. Нам подобається бачити реальні речі. По можливості вибирайте реальне зображення над чимось створеним на комп’ютері, якщо воно повністю не відповідає змісту чи стилю, для якого ви збираєтесь.

введіть тут опис зображення

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

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

введіть тут опис зображення


Переконайтесь, що зображення працює з вашим макетом

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

Переконайтесь, що жодна важлива частина зображення не охоплена вмістом, який у вас є. Використовуйте візуальні вказівки, щоб допомогти залучити користувачів до того вмісту, який ви хочете, щоб вони бачили (докладніше про це в наступному розділі).

введіть тут опис зображення


Переконайтесь, що зображення дотримується належних правил фотографії та дизайну

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

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

хороші правила зображення


Переконайтесь, що зображення відповідає вашій кольоровій гамі

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

Descr


Обмежте відхилення в межах зображення

Не робіть зоровий вигляд зайнятим. Наявлення на зображенні купи кольорів та предметів ускладнює нанесення тексту на нього та підгонку до макета. Як було сказано раніше, спочатку створіть вміст, а потім виберіть зображення.

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

введіть тут опис зображення

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

введіть тут опис зображення


Переконайтеся, що розмір зображення досить великий

Само собою зрозуміло, що використовуване зображення повинно бути досить великим, щоб охоплювати кожен екран, не розтягуючи його. Це означає, що для повноекранних екранів нам потрібно мати зображення з мінімальною роздільною здатністю 1024 х 768 пікселів, але найкраще орієнтуватися на ширину не менше 1200 пікселів. Ми також можемо зберегти завантаження великих зображень на менші екрани, подаючи різницю розмірів зображень на основі роздільної здатності, детальніше про це тут . Спробуйте оптимізувати час завантаження зображення, наскільки це можливо, не поступаючись при цьому якості зображення.


Переконайтеся, що у вас є права на використання зображення

Якщо вам заборонено користуватися ним, не використовуйте його . Якщо ви не знаєте, що таке авторське право на зображення , шукайте його, але не використовуйте його, поки не знаєте! Останнє, що ви хочете зробити, - це позов про порушення.


Переконайтеся, що якість фотографії висока

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

Додаткові ресурси:


4
Гарна відповідь. Я, мабуть, був би надто лаконічним: "Переконайтеся, що це хороша фотографія та відповідність потребам та цілям вашого сайту" :)
DA01

@ DA01 Хоча я цілком згоден з цим твердженням, деяким людям потрібна трохи більше допомоги :)
Зак Сосьє,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.