For photographers, the three-step shooting layout is a very familiar concept. Although it is a fascinating concept, almost no one will take the three-point method as an example when designing web pages. Of course, this does not mean that it is impossible, but this cross category thing is rarely noticed.
Therefore, in today's article, I will explain the three-point method and share some skills and experience in applying it to web design. However, dichotomy may not be suitable for everyone. There are many techniques and methods to promote design and design process. However, as a basic layout rule, trisection is certainly worth learning and is also quite applicable in web page design.
Why three points?
Maybe you will ask, why do you have to get three points? Where does 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 no need to go too deep into the origin of this thing.
The trichotomy only comes from traditional art and is currently used especially in photography. Vertical and horizontal, the whole layout is divided into 9 average blocks, and there are 2 boundaries in horizontal and vertical directions. The trichotomy stipulates that in order to attract the attention of the viewer, the visual center of gravity or the most attractive thing, it should be as close as possible to the intersection of the four lines.
You can find a good example in this article of WDD. In many cases, asymmetric layout can make all pages more interesting, but this does not mean that asymmetric layout should always be used, because in some places, symmetric layout will be more interesting, but at this time, the three-point rule is not meaningful.
When photographing, the most imaginative purpose is to capture some attractive scenes from a strange perspective, and the asymmetric layout makes some elements in the field of vision more prominent than other elements, and these prominent elements usually press on the four intersections mentioned above.
So, back to the question of web design, how does the trilogy approach and web design combine together? Just as the layout under the trichotomy in photography can attract the audience, the webpage conforming to the trichotomy can also make the readers pay more attention to the focused content.
Know the trisection grid
Four lines, four key points and nine blocks are the grid framework under the trisection method. The home page design of many websites conforms to the F-type layout or Z-type layout, and users have been accustomed to this way of reading. Usually, the visual starting point is in the upper left corner, which is the first block that designers should pay attention to.
This means that the intersection of the upper left corner should overlap some of the main content of the page. There is no need to place links or pictures at intersections (certainly not essential). It is more like a sign to distinguish a main node of the layout. For example, the starting point of the page title can overlap it, all titles are flush with the first horizontal line, and then banner graphics are placed below the title.
It is worth noting that the trichotomy analysis of the application of web design is more about the concept of user experience design than a complete design criterion. Therefore, if you want to use this concept to analyze web page design, it is recommended to analyze and process the screenshots after opening the web page in the reader. The complete web page is too long. Users always read based on the screen, rather than looking at the whole page at once. It does not need to apply all the pages. Screenshots are enough. If the design is still in the prototype stage, it is recommended to refer to the screen scale for interception and analysis.
Therefore, you should start from the user's reading habits and combine the three-point method for analysis and optimization. When reading the web page, users will subconsciously notice the crux of the problem and accurately use the three-point method to design the page. You will find that the 3 × 3 grid can bring you very inspiring designs.
Minor adjustments rather than redesign
After you know how to apply the trisection grid, you need to be clear about the more important point: the trisection brings not an impeccable web design framework, but a layout test framework that fine tunes the existing design.
There are too many free grid systems that can help you design web pages, such as 960GS, but the nine grid system based on the three-way method can help you slightly adjust the layout of web pages, such as adjusting the height of the navigation bar, moving the logo closer or farther.
Fortunately, this test method is very applicable and simple, and does not choose software. After the screenshot analysis, you can draw a dotted line in PS. Open source free software such as GIMP can also help you easily. If something goes wrong, you can draw a nine grid on the screen to analyze it (It is said that the blind sniper used such a stupid method when playing CS at the beginning~) Anyway, it can help you build a tool for nine grid analysis and find the accurate design direction.
Finish the first draft, test it with three-point method, and then go to the next step. As time goes by, you will know more clearly how to put the visual elements in the right place.
Symmetry of disposal
Sometimes, it is quite useful to apply symmetrical elements properly in a page. But if Web Design It is too blind to use symmetrical design everywhere. In fact, in the field of art and photography, the application of asymmetric layout still occupies the mainstream, because its relative size and suitable distance make it more pleasant, which also proves that unbalanced visual design can attract our attention more.
In fact, layout design has similar principles and specifications. For example, when you apply a large banner graphic at the top of the page, it usually occupies about 2/3 of the height of the page. Similarly, the font size of the title and text needs to be compared, and readers will naturally notice larger banner graphics, titles and subtitles. Size comparison is on the one hand, and on the other hand, the position of pictures and text on the page should be considered. The simple application of the trichotomy cannot guarantee the fullness of the composition. It will be much better to put the Jiugong grid on the page and adjust the position and center of the elements on the page appropriately.
The advantage of the trisection method is that it can be compatible with asymmetric layout, and can also be used to optimize symmetric layout. The two layouts are ingeniously matched, highlighting the key points of the page with the help of the three-point method, while also controlling the balance of the page, which can train excellent web pages.
Final thoughts
Most art situations have no fixed rules, but there are rules for reference, and the design is constantly improved on the basis of these rules. Control the law like a three-way rule, understand the goal of this rule, and deeply understand that even if it is not deliberately applied, it will naturally show up in your design, similar to the second instinct. At this time, you have the potential to break the rules!
Although there are basic differences between design and art, they are not antagonistic. Admittedly, according to the rules, you can design works that are more in line with people's tastes, but the design works that break the rules and are full of personality and artistic sense are not impressive.
