4 Principles for designing good Web pages

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

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

Good contrast effect design can give users 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 website that is used to display typesetting if it shows us an excellent typography effect at the top of its own page, that's amazing! I like the fonts they use, and they like 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, it can be very effective to make the font size very different, or to combine the finest and thickest versions of the fonts together. 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

Repetitive principles are more common in book design than web design, but they are equally valid. 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 the banana as the icon in front of the list, as well as the forest illustration of the head and feet.

3. Arrangement principle

The design of your website is very amateur or very professional, 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 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), design A Fresh Blog Theme on the 960 grid.

Black Pence Vineyard

This site is displayed on the 960 Grid website. Its layout is coherent and compelling. 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. It's pretty good to use a lot of padding and font contrast sizes.

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 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 very logically.

Final thought

When you think about these 4 basic principles in your mind, you will find that your design has had an incredible improvement. 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.