The new WordPress.com

I haven’t been blogging here much lately, but I have been spending a lot of time on WordPress.com. Auto­­mattic has spent the past 20 months building an entirely new user inter­face for WordPress.com, one where you can manage all of your sites in one place, whether they’re hosted here or else­where. Our Dev­eloper Blog has lots more details, and the official launch site pre­sents the story of Ca­lypso in beau­­tiful form. Our CEO wrote elo­quently about Calypso and what it means to our company.

I’m very proud of, and was sur­­prised by, the in­­­cred­­ible tech­­­nical sea-change that’s hap­pened inside of Auto­­mattic, and the new ways of de­­­signing and de­v­el­oping that were re­quired to make it work. It’s one of the big­­gest changes we’ve ever made at Auto­­mattic, right up there with the P2 theme and the intro­duction of teams. And I’m proud of this evi­dence that we’re not con­tent just to cele­brate what Word­Press has accom­plished, but ready to tackle the hard prob­lems that still remain.

WordPress.com bloggers have been using features powered by Calypso for months already, but today we’re open sourcing it and announcing it to the world, along with a new desktop app for Mac, which I’m using to write this very post. And if that weren’t enough, we’re also launching a new publication called Discover, highlighting the best of what’s being published with WordPress (including self-hosted sites). It’s a big day for Automattic. And there’s never been a better time to join us.


The Design of WordPress 3.8

Today the WordPress core team announced WordPress 3.8 “Parker”, a major milestone for the web’s most popular blogging software. In its 10 years WordPress has seen many changes, one of the most significant being the “Crazyhorse” redesign that came with version 2.7 in 2008. Today’s update is the biggest visual update to WordPress since that release. And while I’m not a member of the core team myself, I got to contribute to this version by leading one of the first featured plugin projects incorporated into WordPress. The MP6 redesign project originally began last March with a set of new icons once under consideration for WordPress 3.6. It’s expanded into a visual reinterpretation of WordPress that’s responsive too, so folks with phones and tablets and computers of all sizes1 can now use WordPress well. We’ve done all this without significantly altering the well-known WordPress user experience, meaning that we think you’ll find that 3.8 is a fresh update that won’t feel foreign to long-time users.

3.8 Screenshot

From the outset we knew that we wanted to create an evolution, not a revolution, of WordPress. So we kept the basic structure and layout of items the same, but rethought their visual treatment. We used a unified color for the top toolbar and sidebar menu, more clearly separating navigation from content. We un-rounded corners, simplified shadows and gradients, and eliminated other visual effects, but did so carefully, while maintaining a sense of hierarchy and depth, and without flattening elements like buttons and form fields beyond recognition. We also used color judiciously to indicate activity and state, so something like an alert message or an activated plugin is easy to discern at a glance.

We overhauled and streamlined typography, reducing to a single typeface, Open Sans. With multiple weights and extended character sets, the type in WordPress is both more expressive and more consistent than ever. Another new font, an iconfont called Dashicons, provides elegant vector iconography that can scale to any size, so WordPress looks great whether you’re on an ultra-high-DPI mobile device or you use browser zooming for accessibility. A set of eight new color schemes range from quietly reserved to brilliantly expressive, and they’re extensible using SASS for developers to build their own. Dashicons change color on the fly, so they work with all our new built-in color schemes and custom schemes you create yourself. Throughout you’ll now find a WordPress that’s simpler, but more fun and more personal. One of my favorite things about the new design is how even the tiny details like checkboxes and buttons take on our new color schemes.

Back in May, I linked to some commentary from John Gruber about theoretical iOS 7 mockups. This was in the days of rampant speculation before Apple released their surprisingly bold redesign at WWDC. He wrote:

A new look is one thing (and we’re going to get it), but when you’re well established and have a large user base, as iOS does, you need to maintain familiarity. If users are asking “What is this? Where am I? Where’s all the stuff I’m used to?” it’s going to be a disaster.

Daring Fireball, 10 May 2013

It’s a testament to the power of Apple’s product that so many designers invested time in creating their own proposed iOS 7 redesigns. Some were stunning, some were intriguing, and some were head-scratching, but none came close to capturing Apple’s vision for the platform: a refreshed, iterative design that built on the existing interface that millions already knew. WordPress has been lucky to receive some of the same sort of attention lately; there have been a number of interesting attempts at reinventing the WordPress user experience. I see this as a reflection of its strong position in the market and the creative energy of the community around it. This update broke a lot of new ground for WordPress while maintaining the user experience that millions of users already know. I hope those interested in the future of WordPress will contribute their energy toward even bigger changes in future versions.

dashicons

I’m proud of and grateful for the efforts of our team. Shaun Andrews, Joen Asmussen, Mel Choyce, Ben Dunkle, Kelly Dwan, Michael (mitcho) Erlewine, Helen Hou-Sandí, Isaac Keyet, Till Krüss, Andy Peatling, and Samuel (otto) Wood helped turn our early concepts into something worthy of being included in core. Dave Whitley and Kate Whitley helped create the beautiful color schemes you’ll find when you update. Dion Hulse, Andrew Nacin, Andrew Ozz, and Zack Tollman helped us with the transition into core. The DASH and THX38 project teams created the new Dashboard and Themes pages that accompany our redesign. Matt Mullenweg led the way by proposing a redesign via plugin that paved the way for a new development strategy for WordPress. And many, many more contributed their feedback & ideas, fixed bugs, and submitted patches as we transitioned from a plugin to where we are today, the official new design for WordPress.

On behalf of the team, I hope this update inspires you to blog more often and from more places, from a WordPress that’s more tailored to you.

1 Seriously, we tried them all. If you find something we missed though, let us know.


Related Reading

Enraptured by Mockups

There’s a set of theoretical designs for iOS 7 going around, and while they’re pretty to look at I’m a little disappointed by those declaring that it should be Apple’s next move. John Gruber thinks differently:

“There are a lot of clever ideas and nice designs in this iOS 7 ‘concept’ by Philip Joyce of design firm Simply Zesty. But they’re only clever and nice in the abstract, as possible designs for a touchscreen phone interface. Nice and clever though they are, this would be a disaster as a new design for the actual iPhone. A new look is one thing (and we’re going to get it), but when you’re well established and have a large user base, as iOS does, you need to maintain familiarity. If users are asking ‘What is this? Where am I? Where’s all the stuff I’m used to?‘ it’s going to be a disaster.”

Daring Fireball

I haven’t been a user interface designer for very long in the scheme of things. I trained as a print designer, learned how to draw typography, and created color separations for press runs. Interactive design is still something we’re all making up as we go along. But one thing I have learned is that users have no fundamental problem with a redesign. They do, however, recoil in horror when you introduce them to something that is a top-to-bottom replacement for a product they’ve grown to feel comfortable with, while calling it a “redesign.” It’s fundamentally dishonest — Windows 8, whatever your opinion of it (and I am generally a fan), was not a “redesign” of Windows. It’s an entirely new design for an operating system that happens to still be called “Windows.”

Designers wanna design. It’s in our DNA to seek out and eliminate every trace of hokiness, or half-assedness, or what seemed cool at the time but now looks tired. If WordPress were run entirely by designers, it would likely have an all new interface every year, but a fraction of the user base.

This is the challenge in continuing to freshen and update the design of software that millions (or billions, in the case of iOS) of users already know and understand. But those millions of existing users are what makes the work worthwhile. It’s the guiding principle behind the MP6 redesign project for WordPress. We made it our goal to refresh WordPress’ aesthetic styling and improve accessibility by making the dashboard responsive — but doing this without making major changes to the way users interact with the software. It’s not that there aren’t opportunities for it — I could spend an entire cycle alone on the Edit Post screen — but through years of experience we’ve found how much users appreciate it when we separate visual redesigns from major, sweeping architectural changes. In short, it’s about iteration, something both WordPress and Apple have always embraced.

Flat design is sexy. And simplicity rules the day. Both of these concepts should inform the future work done by all interaction designers (including for WordPress and for iOS). But to paraphrase Gruber’s quote from above: a new look is one thing (and WordPress is going to get it), but when you’re well established and have a large user base, as WordPress does, you need to maintain familiarity. If users are asking “What is this? Where am I? Where’s all the stuff I’m used to?” it’s going to be a disaster.

Say hello to MP6 1.0

Tonight we released version 1.0 of MP6, our experiment in WordPress admin design. It’s hard to believe that it was just back in March that Otto landed the first commit of MP6, which at that point consisted solely of Ben Dunkle’s new flat icons that had been in consideration for 3.6. Ten weeks later, we’re well on our way to a totally updated, responsive, modern design for WordPress. To date it’s been downloaded nearly 10,000 times, and it’s also available for WordPress.com users to test.

And while MP6 is still a work in progress, 1.0 is a nice milestone at which to look back and reflect. I’m very grateful to Joen Asmussen, Mel Choyce, Ben Dunkle, Michael Erlewine (mitcho), Isaac Keyet, Till Krüss, Andy Peatling, and Samuel Wood (otto) for all their contributions, and of course Matt Mullenweg for conceiving the idea in the first place. Many thanks as well to all of you who have shared your feedback and suggestions with us. I’m very proud of what the team has done so far. And I expect the list of contributors will grow even larger before we’re all said and done! If you’d like to help us out, follow along on Make WordPress UI.

MP6

If you like

and

you just might like MP6, an experiment in WordPress interface design.

All kidding aside, we would appreciate all the feedback and ideas you may have; please share them with us on Make WordPress UI.

Branding Fun

 

If there are any small business owners in Colorado or Washington looking for a brand identity for their new recreational drug company, the one I created for my senior project in college is available for a very fair price.

(Yes, I was the original designer of every Web 2.0 leaf logo.)

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!