Basic Principles of Layout Design

At a time when users are increasingly using different devices of different display sizes to view a website, how do you plan the best way to deliver content to them? How do you make it easy for the user to navigate and find important information? How do you make sure that the information they receive from you is easy to digest?

Let's take a look at some of the basic principles of layout design and see how we can solve this problem.

The IT Industry Guide is a collection of articles and resources by Internet Academy, Japan's first learning institute specialising in the Web. Here, we introduce you to industry insights in an easy-to-understand manner.

Table of contents

Understanding proximity

"Proximity" in layout design is a technique to show relevance between elements by consciously bringing those that are related to each other (like headings and associated paragraphs) closer in distance.

The important thing here is to balance the proximity of elements. As a designer, you will need to learn to place the elements at enough of a distance that they do not make the user visually uncomfortable. However, it also needs to be close enough that they can easily understand that the elements belong together by association. This is a tricky thing to achieve, since the principle will be less effective if you move it closer or farther than necessary.

The advantage of this layout is that you can group information and convey information while keeping the colour and design you need to the minimum. This can be applied not only to text, but also to images and photographs. By linking a photograph with highly relevant content, it is possible to transmit more clear and impressive information.

Using alignment and repetition to create a unified sense of design

The structuring of information and uniformity of layout are indispensable to creating an appealing website. There are many different categories of information you may want on a website, and if not handled carefully, may confuse your users. Properly aligning elements and creating a uniformly repeating visual language may help your users easily identify what you are trying to say.

Alignment and repetition are techniques that can help you create the base of a page layout. Arranging elements in rows by how they are related can direct the flow of information. Intentionally include margins between elements, and balance the proximity between them, thereby grouping related information together. This is an effective technique - not only to improve the aesthetic of the site, but also to improve readability.

Repetition is a technique of representing information consistently on a website by repeating a fixed design or style pattern within a website. By repeating headings, buttons, and icon patterns, you can dictate the personality and overall look and feel of the website, as well as improve the association your users have with elements on the site and boost recognition. This promotes overall visibility, distinctiveness and usability.

Using contrast to draw the user's attention

Let us now look at how contrast fuels visual design. Contrast helps emphasise the difference between elements on a website, and it is used as a means to add a distinctiveness to the design of individual elements.

Unlike placement and margin arrangements such as proximity, alignment and repetition, contrasting elements are created by incorporating different colours and fonts. Taking it one step further, you can also introduce contrast by using different shapes, hues, and element sizes - to name a few.

For example, you could introduce a typographical distinction between the sizes and fonts of content in section headings and normal content on a web page.

In conclusion

"Proximity", "alignment", "repetition" and "contrast" are regarded as some of the basic principles of layout design, and are effective techniques for improving visual hierarchy and readability, thus leaving a strong impression on the user. These are techniques that aren't just restricted to Web Design, but can be used in the production of any visual design to produce a sophisticated result.

Anyone can master layout and Web Design, even though it may seem challenging at first. At the Internet Academy, professional instructors with abundant field experience can help you acquire skills such as image editing and processing, in addition to Web Design. If you would like to experience a Web Design classroom in session at Internet Academy, please do not hesitate to contact us for a free trial lesson.