Graphic design and fine art are not two separate things. I have heard many graphic designers and fine artists say otherwise, though. Having transitioned from majoring in fine art to graphic design in college, I have a different perspective. I can see how the two disciplines are separate, but to me one would be wise to break down the wall that usually separates fine art and graphic design. For example, I think designers can gain a broader perspective if the process of making a painting is studied.

There is a painting book by Joseph Sheppard called How to Paint Like the Old Masters that I really enjoyed studying in college. In the book he breaks down the painting process of several master painters such as Caravaggio, Rembrandt, Vermeer, Rubens and others. These painters used a process that has benefited me when designing for web.

The painters start with a sketch and then begin applying the first coat of paint. They first define the contrast of the composition by using only black white and shades of gray. When the gray coat is complete they begin adding color. They choose colors that have the same lightness or darkness as the gray underneath. That way, they are sure to create a well defined composition with optimal contrast.

I have been experimenting with using a similar process when building websites. I begin with sketches to define organization structure and composition, then start building in the computer. I will only use shades of gray to define the different areas of the site. This way, the contrast defines the sections of the site and color doesn’t get in the way. After we settle on a design in gray, we begin adding color. The colors we choose match the values of the gray that they replace. So if there is an area that is light gray, a light color like yellow or light blue will replace it. Now getting the color to work is another huge beast, something the old painting masters were extremely meticulous about, but that’s another post.

So far this process has been pretty helpful in building the compositional structure of a new website. We have even done several first round client presentations using “gray screen” comps, and the clients have been very receptive and seem to appreciate the thought that goes into each step in building a site. If we break each section down, there seems to be more order to the process and it is a little easier to get the client to focus on certain aspects of the design. Please share your thoughts. Thanks.