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

Gone Fishin’

At the end of the day, I’ll begin a sabbatical from Automattic that will last until October. It will be the first time since 2004 that I’ve had more than two consecutive weeks away from work. The idea of not working for an extended period of time is all at once exciting, relieving, and terrifying. But I’m grateful to work for a company like Automattic that not only allows but encourages employees to take time off when they need it. As I take this break, it seemed like a good time to reflect on how I got here.

In the summer of 2005, Matt Mullenweg got in touch with me to do some freelance design work1. He was starting a new service called Akismet, and I built a very simple website to introduce it to the world. We worked well together, and a while later he asked me to design the logo and website for a new company he was starting called Automattic. It was the biggest project of my very short career, and was soon followed by a bigger one: the redesign of WordPress.org that launched in December 2005. In the middle of all that, Matt asked me to join Automattic full-time. And I said no.

It wasn’t that I was skeptical of Automattic’s prospects. But commitments are important to me. When Matt made the offer, I was just three months into my first real design job. The company had taken a chance on me, a self-taught web designer with a degree in print design, and had helped me move to Baltimore for the job. I told Matt that out of loyalty, I wanted to stay there for a year. But in my spare time, I continued to freelance for Automattic. And after that year was up, I decided to join full time. Yet after almost seven years, Matt still likes to introduce me to people by saying that I rejected him the first time he offered me a job. :)

My career at Automattic has been the most fun I could ever imagine having while working this hard. It’s been thrilling to help both Automattic and WordPress grow from their tiny beginnings. And I am nowhere close to done. The last survey taken by A List Apart shows that over half of the web professionals surveyed had been in their job two years or less. Just over 10% had been at the same company for seven years or longer. And no knock against designers who changes jobs more often, whether out of necessity or choice. But I’m inspired by designers like Dieter Rams and Jony Ive, professionals who built careers designing products largely for a single company. It’s certainly possible for a great designer to do good work for many different clients, without spending much time with any one of them. But I’ve never considered myself to be a great designer. I’m a designer who’s determined to produce good work, and I have to work hard at it. Creativity and inspiration do not flow through me like a typically “artistic” person. But I love design, I love the things I work on, and nothing excites me more than seeing that through for the long term.

So no, I’m not leaving Automattic. I’m planning to spend some time both relaxing and working to accomplish some personal goals I’ve been neglecting for too long. I plan on spending a little less time in front of my Mac. I hope to find a new place to call home. But most of all I’m looking forward to coming back to Automattic in the Fall with a renewed focus and energy for the work I love.


1 The TextDrive VC200 started my career. When I began teaching myself the basics of web development, I chose TextPattern to power my first blog. I signed up for the VC200, became involved in the TextDrive user community, and did some freelance work for them. Matt Mullenweg asked Jason Hoffman to recommend a designer, and the rest, as they say, is history.

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

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.

Standard
Uncategorized

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.

Standard
Uncategorized

Making Sense of HiDPI Media Queries

Update, November 2013: Opera 15 was released in July, and the current stable version is 17. With its new rendering engine Opera’s media query support now mirrors that of Chrome on every platform. As such, I’ve retired -o-min-device-pixel-ratio from the suggested syntax below.


There are a number of methods of deploying high resolution assets to HiDPI (or “Retina”) aware browsers. Some are overly simplistic, and don’t cover every browser with HiDPI support. Others are overly complex. In the interest of laziness, I sought to find the smallest number of media queries that would cover everyone.

My test is pretty straightforward — five paragraphs, five media queries. A simple CSS rule turns the text blue if the media query works.

I’ve detailed the results here. For browsers that support multiple queries, I’ve highlighted the most common one. I’ve tested every current version of default OS browsers as well as Chrome, Firefox, and Opera. Beta/alpha versions of those with no support in the current version are also included.

We combine the two rules that cover every browser, along with print to enable the high resolution assets for all browsers, regardless of display pixel density, when printing.

@media print,
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 120dpi) {
	  /* Styles go here */
	}

This is the technique we’re using now on WordPress.com, and it just made its way into WordPress core for version 3.5, thanks to Dave Martin and Andrew Nacin.

Standard
Uncategorized

New digs

For someone whose job title is “designer,” you’d think I’d remember to think about the design of my blog more often. Truth is that I used to fiddle with it constantly, but since I started blogging with WordPress a few years ago it became easy to get comfortable with a theme and forget about it. I switched to Twenty Ten after I finished building it, then to Twenty Eleven because I had to have the awesome responsiveness. But yesterday I purchased my first premium theme, Portfolio by The Theme Foundry. The amount of customization that’s possible is really amazing. I took it a step further with some custom CSS and fonts from Typekit. Sometimes people assume that I’m able to customize my site beyond what a normal WordPress.com user can — but actually, everything I do here is using the same upgrades available to everyone. The end result probably looks nothing like Portfolio as it’s meant to be used, but that’s how I like to roll.

Standard
Uncategorized

Read it on a WordPress blog today, or in the newspaper tomorrow.

Just three days ago, WordPress.com blogger BirdAbroad posted a fascinating account of China’s fake Apple Stores (I reblogged the story myself). Today, you can read about the repercussions of the story going global in the Daily Mail or Reuters. It’s fascinating to see how quickly a blog post can get the attention of the international press. And remember, if you want to read it first, read it on a WordPress blog. :)

Standard
Uncategorized

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!

Standard
Uncategorized

A Hero for Every Site (via VaultPress Blog)

Yep, I’m reblogging my own post from the VaultPress blog. :) I really enjoyed working with Matthew Woodson on the new illustration he did for us. We’ll be continuing to work together over the next few months, as we lead up to (and celebrate) the public release of VaultPress.

To make room for the hot new art, I busted open the design of the site, getting rid of the borders and background colors, bumping the text up to Twenty-Ten-huge levels, and adding a ton of subtle touches for the Webkit, Opera, and Firefox 4 users to appreciate. Typekit serves up Calluna for headlines and body copy, the typeface we liked so much we used it right in the logo. It’s been lots of fun concentrating on VaultPress over the past few months, and the stuff that’s yet to come is even cooler.

A Hero for Every Site Yesterday, we began rolling out a fresh round of advertising, and we wanted to take just a minute to talk about the story behind it (we are bloggers, after all). Deciding how to advertise a totally new product is a tall order. When your job is providing security and peace of mind, there's two pretty obvious marketing strategies: fear or empowerment. You can scare your users into using your product, or you can make using your product feeling empow … Read More

via VaultPress Blog

Standard
Uncategorized

WordCamp Savannah

I’m attending WordCamp Savannah I’ve been anticipating this trip for so long, I managed to let the date creep up on me without mentioning it here. On Friday I’ll head to my adopted second home of Savannah, Georgia to speak at the inaugural WordCamp Savannah. It’s being organized by my coworker, the inimitable Jane, so you know it’ll be a top-notch operation. And it’s being hosted by SCAD, my alma mater, so the event will cater to my sense of nostalgia.  I’ll be talking about the process that was designing and developing Twenty Ten, the new default theme for WordPress. I hope those of you interested in WordPress, or just designing for the web, can make it.

Update: Slides and links from my presentation are now online.

Standard

Yesterday, my Automattic colleague Joseph Scott launched the VideoPress Plugin for WordPress.org, meaning anyone with a self-hosted WordPress blog can now use VideoPress and their WordPress.com account for high-quality ad-free video right on their self-hosted WordPress blog. :)

Uncategorized

WordCamp New Orleans

On Friday, I had the great pleasure of attending and addressing WordCamp NOLA, the first WordCamp in this neck of the woods and a great introduction to the WordPress users of the Gulf Coast. The organizers did a fantastic job of putting together a really polished event, and the attendees I was able to speak with had great enthusiasm for WordPress and really great questions for me.

It’s hard to pick out highlights when an event like this goes so well, but for me, as always, it’s all about the people I meet. It’s a real honor when you can walk away from a conference with the feeling that you’ve made a few new friends. Thanks to the organizers, volunteers, speakers and of course the attendees who made for a memorable weekend. I can’t wait to do it again real soon.

Standard
Uncategorized

WordPress for iPhone 1.21

Update: Because this got mistakenly posted to Twitter when I moved my blog over to WordPress.com, I should mention that this is an old post, and WordPress for iPhone 2.1 is the most recent version available. :)

Original: After a slight hiccup with 1.2, I’m proud to point you toward WordPress for iPhone 1.21, a pretty substantial update to our mobile app. I wont run down all the features here, but theres lots of new stuff and we’ve already started planning the next version. Download and enjoy! (Composing a post — like I’m doing now — is about a hundred times easier with the landscape keyboard!)

Standard