Basic Layout Theory for Web Design

Why layout is important

The way that content is laid out on a website has a huge impact on usability and aesthetics, meaning that it can often be the difference between a site that users keeping coming back to or leave as soon as they see the homepage. In this article, I will be going into what makes a great layout. It is written for people without an extensive design background (like myself) and has been broken down into the topics that I consider when creating a layout for my websites. Here is a quick overview:

• Consistency
• Alignment
• Semantics
• Familiarity
• Responsiveness

Consistency

Content that persists when the user transitions between page of your site should stay at the same position. On most sites, this is navigational content such as a navigation bar or a footer. You don't want to confuse the user by moving it around when they change between pages! You also want to keep the spacing between content as consistent as possible to increase the aesthetic appeal of the site. In some cases, it can make sense to have a constant height and width for certain types of content i.e. a blog might benefit from having all their article previews of a certain dimension.

Alignment

Content should always be pixel perfectly aligned - without good alignment, the website is not satisfying to look at. Even a slight offset on items that feel like they should be on the same vertical or horizontal axis can distract your users and ruin the aesthetics of the site. The best way to prevent bad alignments is by using a grid system, which not only makes it easier to create and design a layout, but also enforces pixel perfect design.

Semantics

Layout can, whether consciously or subconsciously, convey a lot about your site and its content. Users are usually looking for information when they access a page. Position the content that you think users are most likely to be looking for top and center - this is where your most important and/or relevant content should be. Make sure that promotional or monetization content (ads, social media links, etc.) don't take up too much space, otherwise you risk seeming pushy or greedy.

Familiarity

This is not suggesting that you shouldn't experiment, but realize that using an established layout for the type of site you are designing has many benefits. It can help convey what your site does and how it is supposed to be used, as it lines up with what the user expects from similar sites. It also makes your work easier, as you can use other pages as a reference i.e. you don't end up reinventing the wheel. Here are a few useful evergreens to remember - including these prevents you from catching your users off-guard.

• Navigational bar is expected to take up the top or, in some rare instances, the left side of your site
• Your footer is expected to be at the bottom of the page
• Most people will look for the logo of your site at the top left corner

Responsiveness

The layout should remain intuitive when the user is viewing the page on smaller screens. Content that is not essential to your page should disappear (for example advertisements), unless you find a non-disruptive way of embedding it into the remaining content. I suggest moving other content, that is not essential to your site, to the bottom of the page or to a pop-up menu item that is displayed only on smaller screens. Remember that you will need to move your navigation bar to a so called "hamburger bar", allowing users on smaller screens to access all areas of the site.

Implementing a Good Layout using Web Technologies

Most modern websites make use of grid systems, which divide content into rows and columns of predefined or dynamic sizes. The element that the grid layout is displayed on is usually called the "container". Grids allow the designer to create their layouts without having to worry about aligning every piece of content in a pixel perfect style, since this is already enforced by the grid.