To be a pro at website design, you first need to understand how people look at sites. There are a few layouts used widely by web designers optimized for how a person’s eyepath, so it fits naturally with the way visitors’ eyes will scroll the page. Here are three split layouts to consider.
1. The Z-Layout
Image via Flickr by Gustavo de Cuhna Pimenta
This split design encourages the reader to scan the page in a Z format. The idea behind the Z- layout is placing the most important elements at the points of the Z, from left to right and down diagonally. In the example, viewers are first engaged by the company name. Then, by following the top of this Z web design from right to left, there are links for more information, a place where visitors can create an account, and a section with available downloads.
From the top right point of the Z, the visitor’s eyes fall diagonally to from right to left where clickable boxes are revealed with imagery so visitors connect with what’s behind the box if clicked. Finally, the visitor’s eyes gaze from the left bottom part of the Z go to the right where a call-to-action is placed, asking the visitor to “Download Now.”
This split layout website design also works for a continuous Z (essentially a zigzag) for longer pages. It’s important to remember here to include whatever elements a visitor would expect next and insert them at the correct points of the Z. This layout would be perfect for an online casino, for example, where the offered games could be inserted down the diagonal Z from top right to bottom left.
2. The Gutenberg Layout
Image via Flickr by KarenAtt516 This split website design uses a four-box design and assumes the visitor’s eyes will go from the top left to the top right and then perform a cascading scan from top left and down the page. According to Vanseo Design, the Gutenberg’s four distinct areas include. Primary optical area (located in the top/left)
- Strong fallow area (located in the top/right)
- Weak Fallow Area (located in the bottom/left)
- Terminal Area (located in the bottom/right)
Web pages using the Gutenberg layout tend to be those with a lot of information. They work according to the premise that visitors will start up the top left, and quickly scan all of the information from left to right in a cascading style, known as “axes of orientation.” With pages like this, there’s a lot of information, so it’s important to take advantage of each quadrant as the reader cascades down the page.
3. The F-Layout
This website layout encourages the viewer to scan the page in an F pattern staring at the top left to the top right heading back to the top left and cascading back and forth — but as they do, the scan length decrease from left to right.
Right away, visitors will notice who the website belongs to (on top left), and to the top right are boxes full of colorful text and graphics to engage the visitor. The F-layout is best used for pages where you want the reader to scan the content naturally, using the top-to-bottom, left-to-right reading behavior that people have been accustomed to their entire lives. To design websites like a pro, first consider what is most important on a page and then choose the right split layout for optimal viewing.