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
Summary of MySQL usage specifications
1. InnoDB storage engine must be used It has bett...
MySQL users and permissions and examples of how to crack the root password
MySQL Users and Privileges In MySQL, there is a d...
How to add a certificate to docker
1. Upgrade process: sudo apt-get update Problems ...
MySQL deep paging (how to quickly paginate tens of millions of data)
Table of contents Preface Case optimization summa...
How to solve the problem that MySQL cannot start because it cannot create PID
Problem Description The MySQL startup error messa...
How to optimize images to improve website performance
Table of contents Overview What is Image Compress...
Detailed tutorial on installing Python 3.8.1 on Linux
This example takes the installation of Python 3.8...
React useMemo and useCallback usage scenarios
Table of contents useMemo useCallback useMemo We ...
Steps of an excellent registration process
For a website, it is the most basic function. So l...
An example of implementing a simple finger click animation with CSS3 Animation
This article mainly introduces an example of impl...
Details on macrotasks and microtasks in JavaScript
Table of contents 1. What are microtasks? 2. What...
Detailed explanation of the usage of image tags in HTML
In HTML, the <img> tag is used to define an...
Detailed explanation of Web front-end performance optimization: resource merging and compression
Resource merging and compression for two purposes...
Pure CSS code to achieve flow and dynamic line effects
Ideas: An outer box sets the background; an inner...
Use the njs module to introduce js scripts in nginx configuration
Table of contents Preface 1. Install NJS module M...