How to Create the Perfect Hero Image for Your Portfolio Website

This article was created in partnership with BAWMedia. Thank you for supporting the partners that make SitePoint possible.

It only takes a few seconds for a visitor to make an impression of a website. Considering that the main image on the homepage is the first thing most visitors encounter, what impression do you want them to get when they see your content?

To get the most out of these initial encounters, your hero image needs to be well thought out and executed. It needs to communicate what kind of creator you are, provide a preview of your talents, and give visitors a reason to explore further.

There are 6 elements to focus on to create the perfect hero image for your portfolio website.In this post, we’ll take a look at what those elements are and some examples of pre-built 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 rating 5 star rating – and other brands that showcase all sorts of clever ways to bring it all together.

Design the perfect hero image for your portfolio website

Typically, no matter what type of website you’re building, each hero section has 6 elements grouped together. Here are a few things to consider when creating your hero image using these key components:

1. Choose the image that best reflects what you do

The image you choose for your hero image should be directly related to the type of work you do.

For example, Lauren Waldorf Interiors is a boutique interior design studio. Therefore, the Heroes section contains a sliding photo gallery of completed projects:

For photographers, videographers, web designers, and other visual artists, you probably have plenty of graphics to show off in Heroes. For artists working with other types of media, it can be difficult to visually describe your work.

In the latter case, you might decide to use your face as the main image for the hero section, as we can see in the hero image on BeDJ 2’s pre-built website:

BeDJ Theme

The DJ’s face offers visitors something more visually interesting than just a bunch of colors and music-related graphics. It also creates a direct connection between the subject of the work and the artist.

When you start designing your hero image, consider the following:

  • What or who should be the main topic of this section?
  • Does the image belong to the foreground or is it blended into the background?
  • Will the image stay as it is or is there a way to make it look more artistic?

Also, do you even need images? For example, if you’re a type designer or copywriter, you might decide to skip the images and let the words do the talking.

2. Use context to provide more details about what you do

There are different ways to handle the background of the hero section.

In some cases, your work may take over the background. For example, videographers can place a slideshow of their video in the background. Not only will this bring your website to life, but it will also give your visitors a quick preview of your work.

In other cases, you might want to briefly describe your work in the hero section, such as this example from the BeInterior 6 prebuilt website:

indoor 6

The photo gallery is about a quarter of the width of the section. While designers could have used colorful backgrounds to frame their shots, they opted to add textured photos. Not only does this paper provide a comfortable color for a backdrop, it’s also a creative way to add context to an interior designer’s work.

Your other option is to use a solid color or gradient in the background like Mindgrub does (along with the illustration):

mind Mapping

For digital creatives, this may be your best option. While you can show screenshots of a website you’ve built or a UI kit you’ve developed, you can use this space to create your own digital masterpiece. You can save the work you create for a client to another section or page.

3. Design your fonts to make your voice clear

Even if you don’t write the text that appears in the hero section, the aesthetic choices you make can be communicated to potential clients just like the text itself.

There are several ways to add a voice to your hero message. The first is the type of font you use. For example, the BeDetailing 4 prebuilt website uses a Google font called Italiana:

BeDetailing theme

This car beauty company pre-expresses its love of classic and vintage cars. Wording, car images, and elegant calligraphic style fonts all tell us.

Another thing to consider is how the style of the sentence makes your message sound unique. For example, Get Em Tiger does a lot to change the sound of their hero avatar text in the minds of those who read it:

get em tiger

First, the main title is all caps. Text styled this way is often interpreted as sounding loud and bold.

Second, the words “STAND OUT” are highlighted in orange. This is to replace the italics or bold that are often used to create emphasis in plain text.

Also, subheadings are in sentence case. When visitors read this article, a friendlier, more conversational tone may come to their minds.

4. Figure out the role that color will play

When you’re ready to create a hero image for your portfolio website, you’ve probably already decided what your brand colors will be.

Often, branding palettes can be used to style buttons as well as add emphasis to key areas of your website. However, you might decide to use it heavily to create your hero parts as G Sharp Design did:

G Sharp Design

The palette for this hero section is relatively simple. However, the vibrant reds and yellows that dominate the design keep you from taking your eyes off it.

While this spectacle of color worked well for the agency, it might feel out of place for other types of creatives. For example, photography pre-built sites like BePhoto 2 use a dark theme:

BePhoto 2

There is a photo slider in the center of the hero image, and each subsequent photo will show bright colors. Since the rest of the site is designed with muted dark grey and off-white text, the photos immediately grab attention.

So when you’re deciding on your own palette, ask yourself the following questions:

  • How many colors do you need?
  • Which colors from the brand’s palette will you use?
  • Do you want to add other colors?
  • What role will each color play in setting emotions, sparking action, etc.?

Color doesn’t need to be consuming all in order to be effective. It all depends on what you need it to do for you in this section.

5. Make it more impressive with interaction

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 more than 10 feet above the ground. However, without the grand presence of billboards in the real world, a static design on a website can feel lifeless and uninspired.

Just like other elements we see today, there are different ways to add motion and interaction to your hero avatar designs.

For example, Awesome Inc is an animation and design studio. It would be weird if we didn’t see their high-profile animation work when we entered the site:

awesome company

On the other hand, if you’re a creative who doesn’t do animation, there’s no reason to take it to this extreme. This doesn’t mean your hero image should be motionless.

For example, the BeModel 3 prebuilt website has a dynamic hero image design:

Model 3

It’s not just animated image sliders. The slider’s palette changes in sync with the photo’s changes.

Even if it seems like a big move to you. If that’s the case, there are more subtle ways to use animation to make your hero image more engaging – like adding a hover transform to a button or adding a transition animation to a section.

6. Choose a call to action

Last but not least, you need to figure out what the visitor’s next logical action should be.

One option is to have them scroll down the page. If this is the case, you may not even want to include a call-to-action button. Most visitors naturally start scrolling after seeing everything they need to see.

Another option is to invite them to another page on your website. If so, which page should it be? On a portfolio website, you may want visitors to your portfolio or service pages.

For example, the BePhotography 2 prebuilt website directs potential customers to the portfolio page:

Another option is to encourage visitors to interact with the hero image before giving them the option to go elsewhere. This is useful if your main image provides a working slideshow that users can participate in. This is what Perky Bros does:

The visitor’s cursor will change appearance depending on which part of the slider they hover over. On the left or right side of the screen, a blue arrow will appear to let 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 taken to the project’s case study page.

Design a hero image that does justice to your creative work

The design of the hero image is especially important on a portfolio site, as it needs to reflect not only what visitors will find on your site, but also your talents as a creative. Therefore, you must make sure to create a hero image that sets the stage correctly for you.

The great thing about using a WordPress theme like BeTheme is that it comes with 101 pre-built portfolio sites. Each comes with a handcrafted hero image design that easily updates the 6 key components we saw above.

Leave a Reply

Your email address will not be published. Required fields are marked *