Когда пользователи заходят на вашу страницу, они будут испытывать какую-то реакцию. Является ли она положительной или отрицательной, эта реакция во многом определяется тем, что они видят. Поскольку зрение, возможно, является самым сильным человеческим чувством, изображение герой – один из самых быстрых способов привлечь внимание пользователя. Яркий, графический и преднамеренный образ привлекает пользователя. Он мгновенно привлекает пользователя и делает его идеальным центральным элементом для минималистского приложения или веб-сайта.
Изображение герой – это больше, чем просто красивая картинка. Это мощный коммуникационный инструмент.
В этой статье я дам вам несколько советов по использованию изображений героев.
1. Делайте его релевантным
Представьте себе изображение герой, как введение: оно дает пользователям понять, чего ожидать от остальной части вашего сайта. Цель изображения героя - сразу сообщить посетителю, о чем ваш сайт, и какую идею он хочет донести. Когда изображение герой не точно контекстуализирует содержимое веб-сайта, оно не дает пользователю никакой ценности. Оно тратит драгоценное вертикальное пространство экрана и иногда даже может вызвать путаницу. Посетителей легко запутать, когда изображение не соответствует их предубеждению о бренде или продукте.
Яркий пример плохого выбора изображения - не все поймут, как этот образ связан с кредитами.
Будьте требовательны к фотографии. Выберите ту фотографию, которая соответствует теме, цели или компании создаваемого вами опыта. Посмотрите изображение герой Lunet Eyewear: оно делает ясным посыл веб-сайта. Содержимое изображения является репрезентативным для бренда.
Если вы используете свой сайт для продвижения или продажи продукта, изображение герой должно показать его преимущества. Подумайте об использовании контекстных изображений героев для продуктов – показывая не только то, как выглядит продукт, но и то, как он работает в реальной обстановке.
Лучший способ продать продукты – позволить им продавать себя. Изображение герой демонстрирует преимущества продукта.
То же самое относится и к цифровым продуктам и услугам. Дайте людям почувствовать, что они могут ожидать от вашего приложения или сервиса, имитируя скриншот на совместимом устройстве.
Slack использует изображение герой с интерфейсом приложения.
Конечно, проектирование и выбор образа героя – трудная задача. Это как искусство, так и наука. Чтобы упростить задачу, вы можете использовать структуру для руководства своими решениями. Энджи Шоттмюллер создал структуру из семи пунктов для оценки изображений героев:
- Актуальность ключевого слова
- Отображает ли изображение целевое ключевое слово?
- Ясность цели
- Проясняет ли изображение посыл веб-сайта?
- Поддержка дизайна
- Обеспечивает ли изображение более плавный процесс страницы, ведущей к призыву к действию?
- Подлинность
- Правильно ли изображение отражает ваш бренд?
- Добавленная стоимость
- Увеличивает ли изображение значимость или демонстрирует преимущества?
- Желаемая эмоция
- Демонстрирует ли изображение эмоции, которые помогут вызвать желаемое действие?
- Клиент как герой
- Означает ли, что оно изобразит клиента героем, как только он получит продукт?
2. Сделайте изображение центральным элементом
Изображение герой – идеальный контейнер для одного бита информации. Вы хотите что-то четко выраженное, что будет выделятся. Оно должно заставить пользователей останавливаться и посмотреть веб-сайт каждый раз, когда они его посещают. Но это не означает, что изображение должно говорить всё. Скорее, изображение просто должно визуально усилить сообщение соответствующим образом.
Официальный сайт breitling.com
3. Выбирайте эмоционально побуждающие изображения
Эмоции должны быть в дизайне. Ваши изображения должны иметь эмоциональное воздействие, генерировать вдохновение и усиливать чувство, которое вы пытаетесь привить. В конце концов, эмоции часто берут верх над логикой, когда люди принимают важные решения. Позитивные эмоциональные стимулы могут создать чувство взаимодействия с вашими пользователями.
Изображение с worldofcoca-cola.com
Изображение с adobe.com
4. Загружайте и отображайте как можно скорее
Поскольку изображения герои являются критически важными элементами дизайна, они должны отображаться быстро. К сожалению, многие проекты, которые имеют изображение герой, страдают от HID (задержки изображения героя), в основном из-за блокировки скриптов и таблиц стилей.
Дизайнеры должны сосредоточиться на том, когда изображение герой будет просматриваться. Но это сложнее, чем кажется: в современных браузерах нет крючков, которые можно использовать, чтобы знать, когда контент становится видимым. Стив Соудерс в своей статье “Hero Image Custom Metrics,” предлагает добавить пользовательскую метрику на любую страницу с изображением героем, чтобы определить, как быстро (или медленно) отображается этот важный контент.
Один простой пример - встроенный скрипт таймер – скрипт, который записывает время и помещается сразу после тега img. Вот как выглядит этот код:
img src=”hero.jpg” onload=”performance.mark(‘hero1’)”
script performance.mark(‘hero2’) /script
Код пользуется преимуществами User Timing API, и вы можете увидеть, как он работает на тестовой странице Стива.
5. Используйте фото только высокого разрешения
Изображения не должны отображаться неровными или размытыми. Нет ничего хуже, чем большое изображение низкого качества. Если вы собираетесь использовать эту технику, то изображение – это всё, и положительное первое впечатление жизненно важно. Используйте высококачественные изображения, чтобы убедиться, что это происходит.
Низкокачественная картинка против изображения подходящего размера.
6. Примите во внимание различные размеры экрана
Убедитесь, что ваши изображения соответствуют размерам дисплеев и платформ. Оптимизируйте изображения для всех устройств, даже если это означает изменение размера или замену большого изображения на меньший размер на маленьком устройстве.
Разработчики адаптивных веб-сайтов, даже самых современных, часто испытывают трудности с выбором разрешения изображений, которые наилучшим образом соответствуют различным устройствам. Совершенно очевидно, что одного изображения для всех разрешений экрана и устройств недостаточно. Веб-сайт должен адаптироваться, чтобы выглядеть идеально на различных устройствах и во всех разрешениях, плотности пикселей и ориентации. Управление и доставка медиа – в частности, изображений – одна из основных проблем, с которыми сталкиваются разработчики при создании адаптивных веб-сайтов. К счастью, есть решение этой проблемы. Responsive Breakpoints Generator – бесплатный веб-инструмент с открытым исходным кодом, который помогает вам создавать контрольные точки для изображений в интерактивном режиме.
Responsive Breakpoints Generator помогает управлять несколькими размерами изображений, позволяя вам интерактивно генерировать отзывчивые контрольные точки изображения
7. Выделите призыв к действию
В то время, как изображение герой является центральным элементом, вам все равно придется добавлять важные элементы, такие как призыв к действию. Призыв к действию не должен конкурировать с изображением. Цвет очень важен для акцента. Кнопка призыва к действию должна светиться даже ярче, чем обычно.
Визуальный вес кнопки должен быть пропорционален визуальному эффекту очень большого размера.
Проверьте свой призыв к действию используя эффект размытия
Используйте эффект размытия, чтобы проверить визуальную иерархию вашей страницы. Тест размытия – это быстрая техника, которая поможет вам определить, будет ли глаз пользователя действительно идти туда, куда вы хотите. Все, что вам нужно, это сделать скриншот вашего сайта и применить эффект размытия объекта в Adobe XD (добавить эффекты размытия в XD) (см. пример страницы Charity Water ниже). Посмотрите на размытую версию вашей страницы, какие элементы выделяются? Если вам не нравится результат, вернитесь и исправьте.
Проверка размытием – это метод выявления точки фокуса дизайна и визуальной иерархии.
8. Дизайн для контраста
Удостоверьтесь, что типография на верхней части изображения разборчива. Выбирайте полужирные, легко читаемые шрифты, которые сочетаются с визуальными эффектами, но выделяются отдельно от них. Если вы планируете накладывать текст поверх изображения, убедитесь, что основная часть изображения все еще видна и понятна.
Наложение
Возможно, проще всего поместить простой текст прямо на изображении. Однако, если контраст между текстом и изображением недостаточен, вы можете наложить всё изображение на полупрозрачный цветной блок.
Outlines использует цветное наложение.
Вы можете использовать цвета своего бренда, чтобы улучшить изображение герой. Если вы разрабатываете продукт или бренд, скорее всего, некоторые цвета уже будут связаны с ним. Определите основной цвет и попытайтесь вывести его на первый план изображения.
Изображение герой Clique сильно играет на синем оттенке интерфейса приложения.
Налоджение полупрозрачного градиента
В качестве альтернативы, вы можете добавить контраст текста в виде scrim. Scrim - это визуальное средство дизайна, которое смягчает изображение, чтобы наложенный текст становился более разборчивым.
Значение непрозрачности будет зависеть от контекста. Изображение: Material Design
Выберите прозрачность градиента, основанную на окружающей среде. Некоторые изображения герои требуют более темного градиента, такого как изображение, отображаемое ниже, которое имеет 60% градиент.
Изображение: Material Design
Вы найдете практические советы о том, как реализовать различные подобные методы в статье, посвященной хитростям CSS “Design Considerations: Text on Images.”
9. Показывайте реальных людей
Использование фото людей – очень эффективный способ привлечь пользователей. Когда мы видим лица людей, мы чувствуем себя связанными с ними, и мы не чувствуем, что мы просто покупаем продукт. Тем не менее, многие корпоративные сайты печально известны чрезмерным использованием неискренних фотографий, используемых для “укрепления доверия”.
Тесты юзабилити показали, что чисто декоративные фотографии (как показано ниже) редко добавляют ценность дизайну и вредят чаще, чем улучшают опыт пользователя. Таким образом, избегайте заурядных бизнес-людей, улыбающихся без видимых причин.
Недостоверные изображения оставляют пользователя с чувством обмана.
Очень простое правило проверенное временем – использовать высококачественные фотографии людей, которые соответствуют вашему приложению или персонажу веб-сайта. Изображения должны быть подлинным представлением вашего продукта, компании или культуры.
Изображение: Daniella Draper
Изображение: The Renovator
Вот несколько советов:
- Старайтесь избегать толпы. Используйте фотографии с одним основным предметом.
- Стремитесь к изображениям, которые имеют неподдельные истории. Делайте фотографии своих людей, занимающихся интересными вещами. Если у вас есть продукт, рассмотрите способы взаимодействия с этим продуктом.
10. Индивидуальные иллюстрации
Изображение героя – лишь визуальный элемент - любой тип изображения может соответствовать проекту. Иллюстрации быстро становится популярными альтернативными, иногда выдавая больше индивидуальности, чем фотографии. Они дают вам больше контроля над содержимым и техническими деталями изображения. Используя уникальную индивидуальную иллюстрацию, вы можете отличить себя от толпы и создать лучшее запоминание бренда.
Dropbox использует легко понятные иллюстрации для разъяснения сообщений и передачи сложных идей.
Иллюстрации привлекают воображение и создают прочную личную связь со зрителем. Изображение: Basecamp
Чтобы быть функциональной, иллюстрация должна быть легко узнаваемой, а информация, которую она передает, должна быть одинаково декодирована разными зрителями. Если вы используете несколько иллюстраций, они должны выглядеть последовательными, как если бы они были из одного источника – то есть, как если бы они были нарисованы одним и тем же человеком.
Вывод
Изображение герой - отличный вариант, при условии его высокого качества, тогда на него будет интересно смотреть, и оно будет хорошо работать с контентом. Чтобы максимально использовать эту технику, дизайн должен быть с достаточным контрастом и четким призывом к действию.
Перевод статьи Nick Babich
Найстарші коментарі (0)