3 step coloring

Flat design, icons and layouts are everywhere.
No wonder flat design has changed the way whole design industry sees the world, but the real question is: Is the world really FLAT?
Google’s Material design is considered as new trend and have already created a lot of buzz. However,  I have seen a number of designers with no motivation to try something new.

No doubt ‘Material Language’  is an outcome of phenomenal physics and a lot of research, but is that a design culture or trend or a common language for all the designers?

In this post I am going to cover 3 stage coloring which can be called as EXTENSION of flat design.

What is 3 step coloring ?
Answer is fairly simple and straight forward. How many color steps (or bands) are required to make a gradient look smooth. MANY (Coreldraw users can say 999).
We are going to reduce these color steps to 3 and the idea is to pick 2 additional color shades of base color and provide additional depth to the art work while sticking with FLAT design theory (or almost flat).
I personally feel that color steps more than 3 would make icon/image appear JITTERY

3stepsI have used Adobe Photoshop to create Stepped effect. (Image> Adjustment>Posterize).

What is special about it?
Number of color steps or bands decide the smoothness of fill. To generate a skeuomorphed image you will need many gradients with multiple color steps. We start with base color. Base color is the color of object or the color of key part of the object.
Now, take 2 color steps. These 2 steps are going to be lighter shade of base color and depends fairly upon the brightness of base color. I usually prefer calculated change per step to get even and smooth color shades.

3 step coloringfor illustration purpose only.

The lighter variants of any color will add a level of depth while maintaining the overall FLAT appearance. By the way, did you check the background of this content area? Scroll back to the top and see how I managed to use 3 step coloring without hurting your eyes.

How to use 3 step coloring ?

You can view my next article about creating “Pleasing Icons” using 3 step coloring with Adobe Illustrator.

Few interesting facts about ‘3’:

  • Each real number belongs to only 1 of the following 3 categories:
    positive, negative, and zero.
  • According to the Pythagoreans, 3 is the first male number
  • Most of the flags are made up of only 3 colors. Check here
  • Number of dimensions that humans can perceive is again, 3.
  • 3 is the only number to equal the sum of all the terms below it (2+1=3), and the only number whose sum with those below equals the product of them and itself (3+2+1=6, 3x2x1=6).

Related links

3% color steps on codepan: