The colors of WordPress
Uncategorized

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 sizes can now use WordPress well1. 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 ScreenshotFrom 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. icons 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
Standard
Uncategorized

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.

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.

Standard
Uncategorized

Page Layers converts websites to Photoshop documents

I love finding a piece of software that does one thing this simply, this well. Page Layers, a Mac app created by Ralf Ebert, turns any web site into a layered Photoshop document. Each element, each line of text, everything beautifully separated into transparent layers, which can be manipulated independently of one another. This is pure genius for web designers who want to try new ideas on a page without spending hours drawing a picture of their web site in Photoshop. Works beautifully; worth every penny of its $11.99 price.

Standard