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