Web Design Tutorial (8): Web Page Hierarchy and Space Design

<br />Previous article: Web Design Tutorial (7): Improving the efficiency of web page production 1: Necessary nagging.
There is order, regularity, and specialness. It's called level !
The iteration of levels expresses the presence of space. Points, lines, and surfaces. Points move to form lines, lines move to form surfaces, surfaces move to form bodies, and multiple bodies form a complex structure. That is space. Of course, what we are talking about here is mathematical space or logical space. It's not a philosophical space.
Two: The feeling that cannot be separated - perspective;
I have written an article about perspective before, and here are a few more pictures to help you understand.
Perspective isn’t the most important thing, but it’s necessary !

3. The most commonly used expression techniques - virtuality and reality and contrast;

This is a very common picture in XP, look at its layers. Near is big and far is small -- near is solid and far is empty -- near is heavy and far is light .

Look at the changes. The word itself and the scene it is in. Changes in distance, alternation, reality and illusion. (Leave it as an assignment, try the so-called web2.0 style and apply it to text)

Look at the virtual and real again, the layers!

direction!

Look, just a few simple elements!
Three: Old talk - color and color levels;

I really don’t want to draw this picture!
The relationship between hue and level .
Design cannot be separated from layers and colors. When talking about color, we cannot avoid the three elements of color, namely hue, brightness and purity. In terms of hue processing, different colors will give people different feelings.
If you put different colors on a picture, they will create layers.
To highlight the parts that should be highlighted and weaken the parts that should be weakened, you need to flexibly use different color senses to process them. Colors of different hues are combined to produce different visual effects and different color levels. The combination of warm colors and cool colors, or warm colors of different hues, or cool colors of different hues will produce rich and colorful layers.
The relationship between brightness and level. When it comes to color brightness processing, brightness contrast is more important. In addition to considering the emotions of colors, you must also consider the layering of black, white, and gray in the color scheme. This is the brightness relationship of color configuration. When colors of different brightness are arranged together, a sense of layering will be created. White has the highest brightness among colors and black has the lowest. If they are placed together, they will form a strong contrasting level.
However, when red and orange, colors of similar brightness, are arranged together, the sense of layering is relatively weak. The relationship between purity and level.
When a color with high purity is placed together with a color with low purity, the color with high purity becomes brighter and the color with low purity becomes darker. So. Colors with high purity will have a tendency to move forward, while dark colors will have a sense of receding. In this way, the color levels are very clear. Of course, when considering using color purity to achieve the design level requirements, the hue and brightness of the color must naturally be taken into account.
No matter which colors are used or how they are arranged, hue, brightness, and purity are difficult to separate and cannot be isolated. The relationship between color area and level.
When composing a picture, you must carefully consider the position and size of each part. This involves screening the area of color. In order to achieve a unified and harmonious tone, one color is generally used as the main tone and occupies the main position of the picture, that is, a larger area, while other colors naturally occupy a smaller area. Doing so not only maintains the main color tone, but also creates contrasting levels, making the picture both unified and varied.
This paragraph is very harmonious. Textbook harmony!
Here are a few ways to judge:
1. Naked streaking. This is not running naked without CSS, but after the design draft is completed, merge all layers and convert to black and white or lab mode to see the feeling of black, white and gray.
Squint your eyes and look.
Close your eyes, then open them suddenly and look.
Stare at something until your vision blurs, then switch back to look!
(Please be responsible for your own eyes! ! ! !)
(ii): Inversion.
Detect weaknesses in the hierarchy through reverse comparison.
(C): Cut off.
According to the composition, cut the design into N parts and view them using the above two methods. This is relatively important for web designers!
4. Spatial feeling - integration and transcendence of display platform;
See the picture, original address: http://shyls.longfor.com.cn/main.html

It's very typical, the composition and colors are very tasteful. Although the layers are not prominent, it feels very harmonious!
Whether it is print or web, always highlight the key points. However, highlight the key points within the web page. Generally, simple methods such as color and volume are used. The technique of highlighting the sense of spatial volume is not often used. In other words, it has great limitations and is used for display sites, especially FLASH sites. I'm borrowing a picture here, the source address is http://www.chengshiwen.com/attachments/month_0808/z200883102438.jpg. It has not been approved by the author, so if you have any objection, I will take it down immediately.

The texture, details and layout are all top-notch, but the distant mountains at the end do not conform to visual habits! It's a bit cumbersome, and the blue sky could have been a little deeper.
Make the characters jump out of the display platform !
It’s actually very simple, just reverse your thinking habits. Generally speaking, for example, a person is within a limited area. So, we turn them around, making the character's volume larger than the area, making the character appear normal, and making the area in perspective!
When rendering a thick, layered background, nearby objects are magnified to highlight their proportion. You can get the same effect!
OK, look at the pictures and demos. Don’t be too careful. Just express what I mean:

There are photos of very unique billboards on the Internet. Students can come and have a look!
Hangji Town in Yangzhou is a nationally famous production base for toothbrushes and tourist supplies. The entrance to the town's highway should now be a large Colgate pillar with a toothbrush head coming out from it, fixed in place by a steel frame at the back. From a distance, the toothbrush head looks like it's in the air. Although this is more expensive, the effect is really good!
A little to the east of Yangzhou Yucai Primary School, there is a row of store signs, all with a unified dark vermilion background, classical patterns, and affiliated characters. Although the design content is not much, it is quite spectacular to see dozens or even hundreds of them are the same! It feels very harmonious and unified!
" Design is all around you. Often look at the roadside bus advertisements, platform advertisements, store signs, even distributed flyers, murals and decorations in stores, etc.... Your abilities will be improved invisibly! Think about it yourself. All the materials you have collected are in your mind. Combine them with real life... 』
Color can also be three-dimensional

ball? Light?

The relationship between the foreground object (the object to be highlighted) and the background <br />If the background is an abstract style with non-realistic and light visual weight, such as clouds, optical fibers, or circles of light, then the foreground object should be expressed in a relatively concrete and clear way.
What if the background is concrete and visually heavy, such as a map? landscape? Etc. What needs to be paid attention to is the layout matching and where the background starts and ends. Whether the color conflicts with or is close to the color of the foreground object.
In addition, the contrast in text size is not only for highlighting a certain word, nor is it just for composition. In a figurative context, with complex, uncontrollable colors. The sizes of the text are staggered to make reading smoother!
/**************The dividing line at the end***************/
This article has been brewing for a long time, and I worked on it 4 times, which took a full month! Many ideas were not recorded in time, which resulted in me being unable to describe them clearly with appropriate words in a short period of time! In addition, a new article was temporarily added in the middle: Web Design Tutorial (7): Improving the Efficiency of Web Page Production! Actually, this article was originally supposed to be Chapter 7...
Just post it, no need to say too much nonsense, you can just revise it later!
Oh, and a title picture!
Download the source files of the materials and demo used in this chapter: Chapter 8: A Brief Introduction to Layers and Space (Perspective and Stereo).rar

<<: 【Web Design】Share E-WebTemplates exquisite foreign web page templates (FLASH+PSD source file+HTML)

>>: Implementation of CSS loading effect Pac-Man