Basic Principles for Harmonious Web Design

Sonja Hoffmann Updated on 21.10.2020
7 Min.
Web design basic principles
Last updated on 21.10.2020

We all know: You never get a second chance to make a first impression. Every time you visit an unknown website you judge within seconds whether it is "good" or "bad". Fortunately, there are tried and true design principles that you can use as a guide. An overview.

What is "good" web design?

Web design is quite complex: it requires more than just an eye for good typography and a feel for an appealing visual layout. Web design offers an incredible variety of possibilities to express yourself creatively. But it also offers as many opportunities to get lost in the design process. Especially if you are deeply rooted in the design process, it is easy to lose sight of the forest for the trees. The result may be a design that we perceive as "bad".

Our evaluation is often intuitive, so it's hard to explain why the same design element fits perfectly on one website while it looks lost and out of place on another.

What makes a successful website?

Good websites present information clearly and efficiently so that users intuitively find their way through every site. In most cases, a user-oriented website succeeds through a well-balanced interaction of typography, interactive elements, and visual fine-tuning. 

And because that's not complicated enough, we are also limited by what our potential users' browsers can display. And possibly also by the technical skills of the developer or the tool we use to create the website in question. 

You should also take current trends and the corporate identity of your customer into account. Web design sums up UX design, UI design, and graphic design, the CI as well as the current trends in consideration of the technical conditions.

Creating a website is a rather extensive project. Usually, a whole team is involved. Individuals (and unfortunately teams) tend to pay more attention to already acquired skills. In contrast, other areas receive less, or in extreme cases no, attention at all. This creates an imbalance. So your website may be considered of less quality and disharmonious.

"Good" web design is the result of a balance between the different design areas and the technical conditions.

Since a detailed consideration of all areas would go beyond the scope of this article, I will now focus on visual design. 

Contrast, whitespace and colour

Contrast often goes hand in hand with the choice of primary colours of the design as well as the whitespace in the composition. However, whitespace here does not necessarily mean the space that is left white. Rather, it refers to the spaces between elements. This space in between is also called "negative space" and can, by the way, still be coloured.

With a lot of whitespaces, a website usually appears cleaner. This approach also often goes hand in hand with minimalism. This means consistently removing everything from the layout that is unnecessary and does not add any recognisable value to the design. Be it text, decorative elements, or multiple CTAs.

Tip

When planning contrast and colour you should also keep the following in mind: Difficult to read content may cause people with visual impairments (for example colour recognition) to not be able to see this content at all.

Especially with the trend to fill website headers with large panoramic images, we often find text overlays that are difficult to decipher.

A successful example of much whitespace and contrast

Basic Principles for Harmonious Web Design
Basic Principles for Harmonious Web Design

https://aiven.io/

A faint example of contrast

Here is an example, which is a contrast problem especially in the mobile version. The call-to-action disappears completely against the restless background.

why-ux-fails
https://www.opitz-consulting.com/

Sometimes it is not so easy for designers to filter out the right colour for a design. Fortunately, some tools allow us to quickly test different combinations - before we spend a lot of time creating an expensive layout.

Colour Theory: These tools help you with colour selection

Material Design Colour Tool

Material Design Colour Tool creates low fidelity wireframes with a default of two primary colour.

material-design-color-tool

Adobe Color Wheel

Adobe Color Wheel not only helps you to create different colour palettes but also extracts the used colour palettes from existing designs. Recently this is also possible from gradients.

adobe-color-wheel

When selecting a suitable colour, it is worth taking a close look at the customer's branding: Which color palettes are already in use? To what extent may I deviate from them?

The basics of colour theory are also unavoidable: according to your client's particular industry, a colour with the appropriate psychological effect can be chosen. It is not by chance that blue is often used in more serious branches - such as insurance, consulting, and comparison websites. Blue inspires confidence and has a calming effect. However, one should not be too general here, as even nuances of the same colour can evoke very different emotions.

Do you know the 60-30-10 rule?

This is recommended as a golden rule for using colour palettes. The applied principle: the main colour makes up about 60 percent of the layout, a complementary colour comprises 30 percent and a third colour adds further highlights with 10 percent. This arrangement has a particularly well-balanced effect on the user.

Symmetrical or asymmetrical arrangement of design elements

In her article "The Principles of Design and Their Importance" author and designer Cameron Chapman explains her two most important approaches to balance in web design. She differentiates content according to its conspicuousness - in other words, whether it is more or less prominent. 

Accordingly, the following challenge is to arrange the contents in such a way that they convey a sense of balance. The design decision "to arrange symmetrically or asymmetrically" can help here.

How do both approaches work?

In the symmetrical approach, elements with a similar prominence are arranged together. With the asymmetrical approach, on the other hand, more prominent and less conspicuous content is arranged together. 

The layout can be kept clean, for example. The elements are separated from each other, as in Couro Azul is the case. Often such content is placed slightly off-center to give the weaker element a little more space and create a balance.

Couro Azu

Zero however uses the same principle - however with a more free arrangement. Due to the high use of whitespace, it appears elegant and contemporary.

This approach works very well on larger screens (starting from tablet size). Smaller devices, such as smartphones, on the other hand, benefit from clearly separated modules arranged one below the other.

Define and set priorities

Before we get started to design a website, we should define the message. Often a clear marketing concept also brings clarity in the design layout.

Once the key messages are determined, it is important to highlight them by using colour and/or typography.

In this example, you can see how both look in combination:

cowboy
https://cowboy.com

However, there are also many possibilities for implementation. After all, content cannot be emphasised by bold typography and colour alone. Also through images - as with Jamie Oliver's Restaurant - and through an interplay of different principles, you bring selected content into focus.

Jamie Oliver's Restaurant

Proportion, cohesion, and hierarchy

Your website's content should have a strict hierarchy. Therefore, you place the most important thing at the top. With decreasing importance, you should work your way down. Keep asking yourself: which information is most important for my visitors? What is extra information? 

That's why a navigation bar often is placed along the top of the website. Apart from being a UI pattern, it is one o f the most important aspects of a website. The menu is an overview of your core content - the summary of your website.

Visual hierarchy: What is important

Hierarchy can also be created by so-called movement. Here we arrange the contents of the site in such a way that the eye is led through. This can be achieved, for example, by using shapes and arrangement. This Portfolio is an interesting example of what that might look like:

Portfolio

The eye is guided through the screen from left to right. Point 01 here clearly has the largest hierarchy - even all elements are the same size and at first, appear equal. 

Proportion therefore also plays a role: elements of the same size, colour, and shape basically give us the feeling of belonging together and having the same function. This is especially important with interactive elements.

The example presented above illustrates that a consistent design can largely contribute to visual harmony: 

  1. uniform forms are used for all pictures,
  2. all pictures harmonize in colour, 
  3. in total, only two different fonts and font sizes are used, 
  4. only one colour is used for the typo and separators
  5. the separators represent a recurring design element - and they visually unite the image and the two headlines.

Basic principles in web design - Conclusion

Despite all the above basic principles, rules are there to be broken. This is the only way to create interesting, new designs!

The approaches that I have briefly presented here are, of course, not new. Rather, they are variations of scientific and/or psychological research that have been transferred to our current communication media. I find it important to know these theories and methods. Often we implement rules intuitively anyway because our creative eye has "learned" to do so.

Besides, knowledge about different approaches in design helps to evaluate your projects. Think of it as a checklist you can fall back on when you notice that something is not quite working visually. Often you don't find the necessary distance to your project to evaluate it objectively. 

The design principles indicated here are far from complete. If you would like to dig deeper into the subject, you are welcome to take a look at these articles and e-books: 

What is your opinion about design principles? What questions do you have for Sonja? Please use the comment function. Would you like to be informed about new contributions to web design and development for agencies and freelancers? Then follow us on Twitteror Facebook , or subscribe to our newsletter.

After studying Game Design and Creative Writing in the green Auckland region, Sonja Hoffmann has specialized in web and app design and development. Her focus is on gamification and the exploration of user motivation and experience, coupled with a passion and curiosity for technological trends.

Related articles

Comments on this article

Write a comment

Your email address will not be published. Required fields are marked with * .