Sorted Design Agency
The seven principles of design for websites
by josh
Design table with pot plants, Macbook and hinged lamp

Like all art forms, good design relies on a few basic principles. Elements such as colour, space and composition play an important role in design and can evoke various reactions from the audience.

Good design does not always have to stick to all of the principles, but utilising them is a sure way to create something aesthetically pleasing. For web designers, these principles should be applied to sites. They will make the website look better and will help with the functionality.

One of the primary concerns for web designers is the usability of the site. A functional website will allow the user to do what they need to do with ease. A user-friendly website will also get a higher ranking on search engine results pages. This ease of use stems directly from good design elements.

A well-designed website needs to look good, be easy to read and navigate, as well as allow the user to perform the intended tasks. Here are the seven principles of design that you should integrate into your website.

Design principle one: Balance

They say life is all about balance, and a web page should be no different. Simply put, balance is making sure that no single element overpowers the others. There should never be too much text, too many visuals, or too much blank space on a page; rather a perfect balance between all of the elements.

There are three types of balance to consider: symmetrical, asymmetrical and radial balance.

  • Symmetrical balance – This is where one side of the page resembles the other. An imaginary or real line can divide the page equally. Both sides have equal importance and aesthetic, giving a pleasing feeling of consistency.
  • Asymmetrical balance – Its a bit of an oxymoron, but this is where features on one side of the page are not exactly the same as on the other but they have the same visual importance. An example would be using a bold photograph on one side of the page and a few paragraphs of text on the other, evoking a feeling of modernity.
  • Radial balance – This is where everything centres around a midpoint, rather than a line. Features on the web page are equidistant from the centre point and this type of balance can be used to give a feeling of dynamism.

To ensure that your website is balanced, distribute your content (images, text, videos etc.) equally. Every element has the potential to upset the balance, even a small button, so pay close attention. Use invisible boxes to group your content and ensure that it is spread nicely across your web page.

Design principle two: Contrast

Contrast is linked to balance. It is important to have opposite elements on the page in order to balance one another out. Contrast can also be used to highlight an element without upsetting the balance. Whether it’s contrasting colours, shapes or space, a good website will lead the viewer’s eye with the use of contrast.

The juxtaposition of contrasting elements on the page creates excitement and leads the visitor’s attention to the right place. A boring website will have no contrast, so add a ‘pop’ by using a bright colour, or a round image next to a block of text. Highlight the important information or elements on a web page by making it stand out from the rest of the content.

If your website uses warm colours (yellows, oranges and reds) in its colour scheme, then think about adding buttons in cold colours (blues and purples) to make them stand out. Another popular use of contrast is to have a white background with dark grey text and then elements of a bright colour to draw in the viewer’s attention.

Design principle three: Emphasis

Leading on from contrast, we get emphasis. This is when a contrasting element is actually given prominence on a web page. It becomes the dominant feature of the composition. A well-designed website should have a focal point – something that is emphasised for the user.

Alex White writes in his book, The Elements of Graphic Design, that “a lack of dominance among a group of equally-weighted elements forces competition among them. Readers must then discover their own entry point, which is a chore.”

Your website should be balanced, but something on the page should stand out and act as the starting point for the user. Not all elements are as important as one another; some are vital, others are just space fillers.

Emphasis should be placed on your call-to-action buttons (CTAs) as these are the things that drive traffic and business on your site. Background images are there to look pretty, but the CTAs are more important. Perhaps change the typeface of your CTAs, or make them a bold and contrasting colour.

Leave some white space around the CTAs to emphasise them more and allow the users to find them more easily. You could even pin these buttons to the screen so that they remain in the same place even when the user scrolls down the page.

Design principle four: Movement

Videos always get more engagement than images – it’s a known fact on the internet. They are more attention-grabbing and add movement and dynamism to a website. Even simple animations and moving effects are effective design elements that should be used.

If you don’t want to use videos to add movement to your site, you can take advantage of parallax scrolling. This is a popular tool on modern websites where a background image remains static but the strips of content move as you scroll down the page.

Parallax scrolling creates a three-dimensional effect and gives your website depth while adding moving elements. Many web-hosting sites such as WordPress and Wix even have an option to add parallax effects to your website.

Movement is a strong visual element and so should be used sparingly to avoid disrupting the balance and emphasis of a web page. Too many moving elements also creates confusion for users; people are likely to click off a website if they bombarded with multiple moving visual cues.

Design principle five: Repetition

Humans are creatures of habit. We like routine and certainty. Repetition is a great design principle that can help evoke feelings of certainty. Repeating elements can create patterns, consistency and familiarity which is pleasing on the eye and the mind of the user. When it comes to branding and identity, repetition is an important element for websites.

Use one or two typefaces on your website or the same three colours for different sections of your website. This will help your users to navigate your site and remember it once they’ve finished browsing. Use the same geometric shapes or style cues on different pages of your website.

Just remember, like movement, repetition should be used sparingly. Too many repeated elements can lead to monotony and bore the user. Use visual breaks, blank spaces and other elements to separate your repeated features.

Design principle six: Hierarchy

Hierarchy is linked to emphasis and it plays a vital role in design and composition. A good design should have three levels of hierarchy: the most important feature, the middle stuff and the least important element.

The human brain likes to know what it should look at first. The same level of importance can’t be held by every element on a page, therefore some need to be emphasised to grant them a higher level of importance.

The brain will automatically give more importance to the first element is sees. As a web designer, you need to make sure that the viewer’s attention is directed to the most important element first. This can be done by placement, movement, emphasis or contrast.

When designing your website, jot down the importance of each element of your page. Are your videos more important than the text? Are your CTAs more important than the videos? The most important elements should go at the top left of the page as people naturally scan a website in a ‘Z’ pattern from the top left, moving across and down, ending at the bottom right.

The least important information should be placed right in the middle of the page as people tend to scan the centre quickly. The placement of elements, as well as the use of the other design principles on these elements, will give them a hierarchy.

Design principle seven: Unity

All the elements of a web page should work in unity, whether at the top of the hierarchy or at the bottom. The key to a unified website is balance (remember design principle one). Unity makes a website harmonious as every element has a specific place in the composition and role to play on the page.

No element is out of place, random or useless. Unity is about how the features of your website work together in agreement. This leads to a pleasing user experience. If you add a new element to a page, make sure that it works in unison with the rest of the features and fits into the overall composition.

Even contrasting elements can work together to create a unified web page that enhances its function. Play around with the other six principles to create this final principle and a beautiful, well-designed website.

___

Sorted Design Agency is a creative company that constantly looks for solutions to other people’s problems. These problems come mostly in the visual format, such as graphic design, logo and illustration, but we’re experts in brand development, website design, and digital SEO campaigns as well.

___

Based in Pretoria and Cape Town, Sorted has been in the content marketing industry since 2006. We assist your company with its corporate identity by communicating core values through content and articles written for your website, blog and news area. This content is supported by AdWords and social advertising, which facilitates wider reach and audience growth. Turn your website into a business tool.

___

Sorted also owns two other businesses; InkFish Print Studio – a printing company that handles a range of promotional materials for businesses and other services for individual customers, and Pampiri + Kie – a gifts and stationery store selling online and in-store. Both of these companies operate from Cape Town and Pretoria.

___

Follow us on Facebook, Instagram and LinkedIn for the best tips on design, marketing and web development. We also share the latest industry news and fresh content to inspire fellow designers, creatives and marketers.

One thought on “The seven principles of design for websites

Leave a reply