Introducing the F-Layout
How To Make a Website Layout ! The F-Layout relies upon various eyetracking studies for it’s foundational concept. These scientific studies show that web surfers read the screen in an “F” pattern – seeing the top, upper left corner and left sides of the screen most… only occasionally taking glances towards the right side of the screen. These eyetracking studies argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design.
Let’s take a moment to turn this pattern into a bare bones wire frame:
How To Make a Website Layout ! Take a moment to notice a few key behavioral patterns; Reading is largely done the same way that a book is read: top to bottom, left to right; Sidebar content is often dismissed below the “fold”, and usually is only scanned briefly. The bulk of the attention stays within the main content column where, in this case, the article listing is located.
A close inspection reveals a visual hierarchy that you might logically expect:
- The brand-mark and navigation occupy the visitor’s attention first and foremost.
- Within the contest structure, images receive the greatest level of attention.
- Headlines come next.
- Text appears to be scanned, not read thoroughly.
Now, let’s overlay the original F-layout to see how we match up:
Here some more Examples to clear the principle :