Design in WordPress 3.2

The focus for this release was making WordPress faster and lighter. The first thing you’ll notice when you log in to 3.2 is a refreshed dashboard design that tightens the typography, design, and code behind the admin. (Rhapsody in Grey?)

— Matt Mullenweg, WordPress 3.2 now available

Back during the development of WordPress 2.8, the core team decided to solicit some ideas for dashboard refreshes. Two designs inspired by Dean J. Robinson’s Fluency Admin plugin, submitted by Dean and myself, led the informal poll the core team conducted. Ultimately the team decided to save the update for a later version of WordPress and that version came today, when WordPress 3.2 was released with the new dashboard design. A thread on the Make UI blog follows its progress as it came together. We removed unnecessary chrome, refined typography, lightened the page, and generally listened to Alan Cooper‘s advice on interface design:

“No matter how beautiful, no matter how cool your interface, it would be better if there were less of it.”

An aside on typography: I’ve seen a few people question why we chose Arial over Helvetica for most text in the dashboard. I actually believe Arial is a better option when you’re working with text that will be displayed at 13px or below. I know that’s heresy for a graphic designer, but consider this. Helvetica, when it’s installed on Windows PCs, does not work well as a web font. Helvetica Neue is available primarily on Macs and at sufficient weights it looks great, which is why we do use it in some places. But at the default font size in the WordPress dashboard, I think Arial’s readability trumps the dogmatic purity of using Helvetica. I know this is purely subjective and this reasoning won’t change the minds of those who believe Arial is on the same level as Comic Sans — but if the sight of Arial truly offends you, I suggest disabling it OS-wide. You’ll get Helvetica in its place, and everyone will be happy. :) (Update: In the forthcoming 3.2.1 update, WordPress will use the browser-default sans-serif instead, so Mac users will see Helvetica, Windows users will see Arial, and if someone actually specifies what they want their browser default to be, we’ll use that.)

I’m proud of the updated typography and cleaner look of the new dashboard, but my favorite aspect of WordPress 3.2 was a great surprise when I first saw it. It’s also Matt Mullenweg’s favorite new feature — the new distraction-free writing mode. Combined with the Editor Styles feature popularized in last year’s Twenty Ten theme, composing in WordPress is akin to using a minimalist web-based text editor.

Composing this post in Distraction-Free Writing mode

Speaking of Twenty Ten, it’s got a beautiful successor in Twenty Eleven, the new default theme for WordPress. Following up on the improvements we made with last year’s iteration, Twenty Eleven adds a responsive design, post formats, customizable color schemes and layout configurations and more. Read Ian’s introduction to Twenty Eleven for the full rundown. This blog is using Twenty Eleven now with the one-column layout and a custom background.

There’s a ton of other features in 3.2, including faster performance, Browse Happy integration, a more useful admin bar, and hundreds of behind-the-scenes improvements. Read the exhaustive official list to see everything that’s new — then go update your blog, or start a new one!

34 thoughts on “Design in WordPress 3.2

  1. The new admin interface looks great and I love the speed improvements! The only thing that I couldn’t get used to was the shadow on the left-hand menu. I don’t like the look of it and it seems a bit contradictory to add a shadow when the one of the design goals was to clean up the interfacace.

    So I created a plugin which removes the shadow :)

    Like

  2. I HATE the new look. Its white and very blinding. I can’t tell anything away from anything else because everything is white or a SUPER LIGHT grey. Its blinding. The sidebar is SO SQUISHY, its like it was just stuffed onto the side because you couldn’t make any other space for it. The design may be faster, but why care if its faster if I can’t even see what’s going on because everything just blends in together. It was bad before, but now its just AWFUL.

    I would like to personally thank you for creating this monstrosity. Its awful. Maybe you were wearing sunglasses when you made this thing. It doesn’t even deserve the title of “design” or “theme”. Its awful and I hate it. I would like to personally thank you for DESTROYING the wordpress dashboard. Get a new job.

    Like

  3. The refreshed UI is awesome, nice work! It took me a week or so to get used to it, but now I love it. Comparing it with the last version is always enlightening. (Which happened to me with the last few refreshes dashboard refreshes, too.)

    As for the Arial vs. Helvetica choice, I wish we could create a font stack that’d put Arial first for Windows and leave Helvetica first for Mac. But, I agree with your points on the trade-offs, and I’m sure one of these days I’ll stop grumbling about it. :)

    Like

  4. Jennifer has a point here: The new no-contrast-ui is not userfriendly anymore. Take a look at the plugin list. The important difference between active and inactive plugins is de facto gone. Why?

    The left hand menu is too condensed now (especially in my blogs with a German interface). There were a lot of tickets because the translations didn’t fit. Now they do … very tight and if you don’t use a minimum font size greater than 13px.

    Whitespace is a design element too. I miss it in the new layout.

    What I like: The absence of the old big rounded corners and gradients. Thanks. :)

    Like

  5. While tracking the progress of 3.2 in trunk, I’d wondered who’d been putting the brain-cycles into the dashboard improvements. Glad to know now.

    Thank you for the great work!

    Like

  6. I was just discussing your new Design for the WP admin UI with toscho, and how “great” it is to favor Arial *over* Helvetica… If it would be the case.

    Here you got two screenshots [1] [2] that show the opposite: – “HelveticaNeue Light”, “Helvetica Neue Light”, Helvetica, Arial, sans-serif – is the current order … and it looks pretty – aweful.

    In other places you choose “Times New Roman” over “Bitstream” – to be honest: Which (0.005% of all OS used in the whole world) system has *not* “Times New Roman”, but “Bitstream”?

    About the Dashboard: Why do the widget styles still have IDs for css selection? Plain simple specifity or extra classes would have also done it, plus: Makes it more reuseable in other parts of the UI (for Plugins/Themes).

    One thing I *really* like: The new footer and header. That was an absolutely genious move in the direction of simplicity. It saves a lot of space and doesn’t distract from the content anymore. Thanks for this part.

    Wish you best and keep improving further!
    K.

    [1] http://i.imgur.com/w81f2.png
    [2] http://i.stack.imgur.com/Gxn0R.png

    Like

  7. Matt, superb work on the new design, I’ve been using the betas and release candidates for some time, and the old dashboard just looks wrong now when I return to a site with 3.1 installed.

    Jennifer, I would like to personally thank YOU for showing a complete lack of appreciation and respect for all of the effort that has gone into this. No-one ever said the DESIGN was faster either, you’re completely mixing up your terminology there. If you hated the WordPress admin before, and you hate it even more now, why are you even still using it?

    Like

  8. Hey MT – great work on the refresh. I feel like it’s an improvement, and that you did good work. Despite my chiming in on Trac and being the author of a snarky plugin, Arial vs Helvetica at the size we’re looking at in the admin is mostly inconsequential. That being said, a dead-simple way to resolve this is to simply use the sans-serif keyword for the font-family – you get Helvetica Neue on Mac, Arial on Windows, and whatever grotesk/Helvetica knock-off any Linux distro happens to ship with.

    Like

  9. Truly claustrophobic menu. And there isn’t ‘less of it’ just because you might have used fewer elements: it’s unnecessarily busy, in large part because of the mixing of Georgia, Arial and Helvetica Neue Light; also because of the slightly bigger size of the small text used for non-essential information (Arial vs Lucida). Prettier? In some places. Cleaner? No.

    Some improvements, but altogether a step back in my view – especially the typography. I understand it’s the first version, but I feel it needs a lot more work.

    Like

  10. I like the new style of WordPress 3.2. I really like how they have condensed things and made the font smaller, so I can see more on each screen. The contrast between plugins that are on and off is extremely difficult to determine.

    I haven’t tried the new full screen view yet. It should be perfect for someone like me who gets distracted easily.

    Like

  11. Thanks to all for your thoughtful advice. Particularly to those who suggested switching to the browser default sans-serif, which I’ve tried in this patch. I think it’s a reasonable solution, but will leave it up to the core team as to whether it’s worth committing.

    To all of those with broader criticism: you’re most welcome to share it here with me, but turning your criticism into action at http://make.wordpress.org/ui/ would be the best way possible to create the change you’d like to see. I’m not a decision-maker on WordPress, just a contributor. I encourage you to become one, too. :)

    Like

  12. Matt, you beat me to the punch re: contributing and participating with the process; the dashboard redesign was never a closed process to those willing to participate. I have my issues, but really, I don’t have much of a right to complain when I knew exactly how to participate and contribute. That and I really don’t have anything to complain about. I kinda like it.

    Like

  13. 99% of the design I’m sure I’ll get used to and is probably better.

    1% is barbed wire in the eyeballs: the use of, I guess, Consolas in the Edit Post box, which has left me inconsolablas. If you want to go to a monospaced font, there are certainly blandly more generic ones that could be used. Instead you used an aggressively, datedly computer-y font, to me one that looks out of an 80s movie (The Pentagon Washington D.C. 0730 Hours).

    Yeah, you’re coding in that box. But I think you overestimate the proportion of people doing serious coding there as opposed to bloggers doing a little coding to get by amid their text. First and foremost, it has to be about WRITING, not coding. And this in-your-face, ugly technofont is about as far as you can get from a writerly feel.

    Like

    1. I appreciate your opinion, but not everyone agrees Consolas is “in your face.” I believe there’s a reason that other focused-writing apps like iA Writer and WriteRoom use monospace, non-Courier typefaces. Consolas was engineered for readability, and I believe it works well in this single, limited application. But typography will always be a trade-off between objective usability and subjective taste. Those who disagree with my conclusions are most welcome to submit a patch, and let the community and core contributors decide, just like I did.

      Like

  14. Have you ever read a book published in Consolas?

    Monospace and non-Courier is fine. Consolas looks like a blinking green computer monitor in a straight-to-video thriller starring Scott Glenn.

    Like

  15. Okay, great, I’ll shut down my blog, I’ll go study code for a year, I’ll create the patch, and then I’ll start blogging all over again once I’ve uprooted my life and fixed the one thing that bugs me. I understand Hemingway did the same thing when they were going to set For Whom the Bell Tolls in Caslon instead of Century; he gave up covering the Spanish Civil War and spent the rest of the decade carving the type himself.

    Look, I’m very appreciative that people create this fine thing, I praise Word Press all the time, but a comment like that makes me think that the people creating it have come to think that it’s strictly for hackers and code monkeys and DIY-ers. When it’s supposed to facilitate writing, from writers, who are people who may barely have enough sense to put bracketed I’s around something they want to italicize. For every person who sees that box as a place to code, I’d bet you there are 10 who see it as a place to write. And depriving them of something that has the look and feel of print, in favor of something that has the look and feel of junior high Fortran class in 1978, is failing the main utility test for that function by misunderstanding who the audience really is.

    But here’s my simple solution that fits both potential users: give people a way to toggle between monospace and standard fonts. The people who want to code can look at Confoundas all day long; the people who want to write, can write in something that looks like writing.

    Like

  16. I agree, and that’s why I chose what I believe to be a good typeface for both writing and coding. That you disagree with me doesn’t bother me. I’m just trying to suggest that if you really feel strongly about it, the best possible solution is to do something about it. Instead of just telling me you don’t like it, make a concrete suggestion that people can act on. That’s how things get done.

    I also agree that giving people a way to toggle between monospace and standard fonts is best — and that’s exactly how I think most people will use the Visual and HTML Editor tabs. In fact I’d go so far as to say that is exactly the point of having the two different editors.

    And now I think I’ve said everything I have to say on the matter of monospace typography. :)

    Like

  17. Best comment ever: “No matter how beautiful, no matter how cool your interface, it would be better if there were less of it.” LOL, That’s funny but I don’t think it’s true for wordpress. Most if the interface I find myself using on a regular basis.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s