Home > UI Design and Prototyping > How to design a hero image website with Justinmind
Build your brand up with the perfect hero image website – design yours now with Justinmind prototypes

Build your brand up with the perfect hero image website – design yours now with Justinmind prototypes

Designing the perfect hero image website may seem daunting. One wrong move and you’re just another sucker with an over-sized, unmemorable stock image and no site traffic. Tragic.

But no more.

In today’s post, we’re going to show you how to design great hero images with Justinmind prototypes. We’ll take you through the whole process – from creating a web prototype and sourcing your hero image to optimizing the header and adding those all-important finishing touches.

So if you’re looking to create hero images that engage users and increase conversion rates, you’ve come to the right blog. Let’s get started!

Step one – download Justinmind

The first thing you’ll need to do is download Justinmind. Our free trial lets you use all of Justinmind’s pro prototyping features for 30 days – learn more here.

Once you’ve got Justinmind installed and open, choose a device template from the carousel selection:

create-new-prototype

We recommend choosing a web template to take full advantage of those large hero headers. Click “Finish” to start designing your hero image prototype.

Step two – source a hero image for your website

Justinmind’s canvas is where you’ll be designing your prototype. The first thing you’ll need to do is choose a hero image for your website. According to HubSpot, these are this year’s best stock image sites to source images from.

When choosing your image, try to find one that represents the content on your website. As Uxpert Nick Babich reminds us, “when a hero image doesn’t accurately contextualize the website’s content, it provides no value to the user.”

hero-image-website-design-bad

Additionally, don’t forget that the hero is often the first element that loads on the page, so it has a direct impact on the user’s first impression. To keep users engaged, you need to create an emotional reaction with your hero image. Choose striking visuals with high resolution for the best results. Get inspired by great hero image design here.

With the perfect image sourced, you can add it to your Justinmind prototype in two ways:

justinmind-image-widget

  • Either drag an Image widget from the Basic widget library to the canvas. Double click on the Image and choose a file from the dialog that appears, or
  • Drag an image from your folders directly onto the canvas.

Pro tip: if you need to work across multiple design tools (such as Photoshop or Illustrator), any updates made to the image in other tools will also materialize in your prototype’s version. Simply click the “Link to image file” option when choosing an image from your folders in Justinmind.


Create stunning hero image websites in no time. It’s easy with Justinmind

DOWNLOAD FREE


Step three – optimize your site’s hero image

Optimizing your image will ensure that your website catches the user’s attention for all the right reasons. As Shopify states, image optimization can help you attract new users and reduce site loading time and bounce rates.

Justinmind includes tons of features to help you customize your headers – from color and transparency to easy scaling and parallax features. Here are a few examples of what you can do:

Color and contrast

When it comes to color, Webdesigner Depot suggests that while bold hues can impress users, they can just as easily turn users off if used inappropriately. Likewise, warm colors can be inviting and energizing, whereas cooler colors can make images appear sharper and clearer.

How you use color in your hero image design will have a direct impact on how users relate to your site. Whether you’re looking to send a message, grab attention or just add a splash of color, you need to test out different color combinations for your hero image website.

With Justinmind’s SVG vector functionality, you can customize every pixel of your hero image – learn more here. Remember, your hero image doesn’t have to be a photograph, why not use an illustration?

hero-image-website-design

When prototyping with Justinmind, you’re in controlWith the color picker in the Properties palette, you can select the exact hue of each UI element and define the overall color scheme. You can also adjust opacity, tweak the lighting and contrast with shadow and create gradients.

hero-image-website-design-color

Size and aspect ratio

Size affects site performance and the user experience. And while a large hero image website might impress visitors, slow loading pages won’t.

Depending on the hero image style you’re going for (e.g. top-heavy vs. full-bleed), you may want to consider different crop sizes and aspect ratios. Lauralee Flores suggests a 16:9 aspect ratio for hero background images, or 4:3 for full background images.

Resizing an image or changing its aspect ratio can easily be achieved in Justinmind prototypes by dragging the corners of the image or adjusting its height/width in the Properties palette.

Additionally, our Responsive features allow you to scale images in accordance with screen resolution. This means you can modify the size of your prototype’s screen and your hero image will resize automatically along with it. To do so, simply change the Width/Height unit of measurement from “px” to “%” in the Size portion of the Properties palette.

responsive-design-mobile-responsive-scale-images-proportionally

And remember, always size down, never up. This way you-ll avoid distorted images with loss of quality.

Position and visual hierarchy

To center or not to center? The placing of the hero image and corresponding UI elements is constantly up for debate. While some designers argue that hero image elements should be centered, as the human eye is drawn to symmetry, others suggest that getting more creative with the visual hierarchy could help capture the user’s attention.

hero-image-website-design-visual-hierarchy

If you’re not sure which way to go, we say try them both! With Justinmind’s alignment features, it’s easy to play around with different layouts and positions. And with our new pin position feature, you can fix elements to the screen so that they remain in position no matter the screen resolution.responsive-design-pinned-element-scrolling-website

 

Read up on website background design best practices here.

Step four – choose your hero image site copy

Without a well-crafted, memorable hero message, your hero image is pretty much useless. As a rule of thumb, you want the user to focus more on your copy than on the image behind it.

The Nielsen Norman Group reminds us that users will choose whether to stay or bounce within 50 milliseconds of landing on your site, so clear and catchy copy and lettering is key. There are some great tips on writing powerful hero copy here. As for the rest, we’ve got you covered. When designing your site’s messaging, think bold, impactful and memorable typography.

With Justinmind, you can incorporate any font you like into your prototype. Choose from our default selection of serifs and sans serifs fonts, download Google Fonts, or embed your own! Use our Text widget for small amounts of copy (single-line use) or our Paragraph widget for larger messages (multi-line use).

hero-image-website-design-text

Finally, don’t forget the CTA! Use Justinmind’s Button widget to create the perfect call to action so users know exactly what you want them to do.

Step five – simulate your hero image website

The hard part is over! Now it’s time to simulate your hero image prototype and take a look at what you’ve designed. Click “Simulate” in the top right-hand corner of Justinmind’s editor to do so. A simulation window will appear, showing your hero image website.

If you’d like to see how your prototype will look on differently-sized screens, simply scale the window as preferred. You can also opt to simulate the prototype in full width, or a pre-defined width in relation to the canvas, so that you can play around with different screen and browser sizes.

Note that simulations of your prototype can be shared with your team, clients and users for user testing. Learn how to invite them here. They can even leave comments and suggestions to help you improve your design.

If you need to make changes to your prototype, you can do so at any time. If the same change crops up multiple times, use Masters to spread global corrections across your prototype’s screens. We told you, we’ve got you covered.

How to design a hero image website with Justinmind – conclusion

Using a large hero header is a great way to attract visitors to your site and send the right message about your brand. By investing even a small amount of time in the design of your hero image, you can check off some important design tasks related to your site’s aesthetics, visual hierarchy and overall concept.

So if you’re ready to try your hand at hero image design, we’re with you all the way. Download Justinmind now and get stuck in!download_free

Emily is Marketing Content Editor at Justinmind

2 comments

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

  • Your posts are outstanding Emily. Your tips are definitely helpful for web designers. I appreciate your effort in publishing this article. Kudos to you.

Download Free