Your website’s design plays an important role when it comes to conversions, whether you’re trying to get more sales or simply grow your email list. One of the best ways to enhance the design and add extra visual appeal is by adding images.
On top spicing up your website, they also add an extra dimension to your content and allow your visitors to make an emotional connection with you, your product, or your service.
In recent years, the use of images has become the norm in web design, especially with large header images, often referred to as “hero images.” However, those hero images can also be used as backgrounds throughout your website.
In today’s article, we’ll talk about how to use hero images, along with a few examples of them put to work.
What is a hero image?
A hero image is best described as a large header image that relates to the content that sits directly beneath it. They serve as an introduction to the content. They tell a story, welcome your visitors,–and more often than not–encourage people to take action.
When you take that into consideration, it’s easy to see that a hero image is not just some random image placed in the header of your website. It’s a carefully selected one that has a purpose.
Although a majority of people use photos for their hero images, some have implemented more creative solutions that involve artwork, GIFs, and even short videos.
Why use hero images?
Most users want a clear understanding of what a website is all about. They want to know what you have to offer and how you or your company can help them.
A hero image can help you deliver that message more effectively. By adding an image that relates to your content along with a succinct message and a clear call to action, your visitors can immediately tell if your product or service is what they are looking for.
Using hero images in web design
Most commonly, hero images are used in the header area of a website. They work best above the fold, but they can also be used as background images in fullscreen format or as images for different sections of a page. In this latter case, these images are often incorporated into parallax effects.
You can also use hero images on landing pages or on individual blog posts in place of a featured image.
Papertelevision uses a large header image that shows a person using their tablet. This image pairs great with the statement in their header and makes it obvious what they do.
French restaurant Le Duc uses a large background image in the menu section to add a fun parallax effect and make it obvious what can be found on their menu.
Another creative use for hero images is on e-commerce sites to show the product in use and make it more visually appealing.
A great example of this is the homepage for Catscarf – an online shop for, as its name would suggest, cat scarves.
Flywheel uses a simple photo of a laptop on a blue background paired with white text that makes it clear what type of service they provide.
Background and hero image best practices
Before adding hero images to your website, here are a few tips to keep in mind to ensure your chosen hero image fulfills its purpose.
Use a high quality image
Considering the image will be the first thing your visitors see, make sure you use a high quality one. Nowadays, not only are the size of computer and mobile screens increasing; they also have larger resolutions. With retina displays, that’s a lot of pixels to account for. If you use an image that’s poor in quality, your visitors will notice. This can detract from your message and make for a poor first impression.
Avoid busy photos
Don’t use photos that are too busy. If a photo has too many elements, it will create a messy layout and distract the visitors from the message on the image. It will also make it harder to read the text.
Ensure the image Is responsive
Once you’ve added the image to your website, ensure it’s responsive and doesn’t appear blurry or cut off on smaller screens. For best results, check that the images take up 100% of the containing element.
Use bold typography
A large hero image is sure to capture the attention of your visitors, so you need to make sure that they notice the message as well. Bold fonts will be more noticeable and easily deliver your message.
Go easy on the colors
Don’t use too many colors with large images. If your image is bright and colorful, consider using black or white text. Ghost buttons are also popular on hero images, instead of colored buttons. Optionally, you can add a subtle darker gradient or overlay to the image to make the text easier to read.
Consider the placement of other elements
Keep buttons, text, and other design elements from covering important parts of the photo, like people’s faces or products.
Where to find quality images
In an ideal situation, you would be using your own images on your website, either by having them taken by a professional photographer or by yourself if you’re skilled with the camera. However, not everyone can afford a professional photoshoot. The good news is that you don’t have to.
There are dozens of background and hero images to choose from on Envato Elements that suit a variety of niches. Here are just a few examples of high quality images available.
1. 21 Hero/Header Images
This collection comes with 21 hero images with editable smart objects. All you have to do is add your own image on the tablet screen and replace the text with your own. The images can be used in the travel niche, food niche, technology, hiking, business, and other industries.
2. Hero Images and Sliders
This bundle features a complete package of 10 exclusive hero images and sliders. They can be used for restaurant, creative, business, fashion, photography, marketing, and any other type of website that wants to make use of a hero image to deliver their message.
3. Organic Food Mockup & Hero Images Scene Generator
If you own a restaurant or a website in the food industry, consider investing in this scene generator. The pack comes with more than 220 individual images that you can overlay on included backgrounds. You can also make use of the premade scenes and use them as is or as an inspiration.
4. Hero Image Scene Creator / Mock-Up
Consider using this scene creator bundle to showcase your work environment in a creative and unique way. The pack contains 60 individual elements and five premade scenes that are perfect for creating a variety of hero images and using them in the header or as the background for your website.
Add visual appeal to your website with images
There is no doubt that background and hero images can greatly improve your website and leave a lasting impression on your visitors. Use them to add visual appeal to your website and test a few different versions to see which one performs better. Above all, remember to optimize the images for web use to ensure your website continues to run smoothly.
The post How to use background and hero images on websites appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2lC2308
envato.com coupon
Tidak ada komentar:
Posting Komentar