Join the IMPACT coaches for a deep dive on a new topic every month in our free virtual event series.

Register Here
Close

Join the IMPACT coaches for a deep dive on a new topic every month in our free virtual event series.
Register Here
The Ultimate Inbound Marketing Strategy Playbook 2022

Take your inbound strategy to the next level

  • Master the 7 principles of highly effective inbound marketing
  • Dramatically improve your inbound sales
  • Get more buy-in at your company

6 Websites with Engaging Full-Width Image Headers

By Liz Moorehead

6 Websites with Engaging Full-Width Image Headers

Here at IMPACT, we build a lot of websites for our clients and work hard to stay on top of the latest web design trends and best practices.

One big web design trend that has emerged in the last year is a move from multi-image, framed sliders, to huge, responsive image headers featuring a single "hero" image. When done well, such headers can be captivating, and with the right images, beautiful.

Awhile back, we created an article about a few websites that rock parallax scrolling. In a similar fashion, I would like to share a few of my favorite sites that make use of responsive, full-width image headers

 Join the IMPACT coaches for a deep dive on a new topic every month in our free virtual event series.

Starbucks

website-full-width-image-header-starbucks.png

The imagery that Starbucks uses for their homepage just makes me crave more coffee...even if I probably don't need any!

It is warm and inviting, and showcases the main focus of the website - their loyalty program and customer app. After taking in the beautiful homepage header, everything else on the site just feels like supplementary information about Starbucks and their services.

And if you are already logged into your account, the homepage shows you an additional info bar that displays how many points you need until your next reward. It is both straight to the point and informational.

HubSpot

website-full-width-image-header-hubspot.png

It should come as no surprise that marketing automation software company Hubspot does a great job at its own marketing. In conjunction with the launch of its new, upgraded software that enables clients to personalize the content on their websites, the company recently revamped its own site to be more interactive and engaging.

Now, the header really emphasizes how HubSpot's services can help potential clients, and it also displays a fact about Hubspot that helps establish social proof.

National Gallery of Art

website-full-width-image-header-national-gallery-of-art.png

The National Gallery of Art is one of my favorite places in the world, and I love that they use their homepage header - which covers the entire page - to show off some of the beautiful works of art that are housed in their galleries. Every time you refresh the page, you are given another wonderful work - or even an image of the gallery itself - to look at.

And for those who think its important to keep your homepage "above the fold," this is a great example of how the Smithsonian has gone against the grain and pulled it off.

Adobe Creative Cloud

website-full-width-image-header-adobe-creative-cloud.png

The nearly full-page header image on Adobe Creative Cloud's site brings all the emphasis to its latest news or, in this case, a hot new product - its Creative Cloud apps.

It is clean and eye-catching, and completely responsive.

sweetgreen

website-full-width-image-header-sweetgreen.png

The clean look of the sweetgreen site reflects on their healthy services and ideals. And, like the Starbucks site, it makes you hunger a bit for their menu items.

Not only do you get a full-page image that also functions as a slider, but the full-width style of the images are carried over into the look of the subpages as well. Talk about consistency.

And I can't talk about the sweetgreen website without mentioning the site for their annual sweetlife festival. It mimics the overall design of the sweetgreen page, but still has its own unique design that fits the feel of the festival.

tumblr

website-full-width-image-header-tumblr.png

I just love the simplicity of the tumblr login page.

It is clean with simple text and a main focal point - a form you can fill out to become a user. There is very little information on this homepage, and even fewer links to click on (or to distract the visitor).

The only information you are given about tumblr itself is a counter for the number of blogs and posts that have been created. And of course the "30 seconds to join" finalizes what is essentially a simplistic and concise Call-to-Action.

Their use of a completely responsive image that fills up the entire screen's width and height is a great way to not only showcase the art and other posts of current tumblr users, but to also introduce future users to the idea of what Tumblr is.

tumblr really doesn't have any other pages aside from its user's blogs. Sure, there are some necessary subpages, like their terms of service, but even their support form doesn't take you away from the homepage.

The focus remains clear - it's all about the users.

So What?

Responsive images are a good way to capture the interest of your site's visitors, to quickly explain your company's purpose, or to pull in leads through a simple Call-to-Action.  

You don't need to have sliders, though some sites have made good use of them, like sweetgreen and the National Gallery of Art.

Yet large and shiny responsive headers aren't the solution for everyone. As with most web design grends, it's important to assess what information you need to focus on before you determine how to best showcase it on your site. 

Knowing your audience is imperative for creating an engaging homepage. And because some of your site users may have large computer monitors, a good second step would be to make sure that any images you use for such a large header are of a high resolution and as clear as possible.

What are your favorite websites and why? Let me know in the comments!

Join the IMPACT coaches for a deep dive on a new topic every month in our free virtual event series.

Topics:

Web Design
Published on January 9, 2015

Recent Articles

8 of the Best Business Website Designs to Inspire You in 2023
November 17, 2022 • 7 min read
Take It From an Expert: You Probably Don’t Need a New Website
November 16, 2022 • 4 min read
What Does a Great Inbound Marketing Website Look Like in 2023?
November 14, 2022 • 12 min read
4 Ways To Recession-proof Your Website In 2022
June 9, 2022 • 5 min read
23 of the Best Examples of Business Blog Design
May 30, 2022 • 13 min read
5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)
May 16, 2022 • 8 min read
8 Best Content Management Systems for Digital Marketing in 2022
March 22, 2022 • 9 min read
How Much Does a Website Design or Redesign Cost in 2022?
March 8, 2022 • 9 min read
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
February 22, 2022 • 17 min read
Your 2022 Website Strategy Must Include These 6 Things
February 15, 2022 • 9 min read
11 Pricing Page Examples for Business Websites (Updated for 2022)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Design Should Have [+Video]
January 15, 2022 • 6 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read
5 ways you can use the StoryBrand framework to make a better website
June 14, 2021 • 5 min read