Before you read this I suggest you go and have a look at the 20 mockups showing the future of WordPress.

The idea of redesigning the WordPress administration panel began believe it or not in December 2004. For over a year and a half myself, Michael Heilemann, Joen Asmussen, Chris J Davis, Joshua Sigar (later joined by Bryan Veloso) exchanged countless emails and mockups and links and ideas regarding what we thought the WordPress administration panel should be. The project was called the Shuttle Project. I now have the pleasure of presenting what we came up with and explaining the future of the project.

The Shuttle project was without a doubt the single hardest thing I’ve ever been involved with. The only thing that made it easy for me was the fine and exceptional gentlemen on the Shuttle team itself. What made it so difficult is the fact that we were thinking of the thousands of WordPress users all over the world. We were thinking of usability, we were thinking of asthetics, we were thinking of the power user and the novice user. How do you get three headstrong (and passionate) designers to play nice with each other? I swear I have no idea but somehow it all actually worked out in the end. I owe Michael and Joen a great deal of thanks for helping me improve how I think about design.

However the greatest thing that I could have gotten from this project is the sense of collaboration that I felt throughout the project. We were all working towards making something we use on a daily basis that much better, it makes Open Source that much more enjoyable. Although it was tough going through this design process, I think we’ll all instantly forget everything once it’s part of the official install.

When's it coming out?

Matt Mullenweg (lead developer of WordPress) will be incorporating these mockups into the official WordPress releases in due course. I don't know when he's going to be getting round to implementing the code for it all, so if you're willing to help out to move the process along, by all means feel free to contact him and offer your assistance. This will not be a plugin.

I can’t wait for the Shuttle designs to be incorporated into the WordPress install, as I do believe that once it’s done there will be only one choice in which platform you should be using.

WordPress Identity | The Colour Blue

There are some serious changes to the architecture of the panel as we see it, and I (and the rest of the Shuttle team) will be going through the decisions we made and the reasons behind them in due course. The first element I think I'll talk about is the choice of colours. When the project first began, the WordPress administration was a drab grey. It included a nice big gradient along the top of the navigation bar.

So the first major change we made was give WordPress a colour and it’s own distinct identity. We had to make sure that it didn’t mimic any of the other blogging tools out there, so we did a bit of research first. Textpattern has orange, Symphony is green, Moveable Type is grey/green, Expresion Engine is purple. We decided to go for blue. What does blue signify you ask? An easy link (and direct from Wikipedia) is that the colour blue:

...is considered a calming, soothing colour, perhaps related to its association with water and to the sky.

That was what I was hoping we’d get. The colour palette provides an atmosphere that is familiar and not harsh on the eyes. Seeing as a lot of people spend a great deal of time looking at the actual backend of WordPress a great deal throughout the day, it was very important to keep the visual impact of the administration panel to a minimum.

After a great deal of back and forth and loads of mockups and discussion the number of hues of blue was kept to a total of 3. These same blues would be used to distinguish links within the panel itself, as consistency is a major factor in keeping the user comfortable.

System Messages | The Importance of Colour

One idea that I really loved, however it didn't really fit in with the overall design was the error and sucess system messages. The original intent was that an error or warning would be given a red colour while a successful message be given a green colour. This would provide a great visual aid, and users would instantly know if something was wrong or right. However we decided that the light blue and yellow coloured icons could provide the same level of visual information with the addition that they tie into the design itself which is what we were here for in the first place.

Join me next time as I talk a bit about usability (or at least try and talk about the subject).