Introduction to the visual expression of the core content of web pages (picture and text)

Optimizing and refining information is always the first step in design. "This is a sentence on the banner of Baidu Alliance User Experience Center. In the process of doing web design, I have more and more personal experience and ideas about such summaries. Of course, this concise sentence actually contains a lot of content. I personally think that it includes at least the following four aspects: 1. From the perspective of the entire appeal of the website, what information needs to be placed on the web page to better realize the appeal of the website? Which information needs to be retained? And which information needs to be placed on other pages or even simply discarded? 2. For the information that has been determined to be placed on the page, how to better write text and select pictures to achieve the perfect unity of functionality and visual beauty? 3. Distinguish the importance of information, which ones are important and need to be emphasized? And which ones are less important? 4. After distinguishing the primary and secondary information, how to better highlight and express it in terms of layout, color, and size, that is, visually?
There are almost endless topics to discuss in each of these four parts, so in this article I will only sort out and summarize my understanding of the fourth aspect, that is, the relationship between the core content and visual expression on the web page. I will try my best to write down all the contents I have considered, and give some specific examples to illustrate my point of view, so that everyone can better understand it.
1. The impact of core content on page layout <br />The picture below is a company that provides WordPress website construction. On its homepage, you can see the following information from top to bottom: navigation, logo, slogan, work display, reasons for choosing us, contact form, log list, email subscription, Twitter information and copyright information. The first visual is undoubtedly the company's slogan and work display, which is the core content on the homepage of this website. Because as a website construction company, letting customers know what you do and how you do it intuitively should be the content that customers want to know most. So what visual considerations have been made for the core content?
We can see that in the promotional slogan, the designer used a very large text size for the word "wordpress", and used a darker gray color to distinguish it from other texts, emphasizing that the company is building a website specifically with WordPress as the backend. The size of the work display picture below the promotional slogan is very large, with a width of 540 pixels, and the width of the entire design is 1000 pixels. Such a large-size display picture on the homepage can allow customers to see the original appearance of the work very clearly and directly, thus giving them an intuitive impression of the company's production level. Such large-scale works display has actually vaguely determined the layout of the entire website. Think about it, after placing a rectangle of 540 pixels wide and 460 pixels high in the upper left area of the screen, what information should be placed in the following area? It is actually just like placing building blocks, just place them one by one according to their importance. Of course, this is not the only layout method, but no matter what kind of layout method is used, our thinking should be based on functional considerations. So we can have creativity, but we must understand the difference between it and pure creativity that is out of the box.
Visual presentation of the core content of a web page 123WORDPRESS.COM

Visual presentation of the core content of a web page 123WORDPRESS.COM

If the page layout above still feels quite standard, the layout of the hotel’s homepage below may give us a sense of novelty. It can be seen that this design uses a large food picture as the background, and the navigation and main content area only occupy one-third of the entire page height, allowing the background picture to be presented in a large area. Like the design above, the purpose of this layout is not simply to be different or for visual beauty, but the feature of the hotel may be in the catering aspect, so in order to highlight the core content, corresponding considerations were made in the layout. The restaurant below also emphasizes delicious food in the main visual part, but the two use completely different layout methods. Although each has unique considerations in information architecture, it is also possible to regard them as two different creative ways of expressing the same core content.

2. The influence of core content on color scheme Lofter is a light blog service provided by NetEase, in which there are four main types of information: pictures, music, text, and video. Regarding the template design of Lofer, Mr. Mugou has the following design considerations for the template that mainly displays pictures in the article "LOFTER Light Blog Template Design", "This template is usually designed to satisfy photography users. The picture display area must be large enough and cool enough; multiple pictures can be viewed on one screen on the template homepage; the background must be dark to highlight the current picture; the border design makes the picture more prominent or makes the picture more exquisite." By analyzing and understanding this design idea, we can find that the picture display area must be large enough, which is the layout consideration we mentioned above, and the background must be dark, which is the impact on the color scheme we are going to discuss here.
From the finished work of Puppet, we can see that the gray background made according to the design idea is calm and low-key, forming a sharp contrast with the white picture border and background, and the gray and white color scheme will not conflict with the colorful pictures. No matter how the picture changes, it can be matched with gray and white. Therefore, the colorful pictures are more eye-catching against the white background and border, allowing important information such as photos to be fully expressed visually.

Another example comes from Naver, a Korean search engine service website. In the article "Efficient Design Visualization", liuman0722 wrote about Naver's design: "Naver Shopping, owned by Naver, a famous Korean portal/search engine website, is positioned as a product search service. By searching for product names, you can list the product links provided by almost all large Korean e-commerce websites according to product categories. Therefore, on the interface, strong contrasting tones are used to highlight the search function and the navigation area (the green area in the upper left corner of the page). Through visual guidance, users can focus on the core content and the focus of their vision. On a page with white as the main color, the eyes will first see the strong-colored parts, so strong colors can also be used to highlight the core content and let the user's vision focus there."

All visual designs are based on information. We must first sort out the content and structure of the information so that we know where to focus and where to stop. On the other hand, many design ideas and thoughts can be said to be implicit in the information itself, such as the layout and color scheme we mentioned above. As long as the information is refined and optimized, how to do it will gradually become clear in the process of sorting out the information.

<<: Detailed examples of how to use the box-shadow property in CSS3

>>: HTML head tag meta to achieve refresh redirection

CSS code abbreviation div+css layout code abbreviation specification

Introduction to the visual expression of the core content of web pages (picture and text)

CSS code abbreviation div+css layout code abbreviation specification

Understand the difference between BR and P tags through examples

MySQL data operation-use of DML statements

Detailed explanation of the usage of 5 different values of CSS position

How to understand JavaScript modularity

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

mysql calculation function details

Implementing login page based on layui

Apply provide and inject to refresh Vue page method

Example of how to quickly delete a 2T table in mysql in Innodb

Recommend

Docker uses the nsenter tool to enter the container

HTML code analysis of text conversion effects for left and right movement

Windows 10 1903 error 0xc0000135 solution [recommended]

An example of using CSS3 animation to achieve the effect of a circle expanding from small to large and spreading outward

A brief analysis of the function calling process under the ARM architecture

In-depth understanding of the creation and implementation of servlets in tomcat

How to draw a mind map in a mini program

Detailed explanation of vite+ts to quickly build vue3 projects and introduce related features

Manually implement the two-way data binding principle of Vue2.0

Use js to write a simple snake game

Solution for Vue routing this.route.push jump page not refreshing

Sample code for implementing follow ads with JavaScript

CSS XTHML writing standards and common problems summary (page optimization)

How to hide the text in the a tag and display the image? Compatible with 360 mode rendering

How to deploy Oracle using Docker on Mac