To teach you to use the three-point photography method to optimize web design

For photographers, the three-point approach to framing is a familiar concept. Although it is a fascinating concept, almost no one will take a three-point approach when it comes to web design. Of course, this does not mean that it is impossible, but that this cross field is rarely noticed.

So in today's article I want to explain the three-point method and share some skills and experience in applying it to web design. But the three-point method does not necessarily suit everyone, after all, there are many techniques and methods to improve the design and design process. However, as a basic layout rules, the three-point method is definitely worth learning, and it is also quite practical in web design.

　　Why three points?

You might ask, why do you have to have three points? Where did this strange setting come from? Fortunately, I am happy to tell you that this thing has nothing to do with mathematical theorems or complex logical reasoning, and there is not much need to delve into the source of this thing excessively.

The three-point method is only derived from traditional art and is currently used in photography in particular. Vertical and horizontal three points, the entire layout is divided into 9 average blocks, transverse longitudinal each has 2 dividing lines. The three-part law stipulates that in order to attract the viewer's attention as much as possible, the visual center of gravity or the most attractive thing should be as close as possible to the four lines at the intersection.

You can find the perfect example in this article in Wdd. Often asymmetric layouts can make the whole page more enjoyable, but that doesn't mean you have to use asymmetrical layout at all times, because in some cases symmetrical layouts are more interesting, and at this point, the three-point rule doesn't mean much.

In photography, the ideal goal is a unique perspective to capture some of the attractive scenes, while the asymmetric layout makes some elements of the field of vision more prominent than others, and these prominent elements are usually pressed at the previous four intersection points.

So back to the question of web design, the three-point method and web design in the end is how to combine it? Just as the layout of the three-point method of photography can attract viewers, web pages that conform to the three-point approach can also give viewers a more focused focus.

　Understanding the grid of the three-point method

Four lines, four focus, nine blocks, this is the grid framework under the three-way method. Many of the homepage of the site are designed to conform to the F-style layout or z-style layout, users have been accustomed to this way of browsing, the usual visual starting point is the upper left corner, which is the designer to pay attention to the first block.

This means that the intersection at the top left should overlap with an important part of the page. The intersection point is not necessarily to place the link or the picture (of course, it must be put or not), it is more like a tag, to differentiate the layout of an important node. For example, the starting point of the page title can overlap, the entire title and horizontal first line, and then placed under the title banner map and so on.

It is noteworthy that the use of the three-point method to analyze web design is more a user experience design concept, rather than a complete design guidelines. So, if you want to use this concept to analyze the Web page design, it is recommended to open the Web page in the browser after the screenshot analysis processing, the full page is too long, and the user is always browsing based on the screen rather than the whole page, so there is no need to use the entire page, screenshots enough If the design is still in the prototype stage, then it is recommended that you refer to the screen scale to intercept the analysis.

Therefore, you should proceed from the user's browsing habits, combined with the three-point method for analysis and optimization. When users are browsing the web and subconsciously noticing the key parts and using the three-point method to design the page, you'll find that the 3x3 grid can be a great inspiration for your design.

　　Small adjustments rather than heavy design

To understand the use of the three-way grid, you need to understand the more important point: the three-point approach is not an impeccable web design architecture, but a layout testing framework for fine-tuning existing designs.

There are too many free grid systems to help you design Web pages, such as 960GS, but the three-way nine-Sudoku grid system is a help you fine-tune the entire page layout, such as adjusting the height of the navigation bar, the logo to move closer or farther.

Thankfully, this test method is practical and simple, and does not pick software. You can draw a screenshot in the PS inside the dotted line to analyze, such as GIMP such as open source freeware can easily help you fix, and then you can also use the marker pen on the screen to draw a nine Sudoku to analyze it ... (saying that when playing CS when blind sniper also used such a stupid way ~) Anyway can help you build nine Sudoku analysis tools can take you to the right design direction.

Complete the first draft, test with a three-point method, and then move on to the next step. Over time, you'll know more about how to put visual elements in the right place.

　　Dealing with symmetry

Sometimes it is useful to use symmetric elements appropriately in a page. But it would be a bit too blind to use symmetrical design anywhere in the design. In fact, in the field of art and photography, the use of asymmetric layout is still dominant, the size of the relative, near and far, more pleasing, it also proves that the unbalanced visual design to attract our attention.

In fact, in the layout design, there are similar principles and norms. For example, when you use a large banner graph at the top of a page, it usually takes up about 2/3 of the page, and similarly, the font size of the title and text needs to be sized, and the reader will naturally notice a larger banner, title, and subtitle. The size contrast is on the one hand, on the other hand also need to consider the picture and the text position on the page. The simple use of the three-point method does not guarantee the full composition, the nine Sudoku placed on the page, the appropriate adjustment of the elements of the page position and the center, will be much better.

The advantage of the three-point method is that it can be compatible with asymmetric layouts, or it can be used to optimize symmetrical layouts. Two kinds of layout flexible collocation, the use of three points to highlight the focus of the page, but also grasp the balance of the page, so as to create excellent web pages.

　The last Thought

The vast majority of art forms do not have fixed rules, but there are rules can be referred to, design is based on these laws and constantly improve. Grasp the law like the three-point law, understand the purpose of this law, in-depth understanding, even if not deliberately used, it will be from your design naturally show, form the second instinct. This time, you have the potential to break the rules!

Although there is a fundamental difference between design and art, the two are not opposites. It is true that according to the rules can be designed more in line with the public taste of the work, but break the rules, full of personality and artistic sense of the design works is not impressive?