Designer's Self-study Handbook: A simple Guide to color collocation of websites

Choose a color scheme

Sometimes color matching is a momentary flash of light, but more often, it has a more systematic way to match.

Determine the purpose

Before starting the design, determine the purpose of the design. Ask yourself these questions before you start:

What information do you want to communicate with your design?

What is the purpose of your design? To provide information?

What emotions do you want to evoke in your design?

The purpose of your design should be to guide you when choosing your palette.

Identify your audience

People have different feelings about color. Color is a psychological phenomenon that occurs inside the viewer. Color based on personal preference, culture and experience have different effects on people. Therefore, in order to understand how people respond to your design, you need to identify your audience.

Of course, there are also some universally applicable meanings of colours. Green generally stands for nature, because it is the color of vegetation. However, colors such as red are interpreted differently in different cultures. In the Western world, red is associated with fire, violence and war. It's also about love and passion. However, countries such as China associate red with prosperity and happiness.

Because colors have a lot of different meanings, it's important to match your mental-color model with your audience as a designer.

Review the color theory

Color theory is the logical Structure and practice guide for mixing colors. It contains everything from the color wheel to the meaning of all colors.

Looking for inspiration

Many times we may not have the inspiration, it doesn't matter, even the great artist will be so, we can learn from others ' works, get inspiration.

The best sites to search for inspiration are:

Dribbble

Behance

If you want to find a color scheme or Material inspiration, you can try it.

Materialui

Flatuicolors

These sites are useful, but try to see the design from outside the specific media you are designing. Doing so will help you come up with an unexpectedly unique and delightful color scheme. For example, you can look at interior design.

If you want something different, look for color inspiration in the design of other cultures. For example, the Korean music video set is famous for its colorful and eye-catching palette. Each framework can be used as a source of inspiration.

The color scheme is everywhere, including your daily life. Go out next time and stop to appreciate the color around you.

Building Design System

A design system, sometimes called a style guide, is a framework that encapsulates all of the elements into your design. This includes everything from buttons to typography. You need to consider what kind of buttons and what your navigation bar looks like.

Building a design system is a great help to color matching, even a sketch, will give you ideas, what color, elements suitable for the overall solution.

Keep the Kiss principle (as simple as possible), the less color the better, for most design systems, the structure is a good start:

Background

The main emphasis

Secondary emphasis

Error color

Success Color

Primary colors are the most commonly used color for important buttons and accents. For many companies, this is also the color of their logo.

A secondary color is a color used to differentiate between minor actions and primary actions. For example, the main button and the secondary button. Error and success colors, usually red and green, convey the design status. For example, success or error notification.

Choose a color scheme

Now that you have a rough sketch of the inspiration and design system, it's time to choose a color scheme. For a basic palette, I like to put my colors side-by, just like everyone waiting in a tidy meeting.

Base colors can be more, don't be afraid to try bold colors.

To further confirm the choice of color, ask yourself:

is the design purpose and audience clear?

What color is easy to understand?

What color has the visual impact and attracts your eyes?

Do you need a bright or dark color scheme?

When are people going to use your product in one day?

What kind of mood do you want your design to convey?

Do you have a better color scheme than others?

As I mentioned in the previous section, colors will have different roles in your design system. This also means that each color has a different weight in your system. For example, your background color will be used more frequently than the main tip.

Therefore, it is sometimes advantageous to create a one-time design consisting of shapes of different sizes, each roughly equal to the frequency and average surface area of the color on a given page. (Principal: The higher the color weight, the larger the area, such as background color size > main hint color size)

For example, here's a invision color scheme:

You can change the base color to a different size to preview the color scheme. Apply a color scheme

To let you know how to apply color to the design system, let's look at the Airbnb. The primary color of the AIRBNB is Rausch (second right), named after the company's origins. The Kazan (the right one below) is used as a secondary color, and two gray is used as the background color.

For most pages, Airbnb uses fog gray as the background. As you can see, they use Rausch as their main color to emphasize important actions such as requiring a booking list.

Kazan is used to capture and attract your eyes. Notice how it complements the primary colors.

For error messages, AIRBNB uses light red, which can be said to be a shadow. Red, along with an exclamation point, immediately attracts your eyes and informs you of the state of the system.

Think about the visual hierarchy in your design. Consider what design components should be highlighted and assigned the appropriate color. Also, consider using shades of different colors for content such as hover and click Status. Try to apply color matching to your product.