Web Design Tips: How to do with the pictures and text?

    网站设计中占据篇幅比较多的就是图片和文字,想要获得一个好的网站设计效果,就需要将图片和文字合理的搭配起来,让每个元素都各在其位。那么如何做好图片与文字的配合呢?一起和合肥学码思小编来看一下。

1, choose the font and font combinations

Website design, different fonts and different combinations, the resulting effect of the text is completely different, so we are ready to work in this area should be in website design. Chinese font choices there are many, such as "Microsoft elegant black," is a kind of visual effects look very good, very comfortable fonts in the browser.

2, text and picture combinations

Text and picture combinations can generally be divided into two types, one is the outstanding picture, text, play a role in the combination of explanation, the other is the highlighted text, images play a role in the combination are set off and focused text.

3, body composition and visual focus

Subject matter and photographic works are the visual focus of two basic elements, so there is usually a picture in a prominent person or thing as the subject. In website design, if we put the body was seen as a face, it will more readily understand the role of the text in the picture works, so keep the harmony and unity between text and pictures.

Location magnitude relationship between the text of the main object has three principles:

M1 text of the area must not be greater than or close to the area of ​​the body was, or was likely to result in the main case is ignored.

Edges "plane" // C word "surface" contact with the holding body (straight or parallel), meaning that the text so that the plane of the main body thereof there is a correlation.

A = B from the word "surface" or the edge of the screen is almost equal to the distance "surface" of the body and the edge of the screen

4, fonts and graphics fit

With "Picture highlight text" for the purpose of publishing, which features a photograph does not need to analyze the elements inside. In most designs, tutorials, and a lot of good design work, the picture is considered only as a big color exists, it exists only for the text you want (emotion) expressed laying tone.

Most excellent solution uses a layout in use with fonts and graphics, of which there are three types:

The first: shape pattern

Mainly refers to the shape of the pattern square, round and some irregularly shaped pattern.

Square three kinds of ways to use:

Highlight: When the text of the time into the picture becomes difficult to see. Here better way is placed like a square in the background, and then adjust the color and font of the block matching the projecting portion of text.

Focus: This approach is in order, without weakening the pictures make the text in one part of the square, the increase legibility. Packaging design layout is often arise.

Modified: This is really just a square on behalf of, on behalf of all the use of irregular graphics. When too scattered between the word combination, or the difference between the font size is too large, when placing a (not) in a regular pattern, as connected to each word to form a contact.

Round three kinds of ways to use:

Normal: This is a common layout as a comparison.

Projection: This projection good results compared with the square, the circle can be replaced by some material, such as round droplet material and the like, may be utilized even exist a large circular object image itself, to highlight the text portion.

Application: This can also highlight the "face" text, which is also why this method often various types of commercial atlases, posters and various leaflets.

The second: straight

Straight line two, one is purely a straight line, while the other is a small piece of text characters consisting of (usually English).

A straight line of three common ways to use:

Contact: very common application method.

Concentration: role and square "focus" the same, but this is a two-wire invisible box form more sense. This can only appear in a different color or a single blank of a large number of photographs.

Connectors: Small increase a sense of the shape of things ...... can be used to connect two paragraphs of content, fashion designs to the more commonly used.

Third: Character

Generally it refers to the numbers and letters, with better highlight the text to have the effect, but the results were better Arabic numerals.

In web design, the proportion of text and images accounted for a large part, but about the same amount of information presented on the web page but the effect will be quite different. How will the content and placement of the elements in place, perhaps this which is the main reason.

Guess you like

Origin blog.csdn.net/qq_43675712/article/details/93626289
Recommended