17

Welcome to the new Skeptics site! I've had an awesome time learning and designing for you! Thanks for all of your feedback and communication. :)

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

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

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

We have also themed the newsletter template for this site.

Finding CSS/styling bugs? Start a new post and tag it with "design" and "bug."

Congrats on the new design and thanks for being an amazing Stack Exchange community!

  • 1
    I have trouble telling the difference between selected and non-selected voting arrows after I've voted. (I can't tell whether I voted up or down, they just look different). Especially here on Meta. Am I the only one? – Nicole Mar 21 '12 at 20:26
  • @NickC: Nope. It takes a conscious effort on my part to see it. – Borror0 Mar 21 '12 at 20:35
  • 6
    Needs less rectangles and less black, imho. And less whitespace for the comment-area. – BlueRaja - Danny Pflughoeft Mar 21 '12 at 20:51
  • Actually it's easier to see the difference between the voted/not voted triangles on meta -- they are either white or grey. On the actual site, they are either white or yellow, and it's hard to tell the difference. – tcrosley Mar 22 '12 at 3:29
  • I find the background imagery very distracting, it felt like I was viewing the site in a flashbox image gallery with the rest of the site dimmed down. – Ambo100 Mar 30 '12 at 20:50

11 Answers 11

10

Glad to see the site has launched! I didn't happen to catch the preview of the design before.

I like:

  • Gears for badges.
  • The logo
  • The style of the t-shirts and stickers.
  • The background, body frame, and body font

However, even though I really don't deserve a say since I missed the discussion while it was still in beta, I find the usability and readability of the site to be much lower than the beta theme and (most) other Stack Exchange themes.

For example:

  • Vote Arrows selected/unselected - can't tell which is which.
  • Links in comments are hard to notice, being almost impossible to distinguish from standard bold. There are three uses of bold in comments. Darkest is a link, middle is standard bold, and lightest is visited link. This is confusing. Consider me old-fashioned, but links need underlines unless they are a bright, obvious color. The hover state (matches visited) doesn't help much as it just drops into the body color.
  • Boxy icons seem somewhat unfinished and are hard to distinguish in general. They drown out the vote/favorites numbers.
  • In addition to the black icons, some other elements of the UI just have too much contrast for good readability.
  • Tags don't stand out well - but I like what they look like when hovering. What if the hover background color was standard/permanent, and they gained an outline on hover?
  • 2
    You mentioned links in comments, and I thought it would be nice to see a random example. – Oddthinking Mar 22 '12 at 3:35
  • 5
    Regarding the links in bold, breaking conventions is just wrong and not a matter of opinion. – Sklivvz Mar 22 '12 at 8:13
  • @Sklivvz I have seen bold links before. ;) – Mateen Ulhaq Apr 1 '12 at 2:25
9

I am not participative here on skeptics, but personally, I really disliked it. That high-contrast black borderless square buttons on white foreground are very ugly in my opinion and they even don't looks like buttons, reminds me some really bad-designed sites from 1996 and 1997. The background is too dark, and I just could tell what it was here on meta where it is lighter than in main discussion site. The tags have a very uncreative undercooked style too compared to other stackexchange sites.

7

Legend:

  • [opinion][/opinion] tags indicate what is not important
  • [main], [meta] and [both] tags to tell on what site(s) is the problem/suggestion

'ASK QUESTION' button:

  • The cool background transition effect is not working [main]
  • The background is lost because the banner is also black [main]
  • [opinion] I am not very fan of the CAPs [both] [/opinion]

Top-Header links:

  • [opinion] Nothing happens when you :hover on them, changing the color to white and/or underlying them would be nice [both] [/opinion]

(Up/Down)votes arrows:

  • [opinion] It is very hard to tell which posts are already voted (I almost un-upvoted a post) [meta] [/opinion]

Links (on posts):

  • [opinion] Having them of the same color of the text is not great idea, specially when references are very important to the site. They are hard to spot as it is now (I suggest changing them to other color) [both] [/opinion]

Overall design colors:

Grey Layout:

  • The upper and bottom don't match (see image below) [both]:

enter image description here

(the middle was removed, this only shows the upper and bottom parts)

  • I'm voting you up for noticing the header link. There is a kind of highlighting animation on normal not :visited links, but it's way to slow. By the time you notice you've already started moving your mouse away. On :visited there is zero highlighting on mouse over. Do not like. – Kit Sunde Mar 22 '12 at 18:18
  • 1
    @KitSunde there's a known bug with Chrome, that it ignores CSS transition on :visited links. – Jin Mar 23 '12 at 3:59
6

The post notices are barely visible.

This is NOT very good at all.

Find the notice?

Yes, the notice is the small font bit at the bottom...

Make the notices much more visible, please :-)

Post is related to a rapidly changing event.

  • 1
    Added a notice below for further exemplification. – Sklivvz Mar 22 '12 at 9:54
  • +1 about the notice being added to your post! :P – Alenanno Mar 22 '12 at 16:34
6

With the live design, I don't think the square buttons for voting and favorites work, they just look strange to me. I'd prefer if those were changed to more conventional buttons like on other SE sites, without the large black block around them.

The Google+, Twitter, ... buttons also look a bit weird in yellow on black, maybe we should just use the desaturated standard ones like on other sites.

The spacing between comments is weird, I suspect some of that are bugs, but it should be generally reduced somewhat.

The bold links in comments are confusing, should be changed to underlined.

The font used for votes, answers, views in question lists is a bit small and thin, it's harder to read than on other SE sites, especially if it's green.

4

Ads for SciFi.SE on Skeptics.SE are unreadable, with a black font on a black background (pictures link to larger versions)

enter image description here

enter image description here

The same problem doesn't exist on other sites:

enter image description here


I am not active on Skeptics.SE, but I still want to chime in that I find this theme unaesthetic and more difficult to read. However, all of my specific complaints have been mentioned in other answers here, and I have upvoted them accordingly.

  • Nice find; it should be a separate question though: >Finding CSS/styling bugs? Start a new post and tag it with "design" and "bug." – Oddthinking Mar 22 '12 at 10:09
  • this will be fixed soon. the sidebar color on Skeptics theme is overwriting the Ads' text. – Jin Mar 22 '12 at 13:23
3

I feel like the area trying to steal focus is somewhat inverted. When I land on the page I'm drawn from the logo to then look at the more colorful and contrasting sidebar. I find it a bit difficult to put my eyes on the titles, especially when they have :visited.

My totally not actually tested idea of how eyes would move on the site once you land is this (at least that's how I seem to react): enter image description here

I also feel that the animation on the "ASK QUESTION" is so long that it distracts me from clicking it by making me notice it's doing a flashy animation.

I've played enough MMO's to know that people hates change (patches) until it's internalized, so I reserve judgment over the whole thing for another week or two.

2

Design looks nice but... Is it just me or it takes more than those 0.1 milliseconds to load? It can see the background before seeing the "white part" here where the content is located.

I just wanted to let you know in case. :)

  • 2
    +1, I normally wouldn't care, but it is a black-white contrasting :( – ajax333221 Mar 22 '12 at 1:55
  • I'm being picky here, but 0.1 milliseconds isn't a realistic goal. From here in Australia, just contacting the server takes over 300 milliseconds round-trip. 0.1 millisecond means the server can't be more than 15 km away at a theoretical maximum! – Oddthinking Mar 23 '12 at 9:12
  • 1
    @Oddthinking I was just shooting a random number... Not being realistic there. :P I just meant that it took a bit to load completely and that I could see the background behind it. It's not a major issue. :P I'll probably make a more accurate analysis of the general layout later. :) – Alenanno Mar 23 '12 at 9:25
  • The "background invisible for a while" issue is fixed in the next build. – balpha Mar 23 '12 at 14:40
2

Text in quotes is hardly distinguishable from normal text. What happened to the grey background? :|

  • 1
    I'm still seeing it. (Safari, mobile site) – Oddthinking Mar 21 '12 at 23:42
  • And Chrome, full site. – Oddthinking Mar 22 '12 at 3:36
2

I'm throwing a few more ideas out, I tried out some stuff and I'll just put an image of some changes up here:

enter image description here

I did the following in this image:

  • Toned down the horizontal lines (from 2px to 1px, and from 1px solid black to dotted grey)
  • Removed some blank space, especially around the comments
  • lowercase tags with a light grey background

I think the current horizontal lines are a bit heavy and distracting, and I'm not a fan of the all uppercase tags.

Another observation I made when comparing this theme with the new beta theme is that we have nearly no highlight color in the main content area. The new beta theme has blue titles, user names, tags, links and user card background. The new Skeptics theme has only the user card background in light yellow, and that is faint enough that I didn't even see it originally on a different monitor.

The whole theme looks very monochrome when you focus only on the main content area. I think some more highlights would help there, but the yellow/black color theme doesn't really allow easily for that as yellow is too light to be used for any text.

I've attached a comparison of the new beta theme and the new Skeptics theme.

enter image description here

enter image description here

  • 2
    It seems to me the beta theme is way, way more polished and balanced than our theme! – Sklivvz Mar 22 '12 at 21:33
2

The problem with this design, the reason you still encounter significant opposition in spite of the many adjustments, is because it's still too reminiscent of the old conspiracy theory-themed design.

Sean put great attention to details in the original designs. The choice of font, the paper-looking dirty white background color of the central column, the squareness of the buttons, the big black line dividing section, excessive amount of whitespace, the understatement of links, etc. All of it serve to reinforce Sean's initial desire to represent the analog version of the site, "like the wall of a researcher or reporter trying to connect the dots on their fact finding mission."

If we were to analyze the design based on whether Sean succeeded in bringing that feel, we would have to give it full marks. Sean succeeded in creating the mood he desired.

Unfortunately, that mood was rejected by the community.

In response to the feedback, Sean removed the most glaring offending aspects of his design in the hope that it would make it palatable to us. Fair enough. If the design had been only slightly altered, that might have worked. However, the flaws run deeper. Sean clearly put a lot of time in this design, and since his intent is not compatible with the community's preferences it's still causing problems. Most of the negative reaction you see to the design are symptoms of this larger problem.

Another way to phrase the problem is that Skeptics' design looks a lot more like English's than Physics'. You would expect a site about scientific inquiry to share a lot more commonality in design with a site about physics than one about the English language.

That's not all.

English's is an exception in the Stack Exchange Network, not the rule.

When you look at graduated Stack Exchange site, most of them share this very polished, minimalistic and modern look. English does not. It breaks the rule for the right reasons, though. The design emulates a specific mood that is a solid match for a site about the English language.

The community does not desire special treatment. Quite the contrary, in fact, we want a design that is more in line with other graduated sites and the new beta theme.

  • Where do you see similarities with the English site? There isn't one I can find. If you say that this site doesn't have things that hint for a "scientific approach", then we might agree, but there is nothing that this site shares with EL&U. – Alenanno Mar 24 '12 at 11:42
  • 1
    @Alenanno: Excessive use of whitespace, visible divisions, background of a color reminiscent of old paper, etc. Both Skeptics' and English's design are meant to give an analog vibe. – Borror0 Mar 24 '12 at 21:32

You must log in to answer this question.

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