Design for the official WordPress.SE site

Question

Hi all. I'm Jin, and I'll be working on the designs for the Stack Exchange sites as they graduate from the beta phase. Each site will have its own unique theme that will reflect its topic. However, all sites will share quite a bit of common elements so they feel like they're part of the Stack Exchange family.

I gave the design a lot of thought. There are probably many, many ways to style the final site to make it visually pleasing. To come up with an appropriate design, I reflected on what WordPress and this community are about.

Since its official release in 2003, WordPress has had a tremendous impact on how people publish content online. It has made publishing a lot easier and faster, not just for the tech savvy designers and developers, but the general public, too.

WordPress reminds me of the invention of the rotary print press.

In the 19th century, the replacement of the hand-operated Gutenberg-style press by steam-powered rotary presses allowed printing on an industrial scale,[11] while Western-style printing was adopted all over the world, becoming practically the sole medium for modern bulk printing.

WordPress was not the first blogging platform, but it was the one that revolutionized the industry, and set a competitive standard for other CMSes out there.

So for the design, I think it's appropriate to go with a timeless and classy look. I think such a design pays homage to the traditional publishing and conveys the authority in the quality of the answers this site provides.

_{(click on image to see full resolution version)}

updated: Question view page

Unfortunately, we can't use the officially logo due to copyrights consideration. But I did include some design elements from the official WordPress site. From their design guide page:

I've used the same colors for accents, and Mr. Eaves as the typeface in the header logo. The question listing titles are set in Georgia, and the body text are in Lucida Grande. The same typographical styles are used on the official WordPress site.

I believe this design works very well for the goal I was going after. I'd love to hear your feedback.

P.S. An early congrats on your official launch and thank you for providing helpful answers. They have helped so many people out there, myself included.

Answer 1

Jin,

I think the site design looks simple, clean, and very professional. You've done a fantastic job of balancing the color scheme and fonts. Then again, you're very good at your job, and I would expect nothing less :-)

Considering WordPress is branded as a "Semantic Publishing Platform" in at least the readme, I think the direct analogy to classical print publishing is fantastic. Keep in mind everyone that "publishing" extends to more than just blogs; this doesn't limit us in any way.

Considering also that the site is about a product that uses both <> and {} all over the place (since it's written in PHP), I think the use of those characters is great. It's a subtle reference to the underlying language framework and adds a great technological juxtaposition to the old-school printing press idea. As does the use of guillemets - which are used quite often in WordPress, correctly or not.

Now I want to break the cardinal rule of this StackExchange and ask a question inside my answer. To those of you who are already beginning to bikeshed, please answer the following:

• Are your problems with the design based on personal preferences, actual design concerns, or real experience with the opinions of WordPress' end users?
• Would keeping any design elements you don't particularly like in the final design cause problems with the site's users?
• If things aren't exactly as you want them, will you be able to move forward and keep using the site anyway?

The hardest part about designing a product is remembering that whether or not you like it doesn't actually matter. What matters is whether or not the product (and its design) will meet your intended goals, work with the user's expectations, and solve a tangible problem.

Answer 2

Disclaimer - I suck at design, I am way too nitpicking. Take following as personal ramblings that might or might not have any weight to them at your preference.

I am not big on newspaper aesthetics, but don't particularly mind it either. I expected something more modern, maybe with that grey from palette for more contrast. Anyway with time I spend here I will be blind to new design in half a day, so just initial impression.

One major issue in that mockup for me is large site's name in header.

• First, I am no fan of "WordPress Answers" title. I think it is clumsy, as was briefly discussed in Are we “WordPress Answers” or “The WordPress Stack Exchange”?. It is great loss that we can't go with queryposts.com domain and name and personally I only refer to this site as "WordPress Stack Exchange" or WPSE, because that makes more sense for me.

• Second, I am not entirely sure it flies with trademark stuff (emphasis mine):

All other WordPress-related businesses or projects can use the WordPress name and logo to refer to and explain their services, but they cannot use them as part of a product, project, service, domain, or company name and they cannot use them in any way that suggests an affiliation with or endorsement by the WordPress Foundation or the WordPress open source project. For example, a consulting company can describe its business as “123 Web Services, offering WordPress consulting for small businesses,” but cannot call its business “The WordPress Consulting Company.” Similarly, a business related to WordPress themes can describe itself as “XYZ Themes, the world’s best WordPress themes,” but cannot call itself “The WordPress Theme Portal.”

So I'd very much like if we had another shot of evaluating site's name (even if domain stays same) for release.

• Third, that font doesn't quite work in plain non-bold logo-less version. Both WordPress.org and WordPress.com headers have logo next to it, as well as play with colors and gradients to make it work. Just typed out it is boring and "Answers" in same style dilutes it further (did I mention "Answers" part also sucks? :)

I think that W in "Welcome New User" in orange and with ornament looks waaaay more interesting and pleasant, that same W grey and blunt in "WordPress Answers".

Minor issues so far:

• "ask question" needs to be emphasized;
• tags are inconsistently enclosed in < > near questions, but in { } in sidebar;
• as an idea - some sites have more customized badges than the others, maybe colored W instead of abstract circle? It will add bit of meaning to it, for example instead of "colored blob Supporter" badge will read "W Supporter".

Answer 3

I think the connection to publishing is overdone, especially with the printing press watermarked in the header. As Jan mentioned, WordPress is currently moving (whether intentionally or not) away from being seen as just a blogging platform. I think the people active on this site, especially the "experts" - those who bring a great deal of knowledge to the site - are part of that movement (i.e. developers using WordPress to build all sorts of sites, as opposed to individual bloggers).

I too would like to see some more modern influences, and the removal of the overly publishing/blogging related elements.

Answer 4

I really like the colors and the use of space. Can't wait to see it live! :)

Some suggestions:

1. The left and the right borders of the main navigation (Questions … Ask Question) seem to be unnecessary.
2. The drop shadows just don’t fit in. Especially the search buttons look like aliens from another site.
3. Please do not use Lucida Grande or Tahoma for the final site. Both do not have a native cursive style, so font-style:italic will look really, really bad. I have set up a test case for a reduced demonstration.
4. At the end of the »Welcome New User« box are two links, »About« and »faq« followed by an quotation mark (guillemet). I guess, these are meant to be arrows. May I ask for real arrows?

Answer 5

I have some mixed feelings. Yes, you have the idea of authority with the "old fashioned" and "classic" layout, but isn't it also too much "WordPress the blogging platform", while we also try to focus on the more advanced CMS possibilities? We already touched on that while discussing the tagline. We (or at least I) really like advanced solutions to advanced problems, and I somehow don't feel that idea of being "cutting edge" in this design.

Personally I really like the design of WPEngineer, but this is probably too close to the current sketchy theme to be taken as a starting point?

Answer 6

I do not care for enclosing the tag names in greater-than and less-than symbols/brackets. I think that's too similar to html tags, and I don't think that 'works' on this site.

Answer 7

I'm not sold on the logo. There is no need for it to be so big.

It moves more content below the fold, without reason. Moving the perfectly functional navigation elements to a different location below the massive logo area is both disorienting and adds zero benefit other than "white space", which isn't essential for that particular purpose. White space is good, functionality + white space is better.

Also, the mixed small caps + large caps creates a visual "weight" issue, given that the W-P and A appear much heavier, thicker, than the small caps. True small caps are supposed to match the weight of the full caps.

I'd suggest all small caps, which removes any weight issues, and prevents me from staring at MullenWeg's Folly every time I look at the camel-cased WordPress. Then move the nav back up to the top where it's more useful.

Answer 8

I'm sure jin worked hard on this design, but I'm afraid I'm one of those who preferred the original design. I'm an old-school engineer, and any aspect of design that detracts from readability and usability is, IMNSHO, a loss.

Rather than just saying, "let's go back," let me get specific:

1. I find the text in the new design fundamentally harder to read. After admiring the design for about the first .5 seconds, readability is everything to me. This site (and all of the related Q&A sites) are all about text, text, and more text. If the site is hard on the eyes ... I'm gone.
2. The highlighted areas (number of answers, etc.) don't draw the eye. They look pale and washed out to me. I find myself working harder to find things on the page when it should have been a simple scan of the eye.
3. I don't like big headers. They are a waste of real estate -- above-the-fold or otherwise.
4. The angle brackets around the tags just don't work for me. I'm not too wild about the { }, either. These aren't HTML tags, they are concept tags in a Q&A site. I shouldn't have to think for an instant about what I'm looking at.
5. The one thing I find easier to use in the new design is the "Post Your Answer" button. It stands out much more clearly than in the SO design, where it almost looks like a decorative box of some sort. Here, by God, it's a button. In fact, it's about the strongest visual element in the whole design.

Speaking for myself, I will take clunky-but-usable over elegant-but-tiring-to-use every time.

Assuming that the current look has been anointed as the design, is there any chance of getting an alternate design? I don't know the implementation specifics, but I'm assuming it would be a simple matter of having a preference and a different stylesheet. Hell, I'm even willing to take a copy of the original stylesheet and set up FF (maybe using GreaseMonkey) to substitue it on WPSE. Yes, I feel that strongly about it.

Update: Seek and ye shall find. I've just discovered the Stylish plugin for FF. Basically, it does for styles what GM does for scripts. In other words, it appears to do exactly what I want. If I could get a copy of the old stylesheet CSS I'll be fine and just go away.

Answer 9

Although the rotary printing press represents a 200 year old technology, I think it's the best visual association one could make.

However, the little image with books in the lower left corner (where it says "Looking for more?..." etc.) is superfluous. Just leave it without an image, like on SO.

Oh, and make the logo bigger! </joke>

Answer 10

Thanks for putting this together Jin, I really like that.

As far as for an industrial-type, centralized, straight logo, I came up with this in a quick draw:

It's far away from being perfect, I don't have the typeface here and needed to cut that out from your png.

Looks like stemming something up.

Update: The visual line in the header typography was a bit disquietingly, probably obviously that it was me who tried to do this (but read carefully it's still with capital P):

How do the flashers on top look like (new badge etc.)? You already have something for those? Just curious.

Answer 11

My 2c - for what it's worth (I contributed to some early badges for WordPress waaay back in 2003/4).

The rotary printing press approach is relevant to those who don't know the history of WordPress - but I'm always reminded of the "other" blogging CMS - MoveableType as the original "printing press".

Regardless, when you use a serif font, you think printing, press, etc, and I really like the palette and accents you've incorporated.

Answer 12

@font: A serif type face is imho for reading large amounts of text and i don't think that it would fit the 1/4 explanation 3/4 code that most threads got. Switching from courier to times is too close in my eye, so i'd favor arial/helvetica + courier and design that steps back.

I personally would prefer something clean & simple (nice reference: http://www.minimalsites.com/), because it's focused on the content and questions and answers.

Just a question: Why not leave the current design? It's nice even if it doesn't fit the context 100%.

Answer 13

Just to add to the discussion, I agree with lots of things which have been said, so I'm just listing them to be clear:

• I think the "publishing theme"(not just blogging) suits the site
• One major issue in that mockup for me is large site's name in header - I think it's lacking some "personality" to differentiate it from other SE sites.
• I think that W in "Welcome New User" in orange and with ornament looks waaaay more interesting and pleasant, that same W grey and blunt in "WordPress Answers"
• "ask question" needs to be emphasized;
• The drop shadow of the main content area is for the faux paper effect « This looks awesome.
• I do not care for enclosing the tag names in greater-than and less-than symbols/brackets. I think that's too similar to html tags, and I don't think that 'works' on this site - As I commented: I don't see enough highlighting of the tags. I think they go unnoticed, and in most other SE sites, they have a special design. Can't they have a background image of some kind to make them more visible?

To answer EAMann:

• Are your problems with the design based on personal preferences, actual design concerns, or real experience with the opinions of WordPress' end users?

Just my opinion. It's how I perceive the design.

• Would keeping any design elements you don't particularly like in the final design cause problems with the site's users?

Maybe, I don't know.

• If things aren't exactly as you want them, will you be able to move forward and keep using the site anyway?

Well, if I only used things that are exactly as I want them, that would limit all my web traffic to my personal blog and website... Of course I would still use the site, the SE pattern has already been established, and other than some design differences, it would be ridiculous to think if the design isn't exactly as I want it, I wouldn't use the site.

In general, I perceive there are not enough elements to "recognize" the WordPress Answers site immediately. It looks too "generic" to me, too similar to the default Stack Exchange design. When I read about the rotary print press and saw the image, I expected much more, with more personality. I liked how it looks like all "press" like though.

The Gaming and Cooking sites for example, are two that have a design with much more personality. So, I think by looking at the image, I can't relate the site to WordPress instantly, and I can't completely differentiate it from other SE sites that much.

In general it's a great design, so don't get me wrong, but I feel like it could have more personality yet.