Top 4 Tips For Creating a Great Website Layout

Blog > Top 4 Tips For Creating a Great Website Layout

Posted By Create

Tags: website design

The way you choose to lay out your website can make a big difference to its overall success.

Layout helps to determine how beautiful the site looks, how easy the content is to read and the quality of the experience that users have when visiting your site.

Here we'll be looking at some important things to consider when deciding how you want the content of your site to be displayed.

 

Less Is More

A good website layout is user friendly, it's easy for users to navigate and creates a better experience for them. If your website has too much clutter it will make your website feel like an endless maze.

Imagine your website as a blank canvas, and only add components based on necessity. You'll be surprised how tricky it is to keep it simple, but this really helps to eliminate unwarranted clutter, giving your more vital, important content a louder voice.

Layout Blog Screenshot 1

The Use of Text

When choosing the position of text on your site, avoid aligning the text to the centre of the site, especially if it's a long paragraph. Centred text is very tricky to read because the starting position of each line is different, forcing the reader to work harder to find where each line begins to continue reading. Numbered and bulleted lists should almost always be left-aligned as well, to allow users to quickly scan the list.

Use the alignment that makes the most sense for the design and that effectively communicates your message. If you're not sure, get some friends to read your text when it's aligned differently, and see what their responses are to left, centre and right-aligned text.

Layout Blog Screenshot 2

The Use of Image

Image content is a powerful way to make an impression on a web page. Instead of presenting a site full of text-based content, which can be quite dry, use images to liven it up.

Using the correct size of image is very important to the layout of your website. If you want an image to be the full body width of your website I'd recommend using an image 780 pixels wide. It's best not to go above this size as it could make your website look broken, depending on which sort of device it's viewed on. The height can be more flexible as this shouldn't cause a problem.

If you want to use text effectively with images without it looking too squashed, use the floating style below to make this work. The image width probably shouldn't be wider than 350 pixels. This is because you don’t want to squash the text into a narrow space as it will look cramped. Use tables to help you position your text and images.

Layout Blog Screenshot 3

If you choose to add a side column to your site try not to add too many widgets, add-ons and boxes as this will make it look busy and cluttered. The option for having two side columns is available but this doesn't mean you have to use them both. Remember, less is often more. 

Filling the Footer

When adding content to your site footer, to avoid filling it up too much, try not to include more than the following:

  • Terms & Conditions
  • Privacy & Cookies policy
  • Links to your social media channels
  • Contact Link
  • Address and Phone Number
  • Company logo

Avoid using much more than this as it will make the footer crowed.

Layout Blog Screenshot 4

 

Layout, design and content are crucial elements in building an attractive website, so be sure to try different things until you're confident you've built a site that's as easy on the eye as it is to navigate. The chances are that if you've built a simple, attractive site, you will have had to group pages and content together in an easy-to-navigate way in order to do so. If you feel it would help, try designing the layout of your site on paper first.

I hope you've enjoyed this latest installment in the Design Tips series. 

Why not check out the other Design Tips articles: 


Blog Search


Search

Get In The Loop


Receive business tips and web news direct to your inbox.