BACK
When designing anything it's vital to understand the elements and principles of visual design. These include: Balance, Contrast, Emphasis, Proportion, Hierarchy, Repetition, Rhythm, Pattern, White Space, Movement, Variety and Unity.
With web design in particular we can apply these principles to create a user interface that is aesthetically pleasing to the eye and highly intuitive for the end user. This is the ultimate goal of design and leads to a more frictionless and enjoyable final product.
"The alternative to good design is always bad design. There is no such thing as no design." - Adam Judge
I like to think of design as the science of making things look good and with an understanding of these principles you can consistently produce good design. These principles are tools a designer should master in the pursuit of perfecting their craft. So let's take a look at these principles and how to apply them.
All elements of a design - typography, images, patterns, shapes, etc. carry a visual weight. This weight can influence the attention it commands from the viewer. For example, a large and bold line of text on a page will have a heavy weight to it, whereas a smaller snippet of text will be much lighter. The layout of these items on a page should create a sense of visual balance and complement one-another in the space.
Contrast is the term used to describe the difference between two elements, particularly elements that are close together. The amount of contrast between elements will control how much a certain element stands out on the page. If something such as a paragraph of text is too low contrast compared to the background, it can make this content very difficult to read, especially for people with impaired vision.
In the design industry a very common piece of feedback to hear from a client is "please make it pop more!". Although that sounds extremely vague, it is very likely the client is saying the contrast is too low between certain elements.
Emphasis refers to something that is meant to stand out. In web design, this is usually an item or element on the page that is most important to the target user and so it should stand out to be easy to find.
De-emphasis can also be used to reduce the visibility of certain content such as the fine print you might see for terms and conditions of a competition or product.
Proportion is simply the size of one element in relation to another. The size of an element should be set based on its importance to the target user. Proportion is intrinsically linked to balance, as larger elements will command more attention to smaller ones and these should be laid out in such a way to prioritise what is most important to the user.
Hierarchy within a design system refers to the order of importance every visual element has in relation to one another. On an a website you really want the most important elements such as headings to appear the most important. Less important elements such as body text should appear less important.
In web design, hierarchy also allows us to control the order in which the user will process the information.
For example, the title of a web page should be the most important item within the hierarchy as it's the first thing we want the user to read. The following headings and paragraphs should also be formatted to convey their importance which can be controlled with font weight, size and colour.
Simply put, repetition is repeating a single element many times in a design. In web design, repetition is a great way of creating consistency across all pages. For example, a company's logo should be displayed in the same place on every single page of their website. Another example is having the navigation links in the same place across all pages. This helps to meet the users expectations as they navigate between the pages on your website and provides a nice, consistent user experience.
Repetition can also be used to reinforce a message or an idea. If you're offering free shipping worldwide, you can display this message multiple times across the website to help users retain that information.
In music, rhythm is created in the spacing between notes. These are the silent gaps that create a sense of rhythm in a piece of music. In design, rhythm is also created in the spacing between elements and allows us to set a tone and movement to the content.
For example, there are five different types of rhythm that create a different sense of movement to a layout. These are: regular, alternating, flowing, progressive and random rhythms.
Regular rhythms repeat the same spacing between elements whereas alternating rhythms set a pattern that repeats itself such as 1-2-2-1-2-2. Flowing rhythms will have organic bends and curves and create a wavy movement to the content. Progressive rhythms shift and transition over time, changing with each iteration and random rhythms will follow no specific intervals such as falling raindrops.
Rhythm can be used in web design to set a specific tone for the content depending on the feeling you wish to convey.
Patterns are composed of repeating elements working together to form a repeatable visual asset. Patterns exist all around us, such as the stripes on a bee or the checkers of a table cloth.
In web design, patterns are effective visual elements to help fill white space and can take a design from looking very plain and boring to extremely visually interesting.
In design and branding, a pattern can also refer to a set of guidelines for how a deliverable should be designed. For example, most large companies will have a design pattern in place for the creation of any future content, this helps to ensure consistency across their entire brand, even when new designers come in to create assets.
This is the empty space in a design that is completely void of any design elements or content and can also be referred to as negative space. The value of white space is often overlooked in web design, as it can be tempting to fill every pixel of a page with content.
White space plays a very important role in web design and should be created intentionally, to create emphasis on the content and give it space to breathe.
Movement is the path the users eye travels over a design, it is a great tool that can lead the user in a desired direction. The users eye will naturally fall onto a certain area of the design first, but with effective movement design we can steer them towards the most important content to create an invisible flow through the page.
Successful movement design can make the user experience of your site effortless and improve the performance of your site by leading users towards the sign up or purchase buttons.
Variety is a design principle that helps to break up the monotony of a page. Without variety in design, a page can become overly repetitive and boring which leads to the user exiting your site or ignoring your brand completely.
Variety can be applied using any design element such as typography, colour, pattern, images and shapes. However, be careful not to apply too much variety as you can risk breaking the unity of your branding. To achieve a successful amount of variety it should be used in moderation, with the goal of improving the aesthetic of your design.
Unity is the sense that all elements within a design work well together and belong there. Without unity, a design will appear sporadic and confusing to its audience. Every visual element within a design should have a clear relationship with each other, as anything that sits outside of that relationship will compromise the overall consistency of the experience.
For example, a website that was not built by a designer could have ten different fonts with no clear relationship to each other. They could also use 20 different colours within one page design, which serves a confusing experience to the audience.
Designs with good unity will appear far more organised and will ultimately evoke a better response from the audience.
Every design process should always begins with research. Personally, I like to check awwwards daily for inspiration to keep up with the latest design and development trends. When starting a new project, it's imperative to identify the target audience of the company you are designing for and to do a deep dive into the competitors websites and branding within their industry. Without knowledge of the market you're designing for it's impossible to know if what you are creating will resonate with the intended audience.
There are some other additional design principles it helps to understand such as Gestalt principles, typography, alignment and shape. Knowledge of these subjects will further improve your ability as a designer and improve the performance of everything you create.
At the beginning of your design process, it's important to ask the client what success looks like to them, what they're trying to achieve through this design and how they'll measure the success of the project. The answer to this will serve as an anchor to your overall process, which you can then base your decisions around.
It's also important to remember that you are designing for humans. It can be incredibly helpful to ask people close to you such as friends or family to look over your designs and give their immediate reactions and thoughts. You may be surprised by things they point out that you might have overlooked during your design process.
Without knowledge of the principles outlined above, it is still possible to create good design. However, there will be a lot of trial and error involved. If you can master the 12 principles of design and understand how they are applied in the context of your project, you will consistently create good design and produce websites that succeed.
