Secret of separated layout in web design

Blue-blue design:With the rapid development of the Internet, various websitesInterface DesignEndless stream. In this environment, how can users quickly select from the vast Internet ocean?Website Design?Webpage DesignHow can teachers make their ownWebsite DesignWhat will attract further attention from users immediately after a glance? This article introduces a simple page layout method-separated layout, which tries to give users a friendly browsing experience when they first look at the page.

AsWebpage DesignDivision, which we can referUidesignThere are many examples and layout principles, such as grid, vertical consistency, F-type layout, Z-type layout, three-point rule, golden division method, and so on. Focusing on these principles will bring visual appeal and functionality to your design-now let's look at a simple way to split pages into two equal points.

Although it sounds silly at the beginning, this basic layout does have a very good effect. When we look at a page, our line of sight is often moved along a ". If the user's line of sight is moving along a horizontal line, like in the Z-layout, then he/she will be very focused (or try to focus ). However, since 90% of users on your website do not pay close attention to your page at the beginning, making your design "friendly" will certainly get a good return!

Eye Movement and "Zhi"

From Yahoo's eye tracking research, we can find that:

· People view the main part of the page to determine what website it is and whether they want to stay here for a while.
· The user will make a decision on the page within three seconds
· If you decide to stay on the page, they will focus most on the content at the top of the screen.

Website users are always in a hurry. They have other things to do. You don't expect them to stop and enjoy the aesthetics of your website. Although good aesthetic design is very important, it does not fully inspire visitors to take actions-to click "Buy now" or "Learn More.

We cannot blame these users. Always remember, when you want to query something? You will be eager to open Google's first search result and read it quickly, or, more specifically, a rough view of the entire page. Most of the time, you scroll the mouse to the bottom of the page without even paying attention to it. After this phase, if you think this page is worth your time, you will go back to the top of the page and really spend the energy to read and follow.

So what is the purpose of the user's initial browsing? It is to capture as much information as possible when you first scan the page. If we "CREATE" This browsing mode in a certain way, we should be able to get the attention of more visitors. By observing the heat map of a large number of websites, I came up with a common trend.

In the middle, you will find that you can see those red points without any effort. The strange thing is that, in terms of experience, our line of sight can move more easily with the horizontal line than the diagonal line-because we all read along the straight line. However, please note that I am discussing the initial browsing phase, not when you focus on every detail of the website.

When you are not very focused, your visual flow is naturally displayed as a hyphen. Unless the contrast is higher or the more important element "calls" you, your sight will follow the pattern. You will also find that this mode looks very similar to the F-type layout, and users will have a short stop at the Red endpoint.

Your brain will generate snapshots at these pause points. In the glyph layout, some elements containing important information are arranged in these "pause points", so that the user's brain will naturally absorb more details, and connect these as the "-" endpoints of independent entities.

"Design is not just how it looks or feels, but how it works. -- Steve Jobs"

For example, you can use the semi-split layout feature to Effectively arrange the preview of your portfolio and the important features of your products or services, this will soon attract the attention of website visitors. In the end, it will inspire users to stay longer on your website and persuade them to take action. In this case, what will happen? This will bring a higher conversion rate to your website and a better user experience to visitors.

Apply the split layout to the design

It is very easy to make your design and layout compatible with the "" font. In fact, this is as simple as dividing your page into two equal parts! The result of the two equal points is very good, because the endpoint of the "of" is more or less aligned to the center of the two equal points. They can interact with each other. Place important elements in the red endpoint of the "" font on your webpage. This is the basic concept of split layout or 1/2 layout.

Recently, I am dedicated to designing a "Coming" login page. I tried multiple la S, but none of them satisfied me. I tried almost everything, such as Rasterization, golden division ratio, and F-type layout. But only when I divide the page into two equal points, there is a strong "I found!" in that moment !" . The solution is so simple! It looks elegant and neat, and reminds me of the important fact that simplicity is not necessarily a bad thing. Have you seen Microsoft's new logo?

"Simplicity is the ultimate complexity -- Leonardo da Vinci"

You can see how the two points reflect a good visual level. First, the "Coming" red ribbon on the top is very eye-catching. Second, the logo is also clear. Now, as I mentioned above, the visitor can see the picture slider on the right side and finally submit the form by email.

Now let's take a look at how the split layout can play a major role in the portfolio page of a web designer? The portfolio page is designed to quickly show potential customers the main part of your work. As the industry is so saturated, there are many choices for customers. Why do they pay for you? Therefore, a great first impression will play a decisive role in your career direction. Let's see what we can do?

The layout is divided into two equal points, but it does not follow the "it" principle I mentioned earlier.

Although it looks like a good layout and is easy to watch, it will make people feel very dull and rigid after reading the first two elements. Breaking this visual flow and adding visual fun will change. In addition, when you try to browse the above layout, your eyes will first see the first image and then jump to the second text. However, your visitors are not planning to read at this stage, so they will jump to other points or completely leave your page!

But what if you make such a simple adjustment?

It becomes more vivid and interesting, right? Simply swap text and image positions in each project to increase the visual vividness, so that this consistency will not make your users feel bored. At the same time, you can place a behavior call button behind the "it" model.

This "Contact Me" button will lead to A larger chance to be noticed and clicked by more users (why not perform A/B test to verify it again ?)

"Design is a plan that organizes all elements in the best way to accomplish a specific goal. -- Charles James"

Example of an effective split Layout

With the design of Facebook's new timeline, the split layout attracted the attention of everyone.

. Note that you can easily move from one post to another.

Apple also adopted a segmented layout. Here is the iPad mini page to see how easily it associates each image that shows different features of the iPad mini. It feels good!

Many people think that Microsoft has laid a lot of new ways for its recent brand remodeling, that is, their Surface information page, which also adopts a split layout.

Stacey is a simple portrayal of the 1/2 Layout

I like Quora's homepage very much. Can split layout be demonstrated to be simpler?

Consumerbarometer.com uses an animation to increase the "-" font to a new level and mutates the triangle.

Summary:

So what have we learned?

· The user can determine your page within three seconds
· To attract the attention of visitors and reduce the page bounce rate, we should try to make our page layout "browser friendly"
· Divide your layout in the center and adjust the important elements to the endpoint of the "" symbol to ensure that your visitors remember more details after browsing.

This article is just a good reminder that we should not forget to use the basic layout and basic design methods when designing webpages. In fact, if the application is appropriate, this will increase your conversion rate