Welcome back to this little series about setting up your website. Today’s article I will be covering how to Layout your Website. If you haven’t yet, check out my articles on how to buy your domain name, how to buy your website hosting, and how to connect the two. If you have completed your website set-up and are ready to design your layout, then you are in the right place.
What is a Website Layout?
A Website layout is the framework or structure of the website. It helps define and structure the information that will be seen by the website’s visitors/users. This includes the navigation of the site, and in most cases, will show the most important information at the top of the site.
Why does your Website’s layout matter?
So, why should it matter? Shouldn’t visitors scroll through the site anyway? Well, unfortunately for you the owner of the website, people usually make a judgement call about your site in the first 5 seconds. If you can’t convince them to read on, you will usually lose them forever.
Where do I put the most important information?
At the top. This is where you should be putting the most important information. If you think all the information about you and your company is important, then you will have a very cluttered page, which will ultimately turn away potential clients. This means that you, as the owner, must determine what the most important aspects of your company are. A good rule of thumb is answering three questions your user will have, which are:
- What it is that you do?
- How their life will be better for using your product or service?
- What is the next step for them to take?
If you can’t answer these questions, you will risk losing them as a potential client. Remember you only have 5 seconds to do this. Which is why the top section is usually referred to as the “Hero” section.
Lets visitors know what they do, and how it improves their lives.
No clear message of what this company does or how it helps them.
How do I keep users on my site?
This will all depend on the sections that follow the Hero section. Make it intuitive to find the important bits of information that your users need. This means where to find more about you and how to take the next steps. This will help influence your website’s layout.
The best thing is to create a user persona to cater and design for a specific user group. This means not taking a broad approach and try to please everyone. “If you design for everyone, you design for no one” a take on Meredith Hill’s quote “When you speak to everyone, you speak to no one”.
Be clear and specific on your web site’s layout and message.
What are some layout design best practices?
Most important information at the top has already been established. However, when it comes to the rest of the site, how should you structure it? I will cover some main and basic principles.
White Space (Negative Space)
White space allows the website’s layout to breathe, it gives users a break from the constant information. It also improves readability, making sections scannable. IfyoutrytoreadthisyouwillseewhatImean. If you can understand the previous sentence well done. You can see white space not being used well and is a great example of why you need to include it.
Font Size and Weight
The more important the information, the more it should stand out. This allows users to establish what they should know or read. Like white space, it helps people scan your website and can help them determine what you do and if they should go with you.
Sizing includes height, weight, transformations, color and style. Creating a hierarchy will let people know where to look. People tend to read whatever is biggest and most readable first, make sure to keep this in mind when creating your website’s layout.
The example for Blind above is a great example of hierarchy done well.
Here “Your Life” doesn’t stand out as much as “the best moments”, however it is the most readable bit of text. Which breaks up the message that is trying to be conveyed here.
Images play a large role in website design and creating a layout. They help break up the text, are a lot better at evoking emotions in users compared to text, and can help users scan your website.
When selecting images, quality over quantity, get rid of all those stock images of the people in meetings and looking very corporate. We know they aren’t real and have nothing to do with your company. Use images of people from your organization, or images of your products in real-life situations.
Here you can see an actual employee in their work environment, a lot more relatable compared to the images below.
I really suggest looking up color psychology as it will play a part in choosing your 1-3 base colors. This means not selecting all your favourite colors, it also means picking out colors that work well together. I personally use this color palette picker to help me when creating a palette for my client’s website.
On to designing the Layout
We’ve covered the basics and main principles. Picked out your colors, your typefaces/fonts, you have your content (images, text and any videos). Alright on to designing your website’s layout.
A few tips:
- Balance is key, you want to have a flow in your design.
- Include relevant images and icons.
- Have a hierarchy with your text.
- Use white space to help elements stand out and break up the sections.
- Have one clear overall message.
What to include after the Hero?
As above, the most important information at the top in the “Hero” section. Then what is next?
Well, not what you are expecting, the next most important thing isn’t your product’s features or a brief “about” section letting your users know how good you are, it isn’t what services you offer. The next most important thing is what outcomes will the user get from using your product or your service.
Tell a story of what problems the user faces. How your product or service will help them solve it, and then the outcome and what they have to do to get there.
Website layout examples
There are a few ways that you could layout your website, it really depends on what you are trying to achieve. But the tips above are relevant to all websites and should be used as guides to how you design your website.
Like the title says, this layout is very much like a magazine, most news and magazine websites will use this. In the example below, you can see that it uses a featured image. You can see below that it feels like a magazine or newspaper.
Split Screen Layout
You will find that most clothing companies will use this layout, usually to guide visitors into separate sections, like one for men’s and another for women’s. Or like below into two different product lines.
Featured Image Layout
A featured image layout is a frequently used design. It creates a great focal point which will express the topic of the page. Used mostly by freelancers, professionals and niche blogs. It can also be seen used by big companies like Nike, as below.
Grid is used for websites that have a large gallery, it could be blog posts, videos, or products. YouTube is the biggest user of this design. It makes it easier for users to browse and doesn’t draw attention to a specific element, letting users make the decision.
This layout is based on the standard Left-to-Right way of reading for western cultures, the user’s eye movements while scanning a page will create a “Z” shaped pattern. Moving left to right then down to the left and back to the right. Evernote uses this well in the example below.
When it comes to designing your website’s layout it really depends on what you want your website to do. You may want to combine a few of the above examples and create your own. I personally use a range of these types of layouts and frameworks when creating client websites.
I hope these things help you design your website’s layout. If you think I left anything out or you have any questions let me know in the comments or hit me up.