Rollout of new network site themes

Question

For the remainder of updates, see the tracking post:

Rollout of responsive design site themes - Tracking post

---

See updated schedule below and updated stock theme

As promised (albeit delayed), we are posting site themes for our first group of network sites for comment. The goal here is to allow the community in general and users of these sites specifically to see how the new theming will be applied to these sites.

Again, we acknowledge that this is a painful change for sites that have rich, custom themes. I want to reinforce that the theme changes are a required step to deliver ongoing value to the sites with as little friction as possible. We released changes for tag watching (aka favorite tags) this week and will be releasing a beta of custom question list functionality soon. The only way to make sure Q&A improvements are quickly available to all Q&A sites is to fix our themes.

To recap from the original post on themes:

Every Q&A site has its own theme. But there is great inequality in the level of theming that we support. A few (~10) get Cadillac treatment, some (<50) are more like a Honda, while most (~100) are a Yugo. The reality is we created a theming system that we didn't have the design resources to fully support, thus the inequity. In addition, as currently defined, our theming gets in the way of releasing new features on the sites.

In order to deliver the left nav, responsive design and future improvements to all sites we've created a more standardized way to support theming. This will reduce the burden of supporting designs as we make Q&A improvements. The result is that most sites will see an improvement in the level of theming that they can get. While some sites will see a reduction. All of Q&A (Enterprise, Teams, etc) will standardize on this new theming scheme.

- Ch-ch-ch-changes: Left nav, responsive design, & themes

Next steps

Schedule

• Early July: Collect and respond to feedback from this post
• Early August: Release first 10 sites
  • Code Golf gets new "stock theme" today (08/03/2018). If all goes well we will start rolling out to other stock theme sites in August.
  • First 10 sites start getting updated early next week (08/07/18ish)
• Late August: Post/release next 10-20 sites for comment
• Late August - September: Rinse and repeat

Feedback

Please review the mockups and feel free to provide constructive feedback in answers below. We aren't going to revisit the choices we've made around simplification, so it would be more productive to keep feedback focused on the application of the new theme scheme.

Enough talk, show me the money

We have 10 sites that are ready for comment. You can click on the mockups below to see the image in a larger format.

Server Fault

Super User

Ask Ubuntu

One special note, the current Ask Ubuntu theme sports an extra "top bar" that provides navigation to other Ubuntu sites. We are dropping support for this bar in our new theme. The application of this bar is inconsistent across the Ubuntu sites and it is lightly used on AU.

Mathematics

Photography

TeX

Unix & Linux

Ask Different

Mi Yodeya

Stock theme

(This theme will be used on most Beta sites and Graduated sites without custom site designs. These sites will be updated in the first round and then some may be eligible for a custom theme after the remaining sites that currently have custom themes have been updated.)

See earlier iteration of home page

See earlier iteration of question page

Answer 1

status-completed

Stock Theme

All beta sites look alike now, so clearly the stock theme isn't going to help disambiguate among them just like the current beta theme doesn't. But could we avoid the stock theme having the same exact colors as non-stock sites? Meta.SE and Super User should have theming that says clearly "not the same as those". Going forward, one of the benefits of "graduation" (or whatever concept replaces it) is that you get to move away from the default; this combination makes it look like these two sites have regressed to that default.

Answer 2

status-completed

Super User

I agree with Sonic the Inclusive Hedgehog's comment, Super User looks too much like Meta Stack Exchange. I suggest making Super User a bit darker. Here is an image of approximately what I suggest (I'm not an artist so the colors may need to be adjusted a bit):

This answer focuses only on the color. There may be other issues with the design that aren't addressed here.

Answer 3

status-completed

Super User

As a long term user, and a moderator on Super User, I'm pretty frustrated with the approach taken, and as a lot of folks pointed out, we got stuck with what's basically a beta theme. I'm frustrated, and actually a little angry with how this turned out, and I actually have been a fan of the new responsive layouts. Every other site seems to have a theme that's derived from what they have now, and respects their traditional colours and identity. Super User's does not. I'd go so far as to say it looks like your designer phoned it in. It's... really bad.

Looking at this... Super User basically has the stock theme. It has just enough changes that it maybe had someone look at it and go "eh, lets just throw that on there, it'll be fine". It's... not...

It kind of ignores our long established site identity; it's somewhat drab and well - you guys did our logo a disservice by making it monochrome. It really needs to be two coloured as it has been throughout the history of the site.

Speaking of indignities our poor logo has gotten, my users have pointed out {'] (almost) has gotten mangled on the right, making our poor super user face look like he had a bad day with the heroine of Kill Bill. I do urge the graphics designer in question to take a good look at our logo, and consider the impoliteness of chopping the back of someone's head off. I even wonder if the graphics designer went "eh, I don't want them to notice I copied the generic theme. I know! I'll add in this element that almost looks like the site logo?"

I do think that a remix of mathematics colour scheme - maintaining the white base we've had, or Server Fault's would feel more in line with what we've been used to. It maintains our distinct site identity, allowing us to keep our logo intact, doesn't look like the generic theme, and doesn't require a ton of redesign. The mathematics theme looks super close to the current scheme, and having a similar design to Server Fault reflects that we were one of the original trilogy in four parts.

As is though, I'm sad to say, I actually seriously hate the new design the more I look at it.

Answer 4

status-declined This is an area that we've decided to standardize.

Appearance of tags

Several sites have a custom appearance for tags that's associated with the site's theme. This is generic feature which gives sites that use it a unique look but is disappearing in your new design. It's used on at least:

• Emacs: 'tag-name
• Mathematics: (tag-name)
• TeX: {tag-name}
• Unix & Linux: /tag-name
• Photography and Ask Patents: [tag-name]

Unix & Linux

I will really miss the (forward) slash-ed (/) navigations and tags that is giving the unix-like feelings! Can we preserve that in the new design?

Do you know how much is it liked by the community? look at the name of chat-room: /dev/chat!

Answer 5

Meta Sites

How will the metas of these sites look? Will they follow the same system we currently have - that is, a grey-scale version of the main site theme?

If so, how will that look in cases of sites that are already predominantly grey scale like Photography? Inverted grey/white values?

Or, like SO and MSO, will the only difference be the color desaturation of the site logo and the addition of the word "meta"?

Answer 6

Stock Theme

Please, make a different site design for stock theme. This looks exactly same as Meta Stack Exchange except the lines and meta logo in the header. But that difference is too trivial to notice.

This not only makes the users think that they are on Meta Stack Exchange [Some don't like this and don't feel welcomed here :( ]. but also removes the uniqueness of Meta design. Make some changes to the Stock Theme.

I agree with Monica's answer about adding this theme to Graduated sites without design. I don't think changing the colours of graduated sites without design (e.g. Anime & Manga) sites is very much helpful or makes the users better because they only get the same design as Meta Stack Exchange and common design of Beta sites. They don't feel any different from being a Beta site. It looks like putting old wine in the new bottles.

Meta Stack Exchange had this theme since long (at least since I joined) and I like it very much because it is unique. If this site's theme is added to main sites, it loses its uniqueness. I also feel its classification will also be mixed up (Meta's design is given to main site.).

So, please consider changing the themes of Stock Theme and graduated sites without design and make Meta Stack Exchange design unique.

Answer 7

Worldbuilding

I know that the Worldbuilding.SE theme make-over hasn't been finalized and released yet, but in the ch-ch-changes post, you link to a document that includes this image:

(Compare to old background.)

A couple questions: What's happening with the ridges at the bottom? You know, the part that makes it look like the world is in construction?

Second, what's happening with those figures? You've incorporated the header image, but... what about our friends in the theme there? Can't we fit them in somewhere?

Also, as an aside - the different colors on the right and left are IMO distracting. Both sides should be the color that's currently on the right, to be more true to the original theme.

There is currently a "Save The Robot!" campaign on Worldbuilding Meta, and some additional critique on the proposed site design in this answer to that question, that are relevant to this post.

Answer 8

I'm very happy to see custom badge icons made the cut. And equally sad that custom voting buttons didn't. I don't understand why the choice of graphics (as long as the dimensions are the same) would matter; therefore, I don't follow the trade-off here.

Speaking of trade-off: I don't care for the left nav¹, and I don't think the biggest problems of SE as a platform are small UI issues. (Whatever became of the SE Quality Project?) Maybe I'm being unfair, but from my perspective sites will lose some of their flair for marginal improvements.

So what's left is hope that these alignments will enable more relevant changes down the road. You could ease at least my mind by mentioning some things on the roadmap to sweeten the deal.

---

1. I almost never use the links contained there, so it's just noise that stays with me when I scroll. The things I do frequently use -- search, mod tools, flags, review queue (if I wasn't a mod), link to meta, notifications -- remain out of sight² in the top bar.
2. I user-style the top bar to float with me when I scroll, so I'm actually fine with that. The point is, the left bar doesn't add anything for me. It seems to exist solely for teams, which I don't use (except the mod group, which obnoxiously takes over the SO main landing page).

Answer 9

status-declined This is not an implementation issue. We believe there is value in keeping the elements used for key interactions consistent across the sites. You don't interact with badges, so we thought that was an area we could give on.

Just so we're clear...

Custom badge icons are staying, but custom upvote/downvote icons are gone...despite both being defined by the same image resource?

I can understand a desire to have these be "standardized," but these small details go a long way towards making a site feel like it has its own feel. I'm constantly amused by the up/down vote button's styling on Money.SE: They're little stock chart graph things (I'm sure there's a name for them).

Telling a site "look, you can only change part of this SVG. These bits are off limits" makes no sense.

Unless you've removed them from this resource entirely, to which I ask: why? It clearly wasn't motivated by the cost savings aspect that the new theme push is based off of. Having to remove it from the theme-SVG and refactor it elsewhere took development time that obviously could have been Not Done and let sites keep the flair (i.e., it literally cost more money to remove than to keep).

I am disappointed.

Answer 10

status-completed

Super User

Almost anything would be better than the MSE/stock look-a-like being proposed.

However, as also mentioned by Journeyman Geek here and here, and by Kolappan Nathan here, I think it is very important to keep the current coloured logo.

I would prefer something similar to the Unix & Linux theme:

possibly with a grey footer:

I'm not very keen on a black footer like Server Fault, though.

Answer 11

Link colours

From a first glance, there seem to be quite a few problems still with choosing the proper colour palette tailored to the individual sites' themes as originally designed by SE's hired designers in an elaborate design process.

The voting buttons' colour has fortunately been fixed and tailored more to the site design. But from a first glance all the proposed themes seem to use the same light blue colour for links, some of them even on the user account boxes when they previously didn't. Sites like Tex.SE and MiYodeya.SE really stick out and just seem incoherent this way.

Now I don't have too much experience in professional UX design, but to me colours make a huge part of a working theme, more important that small icons even. The colours those sites' designs currently use have been well thought out to fit to their themes. And on a normal SE question/answer page links are not an all too uncommon find.

I'd really implore you to reconsider robbing the sites of this significant part of proper theming and design with unifying colours in this way. It should be a really small change but with a huge impact for identification and theming.

Answer 12

Mi Yodeya

Header

status-planned Could we increase the contrast between the Hebrew מי יודע and the background? On the current site, the background is lightened behind the logo, which is also where that text appears, so even though the text color is (apparently?) the same, the contrast is better.

Because the header background is constant across the width on the new design, we probably need to darken that text. Since the text is no longer overlaid on the logo, please consider making the Hebrew and English texts the same color.

Site-specific notice

status-planned I assume this is just because of how you did the mockups (those aren't our questions :-) ), but could you confirm that the "professional services" notice will appear as it does now? Where will that appear in a small viewport?

Tags

status-review Is the coloring on tags (text and background) customizable? The "SE blue" isn't the best fit with our background color, though presumably I'll get used to it. Asking just in case that's something we can tune.

Question page

Thank you for preserving our voting color! SE orange would have definitely been jarring there.

Answer 13

It's great that the Photography site will retain its "Image of the Week". It's been part of the site's look for a long time and would be sorely missed. I'm certain that there are other sites that will enjoy having a small spot in the upper right reserved for their site specific usage.

status-completed The only problem is that previously there were two important links and accompanying text associated with the photo: Submit your Photo and Hall of Fame.

While retaining the photo credit is important and was done, omitting those links will hide the fact that participation is open to everyone and that there are rules for submitting a photo. We don't necessarily need fewer submissions and definitely don't need the contest hidden along with the FAQ.

Here's the current upper right corner:

Here's the proposed upper right corner:

We need: An additional one or two lines under the photographer credit for those two links.

status-declined We will be supporting a per-site disclaimer (ala Judaism or Health) but we won't support a more general mod message at this time. If mods across the network think this is a thing we need to support we can consider a feature request. Based on the information I have, the way you're creating that message wasn't really how that functionality was designed to be used (most mods can't edit the HTML).

A line for the moderator-selected 'Site Message' ("Please participate in Meta and help us grow.") would also be appreciated. Deciding on this early and making it as cross compatible with the desires of other sites as possible will save the trouble of revisiting this point.

Answer 14

status-completed Those elements have been removed from both sites.

Super User + Server Fault

Is it just me, or are the proposed top-right patterns on those sites just way too chaotic? I'm referring to the unorganized pile of rectangles for Server Fault, and the squiggle-like set of unaligned braces and brackets on Super User.

And those are the parts of each page that I noticed right away. They just jump out. Not a good first impression, especially for new users...

A better "role model" to follow might be the subtle and smooth speech balloon pattern on the top right of Meta Stack Exchange.

Answer 15

Super User

status-completed Kindly do not change the logo color of Super User to all white. Preserve the dual colored logo which it currently has.

Ask Ubuntu

status-completed The footer color of the proposed design does not match with the theme. It would be great to have a footer color that matches with the Ask Ubuntu theme.

Answer 16

status-completed

Super User

I think brand colouring and identity is important. I have slightly tweaked the proposed Super User theme to use the on-brand colour from the colourised Super User logo:

The right-hand side logo mosaic doesn't really represent the Super User logo that I am familiar with. The logos are disjointed, and it looks like they've just been plastered wherever the designer felt was good enough. I opted to replace that with a desaturated closeup of the most familiar parts of the Super User logo. Additionally, I have returned the dual colours back to the left-hand side logo (even though it's really black and white).

Answer 17

The Internet has a surfeit of sites that exist for no reason other than to slap ads on copied Stack Exchange content, in the hope of making a quick buck. (For more on this, see A site (or scraper) is copying content from Stack Exchange. What should I do?.) A substantial number of these sites use very generic-looking designs, and often use the site's topic as a title. For example, you wouldn't see "Shady Content Farm - Software Engineering Q&A" at the top of such a site, but you might see "Coding questions" or just "Programming".

The proposed stock theme, while much better than those leeches' themes overall, appears to fall into the same pattern when it comes to titles. Even with the official SE header bar in place, I'm afraid that the majority of users might confuse our beta and other not-yet-custom-designed sites with untrustworthy content thieves because of the design's plainness in conjunction with its focus on a large, unstyled subject-matter-for-a-title. As a result, they might think SE sites aren't trustworthy, or worse, think that SE itself is some kind of rule-breaking content thief.

To be fair, this applies to the existing beta theme as well—in fact, I think there might be an existing MSE post about that; I couldn't find it after a few minutes of searching, though—but I see the current moment as an opportunity for improvement at minimal marginal cost.

Answer 18

status-planned

Quantum Computing

Currently, QuantumComputing.SE is a bit unique, in that it has a sponsor for the site. This means that it has a design that incorporates e.g. the logo of the site sponsor.

What's going to happen with that? Is the logo and other stuff going to stay?

Answer 19

Stock Theme

I agree with other posters that it looks too much like Meta Stack Exchange. A better color would be light blue (as we have now for Code Golf, Open Source Beta, etc.)

The thin white sans-serif font for "Community Name" also jumped out at me. I've never seen that on any SE site, and I hope it's changed before the theme is published.

Answer 20

status-completed

The new theme has a site identification bar that no longer holds the menu items that have been moved to the left side. In their place, new artwork has been invented.

• Ask Ubuntu, Ask Different, and Stock Theme: solid color, at least it's simple and neat.
• Mathematics and Photography: wallpaper of a regular pattern, easy on the eyes
• Unix & Linux and Mi Yodeya: faint recognizable object (diagram and Hebrew letters); a more regular diagram would be preferable on Unix & Linux, but at least the one shown doesn't immediately trigger projectile vomiting.
• Server Fault: regular artistic pattern with a little visual interest
• TeX and Super User: a chunk of jarring faint irregular noise

I have a hard time imagining worse artwork than used for TeX and Super User. Those two artworks trigger a visceral negative reaction. They are actually hard to look at. Luckily, I don't use TeX, so I don't have to see it. But that trash needs to be cleaned on Super User. Even going back to a solid color would be preferable.

I'll also add that the original two-color logo served as a site brand. Making it one color is unnecessary, and a degradation of the logo.

Answer 21

All Stacks

I normally browse new questions by tag on Stack Overflow and I don't like to see the same tag definitions over and over again taking 1/3 of the viewing area. I'm also not interested in BLOG, FEATURED ON META or HOT META POSTS, at least all the time, I'd like to click on tags (alphamagically sorted?) without having to scroll every time.

---

Improvements?

1. Templates should include options to close or hide certain page blocks.
2. Users should be able to personalize their habitat and feel conformable asking, answering and moderating questions.

Answer 22

Two nearly-coincident rgb values chosen at one point resulted in Why is the changing-link-color scheme so subtle for beta sites?. It's difficult from the mock-up images to tell if this has been tweaked. Any chance the contrast will be adjusted?

The reason this is important is that sometimes sequential words or phrases have separate links. With the changing highlighting this is easily visible upon mouseover. Otherwise there's only the tiny url reveal at the bottom of the browser.

From that question (both are GIFs):

versus

Answer 23

I think it's good for people to be skeptical when changes are made. So, I'd like to point out that the Question described one stage of the proposed schedlue like this:

• Early July: Collect and respond to feedback from this post

However, this very post didn't exist until 'early July' had already past. It was posted on July 9th.

Will 'late July' in the next stage of the process be July 16th?

Or will there be a meaningful consultation/feedback process which allows for enough time for feedback to be both given, digested and acted upon?

Answer 24

status-completed

Ask Ubuntu theme

I worry that there's not enough contrast in Ask Ubuntu's new footer. Looking at the Unix & Linux footer, the foreground is #898989 and background #fff, so a contrast ratio of 3.50:1, whereas Ask Ubuntu's #fff on #aea79f only gives a ratio of 2.38:1. Could a darker background colour be chosen?

Answer 25

status-review

Mi Yodeya

I like the changes overall, including the Hebrew text on the top right.

I notice that, in the previous design, the tree's branches and roots are centered. Now that the site name is on the top left, for consistency with all other SE sites, it may not make sense to have the roots visible at all, especially if they're on the bottom right where they don't match the rest of the pattern.

Answer 26

GD.SE would like to have an image of the week similar to Photography. Those dimensions are fine to minimize coding.

Answer 27

Will it have have similar issues to the one introduced by the "Live: Left nav, new theming and responsiveness" - there some complaints were (to summarise):

• Search field was weird size
• Focus of left navbar/taking up too much (white)space (especially on small screens!)
• Doesn't scroll with page (Looks fixed?)
• It moves the right nav to the bottom (if it makes it redundant...)
• Could toggle left nav it with a button for better small screen compatibility (that demo from here?)
• etc...

IMHO, this could work - just please test and make sure it works soon as in scenario's with small screens!