The role and methods of information communication in website visual design (picture and text)

The role and methods of information communication in website visual design (picture and text)
Contemporary web visual design has gone through three completely different but progressive processes, from the initial information stacking to the later graphics and abstraction, and finally to today's information visualization. At present, except for some art or personal websites, the main purpose of visual design for most other websites is to accurately convey information.
Information is mainly carried by text, pictures, and color blocks , and is displayed to users in the browser after being arranged. This requires that the vast majority of the website must be clearly readable text and accurate pictures.
Like other types of visual design, the visual design of information-based websites needs to follow some basic art rules and use some simple and effective art methods to achieve it. Let’s talk about these specific methodologies below.
Proud space ——————————————————
Making browsing more efficient In information that is basically composed of text and color blocks, it is worth repeatedly considering to allow users to browse smoothly and operate easily. Usually, many domestic designers envy designers in countries that use letters as writing, because in web design, the smallest pixel font that can be used for Chinese is only 12Px Songti, and the largest pixel font is 14-18px. Pixel fonts that exceed this range are almost unrecognizable or very ugly. However, the content composed of letters is not limited and can be as small as 9Px or even 8Px and still be easily distinguished. This leaves a lot of room for operation in information design.
So how do we design information effectively in Chinese?
Information Communication in Website Visual Design 123WORDPRESS.COM
First, the color method uses grayscale colors to make the font look visually smaller, while important content uses darker, purer colors to make it appear larger. Giving a light background color occasionally under large paragraphs of text can effectively enhance the readability of the text. The color of the main text is generally not the system default pure black #000, which is a very glaring color for a white background and can easily make the space look crowded and cramped.
Second, the arrangement method is actually the basic method of typesetting, which is to put the most important large text and the auxiliary smallest text together, and divide the differences between them through contrast to highlight their respective characteristics.
In addition, when words are in lines of varying lengths, we must regard them as staggered "lines"; when there are many words and they are displayed in blocks, we can regard them as "surfaces" as opposed to lines. Maintaining the visual division and arrangement of lines and surfaces will facilitate the allocation of space.
Third, control the spacing and margins. Normally, the distance outside the content is greater than the distance between the content , and the distance between content blocks is greater than the gap between the content itself. This makes the content look more compact and orderly, and gives the eyes enough space to rest, so as not to feel crowded and tired.
Adjust the spacing and line spacing of the main content text, and try not to use the system default distance. "How to change the length of spaces in different letter combinations, and how to make the best printing style. That is a beautiful, real artistic subtlety that science can never capture. It is truly wonderful. - Steve Jobs." Therefore, do not pay too much attention to data such as the golden ratio. Real art is always much more advanced than technology. This requires our long-term artistic practice to continuously improve our aesthetic taste.
Apple's proprietary fonts are used anywhere with attention paid to spacing and line spacing, making them unique and dynamic.
Leaving blank space to make the eyes more comfortable is a technique in traditional Chinese painting. In traditional Chinese painting, "using white as black" is actually an overall consideration of the space. In fact, many failed web designs fail because of the neglect of the "white" space. If there is not sufficient and deliberate white space on a page, users will not be able to read easily, information will not be effectively conveyed, and it is not a good design.
When a page must present large sections of text or pictures that cannot be deleted, ensuring readability is a big challenge. At this time, we need to act according to the circumstances, leave blank spaces in disguise, adjust the color tendency, and increase the contrast between light and dark. For example, making the color of large text around the title grayer and lighter is an effective way to highlight the title.
Make the space proud <br />Space, like color, is a basic element of design for designers, and they must firmly grasp the initiative in using this special element.
If you want your design to appear pure, elegant, refined, or even have a Zen feel, you should cherish and love the blank space. It is not necessary, so please do not disturb this artistic space.
From the heavy truck website man, to Bank of America, to the once-bustling lottery website, white space always firmly controls the entire page.
The color of silence
 —————————————————
Color - simulated eye tracker In web pages with a lot of information as the theme, if the web page is a canvas, text and color blocks are paints. For some tool websites with a large number of users, products and technicians, in order to speed up loading and save download nodes, you are almost deprived of the right to use pictures. Therefore, for this type of website, color and text are pictures, and the final effect of the web page depends on the designer's management of color and text to achieve visual beauty and guide the browsing order.
Analysis of the use of colors in the kmart website, which uses colors to guide users' browsing and also express the website's business ideas.
The color of text <br />When we usually assign colors to text, we divide it according to the importance of the text. The most important text is given the darkest and brightest color. Other text is also given colors from dark to light, from bright to grayish white, in order of importance, based on the brightness and purity of the color.
When arranging a large amount of text, the area of ​​text color is also something we need to consider. Usually, in order to keep the context clear, we will give small-area, key content such as titles or important text dark and bright colors, while large areas of general text will use dark gray #333, or grayscale colors such as #666. Because #333 contains a small amount of white, it will not contrast strongly on the white background. At the same time, because it is mostly black, it can ensure clear identification. There are actually many colors of this type. If they are used and distributed reasonably, the entire web page will look clear and comfortable to use.
Of course, we should also note that the more a color is used, the weaker its impact on the page. For example, the website of Citibank has a bright blue color that is very eye-catching. However, when it is used in large quantities, it is not as bright on the page as the dark blue, let alone the red color on the side of the logo. However, the reason why such a bright combination is also simple and beautiful is that in addition to having a large amount of white as the background, another important role is the bright block design.
Block color <br />In payment and banking web design, color block design is sometimes almost a necessary technique for adjusting chapter modules. If a unified style and text are required, the color blocks generally use low-brightness, low-purity colors. Sometimes the page information is large and bland, in which case we will use very small color blocks or tones to guide the user's sight. Such color blocks generally use very bright and lively solid colors.
Google Wallet uses block colors to guide users’ eyes and create a comfortable and rich visual experience.
Color contrast <br />If the task of the color block is to distinguish and adjust the visual beauty, you can use a combination of high-purity, low-brightness color blocks. Such a combination will not be jumpy or glaring, but will easily create a sense of rhythm, making the picture appear colorful.
Digg uses dangerous contrasting colors to design its website, but because of the reduced brightness, it is bright and beautiful.
Color distribution ratio <br />In most text information designs, if you want to make the page look comfortable and exquisite, controlling the color ratio of the text is something you must consider. Generally speaking, you can use 5% of bright colors to highlight extremely important text, such as amount, etc., use about 60% of higher brightness colors (such as dark gray) to give key content text, and use about 15% of medium and low brightness colors to give necessary auxiliary text. The remaining 20% ​​is the lowest brightness color (such as light gray) reserved for non-essential auxiliary text. The advantage of this ratio is clear layers and prominent emphasis. The last low-brightness text is actually designed as a light graphic color block, which helps viewers sort out the browsing order and reduces the psychological pressure brought by large paragraphs of text.
Color distribution of man.de and Bank of America<br /> Great details ——————————————————
Payment details <br />When it comes to details, we can start with websites such as Tenpay and Alipay that mainly use personal account information. Because Tenpay focuses on third-party payment channels, clear information and convenient payment are the basis of cooperation. The design also requires simplicity and clarity, highlighting functionality, which makes the page design relatively conservative and restrained. Alipay's dependence on Taobao is obvious, and the design thinking transmitted from Taobao is very obvious. It requires the diversity of payment methods and the richness of goods and applications to be prominently reflected in the page design, making it appear more substantial and dazzling. Therefore, many pages are overly fancy and slightly unfocused. Simplicity and richness in design are the two routes taken by the two companies. However, with the development of the industry and the expansion of business, they also tend to be closer to each other's attributes. It is not surprising that both parties are essentially the same company, so there may be room for design when it comes to the visual details of the page.
Contrast creates beauty <br />In design, without repeated comparisons, there can be no wonderful details. The reason why details are fine is that they are difficult to detect, yet they are clearly visible. At this time, designers need to go through n options to identify the subtle visual differences. 1px wonderful variation When the iPhone came out in 2007, its exquisite UI made countless designers fall in love with it, and the icon accurate to 1px also made many brand designs far behind. Apple is often good at using 1px to create lifelike three-dimensional effects such as projection, convexity and concave, and highlight. In web design, Apple also used its exquisite techniques to influence an entire generation of website design.
It is worth noting that this meticulous portrayal technique requires consummate design skills and a mastery of design scale. If you are not careful, your design will become rigid and dull, losing its vitality, just like mass-produced oil paintings in a factory or the products of high-precision cameras. Many designs are representatives of this indescribable craftsmanship. Such designs are often realistic for the sake of realism, which often weakens the design's ability to convey information.
In fact, Apple's return to the new Lion system and Nokia's N9's transformation in icon design also illustrate the important trend of design returning to information expression.
Apple changed its original complex icons into coordinated gray simplified icons in its new Lion system. Nokia's N9 changed its icon design from the original clumsy machine-like icons to simple, bright and easy-to-recognize icons with colorful gradient backgrounds and white silhouettes. It also developed the curvature of the icons to distinguish them from Apple's rounded squares, forming its own style.
Extension of VI Another way to maintain the visual unity and uniqueness of the website is to ensure the widespread application of corporate VI in the design, especially the extension of corporate standard colors in web pages. The combination of color levels of various brightness and text colors can ensure the overall uniqueness and recognizability of the website. Wallmart and Tesco extended their standard colors in web page design to make the website unified and clear. Wallmart even changed the TV screen in its products to blue. Due to the proper use of colors, the website is clear and beautiful. Who says that shopping mall websites must be in warm colors?
To sum up, most of them are the basic applications of some basic art design methods and means in website visual design. As long as we pay attention to the connection between network technology and traditional art aesthetics in design, we will definitely be able to discover more and better other design techniques, so that our works can be easier to convey information accurately and be more exquisite and unique like our works of art.

<<:  HTML embed tag usage and attributes detailed explanation

>>:  vue3 custom directive details

Recommend

CSS achieves the effect of rotating the outermost layer of a multi-layer nested structure while keeping other layers unchanged

There is such a scenario: a circular container, t...

A graphic tutorial on how to install redhat 8.0 system (a must-have for beginners)

Table of contents 1. Introduction 2. Installation...

HTML meta viewport attribute detailed description

What is a Viewport Mobile browsers place web pages...

Detailed explanation of CSS image splicing technology (sprite image)

CSS image splicing technology 1. Image stitching ...

How to use lazy loading in react to reduce the first screen loading time

Table of contents use Install How to use it in ro...

Solution to slow response of Tomcat server

1. Analytical thinking 1. Eliminate the machine&#...

Four methods of using JS to determine data types

Table of contents Preface 1. typeof 2. instanceof...

Security considerations for Windows server management

Web Server 1. The web server turns off unnecessar...

How to create a stylish web page design (graphic tutorial)

"Grand" are probably the two words that ...

A complete list of common Linux system commands for beginners

Learning Linux commands is the biggest obstacle f...

Detailed tutorial on installing mysql8.0.22 on Alibaba Cloud centos7

1. Download the MySQL installation package First ...

Detailed explanation of MySQL's MERGE storage engine

The MERGE storage engine treats a group of MyISAM...

Two ways to remove the 30-second ad code from Youku video

I believe everyone has had this feeling: watching ...

vue+tp5 realizes simple login function

This article example shares the specific code of ...

IE conditional comments for XHTML

<br />Conditional comments are a feature uni...