30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Photography
Webdesign

Гид для веб-дизайнеров по выбору фото

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Lexie Bykova (you can also view the original English article)

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

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

Использование фото в веб-дизайне

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

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

Привлеките внимание с помощью крупного изображения

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

Обращайтесь с фото, как с контентом

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

Фотографии не стоит использовать только для того, чтобы "оживить" страницу.

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

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

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

Как только вы это сделаете, и фото пройдет проверку на фундаментальные аспекты, вы можете задать вопросы о его назначении.

"Наш  мозг обрабатывает изображения в 60000 раз быстрее, чем текст". - Майк Паркинсон

Полезно ли оно?

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

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

Хороший пример полезного фото в веб дизайне - сайт Square.

squareupcom

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

Другой пример полезного фото - сайт Pencil. Как и в примере вверху, это фото показывает, как именно используется товар (стилус), где и как им пользоваться (iPad).

Pencil website

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

Woodster website

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

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

Эффективно ли оно?

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

Достаточно взглянуть на сайт Mobility и эти потрясающие красные наушники, и мы понимаем, что они притягивают нас и так и зовут купить их!

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

Еще один пример эффективного фото - сайт tsptr. Заметьте, что мужчина на фото смотрит вниз, как будто направляя ваш взгляд в ту же сторону? Действительно, там что-то есть.

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

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

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

Эмоционально ли оно?

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

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

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

Главное фото на сайте Shaun Groves рассказывает нам замечательную историю о нем. Оно передает счастье, доверие, надежду, дружбу, и поэтому зритель эмоционально вовлечен и испытывает сочувствие к его работе.

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

Сила лиц

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

  1. радость
  2. печаль
  3. презрение
  4. страх
  5. отвращение
  6. удивление
  7. гнев

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

Фото лиц вблизи немедленно овладевают нашим вниманием и вызывают определенные эмоции, что делает их мощным элементом дизайна.

"Когда мы видим лицо, оно нас автоматически привлекает и заставляет чувствовать что-то, или симпатизировать этому человеку".

Мы уже увидели фото людей в примерах вверху, но давайте обсудим их более детально.

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

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

"Люди видят, когда улыбка искренняя или искуственная".

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

Замечание: однако важно, чтобы такое фото не было слишком вызывающим!

Еще один замечательный пример того, как можно передать что-то важное с помощью фотопортрета - сайт Conservation. Человек из племени Кайапо вызывает ощущение силы, смелости и уважения.

Как сказала Сьюзан Вайншенк, фото крупным планом - самый убедительный элемент на благотворительном сайте. И это правда. Save the Children демонстрирует фото нуждающегося ребенка крупным планом, что идеально соответствует слогану и теме сайта. Замечаете, что его взгляд направлен в сторону кнопки пожертвований?

Чего не стоит делать с фото в вебдизайне

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

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

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

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

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

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

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

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

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

Заключительные мысли

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

"Инвестируйте в хорошие снимки: хороший фотограф может принести большую пользу, и ваш бизнес может заработать больше денег".

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

Допольнительное чтение

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.