5

Contrast should be used to make useful UI elements easy to find, and blend in less important elements.

In the current design, contrast is all backwards. It makes all the unimportant UI elements stick out, and all the elements that need to be visible are basically hidden.

Two things are necessary in order to fix this:

  1. Make the unimportant UI elements less contrasted: background, minor links and callouts badges, logo
  2. Make the important, "business" elements more contrasted.

You can achieve this by making the background lighter, the font on the left column bigger and bolder, and avoid the hideous super-saturated yellow and green, in favour of more natural tints.

Please refer to the image below:

Design

  • Please note: Sean's original design had a much better yellow! – Sklivvz Mar 22 '12 at 21:27
  • 1
    Ironically, it took me a while to see the "Too little contrast" text in the diagram. – Oddthinking♦ Mar 23 '12 at 0:09
  • Sorry, @sean, the issue is still there. You fixed some buttons which is not what I specified above... – Sklivvz Mar 23 '12 at 19:54
2

Example with better/proper contrast

I've also fixed the font size to something less "insane" :-)

CSS here

enter image description here

  • I was thinking that the meta version of the background might also look nice on the main site, it's less dark. That might have a similar effect to the background you used here. – Mad Scientist Mar 22 '12 at 22:22
  • @Fabian the meta BG has a very similar contrast to the color I've used in the example. The point of using a blue is that it would make the yellow a bit more tolerable :-) – Sklivvz Mar 22 '12 at 22:34
  • Thanks - I think this is the biggest problem I have with the new design. That and the letter spacing when you are typing and the color of the followed links. – Chad Mar 23 '12 at 20:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .