Site Overlay

Principles of Visual Design of a Website | Builder CRM

The first impression counts. What counts not only in the job interview and many other situations in our lives also applies to the design of a website. Within seconds, it is decided whether the design is appealing, harmonious or rather moves to leave the page.

What is a successful website?

Good web design requires more than just a good eye for typography and a sense of appealing visual design. The countless creative expressions in design are often both a curse and a blessing. On one hand, there are many design possibilities available, on the other hand there is the danger of getting worse in the design process and thus, despite the best intentions, to create a design that is perceived as “bad”.

A good website conveys information clearly structured and efficient, so that the visitor can find his way around intuitively. A user-oriented website impresses with the interplay of typography, interactive elements and a pronounced visual fine-tuning. This includes, for example, taking into account a customer’s corporate identity. If your company or business needs digital marketing and other services can help you.

Web design is basically a healthy balance between UX, UI and graphic design, the CI and the current trends taking into account the technical conditions.

Contrast, Color, and Negative Space

With the selection of the primary color, the contrasts to be used usually result. In combination with the Negative Space or Whitespace, the first, visual impressions of the design framework emerge. The Negative Space describes the intentional freedom between the elements of a page. Through it, a website gains structure and usually looks more tidy and clearer.

When planning contrast and color, it should also be taken into account that people with poor vision in color recognition may not be able to perceive the displayed content.

Help with color selection

The question of the right color is sometimes not so easy when designing a new design. If you don’t get a denominator using the corporate identity colors, several tools, such as the Adobe Color Wheel, offer the possibility to test different color combinations in advance.

Of course, the basics of color theory also play a role here. According to the industry, a color with appropriate psychological effect should be used. So it is due to the fact that reputable industries, such as insurance companies and banks, often rely on the color blue, because it generally stands for trust and has a reassuring effect.

The 60-30-10 rule

The golden rule for applying color palettes. The principle is that the main color applied should make up 60% of the layout and the selected complementary color should make up 30% of the layout. A third color sets the highlights of a page with 10%. This composition is considered to be particularly balanced and should be observed in principle with regard to the visitor.

Setting priorities

The starting point for any design considerations is the message to communicate. Once clearly outlined, it is important to emphasize this by using color and/or typography. But images can also help to focus on the message.

Visual hierarchy

In most cases, a Website’s navigation menu is at the top. There is a reason for this. A website is viewed from top to bottom. Because the navigation menu is, so to speak, the table of contents of a website, it should be the user’s first sight.

For this simple reason, the most important content should be placed as high as possible. With decreasing importance, they can then be continued downwards.

Another point is the eye-movement principle. The content of a page is tuned to allow the eye to be passed through. The portfolio on abbystolfo.com is a vivid example of how the eye is guided through the content using shape and arrangement.