How to simply design a compelling page banner

How to design a page banner

Designing a compelling page banner can be very simple, but we're thinking about how to allocate the area.

Click on the image to see the big picture

In a simple Web page, the top banner is the most important visual element. In many blog pages, it is even the only visual element. So its role can be said to be quite large. It must be able to match the style of the site and convey visual information. It has to be a sight to let people know what kind of site it belongs to and what style it is. This banner must also be able to provide a simple and straightforward navigation link. All of this can be easily achieved by dividing the banner into three areas: each region has its own function, and we have to unify these three areas visually, so that the three have similarities and coordination. Take a look at the examples we have presented in this article.

Start from dividing space:

The width of a page banner spans the entire page, and the height is quite narrow. Divide it into three areas: name, picture, and navigation links. Then we design it separately.

How to assign a region: Generally, we put the name on the top left, and the navigation column is placed below. The allocation of its space should be prudent. The proportional size of the space is based on the specific name (long or short) and the picture, it is difficult to say what the best proportion. However, you should avoid dividing the upper space into two equal parts, because dividing into two equal portions puts your attention on the layout rather than on the content. It is better to use asymmetric distribution effect.

Find an expressive Picture:

A beautiful picture is the key to designing a beautiful banner. After we find the photos, we have to look carefully at which part of the captured photos can most effectively convey the relevant information. In practice you will find that it is not difficult to discover this.

One point to remember when intercepting a photo is to intercept as much as possible of the part that conveys the most information. In the picture above the idyllic landscape, there are trees, grasses, mountains, there is sunshine--take a look at the part we intercepted, all of these major picture elements are included, which is what we need, although the area is much smaller than the original image, but after the interception of the picture to convey the message has not diminished, but also strengthened in the sense of the level. The picture has a rich area of light and dark (see black and white pictures), forming near, medium and far three kinds of visual effects.