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

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

Vue implements countdown function

How to query and update the same table in MySQL database at the same time

Introduction to useRef and useState in JavaScript

This article will help you thoroughly understand the specific use of cgroup in Docker

React configuration px conversion rem method

Detailed explanation of the problems and solutions encountered in flex multi-column layout

Docker installation tutorial in Linux environment

How to set PATH environment variable in Linux system (3 methods)

JavaScript array deduplication solution

JavaScript ES6 Module Detailed Explanation

Recommend

Implementation of crawler Scrapy image created by dockerfile based on alpine

How to use the Linux md5sum command

How to use the vue timeline component

List rendering instructions for efficient development of Vue front-end

Why is the scroll bar on the web page set on the right?

Summary of methods for querying MySQL user permissions

How to use CSS to pull down a small image to view a large image and information

How to use Navicat to export and import mysql database

How to install mysql5.7.24 binary version on Centos 7 and how to solve it

Solve the problem that vue project cannot carry cookies when started locally

Explanation of Mac connecting to remote servers through SSH in different terminals

An example of the difference between the id and name attributes in input

The textarea tag cannot be resized and cannot be dragged with the mouse

Detailed explanation of nginx front-end distribution method based on $remote_addr

Sharing of SVN service backup operation steps