Shulou(Shulou.com)06/02 Report--

What this article shares with you is what the four principles of web design refer to. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it with the editor.

The editor will discuss these four principles related to web design. As long as you keep these four principles in mind, you will certainly be able to design a cleaner and beautiful web page.

1. Contrast effect

A good contrast design can give users an excellent first impression. If the user's eyes are out of focus, attention will be lost in elements and typesetting interfaces of the same size everywhere. Designers need to design obvious visual elements to guide the user's experience. You can create a good contrast by selecting pictures, colors, fonts, etc.

Picture contrast

This method is effective when you need to display a large illustration behind many small elements. Well, I mean, for example:

The Invoice Machine

This page uses a large picture to attract the attention of users. At the same time, the natural monochrome of the web page makes a few blue applications have a better effect.

Instabox

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

Color contrast

The proper use of a small number of colors is another effective way to create visual contrast on a web page. You can use different colors in the header and text copy of a web page, or in the color of a picture or illustration.

Fatburgr

This site is an excellent example of the application of all design principles. For color contrast, let's take a look at its big yellow head and small grayish text. The principles of arrangement, picture contrast, repetition and classification are all done thoroughly.

I Love Typography

How amazing it would be for a website used to show typesetting to show us an excellent typesetting effect at the top of its own page! I like the fonts they use, and I also like their good cyan and dark gray matching.

Font contrast

If you want to contrast with fonts, you should avoid using two similar fonts in appearance and size. 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 thinnest and thickest versions of the font. Similarly, if you put two fonts with distinct shapes together, you will be surprised at the visual impact they bring. Putting a san serif font and a handwritten font together is an example.

Fixie Consulting

Wow, I really like the typesetting and colors used on this site. Notice the size and strokes of their slogans. I appreciate the sprinkler effect on the page and the use of a small amount of blue.

two。 Repetition principle

The principle of repetition is more commonly used in book design than in web design, but it is equally effective in both. Repetitive design elements can make the page look coherent and enhance the brand. In web design, one way to do this well is to repeat elements in the head and feet of a web page. Take a look at the following examples.

Ten24 Media

Ten24 Media uses creative illustrations for both the head and feet.

Silverback

This website is absolutely awesome! I can definitely show it as a good example in the previous "contrast principle" section, but it is also a good example in the "repetition principle" section, because the interface style and brand part obviously apply this principle. Take a closer look at it using bananas as the icon at the front of the list, as well as forest illustrations of the head and feet.

3. Arrangement principle

The design of your website is amateur or professional, and the arrangement principle plays a very complex role in it. Recently, I strongly advocate the use of grids when designing web pages. Doing so can make your design clean and provide a good design framework. If you are interested in learning more about grid design, check out my recent article (here every potter praises his pot, brag about yourself), Design A Fresh Blog Theme On The 960 Grid

Black Estate Vineyard

The site is displayed on 960 Grid website. Its layout is coherent and eye-catching. I appreciate the way it neatly arranges the main content on the left, although some large headers break the rule and put it in the left sidebar. The heavy use of blanks and the use of font contrast size are very good.

A List Apart

The visual bar used in A List Apart is very distinctive. The columns are well designed to make all the contents easy to read. Studies have shown that too wide columns can cause serious reading difficulties. Your eyes will get tired when following the text in such a wide column. A List Apart

4. Principle of classification

The last principle is classification. This principle is only used when grouping related elements and separating unrelated elements. If you divide everything into the same block of text, it will definitely destroy the user's experience. This is why it is so important to use header tags and appropriate blanks.

Envato

The site beautifully organizes content into three main categories that are clearly and neatly defined.

Paradigm Reborn

This website is well structured. The head is neat and simple. The blank space is very good, and the content is very logical.

The above is what the four principles of web design refer to. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.