Working in a large organisation with over 100+ employees? Learn how to communicate visually, boost productivity, and stay on brand, at scale. Get in touch(opens in a new tab or window).

When it comes to any business or brand, one of the most important marketing tools is a website. And one of the first thing website visitors see? Your hero image.

In the article below, we will clearly define what a hero image is, why it's important and we'll also take a look at 35 high-quality examples to inspire you to design your own.

What is a hero image?

The term ‘hero image’ refers to a specific type of website banner.(opens in a new tab or window) A hero image is usually quite large and often sits at the top of a website.

Why do websites need a hero image?

Hero images are often the first thing your website and serve as a glimpse of what your business offers. It's wise to think of hero images like an introduction – they give users a sense of what to expect from the rest of the site. You can create a website mockup(opens in a new tab or window) to see how your hero banner would look like and refine and review your website’s final look.

Why is a hero image important?

A hero image is important because it takes valuable real estate on your website. Hero images can also serve as a direct conversion tool, and can also be used to promote new initiatives or promote your brand proposition.

Hero image examples

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


Juliana Bicycles by VentureWeb

Check out this hero image for Juliana Bicycles(opens in a new tab or window) by VentureWeb(opens in a new tab or window) 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 with the help of a photo editing tool(opens in a new tab or window) 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


Tectonia Studios by Tectonia

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(opens in a new tab or window) 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(opens in a new tab or window) 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(opens in a new tab or window), 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 color


L’Avenir, Dental Clinic by Phoenix The Creative Studio

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(opens in a new tab or window) for L’Avenir Dental Clinic(opens in a new tab or window) that creates a jarring effect by transforming colored objects into a pearly white color.

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 color.

05. Get graphic


Barcamp Omaha 2014 by Grain & Mortar

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(opens in a new tab or window) by Grain & Mortar(opens in a new tab or window) 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


Pomodrone by ManyManyPixels

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(opens in a new tab or window) by ManyManyPixels(opens in a new tab or window). 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


Dreaming With Jeff by Squarespace

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(opens in a new tab or window). Instead of a clean cut typeface, website builders Squarespace(opens in a new tab or window) 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


Quality Peoples

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(opens in a new tab or window), the 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


Spree Conf DC 2013 by Alexey Topolyanskiy

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 centralized 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(opens in a new tab or window) 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 colored in a way that brings some vibrance and cheerfulness to the design!

11. Type, meet photos


Life In Greenville by Jeremy Jantz

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(opens in a new tab or window) for Life In Greenville(opens in a new tab or window).

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


Berger by Clapat

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(opens in a new tab or window) by Clapat(opens in a new tab or window), 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(opens in a new tab or window)!

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(opens in a new tab or window) for JOHO’s(opens in a new tab or window) that creates a dreamy scene by taking a simple photograph, adjusting the colors to bring out the blues, purples, greys and reds, and then throwing a little stylish type over the top.

Try out Canva’s(opens in a new tab or window) set of stylish photo filters to transform your photos into something special with just the click of a button.

14. Collage it


Friends of Grand Rapids Parks:Green Gala by Frances Close

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(opens in a new tab or window) for Friends of Grand Rapids Parks(opens in a new tab or window) that channels all things vintage by collaging images, hand type, and classic colors 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

15_newperspective by Heather Luipold

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(opens in a new tab or window) for in a new tab or window) 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


Carine’s Closet by Romain Briaux

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(opens in a new tab or window) for proposed blog Carine’s Closet(opens in a new tab or window).

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


Rosa Restaurant Website by George Olaru

Flat lay photographs are all the rage right now, especially on social media 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(opens in a new tab or window) for Rosa Restaurant. The combination of a beautifully flat-laid scene, the rich colors and the elegant type are what makes this hero image beautiful, classy and very inviting.

18. Darken your photos, lighten your type


American Fangs by Create the Bridge

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(opens in a new tab or window) for alternative rock band American Fangs(opens in a new tab or window).

By taking the detailed image (or in this case, video clip, check it out here(opens in a new tab or window)) 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


Portfolio of Anders Hede by Anders Hede

You might think you’re stuck with the colors 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 colors that photo throws.

Check out this hero image for Anders Hede’s portfolio site(opens in a new tab or window) 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 colors 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


The Maine Thing

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 texturized typographical treatment.

By using a simple gold-toned border, the open image and super simple layout are 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


Tommy Franklin by G’day Byron Bay

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(opens in a new tab or window) for Tommy Franklin(opens in a new tab or window), 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(opens in a new tab or window)!

22. Keep it clean


Customeed by Czechgeeks

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(opens in a new tab or window), makers of a customer relations management software. They’ve opted for a clean, simple gradient to bring some color 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


Lunarbot Studio

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(opens in a new tab or window). Their hero image is half illustrative, half typographic, but it has been balanced out through scale, positioning, and color 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(opens in a new tab or window) 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


Tic Watches by Visual Soft

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(opens in a new tab or window) by Visual Soft(opens in a new tab or window) that uses a luxurious photograph of a watch scaled way up, allowing users to still recognize 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 color, some simple type and you’re on your way to a striking hero image!

26. Put the ‘line’ in ‘align’


Feilden Clegg Bradley Studios

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(opens in a new tab or window) 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 colors pop


Clique App by Focus Lab

If you’re designing for a product or brand, chances are that there will be some color/s associated with that product or brand. Whether it be the icon color, the interface tone, or the actual product color, 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(opens in a new tab or window) 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


My Beauty Tea by MamboMambo

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(opens in a new tab or window) for My Beauty Tea(opens in a new tab or window) 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


Jones Snowboards

Black is always in fashion, so you’re generally pretty safe going for a black and white coloring for your hero image photograph. Have a look at this striking image for Jones Snowboards(opens in a new tab or window) that uses a monochrome coloring 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


The Lifecycle Adventure by Rob Lutter

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(opens in a new tab or window) for The Lifecycle Adventure(opens in a new tab or window) 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(opens in a new tab or window) 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 customize it and introduce the website.

31. Personalize it with hand type


Creatures & Features by Neve / Hawk

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 choose to forego the traditional use of clean typefaces and sleek graphic elements in favor of some personalized handwriting, and customized 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(opens in a new tab or window) 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(opens in a new tab or window). Clearly inspired by the idea of building, customizing, 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


Wild Beasts by 020 7

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 colors can create!

This hero image design for musicians Wild Beasts by 020 7(opens in a new tab or window) 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


Stéphane Lyver

Do you want a sharp geometric layout but also have a cool photo you want to use? Consider taking a leaf out of Stéphane 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 his 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!

Related articles

See all

Bring your ideas to life in minutes

Express yourself with the world's easiest design program.