hero section что это
Рекомендации по применению Hero Images (UPD)
Несмотря на то, что тренд по использованию Hero Image уже не так свеж, он все еще актуален. Использование подобных изображений помогает сделать ваш продукт или страницу сайта привлекательнее и мотивирует пользователя посмотреть, что же вы ему предлагаете. Сегодня мы приглашаем читателей ознакомиться с переводом статьи Ника Бабича о том, как достичь максимального эффекта, применяя данный прием.
Из статьи вы узнаете:
— это не просто красивая картинка. Это мощный инструмент коммуникации.
В этой статье я дам вам несколько советов, как правильно использовать технику Hero Image.
Выбирайте удачные изображения
Будьте придирчивы при выборе фотографий
Визуальная составляющая в интерфейсе решает всё. Важно уметь выбирать снимки, которые соответствуют тематике, целям и стратегии проекта. Неправильно подобрав изображения, вы тут же растеряете всех посетителей вашего сайта.
Пример неудачно выбранной картинки
Если же вам удастся найти именно то, что нужно, пользователь захочет посмотреть, что еще вы можете ему предложить.
Пример правильно подобранного изображения
Сделайте картинку композиционным центром
Hero Images идеально подходят, чтобы сжато передать самую важную информацию
Стремитесь выделяться и отличаться. Графический блок должен мотивировать пользователя при каждом посещении задержаться на сайте и еще раз просмотреть его.
Apple — профессионал в создании Hero Image.
Совет: это вовсе не означает, что картинка должна передавать всю информацию целиком. С помощью Hero Image можно, скорее, уместным образом визуально подчеркнуть ключевые моменты.
Ищите изображения, вызывающие эмоции
Внедряйте эмоции в дизайн
Ваши изображения должны вдохновлять, оказывать психологическое воздействие, усиливать те чувства, которые вы пытаетесь взывать у аудитории. В конце концов, эмоции часто перекрывают здравый смысл, когда нужно принять важное решение.
Положительные эмоции могут привести к ощущению взаимодействия с пользователем.
Используйте качественные снимки
Изображения не должны быть размытыми и нечеткими
Нет ничего хуже больших фотографий низкого качества. Картинка — ваше все, если вы собираетесь использовать технику Hero Image. Очень важно добиться того, чтобы первое впечатление у пользователя было положительным. Для этого используйте только высококачественные изображения.
Размытая картинка и снимок подходящего размера
Акцентируйте внимание на кнопках призыва к действию
Призыв к действию не должен конкурировать с красочным изображением
Несмотря на то что все внимание здесь сосредоточено на картинке, нельзя забывать и о других ключевых элементах интерфейса — например, «призывах к действию» (англ. call to action, CTA). При попытке акцентировать внимание пользователя очень важен правильный выбор цвета. Кнопки с призывом к действию должны мгновенно бросаться в глаза.
Кнопки должны гармонировать с большими изображениями
Выдерживайте контраст в дизайне
Убедитесь, что текст, который вы располагаете поверх фото, легко читается
Выбирайте жирный, читабельный шрифт, который будет сочетаться с изображением, но в то же время выделяться на его фоне. Разместив текст поверх картинки, убедитесь, что основная часть снимка остается видной и понятной. Наверное, самый простой способ расположить текст на фото — это overlay. Если исходный фон недостаточно темный, вы можете наложить сверху черный полупрозрачный слой.
В качестве альтернативы вы можете применить scrim:
Scrim — это особая техника визуального дизайна, смягчающая изображение, чтобы наложенный текст был более читаемым.
О применении других эффектов вы можете узнать в статье «Хитрости дизайна: Текст на фото»
Учитывайте разные размеры экранов
Картинка должна выглядеть пропорционально на всех устройствах
Убедитесь, что изображение сохраняет нужные измерения на дисплеях любого размера.
Оптимизируйте визуальные элементы для всех платформ и девайсов, даже если для этого потребуется изменить размеры или заменить крупное фото более мелким для маленьких устройств.
Автор фото: themeforest
Совет: используйте инструменты, с помощью которых вы сможете управлять сразу несколькими размерами. Одним из них является Cloudinary, который позволяет вам задавать набор контрольных точек для изображений.
Используйте иллюстрации
Из-за стремления к оригинальности дизайнеры все чаще делают выбор в пользу иллюстраций, а не фотографий. Рисунок от руки дает вам больший контроль как над содержанием изображения, так и над его техническими деталями.
Dropbox показывает процесс обмена сообщениями и объясняет сложные идеи посредством легко понятных рисунков
Совет: если вы решили использовать иллюстрации для своего интерфейса, убедитесь, что они сочетаются между собой: как если бы они были взяты из одного источника и нарисованы одним человеком.
Заключение
Если вы умеете выбирать интересные и при этом высококачественные изображения, которые хорошо работают в связке с контентом, данный тип дизайна — отличный вариант для вас. Чтобы использовать ее возможности по максимуму, не забывайте о контрастах и четких призывах к действию.
How to Design a Hero Image: Best Practices and Examples
About the author: Mark Gerkules, Web Designer @ Elementor
Mark is a Web Designer at Elementor. Apart from his love for UI/UX, he loves football, traveling around the world, and a good schnitzel.
If you’ve ever asked yourself “what’s a hero image?”, you’ve come to the right place. In this post, we delve into the subject of hero images in web design and how you can build and design them to create powerful visual effects.
A hero image is the term used by web creators to describe oversized content at the top of a webpage (“above the fold” content, to be exact). This content falls within the encompassing “hero section”: any visual content or text that falls above the fold.
The role of a hero image is to welcome your visitor at their first glimpse of your company or organization. The abundance of hero image-types in the web creation toolbox make it easy to imagine why there are so many reasons to include a hero image in your site. Let’s understand the top benefits of doing so, and whyHow To Design a Hero Image: Best Practices and Examples these techniques have become major web design trends among web creators.
Table Of Contents
What Is a Hero Image?
Embracing the virtue of “a good first impression”, hero images usually have one or more of the following characteristics:
In terms of styling, common design details that you’ll see applied to hero images include:
The novelty of hero images in web design is that on the one hand, you’re working with a very specific, defined space on the web page. On the other hand, the choices of styling, effects, and techniques to use when designing this part of your page content — are absolutely endless.
Why Should You Use a Hero Image?
When the design and functionality of your hero image hold a high caliber, you automatically attain credibility and user trust. Your hero image and its surrounding hero content often present your first opportunity to relay your organization’s unique selling point, and the main user touchpoint for conversion. When you’re looking to trigger certain user behaviors, a powerful top-notch hero image that makes a strong first impression on your visitors is the way to start.
You Can Make a Lasting First Impression
First impressions matter in many areas of life, but especially when it comes to how users relate to website aesthetics.
Human-Computer Interaction (HCI) and Visualization expert findings at Google Research attest to the influence hero images have on a website’s success:
This study, “The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments” investigates how visual complexity and prototypicality impact a website’s design and its users’ first impressions.
The authors showed 119 real website screenshots to their study participants, and found that visual complexity and prototypicality affect user aesthetic perception within the first 50ms of exposure, and sometimes even within 17ms.
As web creators, our takeaway from these findings is fairly straightforward: the hero image we choose and how we present it on our page influences user sentiment and behavior(s) in a major way.
You’ll Make the Most Of Your Above the Fold Content
A webpage’s “above the fold” section can be defined in simple terms: the content that fills your screen/appears above the web browser window’s bottom border once your page loads. If the content requires scrolling in order to be seen, it means it’s located “below the fold”.
The “above the fold” concept originates in print design and publishing, long before the days of digital media. We all know what it’s like to immediately notice something on the top half of a front page, and it’s even safe to say that front page content is often what makes us decide whether or not to buy a newspaper, or simply stop at a newsstand.
This is exactly why your above the fold content can be a major deal-breaker in your website success.
If a site visitor is confused by your above the fold content and imagery, he may be quick to exit your site. If your hero image and its surrounding above the fold content are clear, engaging, and well-representative of your value proposition, he’s more inclined to stay put.
Ultimately, the more you invest in your hero image and content, the less likely users are to make a quick exit.
Don’t Forget Responsive Design
Keep in mind that the location of a screen’s fold is subjective to the device’s screen size. This is an important consideration in responsive design, as above the fold content must be styled and configured in a way that’s applicable to more than one device size.
Web designers and developers often use device-specific breakpoints to guarantee this responsiveness. This gives you complete control over your site design’s adaptivity to relevant screen sizes, and avoids compromised appearance or impact of your hero image.
You State Your Value Proposition Without Information Overload
You might be familiar with the concept “information overload” in website design and user experience: we want to prevent using too much content, especially written content, when representing our brand and business value.
In this sense, using a picture, illustration, or video is worth 1,000 words. Honing down on effective brand imagery will capture your entire story in one visual medium. Instead of verbalizing your brand story and proposition, you may be able to lighten your user’s cognitive load in a simple, user-friendly way.
The screenshot above is taken from Millbrook Construction, a Perth-based construction company specializing in “residential construction with a high-end finish and attention to detail”. For their Elementor site, the homepage hero image makes perfect use of its “above the fold” interface. The appealing, crisp photograph of a blissful, modern home and outdoor pool triggers positive, relaxing vibes.
Taking this one step further, the styling choices of full-height and “Cover” sized background image indicate the company’s robust talent for creating luxurious residential properties. The value proposition is as clear as the pool water, and users comfortably absorb all the information necessary.
Your Hero Images Can Help Convert Leads
Engaging, visible touch points are a basic ingredient for a conversion-breeding user flow. This is why the relationship between hero section’s call to action and your hero image itself can make or break your website creation goals.
Whether your CTA texts read “Sign Up Now”, “Learn More”, “Contact Us”, and the like, your hero image must be seamlessly coordinated on all fronts: visibility, messaging, color scheme, look and feel, and more.
Credible, effective conversations with prospective customers rely on a comfortable, natural atmosphere; visually pleasing imagery is the way to make this happen.
This is exactly what we see on the Elementor site created by Caricature STL, a team of caricature artists who provide event entertainment services. The animated headline (hero text) accounts for the happy customers in their hero images, showing what the caricature artists provide for each person.
The 4 Types of Hero Images
So, once you’ve rolled up your sleeves and start addressing the practicalities, what goes into the decision process of which type of hero image to use?
Let’s explore the four different types of hero images and how to evaluate which one will fit your site best.
#1 Product Hero Image
A product hero image is a large, high-definition image of the brand’s product. These images can be presented in static or in motion/in action — as long as they visualize the product’s value proposition.
Popular ways among web creators to present and style their product hero images can include:
Product hero images are commonly found on e-commerce sites (although not exclusively). Prospective shoppers expect to see real product examples, fostering educated decision-making about the store’s relevance to their shopping needs.
Avo lover used Elementor to build their e-commerce site, used by their customers to sign up for weekly subscriptions of fresh avocados delivered to their door.
Avo lover’s customer base is a niche market within a narrowly defined area of interest, and so their product hero image choice makes perfect sense. Prospective subscribers are avocado enthusiasts; seeing an up-close, intricate photograph of the produce is exactly what they’re looking to see.
Best Practices:
Whether your background image is a photograph, a video, an illustration, etc., the image file should be as lightweight as possible, with crystal-clear resolution.
If you’re adding text in front of your hero image (or a component of any kind) — make sure the contrast between the website elements is strong and easily visible. This is where background overlays and filter effects can be extremely helpful.
#2 Customer Hero Image
The next type of hero image used by online businesses takes an alternative approach to showing their added value: showing their customer using the product. This perspective is a strategic way to empathize with your online visitors, succinctly demonstrating that you understand their pain point and can satisfy their needs.
The video snippet above is taken from the Elementor site created by Alexander Fischer, a Stuggart-based personal trainer who provides an array of health and fitness-related services.
Alexander’s customer hero image was shows more than just a satisfied client enjoying a healthy, fit lifestyle. The hero image goes the extra mile by presenting a video that presents his client bonding and connecting with loved ones. Clients become up to the task of engaging in youthful activities, since their personal trainer has helped them get back into shape.
Best Practices:
Differentiate your product by showing its most dominant use-case. An image that conveys your business goals and value demonstrates how the visitor will benefit from your one-of-a-kind offering.
Make sure your target audience is accounted for when you select the type of person to feature in your image. Choose an image that communicates your understanding of the field and ability to delight your clients.
#3 Founder Hero Image
A founder hero image is a large image of the founder of the business owner, placed in the hero section to greet the site visitor upon arrival.
Founder hero images are often used in independent portfolio websites, individual business owners like a psychologist, makeup artists, or musicians, as shown in Jasmine Cain’s Elementor website above.
A founder hero image’s greatest virtue is that it puts a face to a name; it connects the website visitor to the service provider, creating a personable dynamic between the two individuals.
Choosing the footage for your founder hero image should be handled with care. With many options to choose from, what it comes down to is: what will convey your brand message in the strongest possible way? Is it a picture of the founder looking directly at the camera and smiling, or perhaps looking in a different direction? Or, would a candid photograph of the business owner hard at work be a better fit?
Best Practices:
Use a clear, correctly-sized image (or video) that shows visitors the exact details they need to see. If necessary, you can focus on more important areas in your images by cropping them and removing less important content.
The role of the background should be to emphasize the person in front of it, not the other way around. The most impactful founder hero images will show the business owner smiling, implying his passion for customer happiness.
#4 Non-Contextual Hero Image
Non-contextual hero images are, as the name suggests, footage that displays something seemingly “unrelated” to the product or business owner. The goal of a non-contextual hero image is to make an impression on the visitor through visual association or subliminal messaging. Seeing the non-contextual image shows the user what the product or brand is about, but in an indirect way.
This technique is used, for example, in the sample above from the Elementor site built by Oklahoma-based digital marketing firm AP Technology. The firm’s website uses a wide and clear background image that shows a unique angle of Oklahoma City skyscrapers. This photograph depicts the business’s value proposition, as stated in the site’s hero text: build your business and watch it grow, as tall as the city’s highest office towers.
As soon as the human eye sees the physical structures towering over the sky, it understands that these marketing professionals work to lift businesses off the ground, as far as sky-high.
Best Practices:
Although you’re not displaying a direct visual of your product itself, make sure your product value’s connection with your non-contextual hero image is still easy to identify. Users shouldn’t need to spend time thinking about its relevance.
The hero text you place in conjunction with your image must be directly related to its visual content. This is a necessity, even if it requires multiple iterations of your text and choice of wording.
The colors you choose for button texts and backgrounds, headings, or descriptions should be coordinated with the hero image or illustration. This also applies to your site’s clickable accents: the nav menu items, the logo, etc.
We all know how important a consistent visual language is to our website prestige, brand presence, and professional credibility. This is where design style guides can be really helpful, especially to ensure that your hero images are aligned with your website design.
Выбираем героя для главной страницы сайта — советы UX-дизайнера
Ник Бабич об эффективном использовании изображений на примере сайтов известных компаний.
Чувства, которые испытывает посетитель сайта, во многом зависят от его визуального впечатления. Один из наиболее быстрых способов захватить внимание пользователей заключается в добавлении образа героя (hero image — большое изображение или фотография в центре главной страницы). Людей привлекают яркие вдохновляющие образы, особенно если они отражают центральную идею сайта или приложения.
Hero image — это нечто большее, чем просто красивая картинка. Он может стать мощным инструментом коммуникации. Но для этого придётся выполнить несколько важных условий.
Воспринимайте hero image как предисловие к сайту, ведь он даёт пользователям представление о том, чего можно ожидать от остального контента. Его цель — немедленно сообщить посетителю, о чём ваш сайт и чем он может быть ему полезен. Если hero image ничего об этом не говорит — в нём нет никакой ценности, он зря занимает экранное пространство. Более того, он может запутать пользователей, внушив им ложное представление о бренде или продукте.
К выбору такого изображения следует предъявлять самые высокие требования. Оно должно максимально соответствовать теме сайта, цели рекламной кампании или тому пользовательскому опыту, который вы намереваетесь создать. Это лицо бренда (иногда в буквальном смысле).
Если цель сайта — продвигать и продавать конкретный продукт, то hero image должен показывать его преимущества. При этом изображение может показывать не только то, как выглядит продукт, но и то, как он работает в реальных условиях.
Это верно и для цифровых продуктов и услуг. Вы можете рассказать о сервисе или приложении с помощью скриншотов.
Выбор hero image — скорее искусство, чем наука. И всё же мы можем упростить эту задачу с помощью чек-листа, созданного Энджи Скотмюллером. Перед тем, как использовать то или иное изображение, убедитесь, что оно отвечает следующим семи принципам:
Hero image — это всего один бит информации. Но он должен быть в чём-то выдающимся. В чём-то, что заставляет пользователя вновь и вновь возвращаться на сайт. Это вовсе не означает, что изображение обязательно должно о чём-то информировать, скорее оно должно усиливать месседж сайта в максимально релевантной манере.
Дизайн должен отражать эмоции. Выбирайте изображения, которые вдохновляют и усиливают те чувства, которые вы хотите внушить пользователям. Эмоции хороши сами по себе, кроме того, при принятии важных решений они часто оказываются сильнее логики. Позитивные эмоции способны создать у пользователей чувство общности с брендом.
Поскольку hero image — очень важный элемент дизайна, он должен загружаться максимально быстро. К сожалению, на многих сайтах это изображение грузится слишком долго из-за блокировки скриптов и таблиц стилей. Отследить момент появления hero image довольно трудно, ведь в современных браузерах нет соответствующих инструментов.
Стив Содерс в своей статье Hero Image Custom Metrics («Пользовательские метрики для образа героя») предлагает добавлять на такие страницы специальные метрики, позволяющие определять, когда контент становится видимым. В качестве примера приведём код встроенного таймера, который вставляется сразу после тега img.
Это что-то вроде User Timing API. Посмотреть, как он работает, можно на тестовой странице Стива.
Hero image не должен быть зернистым или расплывчатым. Нет ничего хуже, чем некачественное изображение большого формата, ведь первое впечатление — самое важное.
Убедитесь, что hero image адекватно отображается на разных платформах. Оптимизируйте изображение под все устройства, даже если для этого потребуется изменить его размеры. Сайт должен одинаково хорошо выглядеть на самых разных устройствах, на экранах с разным разрешением, разной ориентацией и плотностью пикселей.
Эту проблему можно решить с помощью Responsive Breakpoints Generator — бесплатного инструмента, позволяющего создавать и отслеживать контрольные точки изображений в интерактивном режиме.
Помимо hero image, вам потребуются и другие, не менее важные элементы дизайна — например, призыв к действию. Кнопка призыва к действию должна быть ярче, чем остальной текст, её можно выделить с помощью цвета.
Используйте эффект размытия, чтобы протестировать визуальную иерархию страницы. Это поможет убедиться, действительно ли взгляд пользователя зацепится за то, за что должен зацепиться. Всё, что вам понадобится, — это применить к скриншоту страницы object blur effect в Adobe XD (добавить эффект размытия). Оценив полученный результат, вы сможете исправить ситуацию.
Убедитесь в том, что текст, наложенный поверх изображения, хорошо читается. Выбирайте ясный простой шрифт, который согласуется с графическим изображением, но в то же время не сливается с ним. Позаботьтесь о том, чтобы оставшейся (незакрытой текстом) части изображения было достаточно для понимания основной идеи.
Самое простое, что можно сделать, — это наложить плоский текст на изображение. Если контраст между текстом и изображением недостаточен, проложите между ними полупрозрачный цветной слой.
Чтобы усилить hero image, можно использовать определённые цвета, которые ассоциируются с продуктом или брендом. Выберите нужный цвет и поместите его поверх изображения.
Фон — это инструмент визуального дизайна, который смягчает изображение и делает наложенный поверх него текст более читабельным.
Выберите тот уровень прозрачности, который покажется вам наиболее комфортным. Некоторые изображения требуют более тёмного градиента. Например, расположенная ниже картинка имеет градиент, равный 60%.
Практические советы по применению подобных инструментов можно найти в статье Design Conversations: Text on Images («Беседы о дизайне: текст поверх изображения»).
Один из самых эффективных инструментов привлечения пользователей — изображения людей. Когда мы видим человеческие лица, мы чувствуем с ними какую-то связь, а не просто покупаем продукт. Однако все попытки завоевать доверие пользователей будут обречены на провал, если фотографии выглядят фальшиво.
Тесты юзабилити показывают, что слишком тщательно обработанные фотографии чаще портят, нежели улучшают пользовательский опыт. Старайтесь избегать использования беспричинно улыбающихся стандартных лиц.
Вы скорее добьётесь успеха, если будете использовать качественные фотографии тех людей, чьи образы соответствуют характеру приложения или сайта. В любом случае hero image должен адекватно представлять продукт или компанию.