Multimedia in web design: modern technologies for presenting information
From the author: Hello everyone! Friends, if you read my articles on web design, you can hardly be called dummies. Most of the terms are familiar to us and do…

Continue reading →

Web design trends: the main directions of 2016
From the author: Hello everyone! Today we will take a break from complex technical topics and do a short review of current year trends. In this article, I collected the…

Continue reading →

Web design standards: everything you need to know for beginners and pros
How do design standards increase website popularity? There is an opinion that web design standards attract users to sites, and most importantly - keep them for a long time. Why?…

Continue reading →

Web Layout 101: How to Get the Most Out of the Top Right

Most people browse the site using the so-called “F” template. First, we look at the top of the letter F, then go down and look horizontally in the second part, after which we go down to the lower left corner of the site.

Website visitors almost do not pay attention to the upper right corner, i.e. do not post important information there, according to which, according to the designer, people should click or perform other actions. This area is ideal for contextual images. Such images that you can just look at, and you do not need to read the text on them.

The main task of the designer is to select images so that they fit dynamically.
Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more
When users enter the site for the first time, most people look at the upper left corner. This area contains information about the site, name and other important things. Users quickly scroll down the site, paying minimal attention to the right side.

As soon as the designers studied the user’s vision patterns, they began to place less interesting content in the upper right corner: disclaimers, instructions and, possibly, flags of different countries, with which you can change the language of the site. This design is outdated, but user behavior has not changed.

Large sites have a lot of different content that claims to be the user’s attention, but the upper left corner remains the most valuable. The upper right corner is ideal for images, as they can be perceived by peripheral vision, and they quickly excite emotions in a person.

How to choose the right background images
Below I will show you which images are best suited to the upper right corner of the screen. And for this, let’s look at three pairs of images, and also analyze how they can interact with content.

Example 1: ballet shoes
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.

Image 1
Web Layout 101: How to Get the Most Out of the Top Right

Image 2
Web Layout 101: How to Get the Most Out of the Top Right

As the designer thinks about the image, where the ballet shoes are located on the right:

clearly shows the power of a sharply focused image in the upper right corner;

intimate image involving the user in the site with a sense of voluptuousness and grace;

the lower left corner looks empty, especially if the content in the image is located 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.

Web Layout 101: How to Get the Most Out of the Top Right

A photograph on a website should create human contact. However, it is extremely difficult to create a warm and personal atmosphere when you are looking for ways to fill the “blind” top 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 to his departure from the site.

Example 2: road in the autumn forest
Our second example is two very similar images with a picturesque road cutting through an autumn forest. On both images the road is shown, but on the first it goes into the upper right corner. And in the second image, the road tends to the center of the composition.

Let’s analyze two images:
Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more
Image 1
Web Layout 101: How to Get the Most Out of the Top Right

Image 2
Web Layout 101: How to Get the Most Out of the Top Right

the image on which the road goes to the upper right corner is ideal, since it has dynamics, it calls for research, you begin to think 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 cleanly to the center of the composition is less dynamic. If you place a block with text and links on its background, the road will completely disappear. And in the first image, users see two connected points of the road.

Web Layout 101: How to Get the Most Out of the Top Right

Example 3: the beach
The final example is the beach. One image shows the waves and the setting sun, and the second palms located on the left.

Image 1
Web Layout 101: How to Get the Most Out of the Top Right

Image 2
Web Layout 101: How to Get the Most Out of the Top Right

the palm-free image has an eye-catching horizontal line of the ocean that goes into the sun on the right. On the left 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;

5 new trends that will make your web designs even better in 2017
From the author: 2017 has already set the movement in some very interesting directions, as a result of which new trends in web design are starting to appear. This year…

...

The history of web design: from the Stone Age to the era of modern technology
From the author: the development of web design, like the Internet, in our country fell on the 90s of the last century. Prior to that, the computer age reigned, it…

...

The combination of colors in web design as an effective marketing tool
From the author: the web designer has in his arsenal many tools for interacting with users using color. The combination of colors in web design is an effective marketing tool,…

...

6 signs of failed logos
Any organization, large or small, needs a logo to distinguish and set unique attributes. However, not every business makes a normal logo. There are a number of common mistakes when…

...