23

As you can see the new design just went live. Which means this site has been officially launched! Congratulations! Thank you for your valuable design feedback.

If you're still seeing the old favicons, please load the follow urls and do a hard browser refresh.

http://sstatic.net/scifi/img/favicon.ico

http://sstatic.net/scifimeta/img/favicon.ico

We have also themed the chatroom, twitter account and newsletter template for this site.

If you see any CSS/styling bugs, please start a new post and tag it with "design" and "bug."

I'll be checking Meta closely for CSS bug reports, meanwhile I'm converting the blog theme to the new look too.

p.s. I made the Meta theme a dark theme, I feel since it gets limited views, it's OK. plus Meta = "The Dark Side" right? :)

Congrats on the launch and thank you for being an awesome community!

19
  • 9
    LOOKS AWESOME :D
    – Matthew Read
    Dec 13, 2011 at 20:28
  • I like the fonts!
    – Goran Jovic
    Dec 13, 2011 at 20:30
  • 1
    I can't get the new favicons to work on the main and meta sites. Loading your links and refreshing them shows me what the new favicons should look like, but no amount of refreshing is getting it to work for me. Using Firefox 8.
    – user1027
    Dec 13, 2011 at 20:34
  • @keen does clearing cache solve it?
    – Jin
    Dec 13, 2011 at 20:36
  • Great work Jin. But what happened to the other font for the word Fantasy? It's only on meta!
    – Reinstate Monica - Goodbye SE
    Dec 13, 2011 at 20:47
  • @Wikis are you talking about the cursive font? what about it? I only use it for the "Fantasy", and "meta"
    – Jin
    Dec 13, 2011 at 20:49
  • Yeah, that is it. I see it on meta, but not currently on the main site. Looks like the font is not changed there. Sorry! caching! :)
    – Reinstate Monica - Goodbye SE
    Dec 13, 2011 at 21:07
  • @Wikis I had a cache-related issue where the old logo, including the "Beta" tag remained for the main site. A hard refresh of the browser (Chrome, in my case) fixed it.
    – Beofett
    Dec 13, 2011 at 21:08
  • @Wikis can you hard refresh the browser?
    – Jin
    Dec 13, 2011 at 21:08
  • Jin, @Beofett, yep, both right... hangs head in shame...
    – Reinstate Monica - Goodbye SE
    Dec 13, 2011 at 21:09
  • @Wikis it's my fault. I normally break css cache on image sprites when I launch a new site, but I forgot to do it this time.
    – Jin
    Dec 13, 2011 at 21:10
  • @Jin I thought you were going to do "Science fiction + Fantasy" on the logo instead of "SF & F." Did you change our mind?
    – Royal Flush
    Dec 13, 2011 at 21:24
  • @NullUserExceptionఠ_ఠ I did change my mind. I felt that "&" reads better than "+"
    – Jin
    Dec 13, 2011 at 21:26
  • I hope y'all noticed that @Jin made a custom Venn diagram for your about page! 8^)
    – Isaac Moses
    Dec 13, 2011 at 22:16
  • 2
    Congrats on the new design. It looks great.
    – user557
    Dec 14, 2011 at 0:15

11 Answers 11

Reset to default
18

I love the design, as I love all your designs, but I'm getting a headache being here on meta.

Light text on dark backgrounds has been shown to be worse for legibility (this blog post gives a few relevant citations, as does this answer on Stack Overflow) which is compounded by people who have less-than-perfect eyesight (i.e. most people including myself).

While there's an argument that dark backgrounds are great for media-rich sites (so as to not detract from the focus, whether it be video or pictures), Meta is not a media rich site.

Can this be changed to follow the other sites, where the meta site is a gray/washed-out version of the main site? Meta Bicyles.SE was a great example of how you made a colorful site work in a dark-text-on-light-background way on its meta.

14
  • Yeah, the color scheme on meta does not look good.
    – Royal Flush
    Dec 13, 2011 at 21:03
  • 1
    Mark, thanks for the feedback! I gave this design decision a lot of thought. Normally I wouldn't do a dark theme for the main site. (I learned the hard way with the physics.se initial design, and eventually pulled it). I feel that the Scifi/Fantasy crowd may welcome a dark theme, as long as it's not heavily used. Only power users and mods use Meta. I tried the same on the Photography Meta and people seemed to be OK with it. But, if this is becoming a problem for more people, I'll reconsider.
    – Jin
    Dec 13, 2011 at 21:05
  • @Jin Meta needs more contrast at the very least.
    – Nick T
    Dec 13, 2011 at 21:08
  • @NickT i'll be tweaking Meta for contrast. I tried not to make stark white on black though.
    – Jin
    Dec 13, 2011 at 21:10
  • 1
    Personally, I really like the meta colour scheme!
    – Reinstate Monica - Goodbye SE
    Dec 13, 2011 at 21:12
  • @Jin Fair enough, but can the transition and highlight colors be adjusted if the light-text-on-dark-background scheme stays? This is not good.
    – user366
    Dec 13, 2011 at 21:19
  • @MarkTrapp See his comment on my answer. It's a bug.
    – Royal Flush
    Dec 13, 2011 at 21:21
  • @MarkTrapp sure. which transition are you referring to? is it the same one from NullUserException's comment below?
    – Jin
    Dec 13, 2011 at 21:21
  • @Jin I linked to a video in my comment (twitvid.com/PBROW), but I think we're talking about the same thing: when you link to an answer, there's the highlight transition effect, where it goes from orange to white.
    – user366
    Dec 13, 2011 at 21:27
  • @MarkTrapp yep that's the one. we'll fix it.
    – Jin
    Dec 13, 2011 at 21:28
  • 1
    @Jin we want meta to be inviting, not something where only power users and mods are comfortable.
    – Tony Meyer
    Dec 13, 2011 at 22:11
  • 1
    @Jin while meta (did) go white->normal, main goes light->dark, which looks very bad.
    – Nick T
    Dec 13, 2011 at 23:15
  • @NickT this is now fixed.
    – Jin
    Dec 14, 2011 at 15:55
  • @Jin Although on meta it still looks a bit weird since the text is white (demonstration)
    – Royal Flush
    Dec 14, 2011 at 16:14
11

More contrast for many things

Needs more CONTRAST.

and the vote buttons and up/downvote colors

Hijacked to include another poor contrast example on vote split

and in the link box

Also bad colors for the link box

2
  • I think the silver badges on the main site (not on Meta, seems fine here) also need more contrast. With the pale blue background on the main site, they're very light.
    – FAE
    Dec 13, 2011 at 21:22
  • honestly there's too MUCH contrast on many things, some of the white backgrounds used in meta are very hard on the eyes
    – Ben Brocka
    Dec 30, 2011 at 16:29
3

Yay!

I find that the 5k suggested edit count and the moderator/10k flag count are not very spectacular, as they are washed in an ocean of color. Can they be made a different hue that screams “pay attention to me” a bit louder? I think having them on the right of the mod/tools/review link (like they are on most sites AFAIK) instead of next to the badges would be enough.

3

Just adding to what Mark Trapp said, I find the contrast especially poor on the answer count and visited links:

enter image description here

Also, this thing you are using to highlight the original poster in comments doesn't look very good IMO:

enter image description here

Finally, when link to a specific post (example) (happens automatically when you update or submit a new answer), the fade-to-white and un-fade is a bit disconcerting because the text is white too.

PS: Probably not a big deal but, the spoiler thing is not working on meta:

testing

PPS: More contrast issues here: http://chat.stackexchange.com/transcript/message/2708213#2708213

I can barely see the names. (looks like this has been fixed)

PPS: More contrast issues with links on about me section of profiles (example):

enter image description here

4
  • 2
    Thanks, I agree with this. I'll be going through Meta tonight and address the contrast issues. I didn't have enough time to test it thoroughly because I wanted to get the main site launched today. I'm sure there are other Meta glitches. Feel free to post any you see.
    – Jin
    Dec 13, 2011 at 21:14
  • @Jin Was the fade effect intentional?
    – Royal Flush
    Dec 13, 2011 at 21:15
  • are you referring to when linked to a specific answer, the background fades from white? If so, it's not intended. I'll fix that.
    – Jin
    Dec 13, 2011 at 21:17
  • @Jin Yup, that was it.
    – Royal Flush
    Dec 13, 2011 at 21:18
2

I apologize if this is a dupe, but the triangle used to open up your user stats (to the left of your userID on the top) is 100% invisible on the main site, and only barely visible on Meta. Depending on how many badges you have, this will affect your ability to read your name or your rep.

SciFi:

enter image description here

enter image description here

META SciFi:

enter image description here

StackOverflow

enter image description here

As a side note, I agree that meta in general is MUCH worse in usability/readability with the new styling (compared to either generically styled BETA or to SciFi main

4
  • I deeply apologize for lack of freehand circles - I'm stuck with MS Paint.
    – DVK-on-Ahch-To
    Dec 14, 2011 at 16:11
  • this will be fixed in the next build.
    – Jin
    Dec 14, 2011 at 16:13
  • Added another picture and expanded this to cover my case where I can't read my rep.
    – user1027
    Dec 14, 2011 at 16:58
  • @Jin was the rep number changed at all in the next build (when is/was that)? It still looks like Keen's screenshot; virtually illegible;
    – Nick T
    Dec 24, 2011 at 5:43
2

When adding tags to a question on the meta site, there's almost no contrast between the tag description and the background. This issue doesn't occur on the main site. Screenshot of issue

1
  • yep that's fixed locally. will be in the next build.
    – Jin
    Dec 14, 2011 at 17:28
1

Awesome design! Like highlighting in menu. But could you make background for posts with favorite tags more differ from other posts? It is very hard to see the difference of the favorites from regular posts on some screens now.

1

Another issue I've found is in chat. When you reply to a specific chat message, to the left of your reply is an arrow that links back to the message you're replying to. That arrow is now too low contrast with the chat message background color, so it's invisible.

1
  • This arrow is almost totally invisible, it really should be changed.
    – Ben Brocka
    Dec 30, 2011 at 16:25
1

I just wanted to call attention to the totally inappropriate use of the biohazard symbol for marking accepted answers. This symbol was specifically invented for a single purpose, and that purpose has nothing to do with Speculative Fiction or questions and answers. This needs to be changed ASAP, because it casts entirely the wrong impression.

1
  • Martha, I agree with you, and others who pointed this out. I'm in the process of creating a new shape for the accepted answers background.
    – Jin
    Dec 24, 2011 at 2:46
0

Of these fonts...

VarelaRoundRegular, 'Helvetica Neue', Helvetica, Arial, sans-serif;

...I'm not sure which one is ending up as the default font on the main site on my machine. But I find it extremely unreadable. The letters are excessively wide.

EDIT: Screen shot below:

This font seems too wide and hard to read, to me.

5
  • Can you post a screenshot showing what it looks like? It looks good to me.
    – Royal Flush
    Dec 14, 2011 at 2:41
  • Sure, just a minute and I'll do that.
    – Kyralessa
    Dec 14, 2011 at 3:31
  • So which font do you think is wide? The one on the title or the body? I think this is fine.
    – Royal Flush
    Dec 14, 2011 at 3:45
  • Both, but particularly the one in the body. It's hard to put my finger on exactly what makes it hard to read, but I'd say it's a combination of the width and the flatness. In particular, I notice that both capital and lower-case O's are wider than they are tall.
    – Kyralessa
    Dec 14, 2011 at 4:15
  • Interestingly I do not see those fonts... Which I actually like and hope to figure out why.
    – Chad
    Dec 14, 2011 at 19:16
0

The "leave another chat" icon is very hard to see (the little up arrow after "User Experience"):

enter image description here

The contours aren't clear due to the dark-on-dark coloring, should probably be a slightly lower contrast version of the text color like the icon is on other chats:

UX.SE:

enter image description here

1
  • 1
    this will be changed shortly. the icon will be white.
    – Jin
    Dec 30, 2011 at 17:12

You must log in to answer this question.

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