WordPress website design principles #3 – work with the F-layout

Share Article

Website Design is one of my most requested WordPress training topics during my WordPress training sessions.

With that in mind, I have created 10 articles covering key design and website design principles you should consider during your web design project. Each can be easily worked into WordPress to enhance your visitor's experience with compelling and individual design.

The third in a set of 10 articles focusing on web design principles to incorporate into your WordPress website design project.

#3 Work with the F-layout
What does this mean in relation to WordPress website design?

Over time viewing patterns can appear, particularly with the left to right reading. People (in the west) generally look from left to right. You can make this work to your advantage on your website.

What does the F-layout look like?

This is a heat-map example provided by Crazy Egg.  Crazy Egg is a SaaS website optimisation tracking company. They add their tool to your website and provide you with data about visitors actions around your website. The image below is one of their example F-pattern (F-layout) examples. You can see the pattern where visitors are looking when they land on a page and start to read.

heatmap from Crazy Egg

Making natural patterns work to your advantage

WordPress Website Design Training Newcastle

Keeping the above layout in mind you can adapt your design to place your most important messages, images and buttons in the direct line of sight of your visitors. Where they look first. Work your design to help this natural flow and action.

WordPress Website Design Training Newcastle

The Takeaway

Carefully considering the positioning of elements to maximise the visitor's natural ready style will improve conversions

If you need WordPress web design training or someone to design your WordPress pages, get in touch for an initial chat.

WordPress Training Newcastle

Belinda White | WordPress Consultant | WordPress Trainer

Image credits: Unsplash and Adobe Stock

FREE Guide. How to get started with your WordPress Website.

Your FREE PDF guide to get you up and running with your *WordPress website - fast!

Something went wrong. Please check your entries and try again.
Specialist WordPress Training Newcastle

*For self-hosted WordPress websites.

Belinda White | WP North East

Belinda White, WordPress Training Consultant. WordPress Training, WordPress SEO Training - Creative Director at Arttia Creative Limited. Creative designer with over 20 years experience in the UK web and design profession.

More Posts - Twitter