The web design field is a very complex and in-depth field that is highly influenced by psychology. Many web designers won’t admit that how the user goes about your website is what really defines it. To design the perfect page layout you have to think of the user. How will the user view your website? We can only influence them so much. First thing’s first: what can a better page layout give?
Improved conversion rates
Lower bounce rates
Increased page viewing time
If you thought it was all about aesthetics, then you’re partially correct. Aesthetics make your website more attractive, but the perfect page layout is designed more along the lines of user experience than anything else.
Page Layout Examples
To start, we should look at the most common page layouts and talk about each of them. A web page, especially the home page, should be engaging, interesting, and informative. In other words, the user should want to continue, but is learning something as they move along. There are a variety of different ways to lay out a page, from a simple block image format, to an image + description method. As you may have guessed, the second is the most common. Here is the basic header image and description layout:
Top left is our logo, followed by the company name, motto, slogan, or what you do. Underneath we find our header image followed by a block of text and a sidebar with varying links and images. To be plain, this layout is not horrible. It follows all of our general guidelines for designing a website, but it is unlikely to keep users for very long.
Using Images and Headers
Most users are naturally drawn to images and large text. We are skimmers, not readers, so the block of text can likely be shortened to have a large header with the key point(s) and if the user wants to learn more, they can find your bullet points or images that explain it further. For example:
Now users can scan it. Two important notes: the top right is now just the slogan or motto, but the services provided should be moved to the bullet point section as something you offer. But is this really the best page layout? No. As a matter of fact, it’s far from it! It’s missing a few key elements.
Where Do Users Look First?
Studies have shown that the average user only looks at:
Isolated Images and Text
It’s an uncontrollable instinct to look at the pictures when they dominate the page, but smaller images are still looked at more than text. To users, text is generally filler for the “useful” parts of the page. If they decide they like your page and want to know more, they will continue on to other pages and maybe even read the text. So, let’s move onto some real-life examples, why they look the way they do, and why they are successful:
The online retail giant Amazon has arguably the largest selection of products for sale on the Web. The home page acts like a YouTube home page: it focuses on getting you in to find the products you want quickly. If you don’t know what you want, there is a list of categories on the left to get you started. If you do, there’s that long search option in the middle near the top of the page. As is standard, your account options and cart are in the upper-right-hand corner. Theoretically they could use this rough template:
After all, why else are you on Amazon except to check on your account or buy something? The rest of it is really advertisement space for Amazon to do with as it pleases. In this case, they advertise their Kindle Fire HD. It works for one reason: it’s simple.
Simpler Designs are Better
Throughout the web design field articles are becoming more focused on 2 topics:
Simplistic and easy-to-use sites are turning into more than your average trend…they are turning into a requirement. Many designers are turning to images to meet it. Here are 2 more examples of simplistic web page layouts:
Code Academy is a site that teaches you basics of various programming languages for free. Their site doesn’t waste much time telling you what they do. If you landed on this page, you’ll know if what you’re looking for is here within seconds.
Only NY’s home page is straight-forward, attractive, and simple. Guess what they sell? You guessed it: city sporting goods (New York City, to be more specific). They don’t even need a header because their image combines the heading text with an image.
Unique and Uncommon Layouts
If there’s any category you want to fall under, it’s your own. Designing your own unique layout or even an uncommon layout is a great idea. A unique layout will give users something new to look at and if it’s interactive, they will be inclined to browse around, even if it’s just out of curiosity. One example of an uncommon layout would be the block layout, which looks something like this:
The company name is clearly labeled at the top, with a logo if their name isn’t the logo. The rest of the page is laid out in block format. The sidebar may even stick to the side, or a different navigation bar may appear at the top and stick when scrolling down. This page layout style oftentimes uses interactivity as a key element to guiding the user through the website. The bottom block is almost always a call to action, such as the contact page.
Here’s a real-life example:
Every website should find a page layout that works for them and stick to it. I recommend looking at others in your industry and make a quick sketch of what layout they use and how you can improve upon them. Afterwards, make your own page layout from scratch and then start designing a test page in Photoshop. Key factors to keep in mind:
Keep it simple
Make it responsive
Give it a unique factor to stand out
Make it interactive
Although there is no “perfect page layout”, there are guidelines for you to make the best page layout possible for your site. If there were a “one size fits all” layout, we’d all be using it!