There is a science to web page layouts. If you are just throwing content down on a page, you (or more accurately your visitors) will be disappointed.
The good news is you don’t have to be a super well trained web designer to be able to follow some basic best practices.
If you are laying out a web page on your own, there are a few things you may want to consider. First, and often what I find to be the most important concept, is F.
No, I am not talking about the literal letter, I am talking about the shape. Many eye tracking studies have been done that show users typically look at content (any content, website or otherwise) in the shape of an F.
Think about how you read a book. You start at the top left corner and go right. Once you get to the end of the first line, you move downward. This is where our habit of looking at websites in an “F” shape comes from. Knowing this will help you lay out your most important information.
Placing content for the well-trained eye
The top left corner is the most important, with other information along the top being seen as well. As you go down the page, users will tend to prefer the left side more than the right. In other words, if you have something important, like a “Sign Up” button, the bottom right is not the place to put it.
Bullet points, phrases, lists are what readers like
Next, I would encourage you to think about the page in sections. Today, users don’t mind scrolling (mainly due to mobile, which we will get to soon), but visually they need to be able to understand how the information is broken up. This can be done in several ways.
You could add text headings, images, change background colors, or just a bar/line in between. And when you put these sections together, try to be light on the text. Users don’t like to read a lot. Use short, simple paragraphs if you have to, but otherwise try bullet points, phrases, or other forms of lists.
Also a word about text, specifically text style.
I know all kinds of texts and colors are “fun,” but when put together they are not fun to the eyes.
Here are a few rules I like to follow
- Never use more than two fonts: One font for headlines and one font for general text … and never mix the two. Pick legible fonts that are clean and easy to read.
- Don’t get fancy with color – shades of gray are the safest. The color you pick should have very good contrast with the background color (and background colors should be soft and light).
- Limit your usage of different font sizes, especially fonts that are close to each other. Having headlines be noticeably bigger than the text is OK, but be careful about using too many sizes elsewhere.
- Finally, consider mobile. If you expect your users to use your site on a mobile phone, the layout will be different. Even if the page is just simple text, it will look different on a phone.
For example, if you love the way the site looks with one line headlines, you may be surprised to find out on mobile those headlines become two or three, which are harder for the eye to distinguish and read.
Boxes may get more narrow and tall. Content that was side-by-side may get stacked (or even worse stay side-by-side but be super skinny).
It is never a bad idea to check how your layout is coming along in mobile as you work on laying out your content.
