The Power Of Hero Image Design: 35 Striking Case Studies To Inspire Your Own

With all of the superhero movies coming out at the moment, we thought it’s wise to not forget about another (equally as important) breed of hero – the website hero image.

While they don’t save the day or wear flashy capes, hero images are a very important and very effective tool in the world of web design. Basically, the term ‘hero image’ refers to a specific type of website banner, usually quite large and at the very top of a website.

For sites that use hero images, it is often the first thing users see when they click through to a site. So, it’s probably wise to think of hero images like an introduction – they give users a sense of what to expect from the rest of the site.

If you have a sophisticated hero image, they’ll expect class and culture, or if you had a colourful and fun hero image, and they may expect some comedy and playfulness.

Whatever your choice of tone, let’s have a look at 35 striking examples of hero images to get you inspired and on your way to crafting your own heroic image today.

01. Warm It Up

Check out this hero image for Juliana Bicycles by VentureWeb that is equal parts powerful, dynamic, warm, and inviting. A photo of the product in action, coupled with some simple, elegant and informative type is what really turns this full page image into a hero.

Consider enhancing your photograph by toying with the saturation, contrast, temperature, etc. adding some effects to bring out warmer or cooler tones. Or, simply running some premade filters over your photos can bring out some striking colours and bring your hero image to life.

02. Lead With Lines

Have you ever heard of the term ‘leading lines’? The technique doesn’t have any real hidden meaning, it literally just refers to lines that lead the eye to certain points of the page or design.

This design for Tectonia Studios by Tectonia applies leading lines in a subtle but effective way. By using the animated graphic of the globe and wires, our eye is drawn around the entire design, from the header logo, to the call to action, and footer links. Consider using lines to lead your consumers’ eye around your design!

03. Add In Some Action

To really add the ‘hero’ to your hero images, consider adding some action and motion into your photographs. Check out this design from marketing team Fireworx, who use a dynamic and action-packed image to instantly garner attention in one powerful and playful image.

Consider introducing a little momentum and movement into your hero image. Bring it to life with a fun, powerful or exciting image, and then top it off with a simple, punchy mission statement, just as Fireworx have done with “Think. Feel. Respond.”. Becoming a hero was never easier!

04. Grab Attention With Colour

Colour is important, this you already know. So, it makes sense that it is an indispensable tool when it comes to designing your hero image. Check out this very clever design by Phoenix The Creative Studio for L’Avenir Dental Clinic that creates a jarring effect by transforming coloured objects into a pearly white colour.

So, whether you want to create a jarring effect, generate a certain meaning or just add a splash of something new to your hero image, pay careful attention to your use of colour.

05. Get Graphic

It’s no secret that illustrations can make for very effective designs, so naturally a website hero image is no exception! Check out this stunning vintage-inspired illustrative hero image for Barcamp Omaha by Grain & Mortar that foregoes the photographic route and opts for a stylish, colourful and textured illustration.

A hero image is what you make of it, so explore different mediums and styles until you find one that feels just right for you, your brand, and your site.

06. Mock It Up

Are you using your site to promote a digital product? Whether it be a piece of software, an app, or anything in between, give people a taste of what they can expect from your service by mocking up a screenshot on a compatible device.

Check out this clean, crisp and informative hero image for the app Pomodrone by ManyManyPixels. The screenshot of the app contents is brought more to life via a very simplistic smartphone mockup. Pair it with a simple description and link, some clean typography and you have yourself a foolproof (and stylish) hero image.

07. Go Analogue

It’s a common mistake to make to assume that “typography” is a synonym for “fonts”. Sometimes the perfect solution to your typographical dilemmas isn’t a digital font from the web but rather a unique handcrafted piece of type.

For example, check out this site title on this hero image design for Dreaming With Jeff. Instead of a cleancut typeface, website builders Squarespace have opted for a handcrafted piece of type. And the result? A unique, captivating and mysterious hero image, that perfectly fits the tone and style of the rest of the website.

08. Experiment WIth Texture

Texture can make or break a design, so it’s often best to tread with caution when using it. But, in the case of this hero image for Quality Peoples, texture is what sells the design. By using a stylistic photo and roughing it up with some grain, vignettes and a sepia-toned filter, this design is transformed from an everyday apparel website to an engaging, rough and vintage-inspired surf brand site.

So, consider experimenting with texture if you think it suits your content and brand. It can give a flat photo depth, or a new photo a classic vintage touch.

09. Embrace Symmetry

It’s been proven by many smart people that the human eye appreciates and is drawn to symmetry. So, why not tap into that smart scientific discovery and incorporate a little mirroring into your design?

Have a look at this design for the 2013 ‘Spree Conf’ website that uses a fairly symmetrical photograph and enhance this symmetry with a tapered navigational bar and other centralised elements. The result of all of this symmetry is a very simple, easy to navigate, balanced and effective hero image design.

10. Get On The Grid

In design, grids are paramount, and it looks like website design team Float knew just this when it came time to design their own site. Check out the way Float have split their hero image up into two separate blocks – one photographic and one typographic.

This super simple technique helps to break up the image and direct the eye around the page in a smooth, logical way – not to mention, the block of type is coloured in a way that brings some vibrance and cheerfulness to the design!

11. Type, Meet Photos

Mixing type and photos for your hero image doesn’t have to be an uphill battle. In fact, there are many quick, simple, and stylish ways you can do it. Let’s have a look at this simple but effective example by Jeremy Jantz for Life In Greenville.

What Jantz has done here is chosen a fairly straightforward image, and paired it with equally as simple type bound within a transparent black box to keep things legible and sharp. See, I told you it was simple!

12. Go Minimal

Not a fan of the flashy, heavily-designed look? Or perhaps you feel it doesn’t suit your brand? In that case, consider stripping your brand down to the bare necessities and taking the minimal route. Minimalism (when done right) can be classy, sophisticated, elegant and calming, and if you check out this hero image design for Berger by Clapat, this hero image hits all the right notes.

By using a simple image to give a hint at the website’s content, a flat soft grey background and very simple type, this hero image is given a stylish, clean and minimal effect. For some more minimal design inspiration, be sure to check out these beautiful tips and examples!

13. Create A Dreamy Scene

Adjusting your photograph’s colours in specific ways can give your hero image design a certain mood and tone. Sounds a little labor intensive, I know, but trust me – you don’t have to be a Photoshop whiz to transform your photos from drab to fab, especially given the amount of filters you have at your disposal!

Check out this stunning hero image design by WILD for JOHO’s that creates a dreamy scene by taking a simple photograph, adjusting the colours to bring out the blues, purples, greys and reds, and then throwing a little stylish type over the top.

Try out Canva’s set of stylish photo filters to transform your photos into something special with just the click of a button.

14. Collage It

When we think of the web, chances are a lot of us think of ‘shiny’, ‘new’, and ‘modern’, but consider bringing a bit of old-worldly charm into your hero image design to stand out from the crowd.

Check out this hero image design by Frances Close for Friends of Grand Rapids Parks that channels all things vintage by collaging images, hand type and classic colours to create a quirky and eclectic design. Don’t be afraid to do your own thing, to layer elements or to step away from the polished and shiny trends every now and then!

15. A New Perspective

Do you have a product or service you want to depict photographically, but aren’t quite sure now? Consider flipping the perspective about in an interesting way and see what new things you can create that way.

Take, for instance, this hero image design by Heather Luipold for thebar.com that depicts the product (a mixed drink) from a bird’s eye view angle, rather than the typical side shot. Top it off with some bold type hidden behind the image, and a textured background and you have a unique, clean and beautiful hero image.

Just like with regular problems, sometimes a new perspective can be all you need to solve it.

16. Choose An Angle

A lot of websites are made up of strong horizontal and vertical shapes, so one way to step apart from the status quo a little is to introduce some diagonal angles into the works. Check out this classy and sophisticated but modern and stylish hero image by Romain Briaux for proposed blog Carine’s Closet.

The hero image design itself is simple – an engaging photograph coupled with some simple, elegant type. But what makes this hero image stand out is how it interacts with the rest of the webpage. By tapering the image in on an angle, the hero image feeds into the content, creating a super simple but sharp and striking effect.

17. Set A Scene

Flat lay photographs are all the rage right now, especially on social medias like Instagram. So, why not reap the benefits of this flexible trend for your hero image by setting a scene that gives visitors to your site a hint at what to expect.

Have a look at this flat lay hero image by George Olaru for Rosa Restaurant. The combination of a beautifully flat-laid scene, the rich colours and the elegant type are what make this hero image beautiful, classy and very inviting.

18. Darken Your Photos, Lighten Your Type

A big hurdle you might face when trying to pair type and photographs is your type not standing out enough. This usually occurs when the photograph is too busy, detailed, or your typeface is too thin or small. There are a lot of ways to overcome this hurdle, but check out this unique solution by Create the Bridge for alternative rock band American Fangs.

By taking the detailed image (or in this case, video clip, check it out here) and lowering its contrast and brightness, you can then layer a semi-transparent piece of type over the top to highlight the image/video.

19. Embrace Gradients

You might think you’re stuck with the colours you are given when reviewing your photographs, but fear not – gradients are to the rescue! By overlaying a simple and soft gradient over your photo you can keep your photo’s content visible and distinguishable, but you have a say over what colours that photo throws.

Check out this hero image for Anders Hede’s portfolio site that pairs a lively, exciting photo of a festival moshpit with a calming, gentle purple/blue/green gradient to create a beautiful effect.

Plus, another bonus of this method, is it often makes type stand out a lot easier as there are less colours for it to battle against. Check out how Anders has managed to put a thin typeface over such a busy photo with no legibility problems whatsoever.

20. Create A Border

20_border

Borders might not sound like the most fun graphic element, but they can add a lot to your design. Have a look at this design for The Maine Thing Quarterly who have used a stunning cool-toned photograph as the background, and a texturised typographical treatment.

By using a simple gold-toned border, the open image and super simple layout is contained and given another degree of structure and alignment. Consider throwing a simple border up around your hero image the next time you feel there is just something missing.

21. Play With Patterns

Looking for a simple way to add some playfulness, quirkiness, and fun into your design? Then let me suggest patterns. Have a look at the way a hero image, like this fun one by G’day Byron Bay for Tommy Franklin, can be given a touch of playfulness and energy with the addition of a simple pattern.

Plus, the addition of the pattern in this hero image design helps the design from seeming too wide or empty. The pattern fills the negative space in a way that keeps the design open and spacious but not overwhelming.

Want to have a peruse of some other ways to use geometric patterns in your designs? Well, you’re in luck, check out these 50 examples right now!

22. Keep It Clean

A lot of modern design seems to be all about sharp lines, clean gradients, simple type and clear shapes – these things currently signify to us that the product we are viewing is modern, fresh, and innovative. So, channel these aesthetic techniques in your hero image to bump up your design’s professional appeal.

Check out this sleek and snazzy hero image design for Customeed by Czechgeeks, makers of a customer relations management software. They’ve opted for a clean, simple gradient to bring some colour to the design, some clean type and a simple flat screenshot of their product. Keeping things linear, sharp and aligned is a surefire way to get you on the track to a beautiful and modern design.

23. Keep The Balance

When designing a hero image you generally have a lot of space to work with, and sometimes a lot of elements too. So, it’s important to make sure you balance those elements out in a functional and aesthetically pleasing way.

Have a look at this hero image for website designers Lunarbot Studio. Their hero image is half illustrative, half typographic, but it has been balanced out through scale, positioning and colour to make sure that no one element overpowers the other. So whether you have 2 elements to work with or 20, keep balance in mind when designing your hero image.

24. Get Psychedelic

There’s a frequently quoted design ‘rule’ that dictates a design should stick to about 3 or less colours. Well, like most rules, there are always exceptions and times to break these laws – this is one of them.

Have a look at this hero image design for agency Y7K that uses psychedelically coloured paint-like textures and animations to create a striking and vibrant design. Topped off with some simple, bold type, this design is a memorable, fun, and unique one for sure.

So, moral of the story – have fun with your design, break rules, stick to them, do whatever you like until you find the perfect fit for your site.

25. Scale It Up

When you have a great image at your disposal, you might sometimes feel that you have to use every last inch of it to make the most out of it, but, consider scaling it up to showcase the detail and subtleties of the image, and to make a bold, brilliant design.

For example, check out this hero image for Tic Watches by Visual Soft that uses a luxurious photograph of a watch scaled way up, allowing users to still recognise the picture and brand of watch, but giving the image much more of a unique and bold presence. Offset your scaled-up image with a bold background colour, some simple type and you’re on your way to a striking hero image!

26. Put The ‘Line’ In ‘Align’

I’m sure you know the value of a well-aligned design, but let’s quickly run over the benefits of aligning certain elements of your design – it helps readability, makes for a clean and logical layout, prevents clutter, and helps you guide the eye better. In short, it’s a small device with a big bang.

This hero image for architectural studio Feilden Clegg Bradley Studios puts the ‘line’ in ‘align’ by creating four intersecting guidelines and a text box that align perfectly with the navigational bar.

This simple animated feature is laid over a gallery of stunning photographs of the studio’s work and achievements to create a simple, chic, and elegant design that makes the most out of alignment.

27. Make Your Brand Colours Pop

If you’re designing for a product or brand, chances are that there will be some colour/s associated with that product or brand. Whether it be the icon colour, the interface tone, or the actual product colour, identify which hue represents your brand and put it in the forefront of your hero image design.

Check out this hero image for social app Clique by Focus Lab that plays heavily on the blue tone of the app’s interface. By layering the mockup screenshot of the app in action over a blue-toned photograph, the brand for Clique is instantly translated to users – plus, it just looks really good.

28. Choose Your Photos Wisely

When using or taking photographs for use in your hero image, make sure you consider your future design in the process. Things to consider are the size of your image, where it will sit on your website, and how other graphic elements (type, shapes, etc.) will fit over the image.

Check out this hero image by MamboMambo for My Beauty Tea that takes a photograph with plenty of empty space to the left so that the type can sit nicely and legibly, instead of awkwardly overlapping parts of the photo. Consider choosing images that are nice and open to make your future designing life a whole lot easier!

29. Go Monochrome

Black is always in fashion, so you’re generally pretty safe going for a black and white colouring for your hero image photograph. Have a look at this striking image for Jones Snowboards that uses a monochrome colouring and a strong, sharp contrast to really bring out the detail and rich tones from the photograph.

Top off your monochromatic masterpiece with a little type (in this case, hand-crafted for a personal touch), or just leave the image to speak for itself. Either way, you have yourself a quick and easy way to bring out the brilliance of your already stunning heroic photograph.

30. Choose A Striking Stock Image

A fantastic building block and start point for a truly heroic hero image is a stunning photo. However, in the likely chance you don’t have any professionally shot, mystical mountain top shots like this stunning one from Rob Lutter for The Lifecycle Adventure at your disposal, let me suggest stock images.

The days of awkwardly posed, generic and boring stock images are gone. Check out this comprehensive guide to some of the most inspiring databases of free stock images now!

Once you have a beautiful image under your belt, everything else often falls into place. This hero image for The Lifecycle Adventure lets the image speak for the most part, and then interjects some simple but fun type to customise it and introduce the website.

31. Personalise It With Hand Type

Add a touch of fun, and personality to your hero design by blending your photographs with playful hand-drawn imagery and type.

Check out this example by Neve / Hawk for Creatures & Features that chooses to forego the traditional use of clean typefaces and sleek graphic elements in favour of some personalised handwriting, and customised doodles – perfect for this brand and tone. Plus, the sketches, angled type and rough exterior beautifully contrasts the sharp, neat flat lay photograph.

So, why not turn your doodles into designs and add a touch of character and playfulness into your design.

32. Create Some Depth

While computer screens are flat, and your images are technically flat, this doesn’t mean that they can’t have depth. Depth can be created in a design through a myriad of techniques, but one we can identify in this simple, classy example is layering.

Have a look at this hero image example for Oakley’s 2013 Tour De France line. By layering typographical elements ‘above’ and ‘below’ the image, there is a new depth given to the image. Also note the difference in scale and opacity between the two bodies of type, these each give a sense of balance and hierarchy to the design as a whole.

33. Get Inspired By Your Content

If you’re totally stuck for what to design your hero image around, look no further than the things that surround you/your client’s content.

For example, check out this blueprint inspired design for digital web-building agency WEBARQ. Clearly inspired by the idea of building, customising, and the technological side of online presences, WEBARQ have created a hero image that not only looks neat, clean and effective, but also makes sense and reflects what they do.

Remember: there’s inspiration everywhere if you know how to look for it.

34. Mix And Match

Ever heard the fashion advice ‘never mix your patterns’? Well, throw that advice out the window (or at least set it aside for now) because have a look at what mixing patterns, images, textures and colours can create!

This hero image design for musicians Wild Beasts by 020 7 creates a sharp, geometric starburst shape with each rung filled with a pop of colour, a sliver of a photograph, a texture, or an illustration. Top this mishmash of texture and colour with a bold yellow piece of type and you have yourself a striking, fun, and energetic hero image.

35. Get Geometric

Do you want a sharp geometric layout but also have a cool photo you want to use? Consider taking a leaf out of Stephanie Lyver’s book by overlaying angular geometric shapes over your photograph to reap the best of both worlds.

This technique for Stephanie Lyver’s hero image also works to give her type more contrast against the background, keeping it crisp and legible. Don’t be afraid to combine different techniques and styles until you get the perfect hero image for you and your site.

Over To You

Hero images are like a first impression.

Have you ever come across a site that uses hero images really well? Or maybe you have some handy techniques up your sleeve that you’d like to share. In either case, feel free to leave them down in the comments below!

Mary is a recent graduate from a Perth university where she studied creative writing and graphic design and got the bug for both. She has a knack for vector art and for taking on projects that are ambitious to a fault. When she’s not freelancing, she’s usually hunting for cheesy 80’s music videos.