So what is the difference between good design and bad design? Good design follows basic principles that have evolved over 30 years of creating websites. Of course, an experienced designer can create a good product without these rules – but if you’re just learning web design, following basic web design principles can help you avoid common mistakes.
Basic web design principles:
- Balance
- Contrast
- Emphasis
- Movement
- Rhythm
- Hierarchy
- “Air”
- Consistency
Balance
Visual balance means that none of the elements within any composition will overshadow the others. To achieve this, draw an imaginary line down the middle of the screen and make sure that the elements on the right and left sides look equal.
There are two ways to achieve balance in web design:
Symmetrical balance is the mirroring of elements on a page where the right and left sides are nearly identical. Pages with symmetrical balance can evoke a sense of reliability, harmony and beauty in the user.
Asymmetrical balance is a situation where the elements on the right and side of the site are different, but converge in terms of overall visual weight (for example, one large graphic element on one part, and several small ones on the other). This balance is considered more dynamic and is eagerly used in modern web design.
Contrast
Contrast is the arrangement of elements in a way that emphasizes their differences and makes them stand out against each other. For example, dark and light, light and heavy, large and small. With contrast, web design turns out to be more interesting and engaging, and therefore more likely to keep users’ attention on the page.
Accent
Not all elements on a website need to be equally important. Some should catch your eye from the first second on the site: a company logo, a call to action, or a button. Highlighting an important element, you will not only draw the user’s attention to it, but also make the whole composition of the site more dynamic.
Movement
By changing the size and order of elements on the page, you can control the direction in which the reader’s eye moves. And thus – to attract his attention to the most important parts of the site.
Rhythm
Elements on the page should “rhyme” with each other – that is, they should have similar characteristics like brand colors and brand font. This will help reinforce brand identity and increase online presence.
Hierarchy
One of the grossest mistakes in web design is placing important information at the bottom of the page. This way, it will only be noticed by users who didn’t leave the site in the first minute and decided to scroll down – and there won’t be many of those people. So remember a simple rule: the more important the information, the higher on the site you need to place it.
“Air.”
“Air” or negative space is the areas of the site free of any visual elements. That is, indents, spaces between sections, backgrounds, and so on. A large amount of “air” is necessary for any site – negative space unloads the site and makes it easier to perceive.
Consistency
Web design consistency is achieved when the rest of the basic principles are followed and in harmony. When site elements are balanced, properly positioned, contrasted with each other and surrounded by enough “air”, the visitor is more likely to linger on the site and take the action you want them to take.
In a consistent web design, elements blend together harmoniously to create a unified visual picture – as in the example on the left.