Design update is now live

Question

I'm addressing concerns here: Fixing the new design

---

EDIT: I realize many of you have concerns about the change in logo and color scheme; I had good reason to adjust both of these, but did my best to incorporate your feedback. If you're willing, I'm happy to meet next week and chat about this - maybe you can help me come to a better understanding of where this falls short.

---

You may have noticed some updates to the design lately, they are part of a SE network-wide update to a new base css framework.

The updates allow us to:

• Have sharper / more beautiful design on retina displays
• Fix layout bugs
• More easily add new features to all of our sites in the future

But more importantly, it gives you access to the new profile!

If you see any bugs please let us know in the form of answers (to this post) that illustrate one particular thing at a time.

Thanks!

Answer 1

I am extremely disappointed that:

• that feedback was largely ignored
• that request to open new and properly visible thread for design discussion was ignored
• that it wasn't made clear that decision is made and no further discussion will happen (everything I thought through for it went down the drain)
• that this is exact repeat of situation with first design, with feedback being asked for and ignored

Stack Exchange puts “It's built and run by you” up high, but apparently design considerations are above that.

Answer 2

Design and branding for the WordPress niche

This discussion keeps dodging having the one clear thread for specific discussion of WPSE design.

While the current Q only asks for "bug reports" and this isn't one... I don't have a better place, so here it goes. This is something I wanted to be read before new design was launched. Or even better — before it was started on. But better late than never.

While I am not designer by trade, I had been on same precise task of making site for WordPress niche. I had also been involved with development of newer part of WordPress.org site and heavy design challenges of that.

The kinds of “WordPress” design

There are many facets to what can be considered and/or taken as an inspiration for WordPress–like design. Just after brief pondering I could name this many.

dot org

wordpress.org http://s.wordpress.com/mshots/v1/http://wordpress.org?w=600

WordPress.org site has been the web presence of WordPress project for a long time. It design stayed mostly same for a number of years, but had aged well and stayed mostly intact.

The biggest challenge with it is that its initial purpose grossly limits veering of into a new directions. It was envisioned as content site first and has enormous challenges moving in more specialized directions, such as new code reference.

dot com

wordpress.com http://s.wordpress.com/mshots/v1/http://wordpress.com?w=600

WordPress.com site is like an evil ;) twin the web face of WordPress.com blogging network. Since the official split dot com had always been different enough to claim separation, yet similar enough to benefit from shared branding and fame.

I hadn't been following it closely, but I think in recent few years its characteristic design features had been blue color theme and the custom spin on WordPress admin side.

admin

Of course there is the WordPress software core's admin interface itself. It tends to move at a faster design pace, but I would say the each look is relevant for 2-3 years maybe.

Then of course it is admin design and re-purposing it for front end site isn't commonly (if at all) done.

core themes

Since 2010 each year there is a new native theme shipping with WordPress core. The approach had been introduced to diversify a bit and for themes to be able to go in a more diverging directions, than just blogging.

Some are better accepted than others. With qualified tweaking they can make recognizable, but deeply individual sites.

Though the relatively short annual cycle prevents from any one of them getting associated with staple WordPress look.

theme trends

And of course there is a vibrant and giant ecosystem of third party WordPress themes.

In my personal opinion despite the wide field and amount of niches, in general the WordPress software architecture itself and official repository requirements had contributed to what I call "WordPress look" that follows overly common of columns-sidebar(s) formula.

It is quite common from WordPress sites to dog food. Some of the most high profile meta-projects use off-the-shelf themes (again - usually with qualified tweaking).

The challenges of “WordPress” branding

In the branding space the diverse facets are much less of an issue. The WP niche had long suffered from a streak of Word*, *Press, and WordPress-something projects.

If you take a look at word cloud of plugin names from official repository, even there the complete redundancy of WP/WordPress is dominant.

In the space where connection with mainline WordPress project and its values is extremely important it can be a challenge to find a strong self-sufficient identity.

Some had never tried, some gave up, and some are coming to that after a years long spans of time.

How and why new design got it horribly wrong

In a nutshell my impression of the new design is that it is a WordPress com ripoff with a bad logo.

the colors

When doing such a meta design there is strong lure in using the native WP colors. I think this technique must be used carefully and that colors are not design. Myself I prefer to use them as accent colors and trivia of source — there for those who recognize the nod.

The new header's precisely follows the color of WordPress com, not even org. It is also minimal to a point of bland, especially in perspective of my experience with other sites of SE network.

the logo

new logo http://cdn.sstatic.net/wordpress/img/[email protected]?v=e6d1dc9106b5

This might be subjective, but from this logo I get a strong feel of those horror stories about sites that do extremely cheap and abundant logo designs.

Why is it in a circle? Why is it in this font? Why is is merely “WP” and how does this represent us at all?

The history of WPSE identity

The story of our branding and identity is somewhat a rocky one.

Beta and out

Our stack had been boilerplated as WordPress Answers in beta and this kept on into release. There has been concerns about similarities with other sites in WordPress space and generic nature of it, not serving our scope well.

Anyway the name stuck for a long time and led the site being more commonly known and referred to as WPSE after common "[name] S[tack]E[xchange]" formula. Note the solid WPSE spelling, not WP SE and not WP.SE

The name that wasn't

At the time there were network plans to give site unique names and domains. Alas the program fizzled before it got to us and our preferred name of Query Posts went on to have a very different life.

The first design

Our first custom design was done and launched, suffering much the same issues with ignoring the feedback and questionable fit.

It was done in aesthetics of printing press and retro typography. In other words none meaningful connection to WordPress niche, other than word play, and history of grievances with readability.

Rename to Development

After years of complaining, lobbying, and roller coaster of exchanges with administration we had finally managed to get renamed into WordPress Development. This has much clarified our branding and helped our scope.

Though in day-to-day the WPSE designation pretty much renamed, WordPress Development hadn't gone on to spawn a new abbreviation.

The direction I'd like to see

While primarily I am expert and active contributor at WPSE, I am also big believer in SE formula and reader of other stacks. When I have a question in an unfamiliar niche the first thing I would check if there is a stack for it.

Over the years I had been somewhat... bitter and feeling like we got the short end of the design stick, comparing to the other stacks. There are quite a few of them that I consider beautifully designed. Not just fancy looking, but functioning and upholding the spirit and aesthetics of the whole network.

I don't know how the process works internally. I have a hunch that WordPress is hardly and exciting topic to design for. More so for people who are not actually involved with it.

We aren't the one of network's darlings either, with our visibility contained to our own niche, rather than generically shining for the whole internet.

Yet... I feel pigeonholing us in a shallow mediocre design is unfair to our site's community.

We aren't just visiting here. We are dedicated and hard working part of Stack Exchange network, proud to be in it. Our identity is much stronger influenced by SE principles and goals, than those of WordPress project.

That's the kind design I would like to see for use — design of a Stack Exchange site, shining brightly among equals.

Answer 3

As far as I can see the only feedback that's been taken into account is the lowercase p in Wordpress becoming WordPress. Instead we have a design modelled after WordPress.com

But not to worry, I have solutions!

The Logo

First, lets get rid of that unnecessary circular logo:

The favicon can now be the capital W seen in the header above, similar to the previous design. The circular logo is simply unnecessary, and clutters the header unnecessarily. Removing it makes things cleaner and simpler

Regarding the Official WP Logo, I received confirmation that using the official WordPress logo would indeed be a trademark issue. It is official, we cannot use it. We should just use the slab font W and not have a circular logo at all

The Colours

Next, lets fix the blue, it's a WordPress.com blue, but there's already a design spec and a WordPress blue ( #0073AA ), defined over at https://make.wordpress.org/design/handbook/foundations/colors/

Lets also get rid of the WordPress.com light blue background, it has no place here! There's an ample supply of grays at hand, lets go with the pale gray used on wordpress.org and the WordPress admin ( #f7f7f7 ):

Finally, the blue is intended as an accent colour, it was never intended as the primary main colour ( unless you're at Automattic and you're WordPress.com ), lets use #32373C the base gray colour from the design handbook, and use medium blue to highlight questions in the right colour ( #00A0D2 ) giving us this:

Did you notice the bug? It seems that we have an alignment issue! Lets nudge that logo over so that it lines up with the content on the left and the stack exchange logo at the top ( it's an issue in the current design too, not just my mock ups ). The main content has a padding of 15px, so we'll shift it over by that amount:

Notice that the up/down vote arrows are also misaligned in the new design?

Keeping the blue for the hyperlinks and changing some light blue shaded areas to match the standard colours should also help.

Typography

Believe it or not, there's also standard typography:

The WordPress brand uses two Emigre typefaces for it’s identity – Mrs. Eaves Small Caps and Dalliance – and Open Sans for everything else.

https://make.wordpress.org/design/handbook/foundations/typography/

I would recommend we use the current slab font for the logo and use Open Sans for the rest of the sites copy. Making use or Mrs Eaves Small caps may work for the header logo, but it may be too similar to the WordPress wordmark, so I advise against that particular font.

I would also recommend changing development to Development.

All in all this makes for a more compelling design with minimal changes, that better fits the community and the project, doesn't mimic WordPress.com, has a clear logo without any cruft, and is closer to the standard design handbook

404 Pages

If the blue is from WordPress.com and irrelevant to our community, the jack in the box on the 404 is even more so, so instead, lets put a Wapuu on there!

Lets combine it with the improvements I suggested to get:

Conclusion

If all of these are done, we can almost guarantee that we'll get a lot of attention for the new design from the community. The Wapuu 404 will get people writing about us, we may even get a contribution of a Stack Exchange Wapuu. This redesign has brought us a lot of nice things such as the new profile design, but as it currently stands a small number of changes can make a huge improvement

Resources

• WordPress.org Project Design Handbook - Typography
• WordPress.org Project Design Handbook - Colors
• A codepen showing all the colours available for use
• Wapuu Archive of Illustrator and vectors of most Wapuus made in friendly licenses

Logo Update

For those cases where a logo is necessary, I would have suggested the following:

• A stack exchange Wapuu
• The wordmark in the header
• The old logo

The older logo would do just fine in most cases, the red version being the meta site:

Some would say the lighter gray marks around the W should be removed.

Background and Community

An option I was asked to mock up was faint tiling Wapuus in the background, here's the meta site with a black and white wapuu at 0.07 opacity:

I would go even fainter, the Wapuu in question is being used on http://eliotakira.com/ in the header, a version with slightly more padding and greater more subtle opacity would work well, perhaps 0.02 or 0.03?

Answer 4

Let me start off by saying that a design refresh was necessary as well as that the new profile looks nice at the first glance.

On the other side I see multiple issues that have already been addressed in the other post: UPDATE: A design update is coming! quite some time before.

The two major ones being:

• One of the big issues here at WPSE is to explain people that this is about https://wordpress.org/ and not https://wordpress.com/ which will be become even worse now that this design looks more like .com than .org.
• The design also looks way to similar to https://drupal.stackexchange.com/

Concerning the logo I'd like to just once more refer to what Tom said: https://wordpress.meta.stackexchange.com/a/4079/47733

To wrap things up I do not want to decry your work to refresh this communities design which was/is in fact needed. I just believe that it lacks in some pretty substantial ways and needs some more work.

Answer 5

As said on the announcement thread: »on the color topic, blue really isn't related to WordPress' color scheme, if anything it should be some anthracite with grey tones and white«. Unfortunately now the site is blue, which is really just utterly wrong. I'm sorry to say it again, but that isn't WordPress' color scheme - at all.

On the other hand the design for the WordPress Development Meta site is much nearer to something that would be fitting. That could be an orientation - or just swap the designs! Because this one is that much better.

Thanks though for the work you have put into it.