Diagram of Web Design

The most intuitive feeling of a webpage is its webpage framework and structure, just like the main framework and form of a building, you may not remember what colors or materials the Oriental Pearl Tower and the Eiffel Tower use to paint the exterior walls, but I think you must remember what shapes they look like. Similarly, the diagram in the web design is enough to influence the feelings of the whole website. Although the metaphor is not very appropriate, in terms of the composition of the web page, A few changes and simple innovations may be able to get twice the result with half the effort, so that the visual experience of the website is refreshing.

How to make the building beautiful? The following is an example of graphic skills that can get twice the result with half the effort in web design. In my personal opinion, I hope to inspire others.

[1] solid foundation-the power of ry.

Ry often acts as a beam in a page and is also the most commonly used bearer panel for webpage content. These images can be properly matched and effectively interspersed, so that pages can be more appealing and entertaining in addition to information transmission.

The rounded rectangle of this website is cleverly integrated with the information module. In addition to creating a rhythmic shape of the website subject, this enhances the page's attention and does not seem boring or monotonous.

The combination of the circle and the elliptical shape carries the carousel advertisement and important information, which makes the whole page both bright and concise.

It is also a combination of rounded rectangles. The intersection of color-filled images not only displays important information but also outlines the style of the entire website.

The vertical large rounded rectangle and lines outline the entire picture. All kinds of information are embedded in each shape, so that they do not appear messy and complement each other.

More examples:

[2] Rivet on steel bars-Cracked Materials

Materials are well applied and often play a very important role. Materials can also be used as a main element in the diagram in addition to embellishment pages and themes, these materials are usually broken out as links to connect pages, making the page structure more stable, so it is called "rivet ".

Materials appear to be randomly placed. In fact, they are intentionally placed on two Diagonal Points on the left and the right, commonly known as dark lines, the picture of the Information Content in the lower-left corner and the login window in the upper-right corner form another diagonal line. The two form an X structure, and the four materials play a fixed and pressure axis, which is stable and beautiful.

The leap is more on the page, and the goggles are mounted on the navigation bar. The use of the two materials makes the whole page both relevant to the subject and vivid, and the two sections 1 and 2 are interspersed in the figure, the two sections of the goggles link the three and four sections. The visual sensory continuation makes the Page Context clear and have a sense of rhythm.

The page is very simple. In addition to the basic shape of the graphic architecture, there are several flowers that act as "rivets, the material is organically integrated into the box and built on the whole page. The illusion that flowers grow from within the circular cave to pages is simple and layered.

The combination of the material on this page and the main frame is ingenious. The ripple of milk and static chocolate and cup are combined with the content on the page header, this makes the entire page clear and consistent.

More examples:

[3] creating the beauty of the tower-oblique visual tension

The oblique angle of the Leaning Tower of Pisa is the sinking of geological desertification or the deliberate intention of the designer. So far, some people are still arguing. Aside from the controversy, the beauty of the leaning tower seems to make many people want to come to its side to see this leaning beauty, coincidentally, the most beautiful planet in the vast universe, that is, the earth, is leaning toward the sun. There seems to be a natural tension when the topic is pulling far, diagonal lines, or oblique objects. This is also true in web design. What we see here is the visual tension, which is an extension of the visual mind rather than physical. When the page is too average and the screen is mediocre, it is particularly important to break the average of the entire body by breaking the average. There are many ways to break the average, and diagonal lines seem to be a common trick in web design, try again and again.

The diagonal line tension makes the entire page dynamic and extensible. It can be used as a modifier for the page and can be used as the information carrying module, the organic integration of the two does not make people feel that the title is not easy to identify or hinder reading, and vice versa, it makes the whole page more formal and expressive.

The use of diagonal lines combined with material and circular interspersed, so that the entire page is dynamic, while the line of sight is brought to the materials and titles as the diagonal lines move toward, the tension also makes these lines play a very good visual guiding role.

The information component formed by the oblique line layout and the picture formed by the Right oblique line cutting form the complementary form, and form a comparison of the rhythm of the actual and sparse, in this way, the entire screen has both the tension and motion caused by diagonal lines and the overall stability and balance.

More examples:

The above briefly introduces a step in web design: The diagram lists some common and effective methods. In addition, there are many other methods. I hope you can add them, but I believe that no matter the composition, color, or rhythm, and so on. They always focus on one thing in common, that is, to make the page beautiful and vivid on the premise of smooth information transmission. With this principle, I don't need a lot of techniques and skills to design a page, but a heart that never stops exploring beauty and creating beauty.