Web Design Tutorials (5): Web Vision Design

Previous article: Web Design Tutorials (4): About materials and words

The five steps of web design--the balance of composition and the Application of visual Guide, curve/arc/light and Shadow

the balance of composition1. In the case of unequal form, the composition is summed up and measured by "equilibrium". 50% of the composition of each station with equal balance.
2, balanced elements: balance, change and unity, light and shade, color, spatial level and so on.

the relationship of composition
Shape, position, area, direction, level

the law of composition
Balance/Regularity

Basic features of Visual guidance: (Follow the normal reading order)
first, color guide


second, shape guidance


third, posture guidance


Four, light and shade guide

Five, instantaneous capture


Vi. Proportion

------------------------------------Lovely split Line-----------------------------------

Maybe you'll think there's a lot of repetition here. But if you don't separate them out. Can not be more detailed to let the reader understand. There may be things that are not very accurate or that I have not analyzed. I hope you can help to complement it.

the role of the screen/visual guide:
1, guide reading order. Although it is a normal reading order, it has changed.
2, guide to the focus
3, guide to distinguish the severity of the page and the relationship between content and function block
4, guide the understanding of the design idea
5, guide the regional culture (such as Chinese/english)
6, the guidance, the concrete content concentrates manifests in the navigation.

curve, arc, light and Shadow
When the novice is not deep enough to guide the posture and guide the shape, use the arc carefully
------------------------------------a discreet split line-----------------------------------
Curves and arcs can be used very softly as split pages. The effect is well known. But how to use it properly?
Follow all the points above. Know exactly what your arc does. Think about the setting of color and transparency values, I think, it's not that hard.


A starting point and an end point. To take into account the size of the screen, considering the different resolution to see how much content. If there is no end point, then the visual extension and
How the Association of guidance should be expressed.
Think of the Lotus Lotus leaf shape, think of the shape of banana page, think of the plane in the sky curved exhaust. In fact, the arc in your side ...
What kind of arc makes people feel natural? This has not yet been studied. I guess I don't have the ability to study.
Post a physical aspect of the bar:http://www.arcmanusa.com/arcforum/viewtopic.php?t=108

Light and Shadow
It's not about movies.
I don't know exactly. In short this effect is very gorgeous, very good. I like it very much.
It also follows the theory of visual guidance and arc as described above.


In my favorites, the comments for this site are: "Peak application of Light and Shadow", Address:http://www.nopattern.com/nopattern/

Other concepts of extension
In fact, this article is also done unintentionally. In the beginning, it took me about 2 hours to explain the term equilibrium in order to
Improve the ability of colleagues. Some of the things before will be well mastered by them. After the balanced handwriting tutorials and oral presentations are over. I thought of the visual guide of the picture
This theme. An overview was then made. With the principle of equilibrium to combine, let me have a description of the idea of the arc, and then in-depth to the light and shadow processing. Just hand.
There are excellent works in this field.
After these things or a deep or shallow or incomplete elaboration, a word "visual weight" came out of my head.
It is not yet possible to make an accurate definition or elaboration of the word. But I think I can describe it.
1: Rules and order determine the level of visual weight, severity
2: Harmony between contrast and unification can bring out the balance of visual weight
3: A kilo of cotton and a kilo of iron (intuition tells me about this)
4: Reading habits, the end is heavier than the middle. (on the basis of equal contour.) Like a line of words)
5: Texture and association.
This is much easier to explain. The feeling of white clouds and cotton is not dead, though it can give people a feeling of suffocation and oppression through hue.
But the texture is much lighter than marble or steel. Arouse the readers ' associative thinking. Then the concept of visual weight will be clearer.
6: Two and three-dimensional in the same performance, three-dimensional visual weight than two-dimensional heavy.

I tried to find out some physical basis, but through search engines only found H.K heartland, G. Wald's < found eye chemistry and weight visual process > this
It says the two men won the Nobel Prize. But there is no relevant elaboration. And my English is poor.
-----------------------------------------------------------------------------------
Below is my manuscript, mobile phone shot:
 

Original jpg Download