Web Design Tutorials (8): Web page hierarchy and space design

Previous: Web Design Tutorials (7): Improve Web page production efficiency

One: It is necessary to nag.
There is order, regularity, and special. Call Hierarchy !
Layers of iterations that express the sense of being in space. Dots, lines, faces. The point moves into the line, the line moves into the plane, the plane moves the adult, many individual complex composition. That is space. Of course, this is about mathematical or logical space. But it's not a philosophical space.

Second: The feeling of inseparable--perspective;
I have written an article about perspective, and here is a few more pictures to help you understand it.
perspective is not the most important, but it is necessary !

Third: The most commonly used methods of expression-the actual situation and contrast;

This is a very common picture of XP, look at its level. Near big far small--near real far empty--near heavy far light .

Look at the change. The word itself, where the scene is. The change of distance, alternation and actual situation. (Leave a homework, try the so-called is web2.0 style, apply in the text above)

Look at the actual situation, Cascade!

Direction!

Look, just a few simple elements!

Three: The old growth talk-color, color level;

I don't want to draw this picture!

the relationship between Hue and level。
Design can not be separated from the level, color. Speaking of color must be inseparable from the three elements of color, that is, hue, lightness and purity. In the processing of hue, different colors can make a different feeling.
If you put a variety of colors on one screen, then they will have layers.

The highlighted part is prominent, the weakened part is weakened, so it is necessary to flexibly use different color senses to deal with. The colors of different hue mix together to produce different visual effects, resulting in different color levels. The combination of warm colors with cool colors or warm colors of different hues or colors with different hues will create a colorful hierarchy.
The relationship between lightness and level. In the color of the lightness of processing, brightness contrast is more important. In addition to consider the feelings of color, but also must consider the color of the black, white, gray level of sense. This is the color configuration of the Ming-degree relationship. Different brightness of the color configuration together will produce a variety of levels of sense. White is the highest in color, black is the lowest, if they are configured together will form a strong contrast level.
and the color of red and orange is relatively close to the collocation of colors, its sense of hierarchy is relatively weak. The relationship between purity and level.
When the color purity of the color and low purity of the color collocation together, the purity of high color more vivid and low purity of the color is more dark turbid. So. High purity of color will have a tendency to move forward, and dark color will have a sense of back, so that the color level is very distinct. Of course, in considering the purity of the color to achieve the design requirements of the level, nature should be color hue, lightness into consideration.
No matter which color, how to configure, hue, lightness, purity is difficult to separate, also can not isolate. Color area and level of the relationship.
Composition, it is necessary to seriously consider the location of the various parts, size. This involves the screen of the area of the color. In order to achieve a unified and harmonious tone, generally a color for the keynote, and occupy the main position of the screen, that is, larger area, while other colors naturally accounted for a smaller area. In this way, not only can maintain its main color, but also will produce a level of contrast, so that the picture is both unified and change.
This section is very harmonious. Textbook-Like Harmony!

Say a few ways to judge:
(a): streaking. It's not a naked run without CSS, but when the artwork comes out, merge all the layers and convert it to black and white or lab mode to see how the black and white Ash feels.
Squint at the eyes.
Close your eyes and open your eyes fiercely.
Stare at something and switch it over to the visual.
(Please be responsible for your own eyes!!!! ）

(b): reversed phase.
To detect weaknesses in the hierarchy by contrasting the negative.

(iii): Cut off.
According to the composition, the design of the draft cut into n parts, in the above two ways to view. This, for web designers, relatively important point!

Four: The sense of space--the integration and transcendence of the display platform;
Look at the map, the original address: http://shyls.longfor.com.cn/main.html

Very typical, composition, color, very taste, although the level is not prominent, but the feeling is very harmonious!

Whether it's a plane or a Web page, always focus. However the emphasis is highlighted in the Web page. The general use of color, volume and other simple way. The use of prominent space volume sense is not often used. Or the limitations are very large, used to show the class site, especially the flash site. Here to borrow a map, the source address http://www.chengshiwen.com/attachments/month_0808/z200883102438.jpg, without the consent of the author, if there are comments, I immediately take it down.

Texture, detail, layout is the choice, but the last far mountain, but not in line with the visual habits! A little cumbersome, and the blue sky, should be able to go a little deeper.

let the characters jump out of the display platform !
In fact, it is very simple, the habit of thinking in turn. In general, a person, for example, is in a restricted area. So, we turn them back, let the character's volume is larger than the area, so that the characters show normal, let the area for perspective!
When the rendering of a thick, layered background of the time, near the things magnified, highlighting the proportion. Can get the same effect!
OK, look at the picture, demo, do not mind, to express my meaning on it:

There are photos of very specific billboards on the web. Students can look for it!
Yangzhou-Hangzhou town is the country's famous toothbrush, tourism supplies production base. The entrance of the town highway, now should be Colgate Big Pillar Bar, top of the toothbrush, brush the head out, behind with a steel frame fixed, far look, toothbrush head in the air. Although the cost is higher, but the effect is indeed good!
Yangzhou Yucai Primary School East Point, a row of store licensing, all the unity of the deep vermilion background, classical patterns, subordinate to the word. Although the design content is not much, but the dozens of connected hundreds of the same, but also very spectacular! Feeling very harmonious, very unified!

" design is around you, often look at the roadside bus ads, platform ads, including store cards, even distributed leaflets, shops in the murals, layout and so on and so on ...." will allow you to improve the ability in virtually! Think for yourself, the material you collect is all in your mind, combine them with the real life...

Color can also be stereo

Ball? Light?

The relationship between the foreground object (that is, the object to be highlighted) and the background
If the background is a cloud, optical fiber, circle light and other unrealistic, light weight of the abstract class style, then, the foreground object as far as possible with the relative of the image, clear expression.
What if the background is like, and the visual weight is heavier, like a map? Scenery? And so, you need to pay attention to the layout of the collocation, where the background from where to end. Whether the color conflicts or is similar to the color of the foreground object.
In addition, the size of the text contrast, not only to highlight a word, and not just for the composition. In an image-like context, a complex, uncontrollable environment of many colors. The size of the text is scattered, can make reading more smooth!

/************** end of the split line ***************/

This article has been brewing for a long time, before and after 4 times, enough to have one months! Many ideas have not been recorded in time, resulting in a short period of time I can not use the appropriate text for a clear description! and a temporary increase in the middle, web design Tutorials (7): Improve the efficiency of Web page production! In fact this article originally should be chapter seven ...

Hair on the hair, so much nonsense, the big deal after the change!

Oh, with a title map!

This chapter uses the material and the demo source file downloading: Eighth chapter level, the space (perspective, three-dimensional) shallowly enters. rar