Principles Of Design Proportion – 8 Design Concepts For Better Online Graphics

This site may contain affiliate links for which a small commission is received.

Principles Of Design Proportion

The concept of design proportion offers clues to better engaging designs for webpages and social media posts. While the topic might seem dry at first, common-sense tips demonstrate how design proportion works with images and text to create a fluid and focused call to action (CTA) versus an unreadable mess. Universal design concepts are useful for good web design, but these same concepts are also useful for any design project. Well-known principles of design proportion are easy to implement while creating new designs; it doesn’t matter if its a simple illustration, graphic for social media, or a complex website layout.

While it might seem a bit dry to talk about design proportion principles, applying the basics in a design for web, social media or print will make the final product more aesthetically appealing. Plus, these 8 design concepts are still applicable today. Implementing the concepts isn’t too hard and the results can be engaging and professional-looking.

Principles Of Design Proportion - 8 Design Concepts For Better Online GraphicsPrinciples Of Design Proportion - 8 Design Concepts For Better Online Graphics

Occam’s Razor

This well-known principle like most of the concepts presented here says that the best hypothesis is the one with the fewest assumptions and the easiest explanation. When applied to designs, Occam’s Razor shows that simple solutions work best.

Negative Space

Negative space is a concept also known as white space. This clean design concept doesn’t just allow for blank space; the purpose is to prevent cluttered or busy images, illustrations or graphics, because cluttered and busy get ignored. By using white or negative space any message embedded in the design is easier to read, especially when creating social media images and illustrations. Negative or white space when used appropriately creates a clean visual and a focused message while looking professional and attractive.

I know this well because I was as guilty of trying to use all space available in my social media graphics when I first started. I soon found my best posts used negative space to make the graphics and message easier to read, more focused and clear.

Principles Of Design Proportion - 8 Design Concepts For Better Online Graphics

White Space Negative Space
The use of white space or “negative space” helps with focus.

Fitt’s Law

This design principle states that the time to move to a target is related by the distance to the target and the width of the target. Think in terms of the buy button on a website for purchasing a design. The bigger the object the easier it is to use and interact with. If you’re selling your designs or freelance skills a large buy button placed strategically near the design of interest with a strong call to action will result in more sales.

Hick’s Law

This principle is based on cognitive reasoning; the idea is that increasing choices logarithmically increases the time needed to make a choice. In simple terms, the more options a person has the more difficult it is for them to decide. That seems to fit right in with the KISS (Keep It Simple Stupid) approach. Most graphic designers and DIY’ers like to focus on the creative part of design, but good design includes marketing so if you’re a freelancer or DIY’er then creative but minimalistic designs are often the most appealing to the largest audience. Of course, if you’re designing for one specific customer you’re design will be geared towards their requests.

Rule of Thirds

Rule Of Thirds

While this picture wouldn’t normally show lines you get the point. I love this rule; it’s one of the easiest to use. Simply put, the rule of thirds says to create an equal nine-square grid on a workspace. The easiest way to do this is to temporarily place two horizontal and two vertical lines equally spaced on the design area. Next place elements or objects at the cross points of the lines or along the lines. Be sure to allow for white space as previously discussed. This creates a proportional design.

The Golden Ratio

Fibonuacci Golden Ratio

The Greek letter phi represents the golden ratio (i.e. 1.61803…). This magical number states that 2 entities or elements are in a golden ratio if “is the same as the ratio of their sum to the larger of the two quantities.” An easy visual example is to create 3 bars.

The golden ratio fits into another concept call the Fibonacci number. Both of these concepts are mathematical formulas that lead to aesthetically pleasing designs. The design proportions of many elements in nature and the world follow the golden ratio and the Fibonacci number; as a result, you’ll see it incorporated into websites like Twitter and Facebook web layouts.

But the golden ratio works with many of the concepts presented here. For example, it creates a better visual hierarchy.

Fibonacci Golden Ratio Visual Hierarchy

Visual Hierarchy

Another simple concept that results in amazing designs; visual hierarchy is essential to the way our eyes perceive what is seen and deemed important. The result tells our brains what to pay attention to; good visual hierarchy gets attention. That means certain parts of a design are more important overall and you want those parts to get the focus. This again is important when creating social media images and illustrations for posts on Facebook, Instagram and Pinterest – although Pinterest is a search engine this still applies. It also matters when adding images, graphics, and illustrations on webpages because ultimately you want to direct the user to click on or respond to the design in some way. Good visual hierarchy isn’t just about size; you’ll notice great hierarchy also, for example, uses prominent colors to encourage action or reaction.

Visual Hierarchy 1 1
Good visual hierarchy focuses attention on what’s important.

Gestalt Design Principles

A series of principles based on the human psychology concepts, these principles are focused on how our eyes see a total object as a whole before looking at the details; additionally, Gestalt ideas define how complex visuals are broken into simpler parts based on concepts of proximity, similarity, symmetry, closure, common fate, and continuation. By using these principles to understand how people see objects, images, and graphics you can create better web and social media images and designs with messages or call to actions. Let’s apply these easy to use ideas to create attractive graphics and images for web and social media.

Gestalt’s Law of Proximity

The proximity principle is base on the fact that we tend to group objects that are close together creating a single perceived object. In application, it means that you want within a design those things that should be perceived together as well as items that shouldn’t be.

There are several options to keeping this simple. For example, in the above visual hierarchy image the call to action button is in proximity to the message. Your eyes will be drawn towards the “Get Access” button. In a second example, take this Facebook post I created. I used the red pin and shadow, combined with the distorted Pinterest logo and the word “interest” to create a unique Pinterest image. The proximity of the Red pin, Pinterest logo, and word “interest” creates a unique grouping that stands out.

Pinterest Backgrounds

Gestalt’s Law Of Similarity

Humans like to group things together; it helps us process information. We group items in many different ways. Grouping by color, shape or other qualities comes naturally to us. When creating a design, you may want to consider how to place individual graphics in such a way that they fit together, reinforcing the group. Here’s another very simple design I created that I eventually used in several social media post images. I found icons representing various online recognizable entities and used my brand colors and size to create a grouping of similar items that would catch the eye.

Design Srv
Visual Content1

Gestalt’s Law Of Symmetry

Our brains tend to look at objects as symmetrical when possible; we like to divide objects evenly into symmetrical parts around a center point. This is true even if 2 objects are symmetrical and unconnected. Again, that’s how we process the information. Infographics are a perfect example of symmetry; they are widely used online to explain data. Typically, infographics are in 2 columns with alternating images and text. Symmetry in infographics makes it easy to read and understand while delivering a focused message.

Gestalt’s Law Of Closure

The perfect example of this is an image my brother made many years ago for me. The concept of closure is related to how humans look for completeness. When shapes, elements, graphics or images aren’t complete due to missing parts, our brains fill in the visual. The principle of closure allows us to take lines, whether curved or straight and put them together into shapes and images. You’ll see interesting and engaging logos using the principle of closure. Just google “famous logos using principle of closure to form shape” and you will find all kinds of cool logos from NBC’s peacock, Adobe, USA network and the WWF to name a few.

In fact, many minimialistic logos are designed around the principle of closure.

Gestalt’s Law Of Common fate

This principle is very handy when designing an image or graphic for a sign-up form, sales page image, social media ad. Common fate states that we tend to group objects on the same path using the same motion or direction. Think of arrows or hands pointing to a particular object or point in time.

Gestalt’s Law Of Continuation

Gestalt’s law of continuation is based on the tendency of us identifying or seeing the direction in a group of lines; should those lines intersect, we then perceive distinct lines or areas rather than continuity.

Gestalt’s Figure and Ground (known as the Law of Good)

This last Gestalt principle is simple. Perceived grouped objects tend to occur from simple orderly patterns like the Olympic rings, the MasterCard emblem, NBC’s peacock, or Sun Systems logo using 4 S’s.

Using any or several of these principles provide great guidance and lots of ideas in creating engaging and beautiful designs for any project.

If you found this useful, please share.

Design Proportion

If you found this useful, consider sharing. Thanks

Email field is required to subscribe.

Make a cool logo in less than 5 minutes with Inkscape. Here's 24 ways to do it. >>> 24 Inkscape Filter Effects With Text

Scroll to Top