12

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

Here's the before and after comparison.

Design changes

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).

OSX Lion UI inspirations

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).

  • 2
    Love. It. Hope it's not an April that will disappear tomorrow ;) – Loïc Wolff Apr 1 '11 at 7:31
  • 1
    @Loïc I promise you it's not an April Fools Day joke! I love doing CSS, but not THAT much. – Jin Apr 1 '11 at 7:37
  • 1
    Beautiful. And faster, I think. Sweet. Thanks so much for continuing to put so much work into the site, @Jin. – Nathan Greenstein Apr 1 '11 at 13:54
  • Jin, absolutely gorgeous. Great ideas, thanks for the update! If I could donate rep I would. – Jason Salaz Apr 1 '11 at 18:09
  • Nice work man I have scrolling smoothness problem with last CSS3 design but now the problem was solved :D – Am1rr3zA Apr 1 '11 at 22:53
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 :)

0

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.

  • 2
    When you have 3 options, and one of them stands out, and they are mutually exclusive options, logic stands to reason that the one that stands out is the active option. – Jason Salaz Apr 3 '11 at 7:24
  • @Mankoff then you're going to love Lion (sarcasm) ;) – Martin Marconcini Apr 3 '11 at 11:36
  • @VxJ OK, out/in doesn't matter, but it should still be consistent. – user588 Apr 4 '11 at 16:43
  • Where isn't it consistent? (I'm not disagreeing with you, I just haven't noticed.) – Jason Salaz Apr 4 '11 at 18:18
  • "Questions, Tags, Users, Badges..." is Active when In. "Newest, Featured, FAQ, Votes..." is Active when Out. You have to be in list view, not viewing a specific question. – user588 Apr 4 '11 at 18:36
  • Actually, you can see it here too. Categories up top are indented, vs. comment ordering (active, oldest, votes) are bubbled. I see what you mean, but I still don't think this is really an issue. The "pages" items (Questions, Tags, Users) change where you are. Where the slider style (active, oldest, votes) only changes the order of the content. They're two entirely different "widgets", and they serve two entirely different purposes. Why should they look identical? – Jason Salaz Apr 4 '11 at 18:42
  • identical != consistent. – user588 Apr 4 '11 at 23:00

You must log in to answer this question.

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