Have you ever opened a website or picked up a brochure or flyer searching for some information, only to feel like it’s going to be impossible to find what you’re looking for?

You might see a chaotic jumble of information so busy and confusing that you don’t even know where to start — your eyes don’t have a path to follow through the design.

As consumers of design, we’ve all likely experienced this scenario at some point. But as designers, we want to make sure we’re not creating design layouts that might cause viewers to hurry to hit that back button in their browser or trash a flyer in frustration.

So what’s the key to a design that’s well organized and easy to navigate? Starting with the foundation of a strong composition and good flow will get your project on the right track.

Composition: A Definition for Designers

design-principles-1

Canva’s “10 Rules of Composition All Designers Live By”

Composition refers to the way all the elements of your design are arranged to create a cohesive whole. It considers actual elements you might add to a design, like typography, photos, or graphics — but it also takes into account “invisible” elements that contribute to the overall visual effect of a layout, like white or blank space, alignment and margins, or any framework you might use to arrange your design (such as a grid, the golden ratio, or the rule of thirds). A careful composition should visually lead viewers through the design in a way that makes sense and happens naturally without a lot of thought on the part of the viewer (otherwise known as “flow”).

As a simple example of flow, this business card has clear downward movement (aided by arrow-like shapes that literally point the way,) and its information has been arranged in order of importance, from top to bottom.

design-principles-1b

Via The Design Inspiration. Design by Seth Hardie.

This act of composing, of being thoughtful and intentional about how you piece together a layout, is a skill that applies to many different types of visual arts, from painting to photography. The nice thing is that once you learn the basics of strong composition, you’ll find that they’re useful for all sorts of creative endeavors.

Now let’s look at some of the tools and techniques traditionally used to create effective, visually engaging compositions.

Visual Weight & Balance: Create a Clear Hierarchy

A good composition isn’t just a neatly arranged collection of shapes, colors, and text. Every design has a purpose and communicates a message to its viewers, and a well-planned composition helps prioritize the design’s most important information and reinforce its message in a way that makes sense. This process of arranging information by its importance is often referred to as establishing a hierarchy. No hierarchy (or an inadequate one) makes for a confusing design that has no visual flow, and we don’t want that. Let’s look at two key elements of a clear hierarchy, focal points and balanced organization:

01. Choose a Focal Point

A focal point pulls people into your design and gives them a place to start looking at your composition. If viewers only had a couple seconds to glance at your design and take away one impression or piece of information, what would that be? That important element should be your main focal point, and to ensure it’s what people see first, you’ll want to find a way to emphasize that piece and make it the most visible part of the layout.

design-principles-2

Keep reading to see this concept at work in actual design projects. (Via Dribbble. Design by Mara Dawn Dockery.)

How to do that? Through giving your focal point visual weight. When a design element has visual weight, it’s what stands out the most at first glance. It’s visually “heavy” because it makes its presence felt in the layout — you can immediately tell that it’s important, and it attracts your attention through something about its appearance, often by contrasting with the rest of the design. There are a lot of techniques to choose from to give your focal point visual weight, including but not limited to:

  • Size
  • Shape
  • Color
  • Texture
  • Position

Let’s walk through some examples:

Make It Big. The largest thing in your design will likely be the first thing people see. However, sometimes size alone isn’t enough to make your focal point visible; make sure you’re aware of how it interacts with the rest of the design. As with the poster below, surrounding your focal point with some blank space often helps guide viewers’ eyes there.

design-principles-3

Via Dribbble. Design by Ruben Rodrigues.

Attract Attention with Unusual Shapes. The following ad is an interesting composition on multiple levels. It first catches your eye with an unusual shape, which turns out to be the outline of a guitar. That shape leads your eye to the neck of the guitar, which is formed by the main text of the ad. All these design choices — the shape of the guitar, the photo of the soldier, the story that the text tells — support the overall theme and message of the design in a visually engaging way, which is the goal and result of good composition.

design-principles-4

Via Ads of the World. Design by Joel Given.

Choose Stand-Out Colors. This website design applies a vivid neon green color to its call-to-action (the “Download the App” button). Even though the button certainly isn’t the biggest object on the page, it’s the first thing that attracts your attention because of its color.

design-principles-5

Via Dribbble. Design by Dann Petty.

Add Texture for Visual Interest. The ad below features textures for a retro look that adds extra visual interest, but it also draws attention to certain parts of the design. Notice how the darker-colored distressing on “Print Shop” helps that phrase stand out. That the letters of “Free” in “Free Shipping” aren’t completely smooth and solid also draws attention to that offer.

design-principles-6

Via Dribbble. Design by Fabio Perez.

Position for Maximum Visual Impact. Choosing the right location for your focal point will make sure it serves its purpose in drawing viewers into your design. Both the upper lefthand corner and the center of the composition are common choices, but the most effective spot will depend on the specifics and requirements of each project.

design-principles-7

Via Dribbble. Design by Kevin Guan.

02. Balance and Organize the Rest of the Design

After a focal point gives viewers an entrance into your design, then it needs to be organized in such a way that they can navigate the rest of the layout easily. This is where the hierarchy really comes into play to give viewers a clear pathway to travel through the composition. Should their eyes move down the page? Across? From one section to another?

design-principles-8

Via Dribbble. Design by Mike/Creative Mints.

How the rest of the design flows from the focal point will be key to a successful composition. You can guide viewers through your layout with some of the techniques we’ve already discussed, but most designs will benefit from an overall structure or organizing principle. Instead of just randomly throwing elements into your design and hoping it turn outs ok, being thoughtful and intentional about building your composition will always create a more usable and visually appealing experience for your audience. Let’s look at some common techniques:

Use a Grid. Aligning your design to a grid of some sort is an easy and effective way to keep things neat and organized. The possibilities for grid-based layouts are pretty endless, so you don’t need to feel boxed in (no pun intended!) to a certain type of arrangement. In fact, we have quite a few to choose from in Canva to get you started:

design-principles-9

Canva

The website design below applies grids both to the overall structure of the site as well as within that structure to organize and separate information (notice the visible grid lines beneath each image). The result is a clean, orderly composition that establishes a clear way to explore the website and find the information you need.

design-principles-10

Via Dribbble. Design by Robert Brodziak.

To learn more about using grids in your designs, make sure to check out another Design School article, “15 Reasons Why a Grid-Based Approach Will Improve Your Designs.”

Try the “Rule of Thirds.” The rule of thirds is classic composition technique in the visual arts, but you might hear photographers particularly singing its praises. Why? Proponents of this technique point out that when the subject (or focal point) is in the exact middle of a composition, the result is boring and predictable. To create a more dynamic and visually interesting composition, you shift the focus to one side. The rule-of-thirds grid (see below) is a shortcut for creating a balanced but dynamic composition. It divides an image or layout into equal thirds, both vertically and horizontally, with six lines. The lines, or ideally the four points where those lines intersect, are good spots to place your focal point.

This ad places the focal point (the logo and name of the brand it’s advertising) squarely in the upper third of the composition. Also notice how the folded wallets cleverly allude to the shape of the British flag (the ad is for a London-based leather goods company) and also point right to the brand name… This is a compositional technique known as “leading lines.” More on that in the next section.

design-principles-11

Via Behance. Design by DNA Advertising.

Consider Symmetry. Symmetry is one of the biggest contributors to a balanced design. A symmetrical design is equally balanced on both sides of a central axis, either vertically, horizontally, or radially (radiating, usually circularly, out from a central point). Even symmetry that’s not exact can improve the visual balance of a layout.

The design below has both vertical and horizontal symmetry, so even though its decorative style has a lot going on, it still looks balanced.

design-principles-12

Via Dribbble. Design by Justin Schafer.

And this event poster features a form of radial symmetry. The focal point is the series of images leading up to the name of the event, and the textual information radiates out from there, balancing the visual weight of the images.

design-principles-13

Via Dribbble. Design by Alex Egner.

Leave Some White Space. The white or blank areas in a design are not wasted space, but essential to a balanced composition. Leaving sufficient white space keeps your layout from being too cluttered and gives your design elements some breathing room. It also gives the eye pathways to travel through the design and a place to rest in between looking at the layout — this is especially important to keep a content-heavy composition from overwhelming viewers.

For example, the white space between and around the content of this web page keeps your eyes circling from one section to the next and creates a nice sense of flow as well as a clean, minimal style.

design-principles-14

Via Dribbble. Design by Robert Brodziak.

Leading Lines: Create Movement to Lead the Eye

Leading lines are literal or implied lines that lead viewers’ eyes where you want them to go — usually to the focal point of your design, but sometimes just from one section or element of the layout to another. Leading lines can take a number of different forms, including:

01. Diagonal Lines

Diagonal lines create movement or imply direction across the design, often from top to bottom and left to right, like with reading.

Another common technique is to use two diagonal lines coming from opposite directions to direct users’ focus to a single point. If you’ve ever taken an art class during your school days, a common exercise is to draw a road or pathway extending into the distance: two diagonal lines coming from opposite directions, starting out wide but narrowing until they meet at a spot on the horizon known as the “vanishing point.” This is diagonal leading lines in action, and one of the most basic ways to create depth and perspective in a composition.

The following website design uses this concept to organize its product image gallery. Notice how the diagonal lines created by the yellow shape in the background (along with selective blurring) create a sense of depth in the design.

design-principles-15

Via Dribbble. Design by Cosmin Capitanu.

In this next example, notice how the main illustration on the book cover creates a diagonal line that points right to the title. Then your gaze can fall back down the same path to the subtitles and author. It’s a clever and effective design move in terms of composition, but it’s also a multipurpose solution in that it visually establishes the subject of the book.

design-principles-16

Design by Oliver Munday.

On the other hand, the diagonal movement here is not guided by an actual line, but rather implied by the placement and overlapping of the design elements. The result is a composition that’s more visually interesting than a traditional grid-based design.

design-principles-17

Via Dribbble. Design by STUDIO–JQ.

02. Z Shapes & S Curves

Like diagonal lines, these shapes give the eye a path to travel through the design. Z shapes follow English/Western reading patterns (left to right, top to bottom) and are a common choice for many layouts.

design-principles-18

Via Dribbble. Design by Piotr Adam Kwiatkowski.

Though they run in the opposite direction, S curves occur often in nature and can lend a fluid sense of movement to a composition.

The layout for the website design below might be non-traditional, but its curving composition leads your eye from one section to the next and is a big part of what makes it visually interesting.

design-principles-19

Via Dribbble. Design by Joey Furr.

03. Repeating Lines and Patterns

Repetition can act as a leading line, guiding your gaze in a certain direction. It may take the form of repeating lines, shapes, or other elements arranged in a directional way. Repetition can also be a great way to reinforce a visual theme and add a sense of rhythm to your design. Even in-text elements that repeat, like bullet points or numbered lists, can help organize a design and give it a sense of flow.

The following magazine layout repeats a visual theme of diagonal lines and triangular shapes in two ways: on individual pages or spreads (to guide readers through the content) and throughout the issue (to create consistency and a sense of rhythm through the whole publication).

design-principles-20

Via Behance. Design by Bartosz Kwiecień.

04. The Human Gaze

When faces make an appearance in a design, especially through photography, viewers are sure to take notice — our brains like to look for faces. One effective way to create a subtle leading line is to have the subject in a photo looking toward the focal point of your design; viewers will follow right along and look there too.

On this magazine cover, the person in the photo (actor Daniel Day Lewis) seems to be looking at the text that describes what’s in the issue. But reading the text guides you right back to the photo. This looping interaction keeps your focus on the cover — a good technique, especially if you want someone focused on a design long enough to want to purchase it.

design-principles-21

Via From Up North.

Over to You

Learning some effective techniques for composing designs can really help level up your projects in terms of both aesthetics and function. We hope this introduction to some of the design principles of good composition will prove useful. As always, happy designing!

Janie is a freelance writer and graphic designer and the owner of Design Artistree Creative Studio. After college, she built on her background in art to explore design…and loved it. Now, she enjoys finding ways to combine the craftsmanship of traditional fine arts with the digital possibilities of graphic design.