Hero Header: Magnify Your Brand



The use of big images is one of the biggest trends in web design.  And not just large, but completely oversized images that seem to come to life on screen. When used at the top of a page, this is often referred to as a HERO HEADER.

On this post, we want to help you out to take advantage of this trend. Explore the tools that you need to get started. Also we give you some tips to use on the Hero Headers.

What’s a Hero Header?

A hero header is the use of a hero image, text and navigation elements on your homepage or at the top of any webpage. Hero headers can be used in a variety of ways – as an image or image with text, image slider, fixed image, or video or animated image. The design can be realistic or drawn.

The hero image is the first thing you see on a website and is design to bring you into the page. It should have strong focus and visual interest.

Hero headers place a strong focus on the visuals and often rely on simple typography, minimal color choices and user interface elements with basic shapes. Most of the design elements rest on top of the image, which is often strategically designed so that text fits in a specific position on the screen. Often branding, navigation and other tools are placed around the outside edges – typically top left and right corners – to keep the focus on the image itself.

Hero headers work in a wide variety of website designs and with almost any style of design. The visually pleasing trend really just requires one key thing – an amazing image.

Some Tips

Once you’ve decided to use a hero header, there are few things to keep in mind when designing. The design needs to be clean and elements need to not get in the way of the main image, images or video. Creating separation of elements can be vital in this style of design. Here are a few things to keep in mind when designing with hero images:

  • Include branding. Commonly this is positioned in the top left corner. Opt for a brand mark or logo in all white or black and not something with a lot of color.
  • Go bold with titles and typography. With a large photo, but lettering will help grab the attention of users.
  • Be subtle with typography when it comes to navigation elements and secondary type. Stick to one big image and one big piece of text; let everything else fall back in a design-sense.
  • Be aware of color choices. If you are using a color image, stick to black and white for everything else. If the image is black and white, pick a simple or single-color palette for text.
  • Place text so that it does not impede the visual flow of the image. Don’t cover faces or vital parts of the image.
  • Consider type that’s both large and thin.
  • Think about using ghost buttons for a degree of subtlety.
  • Use fixed navigation. Make it easy for users to scroll and get around the page. Play with navigation that lives within the hero image and outside of it.
  • Use tints and fades to help text pop off of the image. All text needs to be readable to be effective.
  • Design the hero header at a depth and in a way that users know what to do next – click or scroll. Include visual cues. Remember a hero header does not have to fill a screen; it is just the topmost portion of it.
  • Create a hero header that woks in a responsive web environment. Think about how it will render on smaller screens. What image and text will show?

Examples of great hero headers can be found all over the web.

 Evolution Fresh
Marine Transportation Website Template




Hero headers are among some of the best and most visually appealing trends in web design that we have seen in a while. At Okomo we are always looking for inspiration on the finest trends. You can design you ow hero header using your ideas, your style.

We’d love to hear your opinions about this article. Are you using hero headers right now? Let us know!



Related Posts

Do you have a project in mind?​

We are ready to work globaly. Let’s discuss!