BloG

Learn how to Create the Perfect Hero Image for Your Portfolio Site

Nov 21, 2022

This text was created in partnership with BAWMedia. Thanks for supporting the partners who make SitePoint possible.

All it takes is a matter of seconds for visitors to form an impression about a web site. Considering the hero image on the house page is the primary little bit of content that almost all visitors encounter, what form of impression do you would like them to get after they see yours? 

To take advantage of these initial encounters, your hero image must be well-thought-out and executed. It must convey what form of creator you’re, offer a preview of your talents, and provides visitors a reason to explore further.

To create the right hero image on your portfolio website, there are 6 elements to give attention to. On this post, we’ll have a look at what those elements are in addition to some pre built website examples from BeTheme – certainly one of the world’s hottest and highly rated WordPress Themes with 264,000+ sales and a 4.83 out 5 star rating – and other brands that display various ways to artfully bring them together.

Designing the right hero image on your portfolio website

Typically, there are 6 elements that come together to form every hero section, no matter what form of site you’re constructing. Listed here are some things to take into consideration as you create your hero image using these critical components:

1. Pick imagery that might be the perfect reflection of what you do

The imagery you select on your hero image must have a direct connection to the form of work you do. 

For instance, Lauren Waldorf Interiors is a boutique interior design studio. As such, the hero section comprises a sliding photo gallery of accomplished projects:

For photographers, videographers, web designers, and other visual artists, you most likely have loads of graphics you may exhibit within the hero. For artists that work with other forms of media, it is perhaps difficult to visually depict what you do. 

Within the latter case, you would possibly resolve to make your face the first image within the hero section, as we see within the BeDJ 2 pre built website hero image:

BeDJ Theme

The DJ’s face gives visitors something more visually interesting to have a look at than simply a bunch of colours and music-related graphics. It also creates a direct connection between the body of labor and the artist. 

As you go about designing your hero image, consider the next: 

  • What or who needs to be the important subject of the section?
  • Does the image belong within the foreground or blended into the background? 
  • Will the image be untouched or is there a option to make it appear more artistic?

Also, do you even need imagery in any respect? For instance, in the event you’re a font designer or copywriter, then you definately might resolve to skip the imagery and just let your text do the talking.

2. Use the background to lend more details about what you do

There are alternative ways to take care of the background of the hero section. 

In some cases, your work might occupy the backdrop. For example, a videographer could put a slideshow of their videos within the background. Not only would this make the web site feel vigorous, however it would also give visitors a fast preview of your work.

In other cases, you would possibly want to present a small tease of your work within the hero section, like this instance from the BeInterior 6 pre built website:

BeInterior 6

The photo gallery takes up a couple of quarter of the width of the section. While the designer could’ve used a color background to border the work, they selected so as to add a textured photo as an alternative. The sheet not only provides a comforting color to the backdrop, it’s a creative option to add context to what the inside designer does.

Your other option could be to make use of solid colours or gradients (together with illustrations) within the background the way in which that Mindgrub does:

mindgrub

For digital creatives, this is perhaps your only option. While you may exhibit screenshots of internet sites you’ve built or UI kits you’ve developed, you should utilize this space to create a digital masterpiece of your personal. You possibly can save the work you’ve created for clients for an additional section or page.

3. Style your fonts in order that your voice becomes crystal-clear

Even in the event you don’t write the text that appears within the hero section, the aesthetic selections you make can communicate just as much to prospective clients because the words themselves do. 

There are plenty of ways so as to add a voice to your hero messaging. The primary is with the form of font you utilize. For instance, BeDetailing 4 pre built website uses a Google font called Italiana: 

BeDetailing Theme

This auto detailing company expresses a passion for traditional and vintage cars right up front. The wording, automotive imagery, and the elegant calligraphy-inspired font all tell us as much.

One other thing to contemplate is how the styling of your sentences could make your messaging sound different. For instance, Get Em Tiger does plenty of things to alter the way in which their hero image text sounds contained in the heads of individuals reading it:

Get Em Tiger

First, the important headline is in all caps. Text styled this manner is mostly interpreted to sound loud and daring. 

Secondly, the words “STAND OUT” are highlighted in orange. This is supposed as an alternative to italics or bolding that may normally be used to create emphasis in plain text.

As well as, the sub-headline is written in sentence case. When visitors read this, it can likely tackle a friendlier, more conversational tone inside their heads. 

4. Work out the role that colours will play

By the point you’re able to create the hero image on your portfolio site, you’ve likely worked out what your brand colours are going to be. 

Typically, the brand color palette is beneficial for styling buttons in addition to adding accents to key areas of your website. Nonetheless, you would possibly resolve to heavily pull from it to create your hero section as G Sharp Design has done:

G Sharp Design

The colour palette on this hero section is comparatively easy. Yet, the colourful red and yellow that dominate the design make it not possible to tear your eyes away from it. 

While this spectacle of color works well for this agency, it may not feel right for other forms of creatives. For example, a photography pre built website like BePhoto 2 uses a dark theme:

BePhoto 2

The hero image has a photograph slider in the middle of it where a shiny pop of color is revealed with each subsequent photo. Because the remaining of the location is styled in a muted dark grey with off-white text, the photos immediately grab attention.

In order you choose on your personal color palette, ask yourself the next questions:

  • What number of colours do you would like?
  • Which colours out of your brand color palette will you utilize?
  • Are there other colours you desire to pull in?
  • What role will each color play when it comes to setting the mood, inspiring motion, etc.

Color doesn’t have to be all-consuming in an effort to be effective. All of it relies on what you would like it to do for you on this section.

5. Make it more impressive with interactions

Without animation, your hero image is nothing greater than a static billboard. 

Now, there’s nothing fallacious with billboard promoting — when it’s over 200 square feet in size and standing greater than 10 feet off the bottom. Without the grand presence that billboards have in the true world, though, static designs on a web site can feel lifeless and uninspired. 

Identical to the opposite elements we’ve checked out today, there are alternative ways so as to add motion and interaction to your hero image design. 

For example, Awesome Inc is an animation and design studio. It could be weird if we saw nothing of their high-profile animation work after entering the web site:

Awesome Inc

However, in the event you’re a creative that doesn’t do animation work, there could be no reason to take it to this extreme. That doesn’t mean that your hero image needs to be devoid of motion though. 

For instance, BeModel 3 pre built website has a dynamic hero image design: 

BeModel 3

It’s not only the image slider that’s animated. The colour palette of the slider changes in sync with the photo changes. 

Even this might seem to be loads of motion for you. If that’s the case, there are more subtle ways to make use of animations to make your hero image feel more engaging — like adding hover transformations to buttons or transition animations to the section.

6. Pick a single call-to-action

Last but not least, you’ll need to determine what the following logical motion needs to be for visitors. 

One option is to maintain them scrolling down the page. If that’s the case, you would possibly not even want to incorporate a call-to-action button. Nearly all of visitors will naturally start scrolling after they’ve seen all that they should see. 

An alternative choice is to ask them to go to one other page in your website. If that’s the case, which page should or not it’s? On a portfolio site, you’ll probably want visitors to go to your Portfolio or Services page.

BePhotography 2 pre built website, for example, directs prospective clients to the Portfolio page:

Yet yet another option is to encourage visitors to interact with the hero image before giving them the choice to go elsewhere. This might be useful in case your hero image offers a slideshow of your work that users can engage with. That is what Perky Bros does:

The visitor’s cursor will change appearance based on which a part of the slider they hover over. On the left or right side of the screen, a blue arrowhead appears, letting them know there’s more work to explore. In the middle of the screen, the words “View Project” appear. When clicked, the visitor might be taken to a case study page for the project. 

Design a hero image that does your creative work justice

The design of the hero image is particularly critical on portfolio sites because it not only must be reflective of what visitors will find in your site, but additionally reflective of your talents as a creative. So you might have to make sure that you create a hero image that properly sets the stage for you. 

What’s nice about using a WordPress theme like BeTheme is that it comes with 101 pre built portfolio sites. Each of which comes with a handmade hero image design that can make it easy to update the 6 crucial components we checked out above.