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

Detailed explanation of the usage and difference between nohup and & in Linux

Example: We use the Python code loop_hello.py as ...

W3C Tutorial (9): W3C XPath Activities

XPath is a language for selecting parts of XML do...

CSS code to achieve background gradient and automatic full screen

CSS issues about background gradient and automati...

Use scripts to package and upload Docker images with one click

The author has been working on a micro-frontend p...

MySQL 8.0.15 download and installation detailed tutorial is a must for novices!

This article records the specific steps for downl...

A brief analysis of MySQL's lru linked list

1. Briefly describe the traditional LRU linked li...

mysql data insert, update and delete details

Table of contents 1. Insert 2. Update 3. Delete 1...

The forgotten button tag

Note: This article has been translated by someone ...

How to support Webdings fonts in Firefox

Firefox, Opera and other browsers do not support W...

Detailed explanation of MySQL master-slave inconsistency and solutions

1. MySQL master-slave asynchrony 1.1 Network Dela...