18

Hi guys,

The wait is over! As you can see the new design has been applied and nothingtoinstall.com is live.

I'd like to address a few issues.

captcha image

There were a few suggestions from the Captcha thread. It seems most people like the robot theme. Due to copyright issues, I can't use the images nominated. But I sticked with the idea. I made a Hal-ish image. You can view it on the site:

https://webapps.stackexchange.com/captcha

alt text

404 image

the highest voted 404 image was of the stormtrooper looking for droid one. Again, due to copyright I can't use it. But your suggestions matter! So I recreated it. You can view it on the site:

https://webapps.stackexchange.com/404

alt text

BUGS AND GLITCHES

I tested the CSS extensively, both on the main site and the Meta. But this doesn't mean I covered everything. If you find any styling issues, CSS bugs please let me know! (start new post for bug report). Just FYI: when it comes to older browsers (IE7, FF2 etc) I don't try to make it pixel perfect.

4
  • 3
    Awesome job!!! I look forward to seeing more of your work.
    – C. Ross
    Sep 30, 2010 at 19:44
  • I like a lot the new design, very nice work Jin!
    – Drake
    Oct 2, 2010 at 6:18
  • FYI link to "...voted [404 image]..." is broken. Oct 3, 2010 at 15:10
  • @FreshCode, irony hits for +1000crit, Jin dies. I fixed the links. thx
    – Jin
    Oct 3, 2010 at 16:52

17 Answers 17

9

I think the recreations in Lego is a good idea - you ought to apply it to the other sites too!

6

I don't like the design. The colors scheme is too bright, a pain for the eyes. There's too few contrast. The font for the question titles is hard to read...

5
  • 5
    I would agree with the font on question titles and question list... its kind of hard to read
    – bangoker
    Sep 30, 2010 at 21:33
  • 4
    More contrast please. Sep 30, 2010 at 22:34
  • 2
    can you provide more specifics about "too few contrast" (where do you mean specifically)? Oct 1, 2010 at 3:31
  • 1
    @Jeff: well, for example the arrows for up/down voting are light gray over lighter gray... I understand that the choice is to have a gray-scale palette to get a "cloudy" look, but it is difficult to spot the difference of different areas, as the colors are too similar (or too few contrasted). Another problem is the similarity between main site and meta.
    – Wizard79
    Oct 1, 2010 at 9:35
  • @Jeff: Turn your LCD monitor brightness down to simulate daylight and lower your monitor contrast (not everyone has LED screens) and try to use the site. Reading lists (eg. grey list of related questions on right) should be easy on the eyes and differentiating between different gradients Shouldn't Make Me Think. Oct 3, 2010 at 12:41
4

The main site and meta are very, very similar-looking. Was there a reason for this?

5
  • 1
    Yeah, all the difference I see is the slightest change in the top grey bar, the lack of color in the ask a question and the change on users names links... and how come there is no "meta" sign?
    – bangoker
    Oct 1, 2010 at 1:57
  • 1
    I think the problem is that the main site is very grey already so it's difficult to make meta more grey. Let's go the opposite way and make it rainbow coloured! Oct 1, 2010 at 11:55
  • Yeah, I have this problem too... Perhaps my answer could be part of the solution as then we can give the stripes at the meta a slightly different color... Oct 1, 2010 at 14:11
  • The problem can be at least partially solved by adding color to the "Questions", "Tags", "Users" etc tabs on the main site, much as the "Ask a Question" button is orange on the main site but not on meta. (That button isn't immediately visible on my netbook screen, but it's fine on my larger-screen iMac.) Oct 1, 2010 at 18:58
  • I just noticed that tags are pale blue on the main site but not on meta. Nice touch, and it helps differentiate the sites. Unfortunately, this difference isn't apparent under my windows netbook. Perhaps the tag borders can be a more obvious blue? Oct 1, 2010 at 19:01
3

A couple of issues I spotted:

Drop shadow clipped on new user and how to ask question dialog

alt text

Not a big issue, since I noticed that even after removing the overflow: hidden from both the sidebar and the main content divs the shadows still wasn't very visible (probably due to the fact that the vertical offset was more than the blur amount)

Editor divider disappeared

This is what the editor toolbar should look like

alt text

Somehow though the divider div gets a display: none here, resulting in

alt text

The buttons won't reflow naturally to take up the empty space though, because each of them is AP'd into position.

Change the title font to something else. Please!

The font issue kind of gets on my nerves a bit. Lucida Grande/Sans Unicode might look good at smaller font sizes, but at larger sizes it's just terrible. Here's the low down for the fonts on my Windows computer:

Lucida (current) alt text

Arial alt text

Tahoma alt text

Trebuchet MS alt text

Verdana alt text

Segoe UI (Windows Vista and 7) alt text

(Click on the pictures for full size image. Browser image resizing is terrible.)

Of all the fonts you could possibly have chosen, Lucida really seemed like the worst.

Edit Segoe UI is now at the top of the stack, yay! Unfortunately this still won't work for good 'ol XP. Ah well...

Tag autocomplete color and spinner

The spinner that appears while we wait for the tag autocomplete to pop up appears to be missing. Also, the autocomplete is using the "default" SO orange, which looks out of place here.

alt text

Some simple changes would make it look much nicer

alt text

2
  • 1
    totally agree on font, already changed now! Oct 1, 2010 at 3:29
  • fallback fonts for who doesn't have Segoe are still horrible -- maybe just specify ONE custom font and fall back to sans? Gotta stylish that Oct 5, 2010 at 10:33
2

In my opinion, this whole site is now difficult to use and read. Contrast is very low. Very grey. One of the best parts about StackOverflow.com is that it is very quick and easy to read.

Don't take this the wrong way... maybe it's just the non-designer in me talking, but when I use Stack Exchange sites, I'm looking for utility... not shiny.

2
  • Surely we can have both? Oct 1, 2010 at 18:55
  • Maybe. :-D Perhaps we can.
    – Brad
    Oct 1, 2010 at 19:45
1

You may want to also update the CSS / images used on this page. Looks the same as the beta theme.

1

The bar at the top and the auto-login thing overlapped for me:

1
1

Please increase the contrast of unselected grey up-vote, down-vote and favourite buttons against the white background. I have to squint to spot them.

Example: look left.

0

alt textI'm seeing the Post Your Answer/ Add Comments button really really weird

3
  • This is in FF4, in Opera its OK
    – bangoker
    Oct 1, 2010 at 2:01
  • We do not support beta browsers. When FF4 is officially released we'll take a look if the problem persists.
    – Jin
    Oct 1, 2010 at 6:27
  • I feel some kind of UI compatibility with those fat grey buttons... Oct 1, 2010 at 14:09
0

On Firefox 3.6.7 configured with fonts slightly larger than standard the main question list is squished into a narrow column.

Broken question list

1
  • I don't think SO supports people who Zoom. Thats a strange effect though
    – TheLQ
    Oct 13, 2010 at 0:16
0

It's hard to tell, but I have a feeling that there are some contrast issues compared to other sites...

Especially with the tags, statistics and linked/related questions.

Also, the white stripes at both sides of the site should be a dark color as at the moment it looks like there is something missing there. By a dark color you draw the attention away from the sides...

0

Gradients and drop shadows everywhere are sooo Web 2.0.

The design is beautiful, but I'd prefer a more timeless design with a focus on usability and not "cloudiness."

Example

This is my opinion only, but take the fade-in effects over the main navigation buttons. Even though it is beautiful to watch, the fact that they don't light up immediately, but fade in over time distracted me enough to mention it.

Though it is hard to say eye-candy hurts usability, compared to other SE sites, it is a symptom of a design philosophy which takes the high ground on pretty design over pure usability.

I acknowledge that this is a trivial matter and I will probably get used to it over time, but I haven't warmed to the dreamy theme.

2
  • Are you saying the "cloudiness" hurts usability? If not, I don't see the problem; if so, maybe you could specify a little bit.
    – balpha StaffMod
    Oct 3, 2010 at 14:20
  • @balpha: edited my answer with more detail. Oct 3, 2010 at 14:59
0

<pedantic design>The lack of a margin below the "Ask Question" button just feels slightly claustrophobic.</pedantic design>

Compare

Stack Overflow

alt text

Web Applications

alt text

0

I don't know why, but the fact that the top bar is 'all-in-one' and clickable-looking had me looking for the close cross, because it seemed like a notification bar. Guess I'll get used to that.

Also, I get that the gray background of the page title is supposed to be the rest of the 'tab' created by the main link (on this page it's the "Questions" tab), but if you click directly on the logo, no tabs are selected, and it seems slightly weird. The other weird thing is that in the first case, the background extends across the top of the sidebar, but in the 'no tabs selected' case it doesn't.

0

I find that "fat" buttons and rounded input boxes for "ask question" and "interesting tags" seem totally extraneous to the rest of the layout.

0

The ui for the share reminder seems to need some css styling.

0

Analytics page has a scrollbar around the content that duplicates the browser scrollbar.

You must log in to answer this question.

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