2

I was asked a website redesign with two requirements:

  • Inspired by Google Plus (clean, minimal, a lot of "white" space)
  • Switchable between a White version and a Black version

Here's my problem: The white version looks great and modern, but, no matter what I do, the black version resembles a 10-15 years old cheap website.

Is there a way I can make my dark theme still evoke a modern feel?

4
  • By a "black version," do you mean white text on a black background? Why would the client want that version? Oct 20, 2011 at 11:15
  • Its Brainstorming or idea gathering, You should read graphicdesign.stackexchange.com/faq
    – Jack
    Oct 20, 2011 at 11:33
  • 1
    Sorry, I overlooked the FAQ. Feel free to close it. About black/white, there are kind of users that prefer a dark theme instead of a lighter one.
    – Omiod
    Oct 20, 2011 at 12:01
  • 1
    Don't use BLACK black (#FFF), a dark grey can look very nice and sophisticated. Pure #FFF black looks like someone's Geocities site and results in awkward text colors.
    – Ben Brocka
    Oct 27, 2011 at 21:27

2 Answers 2

1

Take (hex) colors: Dark Background: #313131, light text: #f5f5f5 This will lower the contrast a little bit, but is close to a 70/10 grey and much easier to read. Further more it looks pretty classy.

I'd also go and choose some nice (cufon?) font for headings and such. Then use some thin 2px borders/hrs, each 10-15% lighter/darker as spacers (double in the sense of one half darker, other lighter, so you get a 3D effect, like it's graved in). You could also use the darker color to set a 10px (2px rounded) border around images to make them stand out and take the lighter color as hover color.

Then use a) a grid and b) a limited set of overall colors: 5 colors are enough and you already got 2 grey and 2 light grey tones. Just add one single color for links or headings and you're perfect.

1

Adobe.com would be a good example, I think. Also take a look at TypeDNA.com. Both are dark themes, neither looks cheap, nor 15 years old.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.