Design Principles

A L I G N M E N T

The essence of alignment is the placement of objects in relation to each other and to the borders.  There should be no “stray” distracting elements and just the right amount of space.  Proper use of alignment creates a pleasant visual experience and decreases cognitive load. The purpose is to create unity. 

Alignment connects text, photos, charts, and all objects within a design. It creates a visual flow, guiding the viewer’s attention.  Alignment can be applied to text itself, as in applying vertical alignment when creating a table to give it visual appeal.  With or without text, alignment connects each component to all others. 

An exciting example of the use of alignment is the movie poster from JAWS. The design utilizes center alignment for the only three components of the poster: the title, the swimmer, and the shark.  These elements are directly connected in a simple but powerfully effective, unified piece.

P R O X I M I T Y

The essence of proximity is to group related items together to create cohesion.  Related items can be any combination of text and/or objects such as photos, maps, charts, and tables.  When displaying multiple items, the use of proximity helps the viewer to visually connect related items.  When these items are physically displayed close together, the viewer immediately identifies them as related.  In contrast, when items are distanced from each other, the viewer visually recognizes the distance and cognitively associates this as a lesser relationship. The purpose of proximity is to create an organized composition that guides the viewer through the content. In this way, the effective use of proximity eliminates cognitive load on the viewer.    

The poster from UF makes effective use of proximity to guide the viewer through text and photos.  The use of centering the title and placing a center line to separate the grouped content creates a cohesive and organized poster that is easy to navigate.

R E P E T I T I O N

Repetition is the utilization of a visual cue(s) that distinguishes parts from each other while signaling that they are part of a unified whole. Its purpose is to bring cohesiveness through consistency. The viewer can then easily identify each part and its relation to the whole. 

One way to achieve repetition is to incorporate a repeating object, symbol, or color palette that visually brings separate components together within a cohesive project. For example, the slide presentation at left makes accurate use of repetition by displaying the same colors and bottom banner on each slide. Each slide has a gray line across the top with a title above.  The object (book) on the second slide and the quotation marks on the third slide are displayed in the same green color as the banner.  Though each slide contains unique content, the use of repetition effectively signals that each slide is but one part of a whole. 

C O N T R A S T 

Contrast is what is used to visually “get right to the point.”  The essence of contrast can be created by using distinctly different colors, fonts, sizes, texture, space, and other elements that are immediately recognized as different, and therefore important.  Regardless of the ways contrast is created, the purpose is the same – to create a focal point that quickly and assertively makes the message clear. 

 In the example (left), contrast was created using color and distance.  The bright yellow of the sign contrasts with the dull gray sky of the background.  The size and placement of the sign in the foreground also provide contrast.  The viewer is immediately drawn to the sign and recognizes its significance.  The effective use of contrast here creates an ominous and quickly identifiable message – don’t wait around, be prepared for a hurricane. 

S I G N A L  to  N O I S E  R A T I O

Signal to noise ratio is a design principle used when considering whether an element is necessary in a presentation.  The purpose is to present information in a clean and concise manner that is easily digested.  Often, this requires avoiding the temptation to add related, yet distracting elements that create visual clutter and add to cognitive load.

A high signal to noise ratio is desired, requiring the designer to consider the necessity of each element and avoid/remove them accordingly.   The example (right) displays a graph of the countries with the most X users.  It includes the name of ten countries, the number of users in each, and the month in which data was collected.  Gridlines are visible and the total number of users is numerically displayed by country.  The chart has been designed with a high signal to noise ratio. There is no need to include the X logo or add any other elements, as this would clutter the image and likely cause cognitive overload.   

P I C T U R E  S U P E R I O R I T Y  E F F E C T

The picture superiority effect indicates that people will better recall a message conveyed by visual representation than that found in text.  In designing effective media, the purpose of using picture superiority is to tell a story in which the visual creates a message that will not be forgotten.  When just the right picture is chosen, positioned in just the right way, and enhanced with limited text,  this will dramatically increase the impact and future recall of the message.  

The image at right is a poster designed to draw attention to the devastating practice of shark finning, while sending a message to eradicate this practice!   The image is vivid, invokes emotion and the message is loud and clear.  After viewing this image, it is likely to remain in one’s memory and reappear whenever the subject of shark finning is mentioned.  It is a clear representation of picture superiority effect.

E M P T Y / N E G A T I V E  S P A C E 

The essence of empty space is to highlight an object in the midst of the space.  It implies grace, style, and class, perhaps giving the design a desirable appeal. Empty space is not wasted space, rather a way to create a compelling and sophisticated design project. Use of empty space can often be found in advertising for luxury items such as cars, watches, perfumes, and furniture.  Photographers make use of empty space to create stunning images in nature.  The purpose of using empty space is to let the design “breathe” in the space.  Attention is then completely drawn to the subject without meaningless distractions. 

The Ikea Christmas ad effectively utilizes empty space to create simple elegance.  This is quite compelling considering the commercialization of Christmas.  As the purpose of using empty space states, the design of this ad allows it to “breathe.”