8 Web Design Principles To Live By

In the world of design, there are principles for just about every product or object that could possibly be designing. If you want to be overwhelmed by it all, you can check out this open source collection of design principles. There are principles that are incredibly specific and all of these are useful in their own way. Here are a few generic design principles to live by regardless of what you are designing.

‍

BALANCE

Think of your design piece as a scale where the balance would be the distribution of the visual "weight" of each element of design. Every element carries its own visual weight - typography, patterns, colors, textures, images, and space. Some elements are 'heavier' than others, and some are 'lighter.' There are three types of balance, symmetrical, asymmetrical, and radial. This means balance doesn't always have to mean every element is the same size or spaced evenly across your design. In an asymmetrical design, any element used on one side of the design would be similar to the other side. Whereas in an asymmetrical design, the sides will look different but still have a balanced feel. In a balanced radial design, the elements are all similarly centered around a central focal point. Balance can give design stability and will help to distribute the elements evenly throughout the design. A designer's goal should be to create a balanced feel across the design for its viewers.

CONTRAST

Contrast is the feeling when an element in a design just 'pops' out at you. Contrast creates space between other elements in your design. It is a fundamental principle as it lets you draw out the essential elements inside your composition. When your background is significantly different from any elements inside, they all work together and creates easily readable elements. This is one of the more common ways designers and artists create contrast - by using colors opposite from each other on the color wheel. Contrast helps to guide your viewers' eyes to what is an essential part of your design. If you plan on using type in your design piece, it's essential to understand contrast when it comes to the weight and size for the balance of your type. How will your viewers know what is most important in your design piece if everything is bold?

EMPHASIS

This principle of design is tied into contrast as the contrast will draw the viewers' eyes to what the design is emphasizing. Designers can make an area they want to be viewed with emphasis by making this area stand out using other areas to contrast with it. You should think about what you want as the first thing your viewers should be drawn to. Emphasis can also be used to take away some of the impacts other elements have. Often enough, people don't realize emphasis when it's well done. You can use color to create an emphasis, or something that breaks to visual hierarchy, and most used is size to focus the viewer's attention on the element needing emphasis.

MOVEMENT

Movement refers to the general path your viewers' eyes will take through the design piece. Movement controls the elements in a composition to lead the eye from one element to another that helps how information is conveyed. This creates the story in your design. The most important element should lead to the next most important element. Other design principles like balance and contrast with help with your design, but without movement, your design will end up for none. If you stand back and take another look at your design and something doesn't sit right - too big or the color doesn't compliment others - just take another spin at it until everything moves smoothly. 

PATTERN

A pattern happens when an element in your design is uniformly repeated inside a visual composition. Nearly anything can become a pattern, but the more common elements are intersecting lines, shapes, or spirals. Patterns can set the tone for your design but also set the stage for your other design principles, like contrast and emphasis. 

PROPORTION

Proportion is the feeling of unity between the elements of your design concerning each other. This seems to be one of the more straightforward design principles to understand. Think about when you draw the human body - the proportion can refer to the size of the head to the rest of the body. This is sometimes referred to as scale. Simply put, the proportion is the visual size and weight of each element in your design and how those elements relate to each other. Proportion, like contrast, can signal to what is essential in the design and what isn't, where larger elements are more important, and smaller elements aren't. Proportion refers to the size of an element, but also the ratio of the element in relation to other elements and the focal points created from proportion. 

REPETITION

Repetition works similarly as a pattern to make the design composition feel active. If you're limited to work with only two or three colors in your design, you'll notice the need to repeat yourself, but that's okay. Repetition is a design can help strengthen and unify it. Repetition is also an excellent way to reinforce any ideas you're trying to show by repeating the same colors, typefaces, or any other elements of a design. This ties together elements to aid in organization and consistency. Consistency, as we know, is essential in branding as you want your brand to be instantly recognizable.

WHITE SPACE

White space, sometimes known as negative space, refers to the empty space in a design. Some parts of your design, and this is where newer designers sometimes fail, don't always need every pixel-packed with a design element. It's just as important to leave blank space as it is to fill space with color and images. Negative space creates shape in your design and can help to highlight the more critical aspects of your design. Negative space can give your design elements the space they need to breathe. This can also make elements easier to discern. This is why typography is easier to read when you use upper and lowercase letters as the negative space is varied around the lowercase letters. In other cases, negative space can be used to create secondary images not immediately apparent to the audience.