A simple and straightforward color guide for web Design

In fact, today's web design in the color and color method, is a very interesting and worth thinking things. Although the vast majority of sites look very similar, clever use of color will make the layout of mediocre sites appear extraordinary.

I'm not really talking about some kind of revolutionary use of color techniques or a new discovery, but most of the site colors look really similar. So what is the meaning of color matching? If all the websites in the world use colorful colors, then no site will stand out from it. Of course, the web design community today is very close to this situation. From this point of view, soft tones will make it easier for the user to brighten up their eyes.

　　Use color to guide user attention

The vast majority of Web sites at the beginning of the layout design, usually using simple black-and-white gray, white background + black text. Color in this case will play a role in highlighting and highlighting, you can guide users to note the button, title and link.

Take vibrant web design for example, their home page background and images are used in black and white tones, but the logo, button and Hamburg icons are shiny yellow, they can quickly capture the user's attention.

Takeit's page design is the same, the entire screen of the blue background to make the white page elements appear very obvious. The big white headline is the visual center of gravity, and then the user notices the App Store button around the title, logo and Burger menu.

These cases all describe how to use color to attract users ' attention.

　Creating individuality

The color of the first word ah and, it can for the website or brand set the tone or create feelings, convey emotions. Beagleis provides users with a description of the project's services, and their web site color using the natural color system. When you scroll down, the background color changes from green to brown, dark gray, or even pink. Natural color can give people a graceful and professional feeling, so that the service to leave a deep impression.

A interesting day is a website designed for a "strange little meeting on a small island on the Oslo fjord". The yellow background with the red text of the site is not uncommon, with the full of personalized pictures, the entire site all design elements are for you to clarify the "strange" characteristics.

Make a sound with color

Use color to make sound, do a statement that belongs to own website, this is more interesting than the simple "attract user" come. To attract the attention of the user, the color is enough to highlight the line, but more importantly, this color is enough for you to "make a statement." You can not pick a bright color, this color will fit your spirit, want to convey the unique emotions.

Take the landing page of Gaga symphony as an example, when you open the website, the bright pink will make your eyes bright. Under the theme of "Symphony", the user's expectations of the site's style are steady tones, but bright pink is no longer a low-key elegance, but it fits the site's symphony of vigor, fun and creativity, so the bright pink here is logical and the designer is "audible".

　　Enhance cohesion and guide user processes

Colors can also be used to guide users through user processes. As in the case above Takeit, the color will guide the user's eyes, but will not use too intense collocation method. The subtle and cohesive color scheme makes the user more comfortable and has a better boot effect. Colors foil each other to create a unique brand vision, but also constitute the user's visual path, to attract them to see.

such as the famous productivity tools Dropbox and Marvel are also the way to color, Dropbox particularly typical. Two tools are used in the blue as the main color, but also the use of green, orange and red to match, the entire approximate color and contrast color have, several colors together will give a good feeling with each other.

Innovation Project Canvas situation is slightly different, the designer uses pure green to guide the user to browse, the Web page does not use more color, but the child is very excellent to complete the very agglutination of the color design.

　Colors in a picture

Using color in the picture to build a color is a very interesting color technique, and UI elements are not the only colors that can be designed in a Web page. Large-picture background and high-definition product map of the popular make the picture color become the whole design can not be ignored and the total composition, through the synthesis of color into the design of the image, but also a pretty good choice.

Cartodb is an interesting app that can visualize location data, so what can be more intuitive and beautiful than real maps? So it appears in the home page, with the most visual way to present their products, so that color for the product endorsement.

Said to let the product, ETQ also let the product priority pressure over the UI, minimalist website design style, the color scheme is obviously extended from the product color. Designers let the product itself become the visual center of gravity, although not all the shoes are colorful, but still try to make color compatible with as many products as possible, this is the real sense of the product as the center.

　　Not all sites have to be a conspicuous color

Not all websites need bright colors. There are still a number of unique sites that use classic Black-and-white gray as a color scheme, and these neutral colors are well represented in their emotions.

The Web sites of Visual soldiers and Tomasz Wysocki are like this, and the elegant and skilful tones are their genes. Concise layout and unique brand positioning, so that they do not need bright colors to present the CTA button and corner of the menu, quiet white and black is enough.

Conclusion

Colors are powerful and they can be incorporated into the design in a variety of ways. In addition to their strong visual characteristics, but also has a decent function, guide users, enhance cohesion, show style, convey information, outline character, and even give the design meaning.

You need to think about the color of more and less, understand the color in the web design degree, familiar with the character of each color, understand how the noise and the vast world to find their own position.