Layout design is a fundamental branch of graphic design that concerns the arrangement of text and visuals. The effectiveness of every type of design, from print to web, is largely influenced by layout. An effective layout not only looks attractive, but also helps the viewer understand the message the design is conveying. In other words, understanding layout is key when it comes to creating user-friendly, engaging designs, particularly in the realms of web design and advertising.
In this post, we'll consider why layout is important in design, how to implement it effectively, and also look at some examples of beautiful and functional layouts.
🤑 FREE “Principles of Layout” Handbook 👉 Click here to Download 🤑
What is layout design?
Before we dive in, let's make sure we're clear on what layout design even is. In a nutshell, layout design refers to the arrangement of visual elements within a grid in order to convey a particular message. The latter part of this definition is key. If a layout doesn't read well to the viewer, the design is ineffective, no matter how trendy it looks.
Grids are useful in layout design because they help structure and organize content. Although grids are invisible in the user-facing design, it’s easy to tell at a glance whether a layout follows a grid system. Later on, we’ll discuss grids in more detail and look at some real-world examples of grids in action.
Principles of layout design and composition
Layout is interwoven with other fundamental principles of graphic design, such as color, contrast, repetition, texture, and typography. Layout design also encapsulates the principles of hierarchy, balance, alignment, proximity, and space. Let's take a look at these elements in more detail so that we can better understand how each contributes to effective layout design.
Hierarchy
In design, hierarchy refers to the order of importance of the elements in a layout. One way to create hierarchy is through size. In general, the largest element in a design is the most important, followed by the second largest, and so on. The reason larger elements are more important is that they’re the first to draw the eye.
Another way to create hierarchy in a design, without manipulating size, is through contrast. Elements with higher contrast stand out among lower contrast elements. A third way to create hierarchy is through the positioning of elements. An element that stands alone draws more attention than a group of elements, even if they’re all the same size and contrast level.
Balance
Balance is intrinsically appealing to the human eye. Therefore, it makes sense to create balance in graphic design. A balanced layout incorporates either symmetry, asymmetry, or radial symmetry. Symmetrical and asymmetrical balance are the most common in design and the easiest to achieve. Radial symmetry can work well in print, but is harder to pull off on a website.
There are some exceptions to the rule of balance. An unbalanced design could effectively draw attention to a particular element that looks out of place. However, if not done well, an unbalanced design appears messy or confusing.
Alignment
There are two types of alignment in design: Edge alignment and center alignment. Edge alignment is when elements are aligned to the top, bottom, left, or right edge of a layout. Left alignment is typically used for text because we read text from left to right (in English). Center alignment is effective for smaller text sections, such as a title or blurb, as well as images, icons, and other visuals.
Effective alignment contributes to the legibility and flow of a layout. Using grids makes it easier to determine how to align elements in a layout.
Proximity
Proximity refers to elements that are positioned together or otherwise connected visually. In design, proximity is important because it informs the viewer which elements are related to one another. Unrelated elements should be spaced apart in order to avoid causing confusion.
Space
Space is important in a layout because it helps separate and organize different elements. In a grid, space typically fills the gaps between columns, or gutters. But space can also draw attention to the elements that it surrounds. When creating a layout, it’s essential that different elements have enough breathing room in order to avoid overwhelming the viewer with too many competing elements.
Layout design elements
In graphic design, layouts may contain a number of different elements. Below are some of the most common design elements that contribute to layout:
- Text: Text elements include titles, headings, and paragraphs. In text-heavy designs, these elements should be laid out in an intuitive way that's easy to read.
- Images: Photographs and other visuals, such as illustrations, help to break up text and communicate certain messages. They are particularly effective at engaging viewers through emotion.
- Lines: Lines are used to divide sections. They can also add emphasis to text.
- Shapes: When used well, shapes add a touch of flair and personality to a layout. Rectangles and circles are the most common, but there are many ways to get creative with shapes.
- White space: As we discussed, adding space between sections of a layout prevents the user from getting overwhelmed or fatigued when viewing a busy design.
The format and context of a design determine how these elements are implemented in a layout. For instance, websites are typically text and image heavy. In contrast, advertisem*nts are primarily image focused with a minimal amount of text. When deciding how to balance the different elements of a design, it’s essential to always consider the context and user experience. A website user, for example, is typically searching for information or inspiration, and is willing to spend a minute or two to browse a webpage. Contrast this to someone scrolling past an ad in their Facebook feed. If the ad doesn’t immediately grab their attention, the opportunity is lost.
Designing layouts with grids
Design elements are arranged in some sort of grid in order to create a layout. The benefit of grids is that they help create a balanced, organized layout. This makes the content flow more intuitively, and in turn creates a better user experience.
The most common type of grid used in graphic and web design is the column grid. A column grid consists of a row of vertical sections with space in between them. The space in between the columns is the gutter. Space can also surround the edges of a grid, creating margins.
The number of columns in a column grid can vary. However, a good rule of thumb is to use 12 columns. The reason is that we can easily divide 12 columns into various smaller sections. For example, you could have two large columns containing six columns each, or four columns containing three columns each, and so on. This divisibility allows for a lot of flexibility in the layout of a design.
In order to better understand the value of grids and how they’re used in design, it’s helpful to look at some examples. Below are a few well-balanced designs in the print and digital world that utilize a column grid.
To learn more about grids and how to use them to create beautifully balanced web design layouts, check out our course, The $10k Website Process.
Breaking out of grids
As is true in all areas of design, there are no hard rules when it comes to grids. Breaking out of grids in subtle ways adds depth and variety to designs. In web design, for example, you often see full-width images that fill the background of a section. Some designs also incorporate images, illustrations, and other decorative elements that float around the edges of a layout, seemingly at random.
The key function of grids is to contain, align, and organize crucial content in a design. Breaking the grid now and then with decorative elements is totally acceptable, so long as it doesn't detract from the message of the overall design.
Some designs don’t just break out of grids; they disregard grids entirely. This, when done intentionally, creates an artistic effect. While this look is effective for certain contexts, for instance an artist’s website or a photography lookbook, it’s not recommended for most design projects. Below is an example of a striking landing page that doesn’t utilize a grid, yet still effectively communicates the message of the design.
The Rule of Thirds
A helpful technique for creating effective layouts is to implement the Rule of Thirds. This rule is very simple, yet highly effective in creating balance in a layout. To implement it, simply divide your layout into three columns and rows. The lines create guidelines for any linear elements in the design. The points where the lines intersect form the focal points of the design.
In the below examples, we see how the laptop in the left photo loosely follows the left vertical and bottom horizontal lines. The point where the center of the laptop meets the coffee cup forms the focal point of the image. In the right image, the woman’s body and laptop follow the guidelines of the 3x3 grid. Both of these images also effectively utilize empty space to draw more attention to the main focal points.
Although the Rule of Thirds is commonly associated with photography, we can implement it in our layout designs as well. It’s especially useful if we’re struggling to create a balanced layout with our grid. Below are a couple examples of landing pages that successfully create balance through the Rule of Thirds. As you’ll see, this rule isn’t an exact science, but it can provide some guidance when designing a layout.
Want to learn more on how to create beautiful web design layouts that attract high-paying clients?
Designing beautiful and functional layouts is merely one out of many vital components of a stellar website design process. If you want to learn how layout design fits into the bigger picture of a robust website design process, then check out our $10k Website Process course. You get much more than a few video lessons on how to create pretty websites: You learn how to position yourself as a high-value designer, land higher-paying clients and join a community of like-minded designers.
Learn more about the $10k Website Process course here.
