The Angry Cats

The Angry Cat websites (Kızgın Kedi in Turkish) are 4 tutorial sites I made for my students to show them how the same exact content, same text and mostly the same visual material, could be designed in quite different ways, especially depending upon changes in color schemes.

The screenshots below will lead you to their reconstructions under one of my personal websites, and the videos above go into more detail in how I put together the color schemes, how applied it and so forth.

 

4 different designs based upon 4 different color schemes

The first is the contrast scheme where I used only black and white. The only color comes from the images.

angry-cat-contrast.jpg

The second scheme is muted, almost grayscale. It was created out of a screenshot that showed all 3 photos on the homepage, that gave me greyish browns, greens and slate blues.

angry-cat-muted.jpg
 
 

The pastel scheme consists of a pale orange, a pale violet and a pale green which are a triadic color scheme that can be seen here on the color wheel.

angry-cat-pastel.jpg

The primary colors website has 2 versions, one that consists out of three primary colors (Cyan, Magenta, Yellow), and one in which these primary colors have been reduced to percentages that surpass even the 60 30 10 rule, more like 80 20. The combination can be created on the color wheel, although I had no need for that since I have been very familiar with this combination over my long graphic design career.

angry-cat-colorized.jpg
 

And the Takehome Message is...

 

"Less is More" is an adage by famous modernist architect Mies van der Rohe. This saying applies to all of design and architecture, but when it comes to color it should be considered even more carefully.

In web or graphic design, backgrounds are only containers for the body of information which is being conveyed through the texts and visual material that is placed upon them. So, the less color they contain the better it will be.