To provide you with additional information about how we collect and use your personal data, we've recently updated our Privacy Policy and Terms of Service. Please review these pages now, as they apply to your continued use of our website.

The Conundrum of the Upper Right Corner in Web Design

Studies of user-behavior show, the upper right corner of a website is the area the human eye is least drawn to. This makes it a perfect spot for a contextual image, something users see, but don’t need to read. But who would shoot a picture like that?

We Simply Read Left to Right and Top to Bottom

A majority of nations read left to right. We look to the upper left corner first, expecting key information such as the name of the website and the name of the individual page. We subsequently scan the page downward and then perhaps glance back up to the right side. Perhaps. For the most part, you may as well treat the upper right corner as invisible.

Over time, designers began to use it for necessary, but less interesting links (terms and conditions, legal disclaimers, instructions) as well as language flags – precisely because the user cannot read the page and must actively look for the flag icon. Websites changed a lot in recent years, but human behavior hasn’t moved much from its old habits.

Short-text minimalist presentations enable many design solutions - centering the entire design, asymmetric designs, lots of white space, pictures across the whole page… you name it. But larger websites have content fighting for attention and the most precious space remains top left. The upper right corner is mainly seen by peripheral vision and that’s fine for images. Visual information arrives through the back door that way. As the left side informs our brain, the right can appeal to our feelings. Perfect. Except…

Selecting Background Images

Photography in website backgrounds adds a human touch, but finding images that fill the ‘blind’ upper right corner is a challenge. It’s absolutely unnatural for a photographer to put the center of attention (and focus!) into the upper right corner and leave the rest of the composition sufficiently ‘boring’ to be covered by copy. That one spot in top right must clearly identify the image and make it instantly recognizable, otherwise it just confuses and distracts.

My ideal image has visual interest jammed in the upper right corner with a vertical narrow band filling across the top banner area. That visual interest must carry down the right side of the page, a perfect location where short headings and left-justified text leave sufficient space. I understand that this runs completely counter to a photographer’s natural instinct, but that’s where I need it.

[PLEASE CLICK ON THE BELOW PREVIEW IMAGES TO EVALUATE THE ACTUAL COMPOSITIONS OF THE PHOTOS]

Remember the Spider Web

A typical example of the problem is this spider web.

Spider Web at Night Texture

For a perfect Halloween website, I would cut off almost the entire right half and most of the top to get the center of the web into the upper right corner. Then I would use an overlay or fade it to black or blur it in the lower left area in order to gain space for readable text. I would keep it sharp in the upper band and along the outer right edge, where most of my text wouldn’t reach. Perfect. Done.

Now the two big questions: If I cut off this much of the image - will what remains be enough to fill my computer screen and are the areas I need to show actually in focus? It’s a nice idea, but most of the time, simply cutting the image doesn’t do it. Even if it works technically, its beauty and detail may suffer.

What I really need is an image like this.

Wet Web

Here I need only trim a bit off the top – almost perfect and easy for you photographers to remember. The center of the spider web would balance my logo in the upper banner. Enough visuals remain on both sides to create an approximately 300 px margin outside my web content area. I can choose to fade the image to black or allow it to fill the space, depending on viewer screen size.

My Advice: Just Shoot Twice

Here’s another example of this problem.

Chania Lighthouse

Using the vertical line of the lighthouse and its reflection across the water on the far right of my design, the horizontal line of the mountains and pink clouds are available to place a logo and perhaps a well scripted motto over them. Most of the blue sky would be lost, but that’s fine. Even so, I certainly wouldn’t have enough water on the bottom left to overlay it with text.

Many abstract backgrounds can be used if rotated or flipped as in these examples.

Abstract green wave background

Blue wavy background

Elegant pastel background or wallpaper

But if you shoot photos intended for use in web or graphics, simply take two pictures – one as your photographer’s instincts demand and a second according my composition requirements that leave lots of space for copy.

You are bound to get more downloads.

Photo credits: Amith Nag, Madartists, Manan Fredriksson, Michele Loftus, Silvertiger, Leigh Prather.

Your article must be written in English

Publish
September 28, 2016

Sandshack33

I just read your other blog article (GIVE MORE FREEDOM TO WEB DESIGNERS), and find this one to be equally helpful. Thank you :)

September 26, 2016

Michaelafree

Hi Michaela,
I am a contributor on DT for almost 10 years. Was always interested in photography as a stand alone thing like a painting for example. Never as a utility for expressing something else or a component of something else like a web page. Small wonder I am not selling that many pictures :) Articles like these are invaluable.
Is there any literature covering these subject? I would love to read more.
Thank you for a really useful article.

gmargittai - I'm not aware of any literature on this subject, because, frankly, I spend too much time actually creating things and not studying much. But your comment gave me an idea for another article. Thanks for the encouragement! I'm glad it's useful.

September 24, 2016

Karenfoleyphotography

It is so helpful to contributors to get this kind of insightful information. Thanks for your post, K-

September 23, 2016

Joezachs

That light house is beautiful

September 23, 2016

Gmargittai

Hi Michaela,
I am a contributor on DT for almost 10 years. Was always interested in photography as a stand alone thing like a painting for example. Never as a utility for expressing something else or a component of something else like a web page. Small wonder I am not selling that many pictures :) Articles like these are invaluable.
Is there any literature covering these subject? I would love to read more.
Thank you for a really useful article.

Related image searches
Backgrounds related image searches