Creating an asymmetric balance: Asymmetric design skills in web design

Document directory

• Conclusion

Asymmetry is the opposite of symmetry, but it does not mean that asymmetry lacks balance and harmony. Asymmetric design technology can be visually fascinating and create different importance differences for the content. This article shares a group of encouraging examples and describes how to use asymmetric Design on webpages.

You may also like

• 10 sets of exquisite free website background management system templates
• 35 pieces of three-dimensional and dynamic parallax scrolling Effect
• 13 sets of exquisite Web application icon Materials
• 10 exquisite HTML5 commercial website design cases
• 30 outstanding enterprise Website Design Works
• 25 excellent overseas single-page Website Design Works

 

Most people think of symmetry as a natural phenomenon. In fact, asymmetry is also a natural phenomenon. For example, people are dominant left-handed or right-handed. Asymmetric design is also widely used and often used to highlight the focus, so that people's sight is naturally attracted to the focus.

Application of asymmetric Design

What types of projects can benefit from asymmetric design? In short, almost all projects are supported. If this technology can be used properly, it will enhance the project's contrast and difference. The key is to organize and arrange elements to achieve an asymmetric balance.

In webpage design, symmetry usually refers to horizontal symmetry, while asymmetry refers to the content of the first screen, that is, the part that you can see without dragging the scroll bar. The most common asymmetric design is to combine symmetric elements and re-arrange them. Below are several examples of asymmetric design.

 

 

 

 

Asymmetric Design of images and texts

One of the ways to balance asymmetric design is to pair different elements, suchImages and text. This is a common technology that many designers are using.

The secret of this technology lies in how you combine the two. All you need is an image and a few words.Complementary. One of the key elements of this technology is how to link text and images. Does text and images mean the same thing? Are they associated? Can the font size reflect the image weight?

 

 

 

Mxsky blogs focus on front-end development technologies, display the latest HTML5 and CSS3 applications, share practical jQuery plug-ins, and recommend web design cases.

 

 

 

Asymmetric Design of images and spaces

White spaces are usually used with some heavy elements (images or text) to create a sense of weight or motion. Empty spaces and the fullness of other parts of the page form a strongComparison.

Another way to create asymmetry is to block the partVisible Area. Using sidebar and color block is a simple way to do this. When using this technique, although such a design has a clear sense of symmetry in the part of the website, it is asymmetrical in general.

 

 

 

 

Application of color in asymmetric Design

Asymmetry can also be created through the use of colors. DistinctiveContrast toneSuch as white and black or other opposite colors on the color palette, the human may feel out of balance.

Asymmetric color patterns naturally have a strange sense of balance. In many species, almost all male animals haveCompletely SymmetricalBut few female (this natural phenomenon is considered a natural choice for biological evolution .) Another common method is to create a project with a variety of colors, while a project with a variety of colors contains little or no color at all.

 

 

Conclusion

Asymmetric design may be tricky, but successful design is also very beautiful. I like asymmetric design and the unexpected balance in asymmetric design. The best asymmetric design is to work with appropriate images and text to create a balance and create a unique line of sight movement path from the image to the text on the screen.

You may also like

 

• 25 exquisite webpage works with full screen photos as the background
• 30 unique overseas outstanding website design cases
• Amazing foreign creative 404 error page design
• 16 exquisite HTML5 portfolio website design cases
• 10 sets of exquisite free website background management system templates

 

Link: Create a deviation center balance: Use asymmetry in web design

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources