Like web designers, we follow a lot of design models and layout principles: grid, vertical unity, F-Layout, Z-Layout, rule of thirds, golden ratios. If we pay attention to these principles we will have an intuitive and attractive website. Now let us look at the simple division of a website into two equal parts.
While this may seem a bit dumb and obvious in mind, this basic layout can be very effective. Our eyes tend to follow a zig-zag movement while scanning a web page. And 90% of web traffic coming to your website goes unnoticed into your page in detail.
Today, Vanntechs Website Design in Montreal will introduce to you how to divide interfaces in web design.
Eye movements and the Zig-Zag principle
Yahoo! From the eye tracking study:
- Customers will go through the main components of a website to determine what the website is about to make the customer decide to stay with your website.
- They make a decision to stay on the website or not for at least three seconds.
- If they decide to stay, they will pay the most attention to the content in the upper part of the screen.
Web users are always in a hurry. They have other things to do and what you would expect from your customers to stay with your website to appreciate the beauty and aesthetics of your website. Although designing a good website is important, is your website enough to inspire a visitor to click on the “Buy Now” or “Know More” buttons?
We cannot blame them. Always the same, when you want to find something? You do a quick Google search and then you quickly open the first web pages or rather go through all of them. A website that leaves an impression and has value to customers, they will decide to return to this page to read information about the website.
What is the purpose of glancing and skimming? To get the maximum information you can get about that website. If somehow when we design the website we have a scientific web layout, we will be able to get the attention of many customers. From observations at sitemaps of different websites, I have made a popular trend.
You will notice that you can easily see the red spots. Strangely, from our experience, we can say that eyes are easy to see in straight lines rather than angles. Note that I’m talking about the initial stages of web surfing, not paying attention to every detail of the website.
Design isn’t just what it looks like and feels like. Design is how it works. – Steve Jobs
For example, you can use a halftone design to efficiently preview your catalog position, or important features of your product or service, to keep visitors noticed. quickly. Finally, encourage them to stay longer on your website. The result is a 1/2 ratio that’s better for you and better for the user experience.
Read more: What makes an effective website design?
Apply split interface for a design
In fact, it’s easy to divide your website into two equal parts! Equal sections work better because the Zig-Zag ends are linked more or less towards the center of the halves. Place important elements in the Zig-Zag endpoints of your website. This is the basic concept of halving or 1/2-Layout.
Recently, I have been working on a landing page. I experimented with different layouts, but none of the tests worked well. I tried everything – grid, golden ratio, F-Layout. Until I simply split the page into two equal parts. The solution is very simple! It looks professional, neat, and reminds me of the very important fact that simplicity isn’t bad. Have you seen the new Microsoft logo?
Simplicity is the ultimate sophistication. – Leonardo Da Vinci
First, the word “Coming Soon” is a red ribbon at the top of the page that gets noticed. Next, the logo is seen. Now, after looking at the Zig-Zag rules I mentioned earlier, the visitor will look at the image slider on the right half and finally the e-mail.
The above layout is divided into two halves, but it doesn’t follow the “zig-zag” principle that I mentioned earlier.
While it may seem like a good composition and is easy on the eye, the composition looks rather dull after the first two elements. When you try to flip through the layout above, your eyes will see the first image and then move on to the text of the second item. Since accessing the web you have no intention of reading at this stage and of course you move on to some other point, or leave the site entirely!
What if you made a change as simple as this?
Much more interesting, right? Simply swapping the positions of the text and images of each category increases the visual interest so that consistency doesn’t make your guests bored. You can also set an action button according to the Zig-Zag pattern.
The “Contact Me” button will now have a greater chance of getting noticed and clicked on by your visitors.
Design is a plan to arrange elements in such a way that it is best for the realization of a particular purpose. – Charles Eames
Example of how to design website
The split layout has been applied with Facebook’s new Timeline design.
This is the site for the Apple iPad mini, see how easy it is to link to each image as well as the unique feature of the iPad mini?
Titles are provided to organize images, text, navigation, popular images, etc. at the top of the WEB page.
- Navigation functions (Menu)
- Introductory text
The logo is an important element to show corporate identity and branding. On the web page, create logo data in GIF or PNG format. The image quality of a logo is crucial to creating a beautiful website. It is recommended to use the original logo data, not the logo data scanned from your business card or category. Additionally, the background of the logo is often transparent, and in the case of placing a logo on the front side of white color and placing a logo on the front side of a dark color, the logo design process is also different.
The navigation (menu) is an important factor in determining the website’s functionality. In the past, button-shaped navigation menus have been created, but in recent Web design trends, it is often presented in plain text. The reason for this is increased smartphone access and a simple text menu that is easier to operate than buttons, allowing for narrow screen operation.
If you still have any questions about website design for online stores, menu items, product page, please contact Vanntechs Web Design today!