University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Visual Hierarchy in Web Layouts

Descriptive Alt Text
This image shows two popular web layouts called the Z and F layouts

Z-Pattern Layout

The Z-Pattern layout is typically used on landing pages. This is due to it best being used on pages that have minimal text in order to draw attention to a small number of elements like logos, navigation, and main images.

Descriptive Alt Text
This image shows the order and areas a human looks at a Z-pattern layout web page

Naturally, your eyes start in the top left corner and make their way across the screen to the top right. From here, if done correctly, you should be drawn to the bottom left. Finally, you should make your way across the screen again ending in the bottom right.

F-Pattern Layout

The F-Pattern layout is typically used on text heavy pages like articles or blogs. This layout is interesting because the user repeatedly goes back to the left hand side to look for the next element, similar to starting a new line when reading.

Descriptive Alt Text
This image shows the order and areas a human looks at a F-pattern layout web page

Using this layout, your eyes start in the top left and make their way horizontally across the top of the screen. They then go down a level on the left hand side to find the next element to then read horizontally across the screen again. This is a very natural layout that is kind to the human eye.