A guide to layout design

What is a layout? It’s how a graphic designer organises the elements of a design as clearly and effectively as possible. A good layout not only looks appealing but also guides the viewer towards the most important information.

In this article, we explore how layouts are used in graphic design to help arrange and communicate messages.

What is a layout design?

All designs are made up of a series of elements – text, images, spaces and so on. The layout is how these elements are organised to create a whole design. Whether you’re creating a web page or an information leaflet, getting the layout right is an important part of your role as a designer.

Is layout the same as composition in graphic design[1] ? They're very similar; however, while composition is about organising the elements in an aesthetically pleasing way, the layout is the more practical side of design. An easy way to remember the difference is by applying the terms to an everyday design: your kitchen has a layout, while the painting hanging on your wall is composed.

Laying out a design involves arranging the elements in such a way that the final piece is clear, on brand and communicates the right message.

Elements of layout design

What makes up a layout? These are the elements of a graphic design piece that need to be pulled together.

1. Text. This is anything written, and it can be headlines, sub-headers, titles, blocks of copy, and in the case of web design, buttons and menus. Your choice of typography also comes under text (more about this in a moment).
2. Images. These are photos, illustrations, infographics and logos.
3. Lines. This refers to the invisible horizontal, vertical and diagonal lines that are used to connect the elements in a design and draw the eye in a certain direction. Using a grid[1]  can help you to arrange the lines of your layout.
4. Shape. In a graphic design layout, shapes are used to highlight text and make separate parts of the design distinct from each other. They’re also part of the overall aesthetic scheme. Shapes can be organic, abstract, or geometric, depending on the brand and the look you want to achieve.
5. Negative space. The spacing around the elements is an important part of the layout. Negative space[2] , also known as blank space or white space, highlights elements by giving them room to breathe and prevents the overall design from becoming cluttered and unclear.

Principles of layout design

As well as the elements of design, the graphic designer needs to take into account the main layout principles.

You can think of the principles as a series of helpful guidelines which are there to make sure that your design ticks all the boxes. The principles of layout design will soon become second nature; however, when you’re starting out, running through these five principles can help you stay on track.

1. Hierarchy

This is used in design to guide the audience towards focusing on the most important element. For example, you're designing an advert for a billboard that promotes a sale in a store. What are the most important pieces of information? The brand and the fact that they are offering deals.

Through use of size, typeface, colour and contrast, you can highlight these two pieces of key information. The positioning of information is also important in creating a hierarchy – you want the most important points to be front and centre (which ironically, isn’t necessarily front and centre).

2. Alignment

This is how the different elements are arranged in relation to each other. You can choose to align to the left or right margin or use a centre alignment.

How you align the elements influences both the flow and the hierarchy. In Western culture, we read left to right and top to bottom, which is how we also tend to look at images. So, the top left is an important part of the layout in the hierarchy. This also means that if you have a text-heavy design, aligning to the left makes it easier to read. However, a smaller amount of text, like a slogan or a brand name, will feel nice to read when centred.

3. Contrast

This is created through colour, size and typography. You can use all these to make up your hierarchy and emphasise the most important messages. Choose colours that work well together and contrast clearly – never lose sight of legibility in design. It might be worth returning to that old-school colour wheel to look at clear and pleasing combinations.

You can also create contrast through different but complementary typefaces, with different weighting given to these through colour, thickness and outline.

4. Balance

Your layout needs to be balanced to look good. This isn't simply an aesthetic issue: without balance, a design can feel unclear, and the viewer won't know where to look – they might even miss some information altogether.

Balance can be symmetrical or asymmetrical[1] , with the latter using other elements such as colour and shape to create a balanced feel. Working with a grid can help you keep track of all your elements when you're trying to balance your layout. 

5. Proximity

How close are the different elements to each other? While space is important when it comes to highlighting separate elements, proximity is useful when it comes to creating connections.

If we return to our example of a retail sale billboard, think about which elements you would like to connect. The brand and the sale? The brand and an image of what it sells? The image and the sale? This can vary, depending on factors such as how well-known the brand is. You won’t need to connect it as strongly to its product if it’s a big-name brand, for example.

Conversely, separate things that don’t need an immediate connection. You’re now creating a design that can be understood at a glance by physically and clearly separating the visual information. Again, negative space is an important tool for the graphic designer.

How to create a layout

We know the elements and the principles of how to organise them. Here's how to do a layout that brings everything together as a complete and unified design.

1. Use a grid

A grid is a series of intersecting lines that act as a framework for your design. Grids are a really useful[1]  way to pull together a complete design, creating balance, scale and visual appeal. A grid is a good way to make sure that your information is organised in a clear and easily understood way. 

Graphic design grids don’t have to be formal (such as the magazine layout template), but rather, they can assist you with balance and symmetry in all kinds of projects and can help you create those sight lines we mentioned earlier. The grid lines are solely there for you, and you can either use a pre-made grid or design your own.

2. Look at templates 

Like grids, templates are a useful guidance tool for designers. They're especially handy for web page layout design, and a CMS like WordPress is a good example of a graphic design template. A template will help you create balance and scale, although as a designer, you'll may prefer to choose the elements yourself.

3. Choose your elements

Typography, colour, contrast, shapes… Collect all your graphic design elements ready for organisation in your grid or template. If you’re working to a tight brief or using brand guidelines, these may be highly prescribed, or you may have the fun of being more free-range.

4. Apply the principles

When you’re pulling everything together keep those five layout principles in mind: hierarchy, alignment, contrast, balance and proximity. Can you apply all of these to your design? If you can, your design is more likely to be both visually pleasing and effective at communication.

Examples of layout design

While layouts vary, there are a few popular standards that you’ll come across a lot; and these classic designs are very useful to know about.

Big type layout

If you like working with typefaces, this is the layout for you. Simple, bold and eye-catching, the big type layout proves that you don't need complex images to capture attention.

This approach features large typography to convey a message rather than intricate graphics or imagery. It can involve oversized fonts, creative typography treatments, or a combination of both to create a visually striking composition. It can be particularly effective, especially if your copy or slogan is strong.

Big picture layout

However, sometimes the picture does paint a thousand words. This usually features a large illustration that fills the space with minimal text and a logo. This type of layout is often used in product advertising. The skill lies in getting all the information across without compromising the design.

Silhouette layout

This stylish look in the picture below has been popular for decades and is especially popular for printed advertising materials. It can be wrapped with text for an extra-artistic look – the elements are often grouped together in this layout. Negative space is very important in a silhouette composition.

While the silhouette layout is typically used at the chicer end of graphic design, in this famous example above (a 1930s public information campaign), the silhouette style is used to inform as well as catch the eye.

Circus layout

This template in graphic design incorporates circus-related elements like bold colours, playful typography, and whimsical illustrations. Popularly used for events, you’ll often see it used for posters, flyers or invitations. The layout aims to evoke a celebratory atmosphere while conveying event details effectively through varied designs.

Mondrian layout

Named after the Dutch abstract artist, this layout uses vertical and horizontal lines to create a grid, which you then populate with other elements like images and colour. It creates a look that caters to a formal but colourful taste and will be easy for the audience to read (provided the hierarchy and balance are right).

Multi-panel or comic strip layout

This layout uses a grid or series of frames to tell a story or narrative. It's good for websites or to explain a series of features and benefits. Have a glance at the series of layouts for mobile apps above – many of these feature variations of the multi-panel layout.

Look at as many examples of layout use as you can. Graphic designer Paula Scher is a great advocate of learning from previous and existing designs: That’s really how you’ll learn. Looking at other people’s work, looking at your own work, trying something, failing, making a new discovery, failing again.”

Play around with layouts until using them becomes second nature. Which templates, grids and layout styles work best for you and your projects?

Find out more about layout and composition from graphic designer Paula Scher. In her BBC Maestro course, Graphic Design, Paula covers all aspects of working as a graphic designer and uses a lot of fantastic examples to guide us through her lessons.