Try the asymmetrical beauty in web design

With the continuous improvement of the aesthetic, more and more design has a kind of asymmetrical beauty. More and more designers will focus on the visual point of departure from the center of the visual position, through asymmetry to attract users attention, to create a special "visual path."

Too symmetrical design, can not be more natural and efficient organization of sidebar, navigation, and other interface elements, symmetrical design provides the space is often limited. Asymmetry, however, has a visual tension that transforms a particular sensation into a user's interest. Although asymmetric design is a bit difficult in layout adjustment, it can also create a feeling of imbalance. However, using asymmetric design instead of symmetrical design, the advantages outweigh the disadvantages and provide more "possibility". This is also a web designer's way to become a master will try the style, may wish now we come to understand first.

Below, we have collected some very convincing asymmetric design website, compared to the symmetrical design, these websites have the better information communication, the more personalized characteristic.

　　Examples of asymmetric web design

The Enterprise

Jagged lines and asymmetrical shapes, with gorgeous colors, this asymmetric design of the visual impact of the greater than the symmetry of the design.

Sjobygda

The designer uses the background image very skillfully, uses the asymmetric design, lets the background function become stronger, presents to the user the magnificent visual content.

Rock Werchter

Very clever, very interesting. On the basis of traditional layout, the width of each column in the yellow column on the right is slightly changed.

Mediascop

Graceful, dry and tidy, the designer uses the avenue to the simple design, slightly adds the asymmetry, this flat website design unusual, provides a kind of ingenious visual contrast. The skewed sidebar and navigation elements are coordinated together, leaving more space for content.

Designblvd

Image and text combination, the main content, the style is very fresh and love. Although the layout is asymmetric, it can achieve a balance of about 4:6, even if the size of the thumbnail is different, the effect is amazing. Choose the bright color theme as well as the softer image, make people feel very elegant formal.

Artegence

The asymmetric design with the deviation Center is adopted, and the layout based on the grid line is used. The designer uses a simple rectangle to band content, preventing the information from overflowing.

Timberline

Unique style, the left side of the menu split very neatly, while slightly for the large image background added a little fun. The navigation design is very eclectic and worthy of reference. Although the visual asymmetry, but feel very much in place.

Valencia DMC

Luxurious texture, very interesting, only to change the transparency of some areas, you can achieve a perfect division. The text inside the transparent image feels very elegant.

Amplifiq

Polygon style, plastic black, honeycomb general image presentation means. Images and texts complement each other in a seemingly Shong sense.

Sarasota Web Design

The image with the detonation effect, flattened polygon, has a sense of rhythm on the image, even if asymmetrical, it is beautiful.

Senador Volstead

Asymmetric design is used here to create visual focus, highlighting the site's banners and buttons.

Jose Guizar

The columns are unique and look asymmetrical, but they have a strong sense of design.

The Touch Agency

Content-oriented front page design, and those who have a strong visual impact of design, this design focus on a kind of peaceful, quiet visual sense. Designers borrow the traditional three-column layout, but the width is different, asymmetrical sense arises.

Osito

Smooth shiny Guide page, image text two points world, and the text occupies more, so that can highlight slogans and logos.

Eggsquis

Two-column layout, one column narrow and simple-navigation bar, another column occupies two-thirds, image scroll bar.

Alcyon

Logo segmentation, translucent clear opposition opaque, just two equal parts.

Stylist Christel Winther

This is completely asymmetric design, but the visual is very arresting, people feel very balanced. This is a good way to display visual collections and photos, and to impress users.

M4id

The artwork sets the page layout tightly and tiles the feeling. Each piece of the width is different, highlighting the site's logo.

Reinast

Asymmetrical, divided into two pieces.

Flavorit

The strong asymmetric design plays a role in dividing text and highlighting the advantages of application.

Kinetik

Big picture background, and the gorgeous segmentation on the right brings a fine sense of detail.

Panna ' en akka ' s.

segmentation, leaving the text part of the space, and the picture is very close, so the visual appeal is very strong.

　Conclusion

There are many ways to create asymmetric designs. Text, columns, images, white, polygons can have this effect.

In your free project, think more, practice more, and find harmony in asymmetry. When your work is praised, let the customer at the moment of light, will be more than the rules of superiority and sense of achievement.