THE 5 RULES OF DESIGN COMPOSITION AND LAYOUT
by Meg Reid
L
ogos, websites, book covers & more…
Get a design
Everyone knows to get better at any art form, you have to first
understand the particular tools and procedures that form it. Design
is no different from playing an instrument or even a chef making a
meal. If the elements of graphic design (line, color, texture, shape)
are the ingredients laid out in front of her and the principles of
design (movement, rhythm, proportion, etc) are the recipe she
uses to make the meal, then think of design layout and
composition as the final plating.
Cake brochure by Luz Viera
Sure, the chef could throw everything into a bowl and call it good.
Or, she could arrange the ingredients in a way that highlights the
individual elements inside; she can deliver a message in a
beautiful package. With time and care, she can create an
incredible experience for the person consuming the meal.
Read on to learn more about the many ways you can structure your design compositions to have the showstopping effect
of a perfect seven-tiered cake.
The 5 rules of design composition and layout
—
1. The grid
2. Emphasis and scale
3. Balance
4. Rule of thirds
5. Rule of odds
1. The grid
—
Grids give order to graphic design. They speed up the design process by helping designers decide where content should be
placed rather than where it could be placed.
- @troytempleman
Most designers see an invisible grid running through all their designs. In modern web design, clean grid lines have
become popular and almost impossible to avoid. There are a few simple reasons for this: grids make your designs
cleaner, more efficient and easier to adapt.
Be My Travel Muse website design by DSKY
Grids bring organization not only to the design, but to the process of creating design. Say you want to create a poster for a
lecture series. Create a strong grid and if the dates, times, images and colors all change, your basic designs will feel
related. Instant consistency and less time updating and adjusting. Baseline grids also give you a great roadmap when
working in a team. Every designer knows the feeling of relief that comes with opening someone else’s design and seeing
a clear grid to follow!
2. Emphasis and scale
—
This ad uses color and scale to emphasize the cake, which is
the focal point of the design. By adwindesign.
The eye generally needs a place to rest or something of
interest to hold it, otherwise people will look at your design
and quickly move on. Say you take a photograph of your mom
at a family reunion. Your purpose is to bring attention to the
moment and the joy of the gathering by making your mom the
subject and focal point of your composition.
To communicate the message to the viewer that your mom is
the focal point, you want to use scale and emphasis. You
could place her prominently in the photograph and make sure
she is the largest object in the photo. You could emphasize
her by blurring the background to make her stand out or
focusing her brightly colored dress.
Figuring out the focal point of the design will give your eye the
guide it requires to structure the composition, as well as
organically build hierarchy. In the design above the focal point
is the ridiculous cake—our eyes go right to it and then read
the rest for context.
3. Balance
—
This web design balances different sized elements perfectly by supporting them with equal white space. By TeeBox ™.
What happens when you don’t have any white space. Manipulation by megireid.
Isn’t everything in life a search for balance? Design is no different. Designers must constantly juggle different elements to
find harmony in their design. Imagine an invisible set of scales in each design and make sure you don’t tip the scales by
cloistering elements on one side of your grid. The website design above does this cleanly by marrying large type elements
(“What We Do” “Our Works”) with smaller, equal-sized paragraphs of longer explanatory copy.
Keep in mind that in terms of composition, white space (or negative space) is also an element. White space gives our
eyes paths to follow through the design. Give each element on the page some space to breathe and balance between
positive and negative space will emerge organically. You can see how moving the elements in the web design above
closer together (thus shrinking the negative space and disrupting the balance of the piece) makes the design
claustrophobic and ultimately unsuccessful.
4. Rule of thirds
—
A well balanced t-shirt mock-up using the Rule of Thirds.
Via BATHI.
The Rule of Thirds is inescapable in design. It’s a fundamental
guideline that’s so simple and effective, it often feels like a cheat:
divide your design into three rows and three columns. The points
where the vertical and horizontal lines meet form natural
guidelines for where you should place your subject and supporting
elements. Struggling with finding balance in your designs? The
Rule of Thirds is about to become your best friend.
A perfectly
balanced landscape photo. Via Andreas Wonisch.
For the most clear examples, look at photographs. In the example
above, the focal points (the tree and horizon) are perfectly aligned
with the grid created by the Rule of Thirds. If the tree was dead
center horizontally and the mountains were directly in the vertical
center, the composition would not be so pleasing.
5. Rule of odds
—
A logo design that uses the Rule of Odds to draw the
eye to focal point. Via Freshinnet.
The Rule of Odds says that pleasing compositions
seem to often have an odd number of elements
placed in the foreground, most commonly three. The
two objects on the outside both balance the focal
point in the center, creating a simple, natural balance.
(If you’re a wedding photographer this is probably the
most difficult rule to follow.) This is often true in logo design, where a centered mark might be offset on either side by the
company name, like in Needle Records’ logo.
The power of a well-composed design
This is just an overview of the different ways a designer can shape a composition to have the greatest impact on viewers.
As always, remember that rules are meant to be broken. But once you start understanding and executing these rules and
structures in your own work, it will improve and strengthen your designs immeasurably
