Concrete

Back to thinking about house stuff for a little while, as I’ve started working with a landscape designer. These are some options for concrete finishes in some stuff we might be building. Yes, I realize how boring a literal picture of concrete is, but this is the kind of minutiae I revel in. And I hope it becomes part of a before & after that’s as satisfying as this one (before, after) soon.

I will never stop learning.

In the decade that I’ve been designing for Automattic, my job has taken many shapes. As the first designer working for the company, I was a generalist—I designed everything from the company logo to the WordPress.org website and the interfaces for our first products. While my time in college taught me a lot about art and design, almost everything I know about my career, I’ve learned here. Our company creed begins with those five words, I will never stop learning. It’s not aspirational—it’s a statement of fact. It’s impossible to work here for very long without being constantly inspired and challenged.

This year I’ve learned an incredible amount about something I’ve never thought I was good at: hiring. Earlier this year we formed the design hiring group at Automattic, a team of designers who, in addition to our regular duties, review portfolios, interview candidates, oversee trial projects, and recommend designers to our CEO. It’s a giant task, and deeply influential in how our company grows and our products evolve. If you apply for one of Automattic’s product or marketing design jobs, you’ll probably hear from one of us along the way.

When I started working on hiring, I was on my own, and I was pretty sure I was terrible at it. I didn’t cause any major meltdowns, but I had a complete awareness of how out of my element I was, and how much I had to learn. I knew I’d only get better with some help, so I asked a few of my colleagues to join and together, we have leveled up quickly, learning how to be comfortable in an environment that, as designers, none of us were all that familiar with. (I went through my fair number of job interviews after college, but my last one was in 2005!) Our efforts are already paying dividends, as we’ve gotten to see some tremendous designers join Automattic as a result of our recommendation.

Along the way, I’ve gotten to help with two major pieces of news we get to announce today. This summer, the design hiring group assisted with the monumental task of finding someone to become Automattic’s head of design. If hiring designers was intimidating, talking with some of the greatest minds in the industry about Automattic’s design was ten times so. But through that process, we learned an incredible amount about what we aspire to, and what we should do to get there. And as a result, we now have an amazing leader in John Maeda, our new Global Head of Computational Design and Inclusion.

One of John’s first ideas was to let the world know about the design culture we’ve been building, and today that idea has gone public in the form of Design.blog, a new publication from Automattic designers & friends. We’ll use it to profile the people who make design happen at Automattic (here’s mine), and to feature the voices of designers who inspire us to keep pushing ourselves to do more, and be better. Our first pieces are from Jessica Helfand, Cassidy Blackwell, and Alice Rawsthorn. Each are thought-provoking and inspiring, and I hope you’ll check them out.

In the decade I’ve been here, I’ve never been more excited about the state of design at Automattic. If you love design and are interested in what we’re doing, I hope you’ll join us.

The new WordPress.com

Post-illustration

I haven’t been blogging here much lately, but I have been spending a lot of time on WordPress.com. Automattic has spent the past 20 months building an entirely new user interface (codenamed “Calypso”) for WordPress.com, one where you can manage all of your WordPress sites in one place, whether they’re hosted here on WordPress.com or elsewhere, running Jetpack. Our Developer Blog has lots more details, and the official launch site presents the story of Calypso in beautiful form. Our CEO Matt wrote eloquently about Calypso and what it means to our company.

I’m very proud of, and was surprised by, the incredible technical sea-change that’s happened inside of Automattic, and the new ways of designing and developing that were required to make it work. It’s one of the biggest changes we’ve ever made at Automattic, right up there with the P2 theme and the introduction of teams. And I’m proud of this evidence that we’re not content just to celebrate what WordPress has accomplished, but ready to tackle the hard problems 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

The colors of WordPress

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

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

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.

It’s Getting Worse

It Gets Worse

It Gets Worse

The state of web design in the news business has always been bad, but it seems to be getting progressively, demonstrably worse. It’s not just that the designs are bad. It’s that the people making the designs don’t appear to have any desire at all to make the experience pleasurable for the reader — how likely you are to click an advertisement (intentionally or not) is clearly the only measure of success in this type of design.

NOLA.com recently “redesigned” their site — I use dick quotes because the design of articles has not changed at all — they’ve just added a terrible webfont, a lot of yellow, and a bunch of extra links in the header. Once you get beyond all the yellow, the article still looks exactly like it did 10 or so years ago when the site first launched, Verdana body text and all. They did add a “responsive” stylesheet — one so responsive that it’s been broken ever since the day it launched (prompting this initial reaction from me):

How bad does the business of publishing free news articles in exchange for banner clicks have to get before something fundamental changes? Hard to say — even NYTimes.com, which now requires a subscription to read regularly, still hasn’t even attempted to use the design talents of their staff or modern web technologies to roll out a site more focused on article readability than ad visibility. But looking at the example above, I’d like to hope that we’ve almost hit the bottom.

UPDATE: On May 23, Advance Digital rolled out this new design to al.com, home of the major Alabama newspapers. There’s a great roundup of reaction to the redesign at Wade on Birmingham.

UPDATE 2: On May 24, the news broke that the New Orleans Times-Picayune will cease daily publication, scaling back to a thrice-weekly schedule. I’m sure I’m going to have more to say on this later, but for now, it’s just sad. I don’t know who at the Times-Picayune is being laid off as a result of this decision, but I have a feeling it’s a pretty safe bet to say it includes their entire design staff.

Engineering Windows 8 for mobile networks

Engineering Windows 8 for mobile networks

The way that Microsoft has built in native support for mobile broadband in Windows 8 is kind of great. The more of Metro I see the more impressed I am, and I hope Apple’s user experience engineers and designers are taking note.

Engineering Windows 8 for mobile networks

We wanted to eliminate the guesswork in locating and installing device drivers for mobile broadband. We did this by working with our mobile operator and mobile broadband hardware partners across the industry, designing a hardware specification that device makers can incorporate into their device hardware. In Windows 8, we developed an in-box mobile broadband class driver that works with all of these devices and eliminates your need for additional device driver software. You just plug in the device and connect. The driver stays up to date via Windows Update, ensuring you have a reliable mobile broadband experience.

The way that Microsoft has built in native support for mobile broadband in Windows 8 is kind of great. The more of Metro I see the more impressed I am, and I hope Apple’s user experience engineers and designers are taking note.

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.