Recently, I started to tinker with my personal website again.
How can I say this?
There is no profound technology. All technology is public.
And for this type of thing, people tend to pay more attention to appearance than to the inside.
This requires the website page to have a good appearance design.
But when designing a page, it is easy to let your imagination run wild, and it is easy to fall into the idea that "starting a business is simple, just missing a programmer".
Then, I woke up from the daydream and thought that the programmer was me.
But as an AI full-stack engineer, from AI training and deployment to the backend to the frontend, everything is included.
It seems reasonable to do some designer work across industries today.
So in order to do this "simple" thing well.
This time, let's talk about the color matching problem in design.
Friends who often match colors know it.
As a novice, the colors you match for the first time are often colorful.
For example, red matches green, yellow matches purple, and large blocks of color are piled up.
What you want in your heart is "high-end", but the actual result is ugly and "eye-catching" no matter how you look at it.
In extreme cases, you can compete with street billboards.
Moreover, there are too many colors and there is no primary or secondary.
So, this completes the failed attempt of version 1.0.
At this time, after a search, you will naturally find some Morandi color system, macaron color system...
"Yes, everything is the fault of saturation!"
So you just lower the saturation in the color palette.
After a mix, the color types are limited to only a few.
However, when you look at the actual effect, these schemes are either inconsistent with the tonality, or even the words are not clear.
"It must be the color scheme's fault!"
Then, after some adjustments, I adjusted the color scheme, and finally, only black, white and gray were left.
Finally, I magically discovered that the text was legible. Everything was harmonious.
I couldn't help but sigh, it was really simple.
But after a few days, I soon noticed something was wrong.
Those excellent designs clearly have many colors, not just black, white and gray.
And only black, white and gray, it inevitably looks a bit "monotonous and colorless".
Sometimes when I think about it, I even think it's a bit simple.
Congratulations, this time I completed the failed attempt of version 2.0.
Although the finished product at least looks good, it is still far from expressing my own skills and aesthetics.
I can't leave people with the impression that "this person has some skills, but it's a bit rudimentary" after seeing this website...
"No."
"I'm a high-end (NewMa) programmer who works 7x8hx3=7x24h, doing a job that's harder than 996, using 10 years of work experience to complete 30 years of accumulation."
"How can it be rudimentary?"
In an era of superficial appearance, technology still needs to be combined with art.
When you are undecided, start learning.
After some searching, as well as Ctrl + C & V and F12 developer mode.
I found that in excellent designs, if you want to make the colors reasonable, you must first find a main set of contrasting colors.
Generally, you can start with the container and content.
For example, text and the container to which the text belongs.
The text color and the container background color need to be a set of colors with relatively high differentiation.
By analogy, the background color of the button and the block to which it belongs also needs to have a strong contrast between the two colors.
There are also some navigation bars and layout wireframes that need to clarify the area.
Here is a supplement, what is a strong contrast in color?
Let me give you a few examples, such as black and white, red and green, yellow and purple, blue and orange in terms of hue.
Any color near its complementary color is fine.
There are also saturation and brightness, such as dark and light.
So back to the topic, the first step here is to determine the main background color and main text color of the page.
For example, in the common "bright mode", white is used as the background, or other light colors, that is, low saturation, low brightness, close to white as the background. The main text color is black, or other high saturation and low brightness colors close to black.
In the "dark mode", it is just the opposite, the background color is dark and the text color is light.
Is there any violation of this design principle?
The answer is no.
Because the human eye is designed in this way.
Unless the text on that page is not meant to be seen.
Generally, after contrast, you will find that there are only a few colors.
Because there are often not many contrast combinations on the web page.
One or two is a common situation.
If you find that there are many contrasts summarized.
Then please pay attention to the primary and secondary and proportion of color blocks. Those very small blocks that do not affect the overall feeling at a glance are not counted.
Also, the colors of changing elements such as dynamic pictures on the page are not counted. Because these elements are too local and too dynamic. Except for the situation where the design needs to control the style of the output, it is not related to the design.
For example, the C2C e-commerce product introduction pictures are uploaded by merchants themselves. Generally, there is no style control. There are also UGC platforms, where users upload content by themselves.
At this time, some neighboring colors are needed as supplements and transitions.
For example, in the simplest "black + white" contrast combination, you can add "dark gray" to the black end and "light gray" to the white end to form a "black group + white group" to add layers to the simple black and white.
The simple example is over. Let's take a more difficult one, such as "yellow + blue-purple", and similarly, expand it to "yellow group + blue-purple group".
There are "orange-yellow, yellow-green" near yellow, and "blue, purple" near blue-purple.
At this time, the combination is as follows.
Yellow group: orange-yellow, yellow, yellow-green
Blue-purple group: blue, blue-purple, purple
Finally, adjust the brightness and saturation of the selected color.
At this time, just follow one principle: everything is for visual contrast.
When you color an element, think about whether to highlight the element or hide it.
How much should you highlight? How much should you hide?
If you still have questions after reading the above, please look forward to the next issue.
We can talk further at that time.
When should you highlight the contrast? When should you hide harmoniously? Why do I choose a lot of colors, but the color matching is very monotonous? How to match complementary colors? Why is complementary color an advanced problem in color matching?