Web Design Layouts: A (or F) to Z

There are specific ways to layout a website that work with no problem. F and Z. It has to do with the way our eyes track the screen (or a book) and how we digest information on that website. Let's pre-empt this conversation with one thing: Not everybody uses these layouts, or even cares to consult them when designing websites - this is typically why some websites fail in terms of conversions and sales. Here's why:

The F Layout
This layout has to do with Search Engines, Blogs and informational pages like your 'About Page' or 'Services Page'. Take a look at this handy image provided by WebTuts. If you notice, the 'hot spots' are in the general shape of an 'F'. This is where our eyes are looking the most - in the upper left hand corner, down the sides, and somewhat floating into the middle of the page.

If you think about it; most blogs and search engines are setup this way; headlines, images and branding are located right in the upper lefthand corner of websites, and calls to action are located towards the top of the page on the righthand side. Interesting how that happens! What are the most important parts of an 'F' shaped web layout?

1. The Logo: This is typically in the upper left corner of the design. It's important to place it there for branding and consistency.
2. Navigation Bar: The links across the top of the page are the 2nd thing users in an 'F' layout will look at. Make your navigation simple to use and understand!
3. A Heading or 'Mission Statement': this can be a page to page mission statement that follows the user from page to page instead of only being on the home page.
4. Headlines and/or Images: if you're on a blog, you want some visual interest and a catchy headline. Put your best imagery next to your headline to entice users to click on the post.
5. Call to Action: On the right side of the page, right next to your top-most blog, you'll find a call to action. See below for an example:

The Z Layout

The 'Z' layout is somewhat similar to the 'F' layout, but it applies more to business websites rather than blogs and interior pages. This layout is great for home pages or landing pages. Take a look at a 'Z' layout with points given on how a user's eye tracks a page:

Everybody is similar in this instance: we look at the logo, we look at the navigation bar, and then our eyes cross over the large image or video, then we get the meat of the page: information and what to do with that information. But what's really here?

1. A Logo: This draws attention to the first point the eye hits, much like the 'F' layout.
2. Navigation/Sign Up: An alternatively colored navigation button at point #2 will draw the users attention to the upper right hand corner.
3. Icons: Encourage the user to 'scan' your titles instead of just bypassing them.
4. Huge Call to Action: this is important! Finish your 'Z' layout with a nice big call to action. This can be a sign up, a contact us, a 'Check This Out!' - anything you're offering that has to do with the services they've just read about.

Why do these two layouts work though? As Western Readers scan pages from left to right, top to bottom, this is a comfortable way to read a web page - and creating those points on a page will make your website all the more easy to read and act on.