Introduction to the graphic composition and typesetting capabilities of web design
 Everything needs a foundation. To build a house, you need a foundation. To solve an equation, you need to learn the multiplication table first. To sing, you need to learn "do, re, mi" first. Page design also requires a foundation, and this foundation is graphic composition. There are many different styles of web design . Apart from some scenario-based designs and powerful material support, the rest depends entirely on graphic composition and layout. When you first start designing a web page, you often get stuck into a specific part and start working on the font details before the page style is even considered. The result is predictable. After a period of study and practice, I found that making a website is the same as painting. First, throw the content and ideas on it, arrange the overall style (what is needed here is the ability of graphic composition and typesetting), and then slowly refine the content of each part. 1. The basics of the basics: points, lines and planes <br />Points make up lines, lines make up planes, these are the basic elements of plane composition and also the basic elements of all graphic designs. So what effect will it have if we apply the basics of the basics to web design? The three things "point", "line" and "plane" do not simply refer to a point, a line or a plane. We should be good at using the arrangement of text and graphics to add effects to our web pages. Every word, every dot, and every graphic on a web page is a component of the web page. Words can form graphics, and graphics can form words. These are not rigidly limited.  Composition pictures like this seem to have been forgotten by everyone in college and high school. When we are dazzled by all kinds of colorful pages, looking back at these basic plane composition patterns may give us some new inspiration and ideas.  Dot composition is mostly used for small things, integrated layout and text layout. The concentrated and regular arrangement captures people's attention as a whole.  Use a main line to divide the picture, and there will be corresponding content where the line passes. The picture becomes lively and interesting because of this line, and because of its segmentation function, it integrates and plans different content areas.  Line construction is mostly used for decoration and division, but it also has a connecting function. Lines play a certain guiding role in reading order. If the composition of points and lines is mostly about detail processing, then the composition of surfaces directly affects the overall style and layout of the web page, and combines with lines to form a spatial perspective effect. Different surface shapes present different visual effects  2. The manifestation of various forms in web pages <br />The common forms of plane composition in web pages include: gradient form, radiating form, and contrast composition. Gradients can be shape or color. These forms of expression not only enrich the picture, but also reflect the overall atmosphere of the web page. Web design is not just about drawing, but also needs to consider functionality and readability. Therefore, color gradient has become a common expression in web pages, but shape gradient is rare.  The map background is represented by a brightness gradient, which shows the style of the map well without obscuring the main content due to the complexity of the colors.  The emission form is not conducive to the reading of text and the overall layout, so the emission form is generally used for background pictures or some small details. Strong color contrast can also attract people's attention. This kind of contrast is generally used in pages with opposing states or positive and negative phrases. It sometimes appears in Q-version cartoon pages. The contrasting colors are bright and vivid, reflecting the colorful world of children.  3. Texture effect <br />Texture effects are divided into two types: visual texture and tactile texture. Since we are using online media and cannot achieve tactile texture, we often use visual texture to stimulate readers' senses visually, allowing them to associate a certain texture with their eyes and associate it with a certain scene effect. Pages with strong texture effects are more often used on official game websites. They have strong themes and are often accompanied by game UI applications on the page.  Graphic composition contains a lot of content and is the basis of all designs. Here I only share with you some basic points that are often used and encountered in web design. The development of the Internet has become an indispensable part of our lives. From newspapers and magazines to websites, web pages, and e-books, graphic design has moved from paper to screens. What is the difference between them? Can those designs that are suitable for paper be fully used in current web design? What changes and developments have our current designs undergone based on the original designs? These are what we web designers should think about and explore in the future. |
>>: The process of installing Docker on Windows Server 2016 and the problems encountered
Recommend
Analysis of the difference between HTML relative path and absolute path
HTML beginners often encounter the problem of how ...
Detailed explanation of mysql trigger example
Table of contents What is a trigger Create a trig...
MySQL exposes Riddle vulnerability that can cause username and password leakage
The Riddle vulnerability targeting MySQL versions...
nginx+tomcat example of accessing the project through the domain name
I was curious about how to access the project usi...
In-depth understanding of the life cycle comparison between Vue2 and Vue3
Table of contents Cycle comparison usage Summariz...
Detailed explanation of how to select all child elements using CSS
How to recursively select all child elements usin...
Will css loading cause blocking?
Maybe everyone knows that js execution will block...
Navicat Premium operates MySQL database (executes sql statements)
1. Introduction to Navicat 1. What is Navicat? Na...
Using Vue to implement timer function
This article example shares the specific code of ...
Detailed explanation of the difference between WeChat applet bindtap and catchtap
Table of contents 1. What is an event? 2. How to ...
About MySQL innodb_autoinc_lock_mode
The innodb_autoinc_lock_mode parameter controls t...
Image hover toggle button implemented with CSS3
Result:Implementation Code html <ul class=&quo...
Detailed installation tutorial of mysql 5.7 under CentOS 6 and 7
You always need data for development. As a server...
MySQL database operations (create, select, delete)
MySQL Create Database After logging into the MySQ...
Example of creating circular scrolling progress bar animation using CSS3
theme Today I will teach you how to create a circ...