Some design changes

Question

Hi all, as you might have noticed, I made some design tweaks to the site.

Here's the before and after comparison.

The most obvious change is the removal of the 2-tone dark background colors. The other changes are minor, mostly text and link colors changes to go with the new lighter background color.

There are a few reasons why I made the design changes:

1) The old 2-tone background design was pretty painful to implement in CSS. I had to write a lot more extra CSS hacks to get the pages to look right. Even then, some pages still didn't look nice because of the HTML structure. The old design caused the CSS file to be very bloated and hard to maintain, also it's not easily adaptable for new site features/pages in the future.

2) In the old design I used quite a bit of CSS3 elements for the parent container, this caused some browser performance issues(namely scrolling smoothness in Firefox and Safari).

3) The old design was inspired by iOS Apps look. After the site launched, I felt the dark backgrounds made the site a bit too boxy. Dark trims work on an iOS device because screen size is fixed. I've been looking at the new OSX Lion UI elements and I think they're better fitted for a web site design.

Of course, the new changes may have produced a few newer glitches. Mostly likely text colors. Please let me know if you see any(start a new post please).

Answer 1

Generally I really like it! Its much more..delicate :)

The background color though, it feels a little bit washed-up..

I'm referring to the color of the #content, which it would be better if it was a little bit darker..

A #ebebeb or even a #dedede it would make more contrast, so the question rows would be more easily distinguishable.

More specifically it would help the distinction of the first question row, where there is no top border so it feels like being one element.

I'm not sure if this suggestion should be an answer or a comment though!

Please advise and thank you for listening :)

Answer 2

Buttons are inconsistent.

Now, answering this question, one answer exists. I can sort answers by "Active", "Oldest", or "Votes". The selected button appears slightly more active, and the deselected a bit inactive, which makes sense, but this is secondary to the primary visual which is that the selected button pops out, and the unselected buttons are pressed in. This is counter-intuitive. The selected button is usually pressed in.

Again, on the main page, "Questions, Tags, Users, Badges..." has the active button pressed in, but just below that "Newest, Featured, FAQ, Votes..." buttons are the opposite. The selected button looks popped out.

In short: I'm confused which UI elements are selected and which are not.