Featured Post

One of the most difficult things for me, as a designer is putting together a color scheme. Until recently I was trying to color and layout all at the same time, until a friend of mine turned me on to a new work flow that actually splits the two processes up. By first concentrating on the look of the web page and not on the colors you will be able to nail down a solid layout. After which you can use many tools to help you decide on a color scheme. I will go through the entire process after the break.

Step 1

The first thing that we want to do is to add an adjustment layer, I have mine set up on my sidebar through Window > Adjustments, but there are other ways of doing it. Make sure this is your top most layer and take the saturation all the way to the left.

Step 2

Start designing that layout. Now that we don’t have to worry about any colors we can just shade everything as in gray to get the general look down and concentrate on the layout of the site. It is such a liberating feeling to be able to just concentrate on how the page will look and not worry about coloring it.

Here is an example:

As you can see all the shading is done, you don’t have to worry about colors at all.

Step 3

Remove the adjustment layer. Once you remove the adjustment layer you will probably have a weird gray color scheme. The good thing is now you just color by numbers. Pick where you want to start, and since you already know how it will be colored just pick the lightness and darkness of the corresponding colors.

One tool I like to use in this step is Color Scheme Designer 3. It is a free online web tool that is really powerful and can help you make any color choices you need. Right under the color wheel is where you enter a color you want to use, just pop the hex code in there and then up top choose what type of color scheme you want! it really is that easy, and then you can adjust accordingly. It also offers you page samples. Look on the bottom right of the page and you will see “Light Page Example” and “Dark Page Example”. These will give you an idea of what you can do with the chosen colors. I have highlighted the three areas below.

Step 4

Once you have removed your adjustment layer and started to color your design you can really start to see how putting together the framework first creates such a solid piece. Here is one of my current designs somewhere along this process.

Wrap Up

This is my preferred way to work and I am sharing it only because it really changed the way I do things. I think it is a better process overall to split the layout and the coloring into two separate jobs. How do you guys create? What is your process? I would love for you to share it with me so we can start an awesome discussion!

You can read more on wire framing at Six Visions. They have a great write up on it!

Enjoyed This Post?

Subscribe to our RSS Feed, Follow Me On Twitter, Facebook or share with your friends through the buttons below. It's the best way to show you like the post!

Related Posts

2 Responses
Hernan, on Feb 04, 2011

ohhh!! jaja…. esta tecnica parece estar copada. Por lo general, yo diseño los esquemas en papel y lápiz, siempre comienzan en blanco y negro. Creo que es una buena tecnica para esquemas que se realizan directamente en el ordenador, lo voy a implementar!!!!!


Dean Karasinski Reply:

Hernán, gracias por la respuesta. Estoy escribiendo esto a través de Google Translate, y aunque me he tomado 4 años de español me siento mucho mejor en la lectura que la escritura misma. Así que pido disculpas por cualquier error gramatical, etc ..

Descubrí esta técnica de un amigo mío y ha ayudado enormemente en mi trabajo. Me encanta que me puedo concentrar en el diseño y luego en la coloración.

Buena suerte con la técnica!


Leave A Reply

Thanks for visiting. To get in touch with me, go to the contact section.