Simple web design concept color matching

Simple web design concept color matching
(I) Basic concepts of web page color matching

(1) Black and white words are an eternal theme. No one can say anything bad about them.


(2) The most commonly used popular colors on web pages
Blue——blue sky and white clouds, a calm and tidy color.
Green - green and white, elegant and lively.
Orange - lively and warm, a standard business color.
Dark red - solemn, serious, and noble, it needs to be matched with black and gray to suppress the stimulating red.

(3) Taboos on colors
Avoid being dirty - the contrast between the background and the text content is not strong, and the gray background is depressing!
Avoid purity - bright pure colors are too stimulating to people and lack connotation.
Avoid jumping around - no matter how beautiful the color is, it cannot be out of place with the overall look. To be separated from the masses is to bring humiliation upon oneself!

Avoid using flowers - there must be a main color running through the whole painting. The main color is not the color with the largest area, but the most important color that can best reveal and reflect the theme. It is like a leader who plays a decisive role even though he is in the minority.

Avoid powder - light colors appear clean, but if the contrast is too weak, the whole thing will appear pale and weak, just like a hopeless sick man.
Avoid pure blue, avoid yellow green, and avoid bright red.

(4) Several fixed collocations
Blue, white and orange - blue is the main tone. White background, blue title bar, and orange buttons or icons as embellishments.
Green and White Orchid - Green is the main tone. White background, green title bar, blue or orange buttons or icons as embellishments.
Orange, white and red - orange is the main tone. White background, orange title bar, dark red or orange buttons or icons as embellishments.
Dark red and black - dark red as the main tone. Black or gray background, dark red title bar, and light gray background for text content.

2. Web Design Concept

(1) Content determines form <br />First, enrich the content, then divide it into sections, then determine the tone, and then deal with the details.

(2) First the whole, then the parts, and finally back to the whole.
Consider the overall situation and fill in everything that can be filled to take up space. Then set the tone and design in modules. Finally, adjust some unsatisfactory details.

(3) Function determines the design direction <br />The purpose of the website determines the design ideas. Commercial websites should highlight the profit purpose; government websites should highlight the image and authoritative articles; educational websites should highlight the faculty and courses.

3. How to complete design work quickly and efficiently

(1) All writing in the world is plagiarized.
It depends on whether you can copy or not. What is copied are the ideas, thoughts, and exquisite embellishments in some details.
Search for similar websites on the Internet, find a few that you like, use one as a basic blueprint, and integrate the advantages into your own. This is the most efficient and quick way, and it also produces results and allows you to learn a lot.

(2) Go to design forums and look for reference materials.

<<:  Solution to high CPU usage of Tomcat process

>>:  MySQL query_cache_type parameter and usage details

Recommend

Implementation of the login page of Vue actual combat record

Table of contents 1. Preliminary preparation 1.1 ...

How to set MySQL foreign keys for beginners

Table of contents The role of foreign keys mysql ...

Implementation of check constraints in MySQL 8.0

Hello everyone, I am Tony, a teacher who only tal...

How to use the markdown editor component in Vue3

Table of contents Install Importing components Ba...

Detailed explanation of script debugging mechanism in bash

Run the script in debug mode You can run the enti...

JavaScript to switch multiple pictures

This article shares the specific code of JavaScri...

Have you really learned MySQL connection query?

1. Inner Join Query Overview Inner join is a very...

Detailed explanation of how Node.js middleware works

Table of contents What is Express middleware? Req...

Pure CSS to achieve the list pull-down effect in the page

You may often see the following effect: That’s ri...

Summary of several principles that should be followed in HTML page output

1. DOCTYPE is indispensable. The browser determin...

Essential conditional query statements for MySQL database

Table of contents 1. Basic grammar 2. Filter by c...

Analyze the usage and principles of Vue's provide and inject

First, let's talk about why we use provide/in...

HTML Tutorial: Collection of commonly used HTML tags (6)

These introduced HTML tags do not necessarily ful...

Vue's global watermark implementation example

Table of contents 1. Create a watermark Js file 2...