Creating unbalanced balances: Using asymmetric design in web design

Asymmetric design techniques can be very intuitive and interesting and create different focus. Here are some inspiring examples and tips on how to use asymmetric design.

Asymmetry is only lack of symmetry, but asymmetry does not lack balance and harmony.

Asymmetric and symmetrical design can create a sense of vigor and tension, but also a sense of harmony depends on the proportion of use. Although most people tend to think of symmetry first, because it is a very common natural phenomenon--think of the appearance of a person or an animal's face, but asymmetry is a natural phenomenon, but it is a different way, for example, people tend to appear in the left or right Dafench.

Asymmetric design is very widely used. Often used to create a confused or confusing but full of aesthetic and artistic skills. Asymmetry can emphasize motion or action, which is the great advantage of having the most commonly used to create an energy or focus on the screen. Some sites that do not use asymmetric or symmetric design incorrectly or incorrectly can cause confusing elements of the site.

Asymmetric design Use

What kind of project is suitable for asymmetric design? Simply put, almost everything can be used.

When performing a good project, adding some large contrast and dimension elements, it is often the key to the structure to create a good balance. If you don't want your page to have an unbalanced feeling, pay special attention to arranging elements, matching tones of items, and so on, these balances or not. In web design, most of the symmetrical term refers to the horizontal symmetry on the website or the asymmetrical part of the Web site where scrolling occurs. But asymmetrical design can have a sense of balance or movement. The most commonly used asymmetric design techniques combine elements that are symmetrical. Think of a site, such as a 350-pixel sidebar, where you can quickly finish creating an asymmetric profile, because the main part of the site and the sidebar are different widths, and the photos often deviate from the central position, creating an asymmetry of the elements.

Images and text

One way to create a balance is to use different elements, such as images and text. This is a common technique used by many designers. The key technique is how you combine the two. Often just need a picture and a few words, to express feelings of the picture and text (font) must be complementary, mutual echoes.

The key element of this technique is the seamless collaboration between text and pictures, how to make both text and pictures express the same topic, and say the same thing? How do you tightly link text to pictures? How to measure the emphasis and balance between text and pictures?

Image and Space

Space is a sense of weight or movement that is created with an important element (picture or text). In the empty space and the fullness of the page to leave the white part, to see the object in the image pointed out the direction, whether there is a face to the left to see? This creates a sense of movement; Does the user have a peak from left to right on the page? That orientation points the visitor's eyes from the bottom to the top. Another way to create an asymmetry is the visible area of the hidden part, the sidebar and simple color blocks can do this. (usually in the use of this concept, the overall look is asymmetric, but this design makes every part of the site has a distinct symmetry)

Color

Asymmetry can also be expressed in color (color blocks). Sharp contrasting tones--white and black, for example--are located in opposite positions on the color wheel, feeling out of balance or even confusion. Asymmetric color patterns are also a kind of nature, they also have a strange sense of balance. In many species, male animal color patterns will be almost perfectly symmetrical while females are few. (People think this is a natural phenomenon in nature, this is to help "more attractive" men to lure the predator, so that the predator away from women and offspring) the balanced color scheme is based on the principle of the color wheel, combined with a full selection of colors, in addition to the classic color combinations, Create a less symmetrical and harmonious color combination: The background color is contrasted with the picture or text combined on the background; the beige backdrop and the purple combination of the neon lights. These are the less used combination pairs. Another common trick is to create an asymmetric design by creating a product (with many colors) in combination with another product that contains little or no color.

Conclusion

Asymmetric design can be very complex and tedious, but it is also very beautiful. I like asymmetric design creates an almost unpredictable sense of balance and full of surprises, and the beauty of asymmetrical design has completely reached the balance design. The best design is to keep the balance between powerful pictures and text, creating a unique eye on the screen to track beauty.

Translation: Codrops

Reprint reserved Copyright: Feel only front end, this article address: http://www.jiawin.com/asymmetry-web-design/, reprint please indicate the copyright as well as this article address, thank you.