Як вибрати велику фотографію для сайту
Як тільки ми бачимо велику фотографію на сайті, вона відразу ж заволодіває нашою увагою і викликає майже миттєву реакцію. Тому фотографії - важлива частина кожного створеного нами сайту. Вони грають важливу роль у формуванні першого враження, при цьому вони можуть також дати нам зрозуміти, про що сайт, і можуть стати хорошим фактором в зароблянні довіри користувача.
Якщо правильно їх використовувати, фотографії працюють дуже ефективно і можуть швидко передавати потрібну думку вашої аудиторії. Однак використання невідповідних фотографій може зіпсувати враження від спілкування з сервісом. Як же тоді вибирати правильні?
Привертає увагу, використовуючи велике фото
Люди переглядають екран на основі їх минулого досвіду і очікувань. Верхній лівий кут - найпоширеніша початкова точка для погляду користувача, хоча це залежить від моделі читання в певній культурі.
Ставтеся до фото, як до контенту
Упевнений, ви не будете сперечатися, що фото на веб-сторінці - це контент. Але чи належите ви так до знімків насправді? Чи використовуєте ви їх, як приємне доповнення або в якості гарного контенту? Розглянули ви всі аспекти конкретної фотографії, як одиниці контенту? Наскільки ретельно ви оцінили фото, перш ніж його вибрати? Обміркували ви моделі мислення ваших користувачів, і який вплив матиме фото на них? Чи забезпечує фото їх повноцінної інформацією або допомагає у вирішенні конкретної задачі? Це всього лише мала частина питань, на які потрібно відповісти перед вибором фото для сторінки сайту.
Фото не повинні використовуватися тільки для «надання пікантності» веб-сторінки.
Я бачив багато дизайнерів, просто поміщають красиву повнорозмірну фотографію на сторінці, і потім вони додають який-небудь слоган або CTA-кнопку. Вони вважають, що справу зроблено. У багатьох випадках над фото взагалі не роздумували, дизайнер просто слідував сучасному тренду. Розглянемо, як оцінювати фото перед його використанням на сайті.
Вибір ідеальної фотографії
Як тільки ви перевірили всі попередні параметри, і фото пройшло «основне випробування», ви можете продовжити шукати ще варіанти для передбачуваного використання.
Наш мозок обробляє зображення в 60 тисяч разів швидше, ніж читання тексту.
Наскільки фото корисно
Найголовніше - всі фото повинні бути корисними. Немає нічого страшного, якщо використовувати фото для прикраси сторінки, або щоб заповнити простір, але навіть в цьому випадку врахуйте контекст, в якому ви будете використовувати знімок. Корисні, навідні на думки тематичні фото - це як раз ті, які вимагають нашої особливої уваги.
Корисне фото повинно:
- допомагати нам краще зрозуміти щось,
- вчити нас, як використовувати щось,
- або показувати нам, як щось зроблено.
Відмінний приклад корисної фотографії в веб-дизайні - сайт Square.
Ви негайно можете сказати, що це зображення було знято професійно (подивіться на руки і нігті). Що важливіше, фото повністю передає, що це за продукт, і як легко його використовувати. Дуже корисне і повчальне фото.
Інший приклад корисного фото - сайт Pencil. Також як і попередній зразок, це фото показує призначення продукту (стилус), де і як його можна використовувати (додаток в iPad):
Сайт Woodster також добре використовує фото для пояснення призначення їхнього продукту. Зрозуміло, що їх продукт призначений, щоб поставити комп'ютер Mac на потрібну для очей висоту. Ще можна вибрати виконання підставки з зручними USB-портами. Уявіть, якщо продукт був би зображений без контексту (iMac). Було б це фото так само наочно, як це?
Grovemade виконали відмінну роботу, відобразивши весь асортимент своєї продукції на одній повноекранної фонової фотографії. Відразу стає очевидно, що вони виробляють аксесуари високої якості для офісу. Це фото не тільки корисно, воно ще й ефективно і емоційно одночасно. Розглянемо параметр ефективності та емоційності фотографій.
Якщо ви подивіться на приклади вище, то помітите, що все фото досить зрозумілі, і вони передають ідею повідомлення дуже добре. Не потрібно довго вдивлятися, щоб розібратися в призначенні продукту, сервісу, сайту. Це все характеристики корисної фотографії в веб-дизайні.
ефективність фотографії
Ефективне фото - це те фото, яке спонукає до дії, впливає на нашу поведінку і чітко передає ідею. Особливо хороші і ефективні знімки продукту здатні підштовхувати користувачів до покупки продукту.
З прикладів вище видно, що використовуються фото дійсно ефективні, оскільки вони роблять продукт бажаним і таким чином спонукають нас його купити. Всякий раз, коли ми бачимо фото, яке викликає зміни в нашій поведінці, це фото можна назвати ефективним.
Якщо подивитися на сайт Mobility і особливо на соковиті червоні навушники на головній сторінці - вони з першої секунди подобаються відвідувачеві.
Інший приклад ефективного фото можна побачити на сайті tsptr. Зверніть увагу, як чоловік на фото дивиться вниз, як ніби там щось є, що потрібно подивитися. І правда, там щось є.
Сайт Mapquest не тільки передає емоції через зображення, а й використовує напрям погляду, щоб вести користувача до важливого контенту на сторінці. В даному випадку до заслання на скачування зліва.
Poco People використовує веселе і развлекающее фото на головній сторінці. Відразу виникає відчуття, що в ньому є щось дивне. Завдяки цьому і оптимальному використанню кольорів, світла і експозиції сайт пробуджує ваш інтерес подивитися, про що ж взагалі він.
хвилююча фотографія
На Frogdesign є кейс з їх сайтом про Федеральному агентстві з управління в надзвичайних ситуаціях і усунення наслідків стихійних лих. Головне фото в комбінації з хорошим заголовком діє дуже ефективно і емоційно. Воно оповідає нам про трагедію і показує небезпеку, і через це ми відчуваємо себе причетними.
Головне фото сайту Breath дуже заспокійливе. Разом з хорошим слоганом і правильно обраним напрямом погляду жінка передає легкість свого дихання глядачеві. Помітили кнопку «Вдихнути»?
На сайті Шона Грувза головне фото показує відмінну історію про нього. Воно передає щастя, довіра, надію, дружбу і очікування глядача, який прив'язується до нього і відчуває причетність його роботі.
Крім корисності й ефективності вибору фото на Relay Foods. вони також діляться емоціями про пропонований сервісі. За жінкам зліва і справа видно, що робота в Relay Foods приносить їм задоволення, і через те, що компанія займається натуральними продуктами, вираз їхніх облич співвідноситься з ідеєю бренду.
Є сім (або вісім) основних емоцій:
Фото людей у великому масштабі моментально привертають нашу увагу і допомагають викликати потрібні емоції. Такі фото - потужний елемент дизайну.
Коли ми бачимо обличчя, ми автоматично реагуємо і відчуваємо якусь емоцію або співпереживання цій людині.
У попередніх прикладах ми вже бачили фото людей, але давайте вивчимо цей елемент трохи докладніше.
Навіть якщо фото жінки на сайті Build Fire нічого не говорить нам про їх продукті, воно додає йому індивідуальність, і це корисний і ефективний спосіб залучення призначеного для користувача уваги. Якби була використана тільки фотографія iPhone замість жінки, такий ефект не був би досягнутий.
Якщо ви коли-небудь вирішите використовувати велику портретне фото на вашому персональному сайті, будьте обережні. Крихітна зміна у виразі обличчя може сильно спотворити повідомлення, яке ви хочете передати. Даніель Еклер досяг успіху в поданні себе широкій аудиторії. Вираз його обличчя передає впевненість, спокій і довіру.
Люди вміють відрізняти справжню посмішку від фальшивої
Кожен знає, що сталося з вежами-близнюками. Сайт 9/11 Tribute Center присвячений історіям тих людей, хто був там. Людина на фото дивиться прямо на нас і тим самим допомагає нам зрозуміти суть сайту, запрошуючи в його спільнота.
Інший відмінний приклад залучення масштабного фото особи людини для передачі повідомлення - сайт Conservation. Людина з племені каяпо на фото передає владу, мужність і розуміння.
Як сказала Сьюзан Вайншенк: «Масштабні фото працюють найпереконливіше на благодійних сайтах», і це правда. На головній сторінці сайту Save the Children стоїть велика фото потребує дитини, воно відмінно поєднується з слоганом і тематикою сайту. Звернули увагу на напрям погляду дитини на кнопку «Зробити пожертву»?
Як не варто використовувати фотографії в веб-дизайні
Незважаючи на те, що ми бачили багато якісних прикладів використання фотографій в веб-дизайні, помилитися при виборі фото дуже легко. Тому я покажу кілька прикладів, як не слід використовувати фотографії і чого варто уникати.
Несвязанное фото - в даному випадку веб-студія, яка пропонує «вручну зшиті» послуги, використовувала несвязанное фонове фото (з кольоровими нитками), через якого перше враження збиває користувача з пантелику і невірно відображає суть компанії. Сенс є, але він передається за допомогою незрозумілої метафори. Краще було б використовувати на тлі заливку суцільним кольором або фото команди.
Агентство, що пише програмне забезпечення для спільної роботи компаній, використовувало фото здивованою роботою жінки. Це може створити враження, що вона стурбована якраз тим же програмним забезпеченням, яке просуває агентство. Варто було б використовувати скріншоти їх продукту або фото задоволеною і радісною жінки.
Розмите фонове фото - його єдина користь - декоративна латочка, але вона нічого не повідомляє про сервіс і таким чином не має ніякого ефекту. Я раджу максимально уникати розмиті фонові фотографії.
Ось ще одне, не пов'язане з предметом сайту, фото. Так, слова «ручний» (handcrafted) і «майстерня» (workshop) можна співвіднести з фото, але все одно важко зрозуміти справжнє призначення сайту. Brand Bat займаються створенням стратегій брендів, проте, використовуючи цілий ряд фотографій, пов'язаних з деревообробкою, вони втрачають можливість передати сенс їх послуг більш точно.
Помилка при виборі фото - що ви подумали, коли вперше побачили це фото? Два задоволених життям людини, що стоять в кав'ярні, допоможуть вашому бізнесу досягти успіху, та ще й онлайн. Вірно? Зазвичай в цьому світі такий сервіс пропонують багатофункціональні веб-дизайн агентства, тому на фото повинні бути одні з їх задоволених і успішних клієнтів. Часто в таких випадках можна зустріти і стокові фото, які ви повинні уникати.
Стічні фото - вони майже ніколи не передають потрібний сенс вашого послання. Наприклад, до чого тут маленький хлопчик в окулярах, та ще й тримає великі пальці вгору? Це він той самий PHP-розробник, який пише всі круті коди? Я так не думаю.
Сайт Nationwide теж не зміг належним чином передати свою ідею відвідувачам в цій фотографії. По-перше, фото не має відношення до продукту, плюс виглядає, ніби дівчина гризе нігті, а ми знаємо, що це психологічна проблема. Екран на її планшеті розмитий. Підсумок: фото передає схвильованість, нервозність і стрес, і я не думаю, що в Nationwide хотіли повідомити саме це своєї аудиторії.
Дякую за статтю, корисно і лаконічно. А наш дизайнер робить редизайн та вибрав фотографію дівчини спиною в платтячку. Дівчина дивиться на море, фото прекрасне. А тепер він поставив кнопочку на неї ( "Детальніше") і не протестує всі розміри екрана. І красується ця кнопочка прямо у дівчині на п'ятій точці, коли я дивлюся на сайт з ноутбука поменше. Ось такі бувають помилочки, дорогі друзі! Тест на різних екранах уважно, а то попка прийде всієї задумом. Добре, що ми ще не лайф поки. Тільки тестуємо.