4 Principles for designing neat and beautiful web pages

One of my favorite design books is Robin Williams design Workshop. It has a deep practical theory and contains a lot of great design examples. One area of concern is the 4 major design principles that have been used in the design for me. These 4 principles are: contrast, repetition, arrangement, and classification.

This article discusses these 4 principles related to Web design . As long as you remember these 4 principles firmly in your mind, you will be able to design a more neat and beautiful web page.

1. Contrast effect

The good contrast effect design can give the user a very good first impression. If the user's eyes do not have the focus, the attention will be lost in the same size element and typesetting interface everywhere. Designers need to design the obvious salient visual elements to guide the user's experience. You can create a good contrast by choosing pictures, colors, and fonts.

Picture contrast

This is useful when you need to show a large size illustration behind many small elements. Well, I mean, like:

The Invoice Machine

This page uses a large picture to attract the attention of the user. At the same time, the natural color of the Web page so that few blue applications have a better effect.

Instabox

When you see this page in your eyes, what do you notice first? The most likely is the star above the box. Like the Invoice Machine, they create a visual focus by using a large picture and a few colors.

Color contrast

Using just the right amount of color is another effective way to create a visual contrast in a Web page. You can use a different color in the head and text copy of a Web page, or you can apply it in the color of a picture or illustration.

Fatburgr

This site is an excellent example of an application of all design principles . About color contrast let's take a look at its big yellow head and small grayish text. The principles of alignment, picture contrast, repetition and classification are all very thorough.

I Love Typography

A site to show the composition of the website if it is at its own top of the page for us to show an excellent layout effect, it makes people feel much surprised Ah! I like the fonts they use, as well as their good cyan and dark grey collocation.

Font contrast

If you want to use fonts to create contrast effects, you should avoid using 2 very similar font appearance and size. Very similar fonts can cause confusion and blur the design . However, the font size is very different, it will be very effective, or the most thin and the most coarse version of the text together is also valid. Similarly, if you place two fonts that are distinctly different in appearance, you will be amazed at the visual impact they have. Putting a SAN serif font together with a handwritten font is an example.

Fixie Consulting

Wow, I really like the typography and colors used on this site. Watch the size and strokes of their banners. The sprinkling effect on the page and the use of a small amount of blue make me very appreciative.

2. The principle of repetition

The principle of repetition is more common in book design than Web design , but it is equally effective between the two. Repetitive design elements can make the page appear coherent and enhance the brand. One way to do this well in Web design is to repeat elements at the head and feet of a Web page. Take a look at the examples below.

Ten24 Media

Ten24 Media uses creative illustrations in both the head and foot.

Silverback

This website is absolutely awesome! I can definitely show it as a good example in front of the "contrast principle " section, but it's also a good example in the "Repeat Principle" section, because its interface style and branding part clearly apply this principle. Take a closer look at it with bananas as the icon in front of the list, as well as a forest illustration of the head and feet.

3. arrangement principle

The design of your website is very amateur or very professional, and the arrangement Principle plays a very complicated role in it. I have recently advocated the use of bars when designing Web pages. Doing so will make your design very clean and provide a good design framework. If you are interested in learning more about the design of the grid, check out my recent article (in this case, puff), designA fresh Blog Theme on the 960 grid

Black Estate Vineyard

This site is displayed on the 960 Grid website . Its layout is very consistent and eye-catching. I appreciate the idea that it neatly follows the main content to the left, although some of the big-class head breaks the rule side to the left sidebar. The use of a large amount of padding and the font contrast size is very good.

A List Apart

The visual bars used in a list Apart are very distinctive. The columns inside are well designed to make all of the included content easier to read. Research shows that too wide a column can cause serious reading difficulties. Your eyes will become very tired when you follow the text in such a wide column. A List Apart

4. Classification principle

The final principle is classification. This principle is used only when the relevant elements are grouped and the extraneous elements are separated. If you divide everything into the same block of text, it will definitely destroy the user experience. That's why it's so important to use head tags and proper padding.

Envato

The site nicely organizes content neatly into three main categories, which are defined as clear and regular.

Paradigm Reborn

The site is well structured. The head is neat and straightforward. The gap is very good, the content is open to a very logical.

Final thought

When you think about these 4 basic principles in your mind, you will find that your design has been miraculously improved. There must be plenty of other things to consider, of course, but with contrast, repetition, alignment and classification as the basis for your design will make great strides.