Use asymmetric design to create interesting web pages

Symmetry and asymmetry seem to be in the web design process, always have to do the trade-offs. Symmetrical harmony, and asymmetric differences, are the necessary means to create a good design. But symmetry is usually good, but asymmetry is not everyone's skill. Today's article, we talk about asymmetric design in web design ~

In most cases, asymmetrical design elements can stand out from other elements. These asymmetrical designs look more energetic, and they usually get more attention than others if they contain buttons, controls, or links.

Today we'll take a closer look at how Web designers can create memorable asymmetric designs by contrasting, leaving white, and laying out the layout. Asymmetric design is not all the difference in external contours, it can also be internal structural asymmetry. For example, in a gallery page, each picture has a thumbnail, one of which is slightly larger than the other thumbnail, and this difference instantly attracts the user's attention. In general, asymmetric design is ideal for attracting a user's attention to a particular region or element, which is an advantage.

Next, let's take a closer look at how comparisons, spacing, and layout create asymmetric effects.

　　Observable contrast

When you remove visual distractions from your field of vision, your users will quickly notice the subtle differences. At this point, you might appropriately add some effects, such as a gradient background, or even a jquery animation. This effect can make the page of the remaining one or two elements quickly let people notice.

The design of the official website of the famous Mac platform design software sketch is a good example, the dark and light-colored are accommodated in a unified page design. In the header, you'll notice two buttons: a dark "free trial" and a light-colored "buy Now". Interestingly, the two buttons are the same size and are on the same level, and are the same color. However, the "Buy free" button was designed to be a ghost button, with the overall and dark backgrounds almost integrated.

In this way, the "Buy Now" button with the light blue solid bottom is a stark contrast to the background, which is quite conspicuous. When you open the page, you will notice the purchase button, which is through a lot of white and reasonable contrast to create a visual guide.

Horizontal and vertical white leaves make the button and text separate, and the contrast of the button color is to make one of the buttons naturally highlighted. This design is very useful, and if you go on browsing, you will find that the footer uses a similar design:

In this case, the user can only submit their email, or choose to give up.

Sketch wants you to submit your email address as soon as you enter it, so the submit button is arranged very close to the input box. According to Fitt Law, the closer the distance between two elements, the faster the user browses and switches. It's worth noting that the color of the submit button is consistent with the previous asymmetric design, making it easy for you to notice and seduce you to click, which is exactly what sketch wants.

Asymmetric design makes it easier for users scanning the page to notice these carefully designed "highlighted" elements. As for the layout and white control, you can use a/b test to find the best ratio.

These experiences can be learned from the official website of Sketch:

• Contrast is not just a color contrast, it can also be the other controls on the page between the size of the contrast, position comparison

* in different layout and circumstances, white can be particularly conspicuous, can also be very inconspicuous

• The foil around the elements plays an important role in the visibility of other elements.

Symmetry and coordination can create a harmonious perception, while asymmetric design can attract the attention of users, the use of both should be balanced.

Stay white and guide your attention

The official website of procreate, the graphics tool on the IPad platform, is a different case. A simple glance at this page, the overall use of the page's dark color leveling, the overall layout is not complex, the use of the page element size is quite large.

The designer uses a single element on this oversized page to show how to paint. Screen capture, painting demo and functional introduction are each occupy a different block, leaving white text content and visual information to separate. In the use of text color, designers are also very careful: the part of the page header uses strong contrast color, while the body part uses the contrast relatively weak color.

By dividing the page into different blocks, the page naturally divides into different levels, each with a different style (full screen background, oversized typography, screenshots, etc.), which makes each block appear more independent.

However, it is important to remember that this design is not suitable for all websites, but it has become a popular design trend in the designer circles. If both design and execution are in place, it looks pretty good.

　Alternate layout

At first glance, the alternate layout of content and pictures may annoy the user, but if you control the spacing between the blocks, you can eliminate the discomfort of the z-shaped scan reading.

This style prompts visitors to read at their own pace, because the layout interrupts the continuity of information, but makes the user a master of the reading rhythm.

The Wunderlist page uses the asymmetric white, reasonable white design makes the layout seem interesting but not monotonous. With the Wunderlist layout, we can summarize this design pattern:

• The main purpose of asymmetric design is to guide users to focus on specific areas of the page

• Repeated use of asymmetric design creates symmetrical design

• The gap between the text and the control of the good can also become a model

• Regular white-keeping allows content browsing to be simpler and more predictable.