Talk about five "golden rules" in web design

From the font design, graphics to page layout, there are a few general principles of design, it applies to Web pages or printing. However, on the web design side, many of the rules that should have been messed up, just follow the feeling. This is not to say that designers are lax about rules, but that most web workers don't know what to do with them-even if they do, they don't know how to use them.

In combination with the Web page, is the following:

　　Balance

The sense of balance is very difficult to handle. There are two kinds of balance on the Web page-symmetry and asymmetry. We are very accustomed to see the symmetry of the picture, just as we were a child paper-cut flowers, will be cut on both sides together, so open is symmetrical. This symmetrical balance is well identified (which mirrors it anyway), and it is difficult to balance in an asymmetric composition.

Give two examples:

Figure A subtraction

　　Asymmetric balance

Figure one shows some important principles of asymmetrical balance in many places. You see, as the main banner of the dog's photo-the dog's black full pressure on the left side of the screen, this time the picture on the right side of an X, this seemingly random gray X, but the balance of the screen key factors! In this way, your view will be involved in the middle of the picture In addition to the banner diagram, this design appears in the page header--the size and color of the menu bar are relatively heavy. Then in the subtraction logo this, on the application of black word white bottom, and then add black line, so up and down will be relatively balanced.

Figure two Apple

　　Symmetrical balance

Apple is a model of symmetrical balance in modern web pages. As shown in figure two, each element is arranged on both sides of the central axis, creating a visually harmonious scene.

　　Proportion

For web elements, it is not good to see clearly, or how long the text, it is the layout of the web and the balance of the visual emphasis on who has a great relationship.

Tumbrl

And how to weigh the size of these elements with the nature of each element has a great relationship, for example: When you browse the two-column page, you will generally find the box to the right is larger than the box on the left, but also put some key information inside. This is determined by the human visual habits-even if the text box on the left side, the table of contents of the metadata on the right side, will unconsciously look to the right. So, the metadata on the right side of the place is not very scientific. Some people like the grid layout of the same width as the chart one, and others may like the golden ratio, which is 1.62 times times the box on the right.

Some Web pages are designed to be proportional only to the degree of importance:

Coda

On this page, the proportions of the elements are well controlled. Not only is the visual level is very good, the level of significance is also very good. Start with the logo of the product (1), then guide the user's behavior (2), and then to the text more intensive related introduction (3), the arrangement is very reasonable. Text mixed row of the area, the title of the weight and text separated, and the left icon relationship are very concerned. When you look at this page, you will find the overall coordination very well.

But the above example is a bit old and the Web page is flat.

Today's web pages can be interactively designed to enhance the scale of the pages displayed.

For example, the International Advertising award D&ad's Web site, in the Sliding page, the menu bar for the proportion of the page will be relatively narrow, so that people's attention will be more focused on the middle part, pay more attention to reading content.

　　Rhythm

The rhythm on the Web page is very important, even more important than the data. Especially those pages with large amounts of data and long pages. For example, this site called Digg, there are two directories on the page, but it is also followed by some principles of rhythm.

Digg

Digg first shows a horizontal navigation bar in the header section, and then jumps to the presentation section of the main content, each of which is listed sequentially. This gives the reader a sense of continuity, which falls down. This tip is also used in the top 10 article alignment on the right.

Tumblr

We can use music to understand this visual sense of rhythm. Each page requires a visual pause, depending on whether you want the reader to quickly browse through the information, whether you want to install an interesting picture, or to guide the reader to the download button.

If all the elements on the page are the same weight, the rhythm is too consistent, so that the reader will not be bored (think of those saliva songs) don't want to look at it, what do you see what you want them to see?

And if the page changes too much, it will appear very messy. This violates the principle of identity (as we will say below). The most important thing is to keep consistency in some parts of the page.

The rhythm of each part is based on different needs, like Digg, but the whole needs to be consistent through color or shape.

　　Emphasize

In the design, there is no more attractive than the shape of the pattern, especially in the four-page design area filled with four sides. A circle does not need to use the bright eye color or white, only by its shape characteristics can easily arouse the user's attention. This is why your eyes are always attracted by the recent signs, but the "round" of the greatest charm is actually played on the logo.

Figure 4a:a List Apart

As you can see in Figure 4a, a List apart with more than one, but multiple groups of "round" to show its logo. Not only can you notice it by the sign (1) next to it, but you can also notice the T-shirt promotions through a few smaller markings on the right-hand side.

You can also use the "Stay white" or "color" to play a role of emphasis. They can be used in conjunction with "graphics," but usually you don't have to use all one or two. The simultaneous use of three elements creates an exaggerated appeal, making it difficult for users to pay attention to other parts of the page, especially the main content.

Figure 4b:google

Google also put the "Stay white" and "color" two big strokes of the brush sense of existence. The brightly colored Google logo and the surrounding area of the white area can always capture your eyeballs instantly. Google so designed not only strengthens its logo, but also makes your eyes naturally from left to right: your gaze can accurately find the search input box, while naturally moving to the right main search key. One of the success factors of Google's ability to provide users with the highest quality search results is to make the most of the basic vision technology and create a great sense of ease of use for the Web page.

　　Overall sense

The sense of wholeness is a concept of a matter of opinion, a feeling of "unity". No element is truly incompatible with the design atmosphere and feeling.

Okey Dave.

An important example of the overall sense is--dave Werner's portfolio portfolio. Each page has web pages of manuscripts, Pushpin and other assorted that he combines and creates a sense of wholeness. Neither element appears too abrupt, nor does it have a different overall style.

In his portfolio work, even a lot of scattered individual elements that seem to be different are covered by notes and sketches: This even forms the unique design style of his portfolio. There is no Web page in his portfolio, and you don't see any traces of any pushpin (used to assemble the interface elements).

You may not be Daniel (I am not), but I hope you can absorb some design experience in these examples. These experiences can help you make the most desired visual effects, and also enable the user's eyeballs to follow your intent to reach the specified page. Without these elements, even if your design "looks" good, you can no longer make a breakthrough. These principles are very simple in themselves, but as designers, we must always pay attention to them.