Web Design Tutorial (5): Web Visual Design

Previous article: Web Design Tutorial (4): About Material and Expression Web Design Advanced Five - Composition Balance and Visual Guidance, Use of Curves/Arcs/Light and Shadow
Balance of composition 1. When the composition is not of equal shape and quantity, it can be summarized and measured by "balance". Balance each station with equal shapes and amounts at 50% of the composition.
2. Elements of balance: balance, change and unity, light and dark, color, spatial levels, etc.
The relationship between composition Shape, position, area, direction, level
The rules of composition Balance/rules Basic characteristics of visual guidance: (follow normal reading order)
1. Color guidance
點擊在新窗口中瀏覽此圖片

2. Shape Guide
點擊在新窗口中瀏覽此圖片

3. Posture guidance
點擊在新窗口中瀏覽此圖片

4. Light and Dark Guidance
5. Capture the moment
點擊在新窗口中瀏覽此圖片

6. Proportion
------------------------------------Lovely dividing line-----------------------------------
You may feel that there is a lot of repetition. But if you don't separate them out. It is impossible to make the readers understand more carefully. There may be things that are not very accurate or that I have not analyzed. I hope you guys can help fill in the gaps.
The role of picture/visual guidance:
1. Guide the reading order. Although it is the normal reading order, there are still some changes.
2. Lead to the key points
3. Guide students to distinguish the importance of pages and the distinction between content and functional blocks
4. Guide the understanding of design ideas
5. Guide regional culture (such as Chinese/English)
6. Guidance. The specific content is concentrated in the navigation.
Curves, arcs, light and shadow When beginners do not have a deep understanding of posture guidance and shape guidance, use arcs with caution
------------------------------------Cautious dividing line-----------------------------------
Curves and arcs can be used to divide pages in a gentle way. We all know the effect is very good. But how to use it properly?
Follow all the points above. Know exactly what your arc does. Think a little bit about setting the color and transparency value, and I think it shouldn't be that difficult.
點擊在新窗口中瀏覽此圖片

A starting point and an end point. Consider the size of the screen and how much content can be seen at different resolutions. If there is no end point, how should the visual extension and guided association be expressed?
Think about the shape of lotus leaves, think about the shape of banana leaves, think about the tail gas of airplanes bending in the sky. In fact, the arc is right beside you... ...
What kind of arc makes people feel natural? This has not been studied yet. I don't think I have the ability to study it.
Post an article about physics: http://www.arcmanusa.com/arcforum/viewtopic.php?t=108
Light and Shadow This is not about movies.
I can't explain it in detail. Anyway, this effect is very gorgeous and GOOD. I like it very much.
It still follows the theory of visual guidance and arcs mentioned above.
點擊在新窗口中瀏覽此圖片

In my favorites, the annotation of this website is: "The pinnacle application of light and shadow", address: http://www.nopattern.com/nopattern/
This article was actually completed unintentionally as it derived other concepts. At the beginning, I spent about 2 hours explaining the term equilibrium in order to improve the capabilities of my colleagues. They had a good grasp of some of the things that were previously learned. After a balanced handwritten tutorial and oral explanation. I thought of the visual guide of the picture. An overview was then given. Combined with the principle of balance, I came up with the idea of elaborating on the arc, and then delved into the treatment of light and shadow. I just happen to have some excellent works in this area.
After explaining these things in some deep, shallow or incomplete way, a word "visual weight" popped up in my mind.
There is currently no accurate definition or discussion of this term. But I think I can describe it.
1: Regularity and order determine the level and weight of visual weight
2: The harmony created by contrast and unity can bring out the balance of visual weight
3: A pound of cotton and a pound of iron (my intuition tells me it has something to do with this)
4: Reading habits: the beginning and the end should be more important than the middle. (On the basis of equal shape and quantity. For example, a line of words)
5: Texture and association.
This is much easier to explain. The feeling of white clouds and cotton cannot overwhelm people, although the color tone can give people a feeling of suffocation and depression.
But it is still much lighter than textures like marble or steel. It stimulates the reader's associative thinking. Then the concept of visual weight will be clearer.
6: When two-dimensional and three-dimensional images have the same performance, the visual weight of three-dimensional images is heavier than that of two-dimensional images.
I tried to find some physical evidence, but the only thing I found through the search engine was HK Hartland and G. Wald's "Discovery of the Chemistry of the Eye and the Gravimetric Visual Process", which said that these two people won the Nobel Prize. But there was no relevant explanation. And my English is very poor.
-----------------------------------------------------------------------------------
Below is my manuscript, taken with my cell phone:
點擊在新窗口中瀏覽此圖片