1024programmer Photoshop Split Layout Secrets of Web Design – Web Templates

Split Layout Secrets of Web Design – Web Templates

Blue Design: With the rapid development of the Internet, various website interface designs emerge in endlessly. In such an environment, how do users quickly choose website design in the vast ocean of the Internet? How can web designers make their website design quickly attract further attention from users after a quick glance? The author of this article introduces a simple page layout method to users – split layout. This layout method attempts to give users a friendly browsing experience when they first view the page. asWeb designTeacher, we can refer to itui designThere are many examples and layout principles, such as: gridding, vertical consistency, F-shaped layout, Z-shaped layout, rule of thirds, golden section, etc. Focusing on these principles will bring visual appeal and functionality to your designs – now let’s look at a simple way to divide a page into two halves.

Although it may sound a bit silly at first, But this basic layout works really well. When we scan a page, our eyes often move along a zigzag pattern. And if the user’s eyes move along a horizontal line – like in a Z-shaped layout, then he/she will be focused (or trying to focus). But since 90% of users who first come to your website will not pay close attention to your page, making your design “browsing-friendly” will definitely get you good returns!

Secrets of split layout in web design

Eye movement and zigzag

From Yahoo’s eye tracking research, we can find:

·People scan the main part of the page to determine what kind of website it is and whether they want to stay there for a while.
·Users make decisions about the page in just three seconds
·If users decide to stay on the page, they will pay the most attention to the content at the top of the screen.

Website users are always in a hurry and have other things to do, so don’t expect them to stop and appreciate the aesthetics of your site. While good aesthetic design is important, it doesn’t exactly inspire visitors to take action—to click a “Buy Now” or “Learn More” button.

We can’t blame these users. Always remember, when you want to query something? You will rush to the first search result on Google and scan it quickly, or rather, skim the entire page. Most of the time, you scroll to the bottom of the page without even noticing. After this stage, if you think the page is worth your time, you’ll go back to the top and actually put the effort into reading and paying attention.

So, what is the purpose of the user’s initial browsing? It’s about capturing as much information as possible when you first scan the page. If we “formulate” this browsing pattern in some way, we should be able to get more visitors’ attention. By looking at heat maps across a large number of websites, I came across a common trend.

Secrets of split layout in web design

You’ll notice in the image above that you can easily see those red dots. Oddly enough, empirically, our eyes follow horizontal lines more easily than diagonal lines—because we all read in straight lines. But please note that I am talking about the initial browsing stage, not the stage when you pay attention to every detail of the website.

Whenever you are not very focused, your visual flow will naturally appear in a zigzag pattern. Unless there is a higher contrast or more important element that “calls” to you, your eyes will follow the pattern above. You’ll also notice that this pattern looks very similar to the F-shape layout, and the user will pause briefly at the red endpoint.

Your brain takes snapshots at these “pause points.” In a zigzag layout, by arranging some elements containing important information at these “pause points”, the user’s brain will naturally absorb more details and connect these zigzag endpoints that exist as independent entities.

“Design is not just how it looks or feels, but how it works. – Steve Jobs”

For example, you can use this feature of the half-split layout to effectively lay out a preview of your portfolio or the important features of your product or service, so that it quickly attracts the attention of website visitors. This ultimately motivates users to stay on your site longer and convinces them to take action. In this case, what will be the result? It will bring a higher conversion rate to your website, and at the same time bring a better user experience to your visitors.

Apply split layout to your design

The secret of split layout in web design

Making your designs and layouts zigzag-compatible is easy. In fact, it’s as easy as dividing your page into two equal parts! Bisection works well because the endpoints of the zigzag more or less align to the center of the two halves. Used superimposed, they can echo each other very well. Place important elements at the red endpoints of the zigzag in your web page. This is the basic idea behind split layout or 1/2 layout.

Recently, I worked on designing a “coming soon” Coming” landing page. I tried various layouts but none of them worked to my satisfaction. I tried almost every one – like rasterization, golden ratio, F-shape layout, etc. But it was only when I bisected the page that I felt a strong “Eureka!” moment. The solution is so simple! It looks elegant and neat, and reminds me of an important fact: simplicity is not necessarily a bad thing. Have you seen Microsoft’s new logo?

“Simplicity is the ultimate sophistication. ——Leonardo da Vinci”

The secret of split layout in web design

You can see how the two equal parts create a nice visual hierarchy. First, the “coming soon” red ribbon at the top is eye-catching. Secondly, the logo is also very distinctive. Now, following the zigzag I mentioned earlier, the visitor sees the image slider on the right half, and finally, reaches the email submission form.

Now let’s take a look, how useful can split layout be in a web designer’s portfolio page? The purpose of designing a portfolio page is to quickly showcase the main body of your work to potential customers. With the industry now so saturated and customers having so many choices, why should they pay you? Therefore, a great first impression will play a decisive role in the direction of your career. Let’s see, what can we do?

Secrets of split layout in web design

The layout above is divided into two equal parts, but does not follow the zigzag principle I mentioned earlier.

While it looks like a nice layout and is easy to look at, it feels very dull and rigid after looking at the first two elements. Breaking up the visual flow and adding visual interest will change it up. Not only that, but when you try to navigate the layout above, your eyes will first see the first image and then jump to the second block of text. However, your visitors have no intention of reading at this stage, so they will jump to other points or leave your page entirely!

But if you make such a simple What about adjustments?

The secret of split layout in web design

It gets more lively and interesting, right? Simply swap the positions of text and images in each item to add visual vividness so that consistency doesn’t bore your users. At the same time, you can also place a call-to-action button behind the zigzag model.

Secrets of split layout in web design

This “Contact Me” button will have a greater chance of being noticed and clicked by more of your users (why not run an A/B test to double-check?)

“Design is a plan that will All elements are best organized to accomplish a specific goal. – Charles Eames”

Example of effective split layout

With the design of Facebook’s new timeline , the split layout has attracted everyone’s attention

. Notice how easily your eyes flow from one post to another.

The secret of split layout in web design

Apple also uses a split layout. Here’s the iPad mini page, and see how easily it ties together each image showing off the different features of the iPad mini. It feels good!

The secret of split layout in web design

Many people believe that Microsoft has laid out many new methods for its recent rebranding. The picture below is their Surface information page, which also uses a split layout.

Secrets of split layout in web design

Stacey is a minimalist portrayal of the 1/2 layout

The secret of split layout in web design

I like Quora’s homepage very much, split style Could the layout be demonstrated simpler?

The secret of split layout in web design

Consumerbarometer.com takes the zigzag to the next level with animation and gives it a triangular variation.

The secret of split layout in web design

Summary:

So, what did we learn?

·Users can make a judgment about your page in only three seconds
·In order to attract visitors’ attention and reduce page bounce rate, we should try to make our page layout “browsing friendly”
·Divide your layout right in the center and adjust important elements to the endpoints of the zigzag to ensure your visitors remember more details after browsing

This article is just a friendly reminder that we should not forget to use basic layout and basic design methods when designing web pages. In fact, if applied properly, this will improve your conversion rates

Blue Design: With the rapid development of the Internet, various website interface designs emerge in endlessly. In such an environment, how do users quickly choose website design in the vast ocean of the Internet? How can web designers make their website design quickly attract further attention from users after a quick glance? The author of this article introduces a simple page layout method to users – split layout. This layout method attempts to give users a friendly browsing experience when they first view the page. asWeb designTeacher, we can refer to itui designThere are many examples and layout principles, such as: grid, vertical consistency, F-shaped layout, Z layout, the rule of thirds, the golden section, and more. Focusing on these principles will bring visual appeal and functionality to your designs—now let’s look at a simple way to divide your page into two equal parts.

Although it may sound a bit silly at first, But this basic layout works really well. When we scan a page, our eyes often move along a zigzag pattern. And if the user’s eyes move along a horizontal line – like in a Z-shaped layout, then he/she will be focused (or trying to focus). But since 90% of users who first come to your website will not pay close attention to your page, making your design “browsing-friendly” will definitely get you good returns!

Secrets of split layout in web design

Eye movement and zigzag

From Yahoo’s eye tracking research, we can find:

·People scan the main part of the page to determine what kind of website it is and whether they want to stay there for a while.
·Users make decisions about the page in just three seconds
·If users decide to stay on the page, they will pay the most attention to the content at the top of the screen.

Website users are always in a hurry and have other things to do, so don’t expect them to stop and appreciate the aesthetics of your site. While good aesthetic design is important, it doesn’t exactly inspire visitors to take action—to click a “Buy Now” or “Learn More” button.

We can’t blame these users. Always remember, when you want to query something? You will rush to the first search result on Google and scan it quickly, or rather, skim the entire page. Most of the time, you scroll to the bottom of the page without even noticing. After this stage, if you think the page is worth your time, you’ll go back to the top and actually put the effort into reading and paying attention.

So, what is the purpose of the user’s initial browsing? It’s about capturing as much information as possible when you first scan the page. If we “formulate” this browsing pattern in some way, we should be able to get more visitors’ attention. By looking at heat maps across a large number of websites, I came across a common trend.

The secret of split layout in web design

You’ll notice in the image above that you can easily see those red dots. Oddly enough, empirically, our eyes follow horizontal lines more easily than diagonal lines—because we all read in straight lines. But please note that I am talking about the initial browsing stage, not the stage when you pay attention to every detail of the website.

Whenever you are not very focused, your visual flow will naturally appear in a zigzag pattern. Unless there is a higher contrast or more important element that “calls” to you, your eyes will follow the pattern above. You will also notice that this pattern looks very similar to the F-shape layout.��And the user will stay briefly at the red endpoint.

Your brain takes snapshots at these “pause points.” In a zigzag layout, by arranging some elements containing important information at these “pause points”, the user’s brain will naturally absorb more details and connect these zigzag endpoints that exist as independent entities.

“Design is not just how it looks or feels, but how it works. – Steve Jobs”

For example, you can use this feature of the half-split layout to effectively lay out a preview of your portfolio or the important features of your product or service, so that it quickly attracts the attention of website visitors. This ultimately motivates users to stay on your site longer and convinces them to take action. In this case, what will be the result? It will bring a higher conversion rate to your website, and at the same time bring a better user experience to your visitors.

Apply split layout to your design

The secret of split layout in web design

Making your designs and layouts zigzag-compatible is easy. In fact, it’s as easy as dividing your page into two equal parts! Bisection works well because the endpoints of the zigzag more or less align to the center of the two halves. Used superimposed, they can echo each other very well. Place important elements at the red endpoints of the zigzag in your web page. This is the basic idea behind split layout or 1/2 layout.

Recently, I worked on designing a “coming soon” Coming” landing page. I tried various layouts but none of them worked to my satisfaction. I tried almost every one – like rasterization, golden ratio, F-shape layout, etc. But it was only when I bisected the page that I felt a strong “Eureka!” moment. The solution is so simple! It looks elegant and neat, and reminds me of an important fact: simplicity is not necessarily a bad thing. Have you seen Microsoft’s new logo?

“Simplicity is the ultimate sophistication. ——Leonardo da Vinci”

The secret of split layout in web design

You can see how the two equal parts create a nice visual hierarchy. First, the “coming soon” red ribbon at the top is eye-catching. Secondly, the logo is also very distinctive. Now, following the zigzag I mentioned earlier, the visitor sees the image slider on the right half, and finally, reaches the email submission form.

Now let’s take a look, how useful can split layout be in a web designer’s portfolio page? The purpose of designing a portfolio page is to quickly showcase the main body of your work to potential customers. With the industry now so saturated and customers having so many choices, why should they pay you? Therefore, a great first impression will play a decisive role in the direction of your career. Let’s see, what can we do?

Secrets of split layout in web design

The layout above is divided into two equal parts, but does not follow the zigzag principle I mentioned earlier.

While it looks like a nice layout and is easy to look at, it feels very dull and rigid after looking at the first two elements. Breaking up the visual flow and adding visual interest will change it up. Not only that, but when you try to navigate the layout above, your eyes will first see the first image and then jump to the second block of text. However, your visitors have no intention of reading at this stage, so they will jump to other points or leave your page entirely!

But if you make such a simple What about adjustments?

The secret of split layout in web design

It gets more lively and interesting, right? Simply swap the positions of text and images in each item to add visual vividness so that consistency doesn’t bore your users. At the same time, you can also place a call-to-action button behind the zigzag model.

Secrets of split layout in web design

This “Contact Me” button will have a greater chance of being noticed and clicked by more of your users (why not run an A/B test to double-check?)

“Design is a plan that will All elements are best organized to accomplish a specific goal. – Charles Eames”

Example of effective split layout

With the design of Facebook’s new timeline , the split layout has attracted everyone’s attention

. Notice how easily your eyes flow from one post to another.

The secret of split layout in web design

Apple also uses a split layout. Here’s the iPad mini page, and see how easily it ties together each image showing off the different features of the iPad mini. It feels good!

The secret of split layout in web design

Many people believe that Microsoft has laid out many new methods for its recent rebranding. The picture below is their Surface information page, which also uses a split layout.

Secrets of split layout in web design

Stacey is a minimalist portrayal of the 1/2 layout

The secret of split layout in web design

I like Quora’s homepage very much, split style Could the layout be demonstrated simpler?

The secret of split layout in web design

Consumerbarometer.com takes the zigzag to the next level with animation and gives it a triangular variation.

The secret of split layout in web design

Summary:

So, what did we learn?

·Users can make a judgment about your page in only three seconds
·In order to attract visitors’ attention and reduce page bounce rate, we should try to make our page layout “browsing friendly”
·Divide your layout right in the center and adjust important elements to the endpoints of the zigzag to ensure your visitors remember more details after browsing

This article is just a friendly reminder that we should not forget to use basic layout and basic design methods when designing web pages. In fact, if applied properly, this will improve your conversion rates

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/802601

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索