How to maintain color consistency across a website

Question

I am a web developer struggling with design issues. I have a blunt eye for colors and my design skills suck (I try to improve though).

I'm having issues with the feel of particular pages, I wonder if my color schemes are any good, if my design invokes seizures or general rage(jk).

I would like some feedback, specifically on color patterns across the site (if the colors give a general feeling of uniform design and not like each page is of its own) or if there are any striking colors that are universally "banned" (like the red-black in the bar).

Here are some of the pages:

main page

movie page(arrows indicate questions about if the difference in color is well balanced or horrendous)

user page(it replaces the "Favorites" with whatever you click)

 - Main page: http://83.212.108.109/freaq/
 - user page: http://83.212.108.109/freaq/user.php (yes the one in the pic is me ;p )
 - movie page: http://83.212.108.109/freaq/movie.php
 - network page: http://83.212.108.109/freaq/network.php

P.S. If I ever launch a start-up I will give lots of designer love, as I understand that good UIUX is 50%+ of a product.

P.P.S. If something is broken is due to the fact I am working on it

Answer 1

Firstly it's not rage inspiring and hasn't given me any kind of seizure, yet. In fact I've seen much worse colour schemes out there, and some of them from large companies!

One important thing I found to remember is that some colours have set meanings when used on buttons or other elements, for instance red can imply "cancel" or "delete" whereas green can imply "OK" or "go", this needs to be taken into account when choosing a colour scheme.

While the colour scheme itself is not bad, there is, as mentioned previously, a lack of contrast. Try following the "Rule of Three" until you find it easier to work things out by eye. Pick a main colour, a secondary colour and a highlight colour. Try to have some contrast between all three, such as red, black and light grey or white.

^{Click on image for to view full resolution}

The black on the header bar is a touch strong, I would have gone for something softer like #252525 which is a very dark grey that's easier on the eyes. Also the dark grey of the background on the first page could, in my opinion, be lighter, maybe #d9d9d9 or even white.

The colour scheme itself does not detract from the movie posters, it would be easy for it to become overwhelming with the variety of colours and patterns that they create, but you have managed to avoid this.

Again I have to agree with previous reply in that some of the site is hard to read, this is partially down to the font and partially down to the colours chosen. Try making the sign up action a button, this will make it stand out and also allow you to keep the colours you have in the current header.

Here are a couple of articles I found useful:

• Colour in Web Design

• An Introduction to Color Theory for Web Designers

Answer 2

The main thing I'm not particularly crazy about regarding color is the contrast (or lack of it).

When you use dark colors as background, you need to use light ones for foreground. I have difficulty reading "Sign up now" because the back layer has black and white, and the shadow in the text is not enough to make the element stand by itself. At a glance, I have no idea what the text in the right side (with the drawings) says, because it's black on dark gray. The texts in the images' overlay are so thin (are you keeping Times New Roman?) that they look semi-transparent, and therefore very difficult to read.

My second comment would be the shades of red: dark crimson and shiny explosive light red. Their saturation is completely different, and I find it difficult to see them 'working together'. In general, if you go for dark colors you should try to keep their hue/saturation levels closer.

For example, in crimson:

Or if you wanted to go for the shiny red instead, you could combine it with other light warm colors, like orange:

These are some questions that might help you:

• Is there a good resource or tool to help build a palette/color scheme around colors I select?

• Sources for Color Theory or Psychology of Color

• How can I improve my color selection skill? (the links in the first answer are great).

Also, some of the best resources on color theory I've seen lately are these Smashing Magazine's articles:

• Color Theory for Designers, Part 1: The Meaning of Color

• Color Theory For Designers, Part 2: Understanding Concepts And Terminology

• Color Theory for Designer, Part 3: Creating Your Own Color Palettes