We all know you never get a second chance to make a first impression. When you visit a website for the first time, you decide whether it's "good" or "bad" within seconds. Fortunately, there are some tried and true design principles you can use as a guide for your web design. An introduction.
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 just as many opportunities to get lost in the design process. Especially if you're deeply rooted in the design process, it's easy to lose sight of the wood for the trees. The result may be a design that we perceive as "bad".
Our judgement 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.
As if that's not complicated enough already, we're 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 is made up of UX design, UI design, and graphic design, the CI as well as the current trends within the technical conditions.
Creating a website is a rather extensive project. Usually, a whole team is involved. Individuals, and unfortunately also teams, tend to pay more attention to the areas in which they're particularly well versed. In contrast, other areas receive less, or in extreme cases, no attention at all. This creates an imbalance. And a website may be considered of lower quality and disharmonious.
"Good" web design is the result of a balance between the different design areas and the technical conditions.
A detailed consideration of all areas would go beyond the scope of this article so I will focus on visual design in this guide.
Contrast, whitespace and color
Contrast often goes hand in hand with the choice of the design's primary as well as the whitespace in the composition. However, whitespace here doesn't necessarily mean space that is left white. It rather refers to the spaces between elements. This space in between is also called "negative space" and can, by the way, still be colored.
A lot of whitespace usually makes a site look tidier and clearer. This approach often goes hand-in-hand with minimalism. This means consistently removing everything from the layout that is unnecessary and does not bring any recognizable added value to the design. Be it text, decorative elements or a flood of CTAs.
When planning contrast and color, you need to keep the following in mind: people with visual impairments (e.g. color recognition) may not be able see content that is difficult to read at all.
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
An example of weak contrast
In the example below, there is a significant issue with contrast, especially in the mobile version. The call-to-action disappears completely against the restless background.
Sometimes it's not easy for designers to filter out the right color for a design. Fortunately, some tools allow us to quickly test different combinations before we spend a lot of time creating an expensive layout.
Color theory: tools to help you choose colors
Material Design Colour Tool
Material Design Color Tool creates low fidelity wireframes using two primary colors.
Adobe Color Wheel
Adobe Color Wheel not only helps you create different color palettes, but also extracts the used color palettes from existing designs. Recently, this is also possible based on color gradients.
When selecting a suitable color, it's 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 color theory are also unavoidable: according to your client's particular industry, a color with the appropriate psychological effect can be chosen. It's no coincidence 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 color can evoke very different emotions.
Do you know the 60-30-10 rule?
This is recommended as a golden rule for using color palettes. The applied principle: the main color makes up about 60 percent of the layout, a complementary color comprises 30 percent and a third color 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. According to this, she distinguishes content according to its conspicuousness - that is, whether it is more eye-catching 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.
For example, the layout can be kept clean. The elements are clearly separated from each other, as is the case with Couro Azul. Often, such content is placed slightly off-center to give the weaker element a little more space and create a balance.
Zero, on the other hand, uses the same principle - but with a freer arrangement. The high use of whitespace makes this look 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 start designing a website, we need to define the message. A clear marketing concept often also brings clarity in the design layout.
Once the key messages are determined, it's important to highlight them by using color and/or typography.
In this example, you can see how both look in combination:
However, there are also many possibilities for implementation here. Content can be emphasized not only through bold typography and color. Also through images - as with Jamie Oliver's restaurant - and through an interplay of different principles, you can bring selected content into focus.
Proportion, cohesion and hierarchy
Your website's content should have a strict hierarchy. You therefore 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 is often placed along the top of the website. Apart from being a UI pattern, it's one of 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 through so-called movement. Here we arrange the content of site in such a way that the eye is guided through it. This can be achieved, for example, with the help of shapes and arrangement. This portfolio is an interesting example of how something like this could look:
The eye is guided through the screen from left to right. Point 01 here clearly has the largest hierarchy - even though all elements are the same size appear equal at first glance.
Proportion therefore also plays a role: elements of the same size, color, 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:
- uniform forms are used for all pictures,
- all pictures harmonize in color,
- only two different fonts and font sizes are used,
- only one color is used for the typography and separators,
- the separators represent a recurring design element - and they visually unite the image and the two headlines.
Conclusion: basic web design principles
Despite all the above basic principles, rules are there to be broken. This is the only way to create interesting, new designs!
The approaches I've 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. We often 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 isn't 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, take a look at these articles and e-books:
- Web UI Design for the Human Eye (Color, Space, Contrast)
- The Principles of Design and Their Importance
- How to Use Powerful Gestalt Principles in Design
What is your opinion about the design principles? What questions do you have for Sonja? Feel free to use the comment function. You want to be informed about new articles on web design and development for agencies and freelancers? Then follow us on Twitter, Facebook or via our newsletter.