Web layout 101: how to get the most out of the top right corner
Most people view the site on the so-called “F” template. First we look through the upper part of the letter F, then we descend and look horizontally through the second part, after which we descend down to the lower left corner of the site.
Visitors to sites almost do not pay attention to the upper right corner, i.e. You should not place there important information on which, according to the designer’s idea, people should click or perform other actions. This area is ideal for contextual images. Such images, which you can just look at, and read the text on them is not necessary.
The main task of the designer is to select the images so that they dynamically fit.
When users visit the site for the first time, most of them look at the upper left corner. In this area there is information about the site, the name and other important things. Users quickly scroll down the site, paying minimum attention to the right side.
As soon as the designers studied the patterns of users’ view, they began to place less interesting content in the upper right corner: disclers, instructions, and possibly flags of different countries, with which you can change the site language. This design is outdated, but user behavior has not changed.
On large sites a lot of different content that claims the attention of the user, but the upper left corner remains the most valuable. The upper right corner is ideally suited for images, since they can be perceived with peripheral vision, and also they quickly excite emotions in a person.
How to choose the right background images
Below I will show you which images best fit under the upper right corner of the screen. And for this, let’s look at three pairs of images, as well as analyze how they can interact with the content.
Example 1: ballet flats
Let’s start with two images of ballet shoes. One where the ballet shoes are located in the upper right corner, the other – in the left corner.
As the designer thinks about the image, where the ballet flats are located on the right:
clearly shows the power of the sharply focused image in the upper right corner;
intimate image that involves the user in the site with a feeling of voluptuousness and grace;
the bottom left corner looks empty, especially if the content in the image is to the right of the text. So the upper right corner is too dominant. You can get out of this situation if you make the wooden floor more saturated.
The photo on the site should create human contact. However, it is extremely difficult to create a warm and personal atmosphere when looking for ways to fill the “blind” upper corner. The photographer who created the composition with the center of attention (focus) in the upper right corner created a very unnatural site. To draw attention to the top right of the site, the rest of the composition should be extremely boring.
Too much emphasis on the upper right corner can distract the user, which will lead him to leave the site.
Example 2: road in the autumn forest
Our second example is two very similar images with a picturesque road cutting through the autumn forest. On both images the road is shown, but on the first it goes to the upper right corner. And on the second image, the road tends to the center of the composition.
the image on which the road goes to the upper right corner is perfect, since there is a speaker on it, it calls for research, you start thinking about the possibilities;
Both images will become even better if you add a little more wood on both sides of the road, so they fit better into the design;
the image where the road goes purely to the center of the composition is less dynamic. If you put a block with text and links on its background, the road will be completely hidden. And in the first image, users see two connected points of the road.
Example 3: beach
The last example is the beach. One image shows the waves and the setting sun, and the second shows palm trees on the left.
On the image without palm trees there is an eye-catching horizontal line of the ocean that goes into the sun on the right. On the left there is only the sky;
the diagonal effect of the wave attracts attention, the wave is very powerful and dynamic;
the wave helps to balance the sun, which gives the designer a large field for work;
the image can be even better if you trim the sky harder and more show the wave and the shore;
the sun should be located above the right edge, which is contrary to the photographer’s instinct;
an image with trees is a more typical scene with simple angles where the left edge of the image dominates.
Ideally, the background images on the site should have something visually appealing in the upper right corner and vertically, narrowing the user’s attention at the top of the screen.
There should also be something interesting on the bottom right. This is contrary to the instincts of photographers, but this style of design works fine on good sites.