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 redesign. 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

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 three 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,
	(-o-min-device-pixel-ratio: 5/4),
	(-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