So, without any further ado, let’s build custom F-patterns and Z-patterns from scratch.
F-Pattern Design Using HTML and CSS
According to the F-pattern, when a visitor starts reading a page, their eye movement starts from the top-left corner and scans the page until they get to something engaging. If your website has a lot of content, the F-pattern is the way to go.
HTML
General CSS (common for both patterns)
Since we’re building both F and Z-patterns, this CSS is common to both of them.
Styling with CSS
Now, apply CSS specifically for creating the F-pattern.
Output:
As you can see, the first things your eyes tend to go to are the heading and sub-heading. Afterward, you might scan the bullet points and see the Call to Action (CTA) buttons. The image acts as a complimentary, differentiating element. Arranging a website using the F-pattern ensures that visitors go through a specific visual order landing at the CTA button.
Z-Pattern Design Using HTML and CSS
The Z-pattern mimics standard eye movement for scanning items. It works best for pages with minimal content. The idea is to form a zig-zag visual hierarchy to lead visitors through a page. Visitors start scanning at the top-left and sweep across horizontally. As they naturally scan towards the bottom-left, they form a diagonal line and scan across horizontally, following a Z-pattern.
Build a Z-pattern from scratch:
HTML
Styling with CSS
The easiest way to create Z-patterns is by using a CSS grid with two columns.
Note: Don’t forget to include the general.css file mentioned in the F-pattern section (it’s common to both patterns.)
Output:
As you can see, the Z-pattern is a perfect fit for websites with light content. The visual hierarchy built by the Z-pattern and proper white-spacing are strong enough to persuade the website visitors towards action.
Improve User-Experience Using F and Z-Patterns
Learning users’ behavior and predicting the next move requires heavy research, but it ultimately pays off. Check out some popular websites and study how they’ve set it up to lead visitors through the page. You’ll probably find F and Z-patterns more than once.
While these patterns are great for improving user-experience, they aren’t the only method. User-centered design could be the solution you need to cut back on user complaints and improve positive reviews.
