Как выбрать большую фотографию для сайта

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

Digital-агенство Red Collar подготовило для рубрики «Интерфейсы» перевод материала.

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

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

Привлекайте внимание, используя крупное фото

Люди просматривают экран на основе их прошлого опыта и ожиданий. Верхний левый угол — самая распространённая начальная точка для взгляда пользователя, хотя это зависит от модели чтения в конкретной культуре.

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

Относитесь к фото, как к контенту

Уверен, вы не будете спорить, что фото на веб-странице — это контент. Но относитесь ли вы так к снимкам на самом деле? Используете ли вы их, как приятное дополнение или в качестве хорошего контента? Рассмотрели ли вы все аспекты конкретной фотографии, как единицы контента? Насколько тщательно вы оценили фото, прежде чем его выбрать? Обдумали ли вы модели мышления ваших пользователей, и какое влияние будет иметь фото на них? Обеспечивает ли фото их полноценной информацией или помогает в решении конкретной задачи? Это всего лишь малая часть вопросов, на которые нужно ответить перед выбором фото для страницы сайта.

Фото не должны использоваться только лишь для «придания пикантности» веб-страницы.

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

Выбор идеальной фотографии

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

Как только вы проверили все предыдущие параметры, и фото прошло «основное испытание», вы можете продолжить искать ещё варианты для предполагаемого использования.

Наш мозг
обрабатывает изображения в 60 тысяч раз быстрее, чем чтение текста.

Насколько фото полезно

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

Полезное фото должно:

помогать нам лучше понять что-то,
учить нас, как использовать что-то,
или показывать нам, как что-то сделано.

Отличный пример полезной фотографии в веб-дизайне — сайт
Square:

Вы тотчас можете сказать, что это изображение было снято профессионально (посмотрите на руки и ногти). Что более важно, фото полностью передаёт, что это за продукт, и как легко его использовать. Очень полезное и обучающее фото.

Другой пример полезного фото — сайт
Pencil. Также как и предыдущий образец, это фото показывает назначение продукта (стилус), где и как его можно использовать (приложение в iPad):

Сайт
Woodster также хорошо использует фото для объяснения назначения их продукта. Понятно, что их продукт предназначен, чтобы поставить компьютер Mac на нужную для глаз высоту. Ещё можно выбрать исполнение подставки с удобными USB-портами. Представьте, если продукт был бы изображён без контекста (iMac). Было бы это фото так же наглядно, как это?

Grovemade проделали отличную работу, отобразив весь ассортимент своей продукции на одной полноэкранной фоновой фотографии. Сразу становится очевидно, что они производят аксессуары высокого качества для офиса. Это фото не только полезно, оно ещё и эффективно и эмоционально одновременно. Рассмотрим параметр эффективности и эмоциональности фотографий.

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

Эффективность фотографии

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

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

Если посмотреть на сайт
Mobility и особенно на сочные красные наушники на главной странице — они с первой секунды нравятся посетителю.

Все знают Apple за их перфекционизм во всём, что они делают. Лэндинг
iPhone полон великолепных и соблазнительных фото смартфона, которые заставляют вас хотеть такой же.

Другой пример эффективного фото можно увидеть на сайте
tsptr. Обратите внимание, как мужчина на фото смотрит вниз, как будто там что-то есть, что нужно посмотреть. И правда, там что-то есть.

Сайт
Mapquest не только передаёт эмоции через изображения, но и использует направление взгляда, чтобы вести пользователя к важному контенту на странице. В данном случае к ссылке на скачивание слева.

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

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

Волнующая фотография

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

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

Главное фото сайта
Breath очень успокаивающее. Вместе с хорошим слоганом и правильно выбранным направлением взгляда женщина передаёт легкость своего дыхания зрителю. Заметили кнопку «Вдохнуть»?

На сайте
Шона Грувза главное фото показывает отличную историю о нём. Оно передаёт счастье, доверие, надежду, дружбу и ожидание зрителю, который привязывается к нему и чувствует сопричастность его работе.

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

Магия лиц

Есть семь (или
восемь) основных эмоций:

радость;
печаль;
презрение;
страх;
отвращение;
удивление;
злость.

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

Фото людей в большом масштабе моментально привлекают наше внимание и помогают вызывать нужные эмоции. Такие фото — мощный элемент дизайна.

Когда мы видим лицо, мы автоматически реагируем и испытываем какую-либо эмоцию или сопереживание этому человеку.

В предыдущих примерах мы уже видели фото людей, но давайте изучим этот элемент чуть подробнее.

Даже если фото женщины на сайте
Build Fire ничего не говорит нам об их продукте, оно добавляет ему индивидуальность, и это полезный и эффективный способ привлечения пользовательского внимания. Если бы была использована только фотография iPhone вместо женщины, такой эффект не был бы достигнут.

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

Люди умеют отличать настоящую улыбку от фальшивой

Каждый знает, что произошло с башнями-близнецами. Сайт
9/11 Tribute Center посвящён историям тех людей, кто был там. Человек на фото смотрит прямо на нас и тем самым помогает нам понять суть сайта, приглашая в его сообщество.

Другой отличный пример привлечения масштабного фото лица человека для передачи сообщения — сайт
Conservation. Человек из племени каяпо на фото передаёт власть, мужество и понимание.

Как
сказала Сьюзан Вайншенк: «Масштабные фото работают наиболее убедительно на благотворительных сайтах», и это правда. На главной странице сайта Save the Children стоит большое фото нуждающегося ребёнка, оно отлично сочетается с слоганом и тематикой сайта. Обратили внимание на направление взгляда ребёнка на кнопку «Сделать пожертвование»?

Как не стоит использовать фотографии в веб-дизайне

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

Несвязанное фото — в данном случае веб-студия, предлагающая «вручную сшитые» услуги, использовала несвязанное фоновое фото (с цветными нитками), из-за которого первое впечатление сбивает пользователя с толку и неверно отражает суть компании. Смысл есть, но он передаётся с помощью непонятной метафоры. Лучше было бы использовать на фоне заливку сплошным цветом или фото команды.

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

Размытое фоновое фото — его единственная польза — декоративная заплатка, но она ничего не сообщает о сервисе и таким образом не имеет никакого эффекта. Я советую максимально избегать размытые фоновые фотографии.

Вот ещё одно, не связанное с предметом сайта, фото. Да, слова «ручной» (handcrafted) и «мастерская» (workshop) можно соотнести с фото, но всё равно трудно понять подлинное назначение сайта. Brand Bat занимаются созданием стратегий брендов, однако, используя целый ряд фотографий, связанных с деревообработкой, они упускают возможность передать смысл их услуг более точно.

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

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

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