Four principles for designing clean and beautiful web pages

One of my favorite design books is "Robin Williams Design Workshop". It goes deep into practical design theories and contains many excellent design examples. One of the four major design principles worth noting is that they have been used by me in design. The four principles are contrast, repetition, arrangement, and classification.
This article will discuss the four principles related to web design. As long as you keep these four principles in mind, you will be able to design a more clean and beautiful web page.
1. Contrast Effect
A good contrast design can give users an excellent first impression. If the user's eyes have no focus, the attention will be lost everywhere in elements of the same size and typographical interface. Designers need to design prominent visual elements to guide the user experience. You can select images, colors, and fonts to create a good contrast.
Image Contrast
This method is effective when you need to show a large-sized illustration behind many small elements. Well, I mean, for example:
The invoice Machine
This webpage uses a large image to attract users' attention. At the same time, the natural monochrome of the web page makes few blue applications have a better effect.

Instabox

What do you notice first when you see this page in your eyes? The most likely thing is the star on the box. Like the invoice machine, they all use a large image and few colors to create a visual focus.
Color contrast
Using a few colors right away is another effective way to create visual contrast on webpages. Different colors can be used in the header and text copy of a webpage, or in the color of an image or illustration.
Fatburgr

This website is an outstanding example of all design principles. For the color contrast, let's take a look at its large yellow head and small pale gray text. The principles of arrangement, image contrast, repetition, and classification are all thorough.
I love typography

If a website used to display typographical content shows us an excellent typographical effect on its own top pages, it is amazing! I like the fonts they use, and they also like their good combination of blue and dark gray.
Font contrast
If you want to use a font to produce a contrast, avoid using two similar fonts. Similar fonts can cause confusion and blur the design. However, if the font size is very different, it will be very effective, or the combination of the shortest font and the rough version is equally effective. Similarly, if you place two fonts with significant differences in shape, you will be surprised by the visual impact they bring. Put a san serif font and a handwritten font together as an example.
Fixie Consulting

Wow, I really like the layout and color on this website. Pay attention to the size and strokes of their slogans. The sprinkling effect on the page and the use of a small amount of blue make me very appreciated.


2. Repetition Principle
Compared with web design, the repetition principle is more widely used in book design, but it is equally effective between the two. Repeated design elements can make the page appear coherent and improve the brand. In web design, one way to achieve this is to repeat elements in the header and foot of a webpage. Let's take a look at the examples below.
Ten24 Media

Ten24 media uses creative illustrations on both the head and foot.
Silverback

This website is absolutely awesome! I can use the contrast principle as a good example, but it is also a good example, because its interface style and brand are clearly applied to this principle. Take a closer look at it and use bananas as the icons in front of the list, as well as forest illustrations for heads and feet.
3. Arrangement Principles
The Design of your website is very amateur and professional. The arrangement principle plays a very complicated role in it. Recently, I have advocated the use of bars when designing web pages. This can make your design clean and provide a good design framework. If you are interested in learning more about bar design, go and read my recent articles (here, let's sell ourselves), design a fresh blog theme on the 960 Grid
Black estate vineyard

The website is displayed on the 960 grid website. Its layout is consistent and eye-catching. I really appreciate the practice of neatly placing the main content on the left, even though some large headers break this rule side by side into the left sidebar. The use of a large amount of space left and the font contrast size are very good.
A list apart

The visual bar used in a list apart is very distinctive. The topic is well designed to make all the content easy to read. Research shows that too wide columns may cause serious reading difficulties. When you follow the text in such a wide column, your eyes will become tired. A list apart
4. classification principles
The last principle is classification. This principle is used only when unrelated elements are grouped and separated. If you divide everything into the same text block, it will definitely destroy the user experience. This is why it is so important to use the header label and leave it empty.
Envato

The website beautifully organizes the content into three main categories. The definition of the content is clear and regular.
Paradigm reborn

This website is well structured. The header is neat and simple. The blank space is very good, and the content is open logically.
Final idea
When you remember these four basic principles in your mind, you will find that your design has been incredibly improved. Of course there must be many other things to consider, but your design will make great strides with contrast, repetition, arrangement, and classification as the basis.