Visual Hierarchy


Visual Hierarchy is a very important concept when it comes to setting out a website in a clear and effective manor. A page’s layout should guide a user like an invisible hand, highlighting the most important parts of a page and taking the user through any information in the correct order. The human eye is very predictable so designers can base their layouts off a number of patterns.

The F Pattern

Typically for text-heavy websites like blogs, the F-Pattern comes from the reader first scanning a vertical line down the left side of the text looking for keywords or points of interest in the paragraph’s initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines.

The Z Pattern

Z-Pattern scanning occurs on pages that are not centered on the text. The reader first scans a horizontal line across the top of the page, whether because of the menu bar, or simply out of a habit of reading left-to-right from the top. When the eye reaches the end, it shoots down and left (again based on the reading habit), and repeats a horizontal search on the lower part of the page.