How to Create the Perfect Hero Image for Your Portfolio Site
This article was created in partnership with BAWMedia. Thank you for supporting the partners who make SitePoint possible.
It only takes a few seconds for visitors to get an idea of a website. Since the hero image on the homepage is the first piece of content most visitors encounter, what sort of impression do you want them to have when they see yours?
To get the most out of those early encounters, your hero image needs to be well thought out and executed. It should indicate what type of creator you are, offer insight into your talents, and give visitors a reason to explore further.
To create the perfect hero image for your portfolio website, there are 6 things to focus on. In this article, we’ll take a look at these and sample pre-made websites from BeTheme – one of the most popular and highest rated WordPress themes in the world with over 264,000 sales and a 4.83 out of 5 star rating. . – and other brands that demonstrate various ways to artfully bring them together.
Design the perfect hero image for your portfolio website
In general, there are 6 elements that fit together to form each hero section, regardless of the type of site you are building. Here are some things to consider when creating your hero image using these essential components:
1. Choose images that best reflect what you do
The imagery you choose for your hero image should have a direct connection to the type of work you do.
For example, Lauren Waldorf Interiors is a boutique interior design studio. As such, the hero section contains a slide-out photo gallery of completed projects:
For photographers, videographers, web designers, and other visual artists, you probably have a lot of graphics you could show off in the hero. For artists who work with other types of media, it can be difficult to visually describe what you do.
In the latter case, you can decide to make your face the main image in the hero section, as we see in the hero image of the BeDJ 2 pre-built website:
The DJ’s face gives visitors something more visually interesting to look at than just a bunch of music-related colors and graphics. It also creates a direct link between the body of the work and the artist.
When designing your hero image, consider the following:
- What or who should be the main topic of the section?
- Does the image belong to the foreground or does it blend into the background?
- Will the image be intact or is there a way to make it more artistic?
Plus, do you even need pictures? For example, if you’re a font designer or copywriter, you might decide to skip the images and let your text do the talking.
2. Use the background to give more details about what you are doing
There are different ways to manage the hero section background.
In some cases, your work may take center stage. For example, a videographer could put a slideshow of their videos in the background. Not only would this make the website livelier, but it would also give visitors a quick glimpse of your work.
In other cases, you might want to give a little preview of your work in the hero section, like this example from the pre-built BeInterior 6 website:
The photo gallery takes up about a quarter of the width of the section. While the designer could have used a colored background to frame the work, he opted to add a textured photo instead. Foil not only provides comforting color to the backdrop, it’s a creative way to add context to what the interior designer is doing.
Your other option would be to use solid colors or gradients (with artwork) in the background like Mindgrub does:
For digital creations, this might be your best option. Although you can show screenshots of websites you’ve created or UI kits you’ve developed, you can use this space to create your own digital masterpiece. You can save the work you’ve created for clients to another section or page.
3. Style your fonts to make your voice crystal clear
Even if you don’t write the text that appears in the hero section, the aesthetic choices you make can communicate as much to potential customers as the words themselves.
There are several ways to add a voice to your hero’s messaging. The first concerns the type of font you use. For example, the pre-built BeDetailing 4 website uses a Google font called Italiana:
This car detailing company expresses a fondness for classic and vintage cars from the start. The wording, car imagery, and elegant calligraphy-inspired font tell us the same.
Another thing to consider is how the style of your sentences can make your message different. For example, Get Em Tiger does a number of things to change the way their hero image text sounds in the minds of people reading it:
First, the main title is capitalized. Text styled in this way is usually interpreted as a loud, bold sound.
Second, the words “STAND OUT” are highlighted in orange. This is intended to replace italics or bold that would normally be used to emphasize plain text.
Also, the subtitle is written in sentence case. When visitors read this, it will likely take on a friendlier, more conversational tone in their heads.
4. Determine the role colors will play
By the time you’re ready to create the hero image for your portfolio site, you’ve probably figured out what your brand colors will be.
Generally, the brand color palette is useful for styling buttons as well as adding accents to key areas of your website. However, you might decide to take heavy inspiration from it to create your hero section like G Sharp Design did:
The color scheme of this hero section is relatively simple. Yet the bright red and yellow that dominate the design make it impossible to take your eyes off it.
While this color show works well for this agency, it may not work for other types of creatives. For example, a pre-built photography website like BePhoto 2 uses a dark theme:
The hero image has a photo slider in the center where a splash of bright color is revealed with each subsequent photo. Because the rest of the site is styled dark gray with off-white text, the photos instantly grab attention.
So when deciding on your own color scheme, ask yourself the following questions:
- How many colors do you need?
- What colors from your brand’s color palette will you be using?
- Are there other colors you want to shoot?
- What role will each color play in terms of creating mood, inspiring action, etc.
Color doesn’t have to be ubiquitous to be effective. It all depends on what you need it to do for you in this section.
5. Make it more impressive with interactions
Without animation, your hero image is nothing more than a static billboard.
Now, there’s nothing wrong with billboard advertising – when it’s over 200 square feet and stands over 10 feet off the ground. Without the large presence of billboards in the real world, static designs on a website can seem lifeless and uninspired.
Just like the other elements we looked at today, there are different ways to add movement and interaction to your hero image design.
For example, Awesome Inc is an animation and design studio. It would be weird if we didn’t see any of their high-level animation work after hitting the website:
On the other hand, if you’re a creative who doesn’t do animation work, there would be no reason to push it to that extreme. That doesn’t mean your hero image should be motionless, though.
For example, the pre-built BeModel 3 website has a dynamic hero image design:
It’s not just the image slider that’s animated. The slider color palette changes in sync with photo changes.
Even that may seem like a lot of movement to you. If so, there are more subtle ways to use animations to make your hero image more appealing, like adding hover transforms to buttons or transition animations to the section.
6. Choose a single call to action
Last but not least, you will want to determine what the next logical action for visitors should be.
One option is to scroll them to the bottom of the page. If so, you might not even want to include a call-to-action button. The majority of visitors will naturally start scrolling after seeing everything they need to see.
Another option is to invite them to visit another page on your website. If so, what page should it be? On a portfolio site, you’ll probably want visitors to navigate to your Portfolio or Services page.
The pre-built BePhotography 2 website, for example, directs potential clients to the Portfolio page:
Yet another option is to encourage visitors to interact with the hero image before giving them the option to go elsewhere. This will be useful if your hero image has a slideshow of your work that users can interact with. Here’s what Perky Bros does:
The visitor’s cursor will change appearance depending on which part of the cursor they are hovering over. On the left or right side of the screen, a blue arrowhead will appear, letting them know there is more work to explore. In the center of the screen, the words “View Project” appear. Once clicked, the visitor will be redirected to a case study page for the project.
Design a hero image that does justice to your creative work
Hero image design is especially critical on portfolio sites because it should not only reflect what visitors will find on your site, but also reflect your creative talents. So you need to make sure you create a hero image that sets the stage properly for you.
What’s great about using a WordPress theme like BeTheme is that it comes with 101 pre-built portfolio sites. Each of them comes with a handcrafted hero image design that will make it easy to update the 6 crucial components we looked at above.