The difference between UI and UX: a practical example
Today there will be a guest post on the topic of UX and UI interfaces using the Icons8 service as an example. The author is a usability specialist Andrei Burmistrov,…

Continue reading →

Thousands of dollars of passive income for web designers
Skilled web designers who want to receive passive income are now in a rather favorable position. As more and more companies enter the Internet market, the work of web developers,…

Continue reading →

Using textures in web design
What is the simplest, correct, and sometimes the only possible way to create an illusion of the relief of a particular element (object) in web design (as well as in…

Continue reading →

How to make a color palette for a site and not only

In Design Mania, there have already been several publications with similar topics: in a note about color matching services for websites, in addition to inspiration resources, we examined a couple of useful web tools; there was also a post with an overview of palette generators, etc. However, without understanding the logic of how to make a color palette, all of them may turn out to be ineffective. Today we will try to fill this gap and clarify some theoretical points that are well described in this article.

Those of you who have already used new-fangled online generators are aware of their principle of operation: first you select some basic values, configure a number of parameters (whose names resemble some kind of musical terms), and then as a result you get a list of 4- 5 shades recommended for developing web projects.

Colors from the palette
At first glance, such a technical and partly automated approach seems incredibly interesting and progressive, but in reality everything turns out not so optimistic. Of course, if you do not want to see your site / application approximately like this:

Unusual color palette

WHAT YOU NEED TO CREATE A COLORFUL PALETTE
It is obvious that you will not be able to implement a full-fledged worthwhile project using just five HEX web color codes. You need a wider range of elements to create the perfect working prototype.

Create a color picker

Let’s divide our palette into three groups.

SHADES OF GRAY
Texts, toolbars, backgrounds, etc. – in most interfaces they are almost always gray.

Gray colors

It is possible that in your case you will need a lot more options for gray. At first it seems that 3-4 is more than enough, but soon you will want to, for example, add an element a little darker than No. 2, but a little lighter than No. 3, etc.

Practice shows that for a full-fledged result, 8-10 grayish shades will be enough – this is not so much so that you go to extremes and suffer when choosing, but at the same time it’s enough not to compromise so often.

Grayscale
As a rule, pure black looks a bit unnatural, we advise you to start with the most saturated dark gray, and then go to white step by step.

Main color (A)
In most sites, two basic colors will be enough, which, in essence, form the general look of the interface – this is how Facebook is associated with blue shades, although in reality gray is more common in design.

By analogy with the previous paragraph, in order to make a good color palette, you will need 5-10 options that give a greater choice when designing the appearance: the shades lighter can be used as a background for alerts; while dark ones are great for typing.

Primary colors
COLORS FOR ACCENTS
In addition to the basic ones, any web interface requires several visual “accents” that allow you to pay attention to one or another important information. You can use attention-grabbing solutions such as aqua, pink, yellow, etc.:

Colors for accents
You will also need ways to demonstrate specific events and conditions. Suppose you highlight in red important / critical information and messages about the possible dangerous consequences of the chosen action:

Red color
… yellow (similar to a traffic light) will warn visitors:

Yellow
… and with the help of green you can highlight the positive dynamics:

Green color
Although these colors should be used fairly sparingly in the user interface, it is advisable for you to work through several shades of each of them.

If when developing a site / application you need to create a color palette to classify or distinguish between similar objects (calendar events, tags, graph lines, etc.), then you may need more emphasis. When creating complex or non-standard UI interfaces, up to 10 different colors are often taken with 5-10 semitones for each.

BEFORE EVERYTHING, DECIDE WHICH SHADES YOU NEED
If your task needs lighter or darker tones, do not resort to CSS using the “lighten” or “darken” settings, which generate results on the fly. As a result, they give a fairly wide range of values, which only slightly differ from each other. In order to avoid such problems, first make up your own set of shades that you intend to apply in your work.

Shade selection
But how to make a color palette like this?

START WITH THE MAIN COLOR
The “primary color” you have chosen for the gamut that you want to receive will be located in the middle, and lighter / darker are created based on it.

In reality, there is no scientific way that would help to implement this, although there is one good rule – choose such basic and accent colors that can be successfully used as the background of the button.

Hue Button Background
There are no specific rules on this issue, each color has its own characteristics, so often you will have to rely on your own eyes / experience, especially since in different countries the UI design is different.

Stages of development of a web designer and reaction to criticism at work
Just as a singer cannot exist without listeners, so a designer cannot exist without a spectator. And this viewer, of course, has the right to his opinion on the evaluation…

...

Google Chrome and automatic user authorization
The Google Chrome browser (based on Chromium) uses WebKit engine to render pages. The first version for Windows was released back on 12/11/2008, and now it is one of the…

...

Web Design Illustrations - Best Uses
If you carefully study any selection of website designs on a particular topic, one trend will be obvious to you - illustrations are now in fashion. They are so widespread…

...

Where and how does a designer make money on the Internet
At present, it is not so easy to find a suitable and well-paid job, even for a knowledgeable, versed person. The crisis and all other nonsense oppresses, some unemployment in…

...