Any web designer will agree that the appearance of a website layout design can be as important as the content, and just like good (or bad) content, it can make or break a website. The best content will appear mediocre at best when the presentation is lacking.
And when it comes to presentation, there are several layers to it. There’s the resources a designer has to work with for one. Graphics, audio, fonts… they all feature into a great finished product, and their quality can make a huge difference. However, before you need to decide WHAT to put, you need to figure out WHERE to put it.
In other words, layout designing. How to set up the basic layout design of the page is one of the most important aspects to designing a site. Now, the client may well have specific wishes that they don’t want to deviate from, but more often than not, they’ll pay more attention to images, videos and the like, and less to the actual page layout design. There is a certain ‘standard’ of what is currently considered trendy, and the go-to layout.
There is no gold standard though, but the web portrays a clear image of what’s the most popular layout design of web pages at any given time. A horizontal menu on the top, collapsible on mobiles, potentially even on desktops. A full-screen banner on the homepage, with a video background and a strapline. A footer with secondary navigation and social links, and a clean and elegant look for the content.
Gone are the bright and garish colours of the 90s, the tightly crowded menus and copyright footers of the 00s and even the somewhat more recent gif and animation abuse. That isn’t to say that those things aren’t still around, our use of them has simply adapted.
The current trend goes towards simplifying as many aspects of the page layout as possible.
That’s all good and well, but sometimes deviating from the standard is by far the better option. Not only will the results be unique (which can be a good or bad thing), but you may discover the next trend!
A very popular item to be changed is the menu. Plenty of layouts have a menu, usually on the left-hand side, styled as a horizontal list. This, even though it’s been around for a while, never became all that popular. Despite that, it’s still a viable alternative to across the top menus.
You are reading the DebugMe blog. DebugMe supports the design, development and testing phase of web sites and web applications by enabling visual feedback.
Register now to have free access to the tool for life
Horizontal menus across the bottom are also an option. However, it’s rather unpopular as this one in particular practically begs for browser compatibility issues. The lazy alternative is a menu that is collapsible on all screen sizes rather than just on a phone. While it can be well done, this often creates a slight impression of laziness. If you want to do this, we’re not saying don’t…but make sure it’s extra-well executed.
And as for the content part of your page? Thankfully we have long since abandoned frames and the plethora of disadvantages they bring with them. If you are still using frames, this article probably isn’t for you, and neither is this decade.
The basic idea of it – putting content into boxes of sorts so they can easily be re-arranged, for responsiveness purposes. It’s no secret that any website now needs to be built responsively, and nothing is more important here than layout design. Whatever decisions you make, they need to work on both mobiles, tablets and desktops. Therefore, you need to put your content into bite-sized pieces that you can easily realign for smaller devices.
As far as the layout of web pages goes, pictures and graphic elements are very useful to break up long sections of text – but unless you are creating a gallery, don’t use more than a 50:50 ratio here. Images should never outweigh text, nor should the text take up all of the available space. Don’t be shy to leave empty spaces either. While a naked page won’t look good, space, padding and margins are some of your most powerful tools when creating a page layout.
Solid columns of content are also long-dead. Try instead to play with aligning the content. Simply moving parts of your content a little to one side can turn a plain page into something people will actually enjoy looking at!
Slightly more difficult, but often well worth it for the visual effect, is to use non-rectangular boxes for your content. Since rectangles are the ‘default’ shape in web design, we often don’t think to change it. Functionally, there is nothing wrong with them, even visually they are not unpleasant to look at. If you want a more than ‘alright’ web page, try something different; Ovals, circles or diamonds for example.
You probably don’t want to get too fancy – it’s doubtful visitors will get the outline of that one country in Europe you like to visit, nor will they understand why it is behind a block of text that has nothing to do with Europe.
Children’s websites often use shapes like dinosaurs – simple but distinct – to visually enhance their pages. Now, we don’t recommend you use dinosaurs for a business client (unless they ask for them), but try something like a triangle, or even something like a building – let your client’s business inspire you (but stay away from stars. They’ve been done too often).
As for when and where to use this sort of shape rather than generic blocks? You don’t want to overwhelm the visitors of your page, so for every 3 ‘normal’ sections, you can add one to spice it up.
There is one more thing that has become a staple of trendy layouts of web pages: symmetry. Now, a little while ago I recommended to align things more unevenly, this is actually not as much of a contradiction as you may think. Symmetry is always pleasant to the human eye, web design is certainly no exception here. Don’t be shy when experimenting with fancier designs.
Good page layout design is more than about just filling a page with content, or even fitting all the content onto a page. Ultimately, your website needs to be interesting and engage visitors, while also satisfying your clients requirements. Don’t hesitate to use new elements, or change what you are used to. You will find things that work – and things that don’t.
The makers of DebugMe hope that you like this post and would love it if you follow us on Twitter. We are tweeting about web design, UI/UX and development related topics multiple times a day. DebugMe is an issue tracking, project management and screenshot tool for every website project. Get visual feedback right away and solve front-end problems faster. Try it now for free.