Одна картинка стоит тысячи слов.
Мы все слышали этот старый каштан тысячу раз раньше, верно? В веб-дизайне изображения так же важны, если не больше, чем ваша настоящая копия.
Несмотря на то, что нет сомнений в точности, которую ясное письмо может привнести в идею, изображения способны обойти аналитический мозг высокого уровня и говорить прямо с нами на эмоциональном уровне. Нужно ли нам еще одно глупое видео на Youtube для кошек, чтобы доказать, что образы могут превратить нормальных, умных проницательных людей в хихикающих ретвитов?
Ваш сайт встречает три типа читателей. У тебя есть:
- Читатель : человек, который читает каждую строку
- Сканер : человек, который «просматривает» или «просматривает» ваш контент, чтобы найти интересные фрагменты
- Нижний Фидер : человек, который читает первые несколько предложений, а затем режет краткие абзацы
Имейте в виду, один и тот же пользователь может взять на себя любую из этих ролей, возможно, даже в рамках одного сеанса просмотра.
Большинство читателей подпадают под категорию сканеров , что делает еще более важным принятие эмоциональных решений в отношении вашего визуального контента. Независимо от того, с каким типом читателей вы сталкиваетесь, есть одна вещь, которую вы всегда должны помнить: вы имеете дело с людьми, и на людей влияют эмоциональные триггеры.
Фильм киев
Я считаю, что самый простой способ объяснить и проиллюстрировать примеры и методы — это использовать общие ссылки. В этой статье я собираюсь позаимствовать мир кино.
У большинства из нас есть фильмы, к которым мы относимся. Мы смеялись или плакали, мы болели за героя и боялись за безопасность персонажа. Каждый фильм использовал умную комбинацию изображения и звука, чтобы манипулировать тем, что мы чувствовали. И нам, наверное, понравилось.
Помимо того, что мы развлекаем нас и создаем визуальный шедевр с сильной историей, режиссеры стремятся вызвать некоторую форму эмоциональной реакции — и если вы отреагировали, даже на секунду, они выполнили свою работу.
Это должно быть подходом к выбору изображений на вашем сайте. Вызвать эмоцию и захватить вашу аудиторию.
Логика не диктует
Давайте сфотографировать улыбающееся лицо и анимированный язык тела. Есть все шансы, что ваша трехлетняя племянница скажет вам, что улыбающийся человек счастлив.
Хотя наш логический мозг может объяснить, почему изображение может передавать счастье, оно не является частью процесса, который вызывает эмоции у зрителя. Часто наша «внутренняя» реакция на изображение появляется на первом месте, и нашему логическому мозгу поручается объяснить наши рассуждения позже.
Из следующих двух изображений левое изображение может быть более научно полезным для точного понимания, что такое лягушка. Но это, вероятно, правильный образ, с которым мы взаимодействуем.
Два точных изображения лягушек — но какое из них вас привлекает?
Вот почему, как дизайнеры, мы должны всегда отдавать предпочтение подчеркиванию «чувства над логикой». Это более эффективно и сделает вашу работу лучше, если ваши посетители «подключатся».
Чтобы помочь этому, мы можем использовать некоторые тонкие методы настройки кадра, манипулирования цветом и фокусами, которые мы можем создать для эмоционального сообщения, так же, как мы могли бы создать письменную копию.
Ключевые методы
В то время как существует множество способов генерировать и вызывать эмоции, самые простые и быстрые результаты получаются при подходящем обрамлении и освещении. Эти два метода помогают создать атмосферу.
Рассмотрим тяжелые моменты в фильме. Части, где вы действительно чувствуете. Они созданы благодаря работе кинематографиста.
Ниже я покажу вам примеры того, как выбор кадра и освещения могут мотивировать эмоции, необходимые для вашего сайта. Обратите внимание, что каждое изображение подверглось очень быстрому 5-минутному редактированию, чтобы работать в качестве примеров.
обрамление
Обрамление является важным аспектом, независимо от того, делаете ли вы фильмы или снимаете фотографии. Правильный угол и расстояние от объектива — это те небольшие изменения, которые могут создать эффект «вау» для ваших зрителей.
Давайте посмотрим на два примера ниже, чтобы увидеть, как хорошая обрезка или более жесткий кадр могут изменить общее настроение изображения.
Пример 1
На первый взгляд, это изображение хорошего качества, в нем есть эмоции. На второй взгляд, и если вы хотите разместить это на своем веб-сайте, скажем, для заголовка / слайдера, изображение довольно нейтрально.
Да, люди кажутся счастливыми, но это потому, что логика говорит вам, что «улыбка означает счастье». Съемка толпы — это сложно, вызывая эмоции.
Если это изображение предназначено для веб-сайта благотворительной организации и сопровождается текстом «Лучшая жизнь, лучшая забота» и кнопкой пожертвования, вы бы хотели мотивировать людей делать пожертвования, чтобы создать лучшую жизнь для получателей.
Создание более точного снимка на определенных лицах может легко повлиять на это.
Здесь вы видите, что я сосредоточился на этих по-настоящему счастливых лицах в толпе. Создавая фокус, я помог изолировать эти чувства счастья. По сравнению с оригиналом у вас больше шансов улыбнуться и подумать о пожертвовании, чем если бы вам предложили оригинальное изображение.
Пример 2
Процесс кадрирования для эмоционального воздействия может быть использован, даже если у вас есть один человек на вашей фотографии. Помните, что людям нравится смотреть на других людей. Мы рождены с программным обеспечением для чтения лиц, и мы видим лица во всем, от облаков до коры деревьев и автомобильных капотов.
Как и раньше, у нас есть улыбающееся лицо, но мы действительно можем сделать его гораздо более эффектным, чем оно есть.
Подумайте, было ли это изображение для сайта, который хотел бы пропагандировать активный и здоровый образ жизни для женщин. Хотя в этом снимке нет ничего плохого, мы можем усилить его, сфокусировавшись на женском лице.
С более сильным акцентом на ее лице, чем на ее реальной деятельности, мы можем мотивировать мыслительный процесс, начиная с «о, она выглядит счастливой» до «вау, это может быть, я получаю удовольствие, будучи в хорошей форме». Не говоря уже о том, что у нас прямой зрительный контакт, который всегда полезен для использования на изображениях вашего сайта.
Теперь соедините это с хорошо разработанным Призывом к Действию (CTA), который, возможно, побуждает вас «учиться больше», и эмоциональный сигнал, скорее всего, произойдет.
Осветительные приборы
Освещение является чрезвычайно важным активом внутри и снаружи изображений. Мы, люди, ежедневно используем освещение не только для того, чтобы видеть, но и как визуальные стимуляторы. Агенты по недвижимости намеренно открывают окна домов, которые они показывают, чтобы создать приятную и гостеприимную атмосферу. Рестораны манипулируют количеством и типом освещения, чтобы увеличить обеденный опыт.
Фильм, конечно, делает это также. Синее освещение может использоваться для мотивации мрачных настроений и тонов, в то время как более теплое освещение может отображать беззаботную атмосферу или высокую энергию.
Давайте посмотрим на наши примеры освещения.
Пример 1
Хотя наше изображение выше, кажется, эмоциональный снимок, мы можем усилить эффект. В зависимости от того, что является текстовой копией, контекст этого изображения может легко рассматриваться как созерцательный или даже нейтральный.
Управляя только освещением этой конкретной фотографии, мы можем создать немного более торжественное ощущение. Это всегда должно быть тонким.
Затемняя тени и добавляя более холодные тона, мы создали более определенную эмоцию, чем исходное изображение.
Как отмечалось ранее, вы можете достичь чувств, изменив освещение. Это означает, что вы можете создавать чувства любви так же легко, как чувства грусти.
Наше изображение здесь имеет некоторые аспекты, которые вы автоматически определите как положительные. У нас есть этот красочный фон и пара поцелуев на переднем крае и в центре.
Если вы хотите использовать это изображение для сайта для пар, то необходимо внести некоторые коррективы в освещение, чтобы дать вам более «светлое» и «любящее» чувство.
Открывая наше изображение светом, мы получаем нечто не только более яркое, но и некое невинное, беззаботное чувство, в отличие от более резких теней и насыщенных цветов на оригинальной фотографии.
Обрамление и освещение вместе
Теперь, когда вы увидели, как кадрирование и освещение работают по отдельности, вот какая разница, что совместное использование обоих методов может вам помочь.
Перед
После
Быстрые советы
- Избегайте массовых снимков. Если вам нужно создать фокус или стойку, чтобы вызвать интерес к одной конкретной области.
- Уровень контрастности, используемый в ваших изображениях, должен быть пропорционален фону сайта, чтобы не создавать разрыв.
- Если ваше изображение падает в «нейтральную зону», попробуйте отрегулировать урожай.
- Попробуйте найти изображения, на которых изображены люди или животные. Это поможет мотивировать положительные эмоции и интерес к объектам.
- При выборе объектных снимков обязательно создайте интересные ракурсы.
- Пойдите для этого одного удивительного изображения вместо пяти хороших изображений.
- Если ваше изображение находится в вашей статье, убедитесь, что за ним следуют текст или подписи, чтобы мотивировать читателей продолжать прокрутку.
- При кадрировании / кадрировании ваших изображений вам может понадобиться применить эффект размытия, чтобы создать фокус.
Вывод
Как вы можете видеть, это лишь небольшая настройка с вашей стороны, которая действительно может вызывать эмоции независимо от того, какой тип изображения вы используете. Немного подумав о том, как вы хотите, чтобы ваши посетители чувствовали, вы очень легко можете направить их к этому с помощью простых психологических триггеров, а не логических стимуляторов.
Надеюсь, этой статьи было достаточно, чтобы вдохновить вас провести собственное тестирование с обрамлением и освещением.