Have you ever seen a design that looks so absolutely perfect all you can do is stand in awe of its aesthetic qualities? What is it about those pieces that make them so visually stunning? And, more importantly, how can YOU create a design like this?

The answer is Proportion.

As always, as you read through this article, notice the uses of the elements and principles of design. See how proportion depends on them and helps create and support other principles.

What is Proportion?

Proportion can be recognized in several ways; it is the use of the design elements size and scale, evenly distributing the viewer’s attention and the use of the golden ratio (AKA, divine proportion, golden section, golden spiral or any combinations of golden/divine and ratio/proportion/section/spiral).

Proportion is used to…

• Harmonize
• Create direction
• Build a focal point
• Balance

Creating Proportion

Proportion is not just about size and scale, it also involves the amount of other objects that you use, almost a principle of ratios and distribution, if you will. If you use just a single instance of a particularly noticeable color or shape, it may draw too much unwanted attention. Using two similar objects of the same noticeable element can cause the eyes—and therefore the viewer’s attention—to bounce back and forth between them. It’s best to use at least three instances of a noticeable color or shape.

Proportion involves a purposeful distribution of objects and you can use the elements of design, and other principles, to evaluate your use of proportion. In this sense, proportion also helps to support the principles of balance and rhythm.

Finally, a quick word on the golden ratio. The ratio isn’t present in one particular element of design, but in the layout as a whole. Basically this theory says that a + b is to a as a is to b. Confused? Yeah, me too; I’m a visual learner. So what does the golden ratio look like?

Red is an especially noticeable color and using it only once will draw attention (like we talked about with emphasis), but when the viewer tries to move away from that element, s/he will keep being distracted it. A basic rule for maintaining proportion is if you use it once, use it at least two more times.

Lines should be appropriately proportional to text (if used as rules) and the page size in general. If you use thick lines in a small trifold brochure, they will be too visually heavy for the relative page size.

Proportion is the relationship of scale/size to the page (canvas) as well as to other elements on the page. Use scale to proportionally match your focal point to the rest of the layout; focal points tend to be the largest element, but make it too disproportionate to other objects or to the page size and it becomes overwhelming and awkward.

Prominent shapes, particularly more organic or natural shapes, tend to attract attention.

Proportion’s relationship to balance is most obvious in the allocation of space. In your designs, seek to have equal distribution of text and objects—including white space.

Textures always add visual interest so you have to make sure to add equal strengths of textures and equal amounts of textures to various parts of the layout.

Value, just like most of the other elements, needs to mesh well with the other pieces of the layout. Notice particularly the value the blocks of text have in relation to other objects. Are they too dense or too light?

Examples of Proportion

Citi Logo

Generally with logos, you are not allowed to break it apart and scale each item separately as you desire to fit with your layout or personal aesthetic tastes. We can therefore easily assess a designer’s use of proportion with logos.

Notice how well the relational and dependent widths of the letters are taken into account to add the red umbrella to the mark in this Citi logo. The degree of the curve of the ‘c’ is also important in making the umbrella feel like it fits perfectly with this typeface.

Aten Design Group

Even though there are three instances of the yellow “More” link (and a fourth in the company logo) and three instances of the blue circle with the arrow next to it, these colors are not well integrated into the rest of the layout. Here is an instance when even following the “rules” sometimes isn’t enough.

Aten has done a great job with the focal point, the introduction to a case study on a resort website. The image is obviously the largest, most attention gathering object on the page. The title of the case study also serves as a caption for the image and is paired well with the size and value of the image. The whole feature section is a higher value (notice that even the body copy is lighter, though not larger, than other copy on the page), which draws more attention to it.

Further, the large space occupied by the featured case study is well balanced by the smaller in scale but more dense text in the left column. In this column, sub heads are matched to their excerpts in size and value.

Me by Mezghan

united* dsn recently designed this packaging for a new makeup line. Now you can see an example of not needing three instances of a color. In this package design, the two bright pink colors are so close to each other that they almost function as a single unit.

There are three instances of the complex swirly floral shapes, though, which is good. If there were only one flower in either corner, it would make the package completely unbalanced. Notice how the flowers don’t go behind the pink square at all, though. This creates the proper amount of attention (with the only color, and a very bright one at that) without going overboard (with too much line or texture). There is just a hint of swirl in the upper left corner of the pink square.

Somat Ad

Although I’m not exactly sure what’s on those strawberries, this piece is nicely proportioned. Odd numbers are magic so it’s good to see that there are three strawberries at the center (and focus) of this ad for dishwasher soap that works so well it makes your plates disappear (hey! I paid good money for those!). It really is a great use of negative space and implied shape, though.

There is enough red spread throughout the layout that you don’t focus on any particular instance of it, which is the goal. You don’t want anything in the layout that causes the viewer to fixate on it.

The use of the product box is an interesting thing to think about. Everything in this layout is likely pretty close to actual size. On the one hand, you don’t want the box to dominate the primary message/imagery of the ad. On the other hand, everything else is actual size, so naturally the question pops up, is the box actual size too? If not, it’s disproportionate compared to the assumption about the rest of the layout. But then again, if it were much bigger, it would start to take precedence over the focal image. Most things in design are quite open to interpretation! What do you think? Does the box work with the rest of the layout and the implied scale relationship?

How you can improve your sense of Proportion

Ask yourself some of these questions to gauge your use of proportion.

• Does the piece I want to take center stage overwhelm the layout?
• Do other elements in my layout appear weak next to the focal point? If so, how can I use the elements and principles of design to strength them?
• Have I used enough instances of noticeable shapes and colors so that they are not distracting?
• Are any objects too overwhelming to the page? How can I use the principles and elements to decrease the visual weight of those objects?

When judging any aspect of your layout, sometimes it’s very helpful to look at your design printed out, in a mirror, upside down or at a smaller scale(over-large elements will really stand out). Then you can see how well you’ve used the principles and elements of design in your composition. It’s easier to objectively judge something that is not as familiar to you.

Principles of Design

Grab the free Creative Curio RSS feed (What is RSS?). If you need to review, we’ve been through balance, contrast, direction, economy, emphasis, rhythm and how to apply them in your designs.

If you’re interested in more applied design theory, take a look at the Elements of Design Real World Examples series.