design principles

Visual design principles are those which are applied to the elements of design, and the way we apply results of how realistic or how successful the design outcome would be.

Design Principles

Balance

The use of balance in design helps in establishing a right composition for the elements we lay down on a physical or digital medium, in which it depends on two specific properties named visual weight(This is the perceived weight of a visual element. It’s a measure of how much anything on the page attracts the eye of the user. Note that, visual weight is adjusted with size, color, texture, and contrast) and visual direction(This is the perceived direction of a visual force on how we move elements to be balanced). Balance in design is closely related to balance in physics how a human eye perceives everyday things.

You would balance a design visually because you want to balance the points of interest in your composition so that users spend time in all of the information you want to convey. Without visual balance, users might not see all areas of the design. They probably won't spend any time in areas with less visual weight. As there are different ways to balance a composition in design, let's explore one-by-one now...

1. Symmetric

This composition can be achieved where the equal visual weight is mirrored on both sides of the axis which lies in the center of the composition.

Symmetric
2. Asymmetric

Elements are placed asymmetrically when a visual weight of one element differ from another element and are adjusted along the axis to meet the right composition. If you place an element, for example, an image on one side of the axis then the opposite of axis need to be filled multiple smaller elements to balance the composition. Asymmetrical designs are bolder and can bring real visual interest and movement to your composition.

Asymmetric
3. Radial

This type of balance is used to create when we want the composition that forces to the center of the axis making it a strong point of attraction.

Radial

Emphasis/Dominance

As the name suggests emphasis itself plays a very important and vital role in design and it often overlaps with every other principle of design where it's primary aim is to create a focal point that stands out distinct from the rest of the design elements in which it has to carry highest visual weight possible to grab the user attention.

Simply put, the emphasis is used to drive a call to action (e.g., a sign-up, purchase, or login button, etc.) in designing user-interfaces. And sometimes, breaking the flow of a design element can help you create emphasis.

Note that, not everything can stand out, and emphasizing too many elements can confuse the user, who won't stay to try and figure it out. This is why visually playing with this dominant element can help make everyone commit to what is important.

Emphasis/Dominance

Hierarchy

This principle helps in structuring a piece of information on how a human eye should perceive different elements on the page. As designers, we need to consider several factors such a size, contrast, alignment and pattern(F-pattern is more engaging compared to Z-pattern where users can quickly scan through a page without staring their eye in moving every edge of the screen) in establishing a proper hierarchy which effectively makes a complex story simple.

Hierarchy

Repetition/Pattern/Rhythm/Movement

The principle of repetition simply means the reusing of the same or similar elements in even or uneven format throughout your design. Repetition of certain elements in a design will bring a clear sense of unity, consistency which bridge the gap between overall user experience.

The repeated elements also help in forming patterns and gaps between these elements and how he ordered help in creating the rhythm of design.

Repetition/Pattern/Rhythm/Movement

Scale/Proportion

The scale is the size of one object in relation to the other objects in a design or artwork. Proportion refers to the size of the parts of an object in relation to other parts of the same object. And the golden ratio is a mathematical method for determining proportion.

Scale/Proportion

Proximity/Unity/Harmony

This principle comes in place where we tend to arrange or group elements according to their relationship or similarity that represents the whole group as a single visual unit and any unrelated elements should be spaced apart using right amount of white-space in a way it helps in structuring, organizing and connecting the data on the layout we are working on. Note that, white-space(element of design) plays a major role in proximity and they both mostly comes hand-in-hand.

Proximity/Unity/Harmony

Contrast/Variety

We use contrast to differentiate the elements in the composition for creating a visual interest that grabs the user's eye. Contrast can be applied in any part of the design in relation to the other elements where we can highlight the key area of the composition using scale, color, type, and shape. Developing a good contrast helps users to scan most of the layout. Make sure, your contrast is not too stubble neither too hard from each other but, slide the line somewhere in between which is good enough to grab the user attention.

Contrast/Variety
branding-101 all posts