Shuttle Launched

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

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


  1. I don’t use Wordpress, but that looks very nice. I think on the aesthetics side, you guys certainly succeeded. If you also succeeded with the rest, Wordpress users have to decide.

    Nice job!

    1 Volkher Hofmann
    Quote | 14/5/2006
  2. Great job to all involved. You all have done a wonderful things from the looks of the screenshots provided. I can’t wait to actually see this in action.

    2 Shawn Grimes
    Quote | 14/5/2006
  3. Awesome job guys! Looks pretty good!

    3 Yannick
    Quote | 14/5/2006
  4. Yay! The wait is over. Thanks to everyone that ever contributed to the project.

    4 Paul Stamatiou
    Quote | 14/5/2006
  5. Sweet guys. The ramshackle lack of conformity of the admin pages has always nagged a bit. Nice job if it can be transposed into code and CSS successfuly - and I don’t see why it shouldn’t be.

    My only disappointment here is that you seem to have retained the menu layout and that unnecessary double page load needed for anything beneath the default option. It would have been so much sweeter to have gone for proper drop-down menus - single click - which are so easy to implement (I publish a plugin that does just this) in just CSS. Saves time - saves bandwidth. It’s worth considering…

    Otherwise - looking forward to it.

    By the way - if this goes ahead as planned it would be so nice to see a guide for plugin authors - classes and positioning etc., that they should use.

    5 andy
    Quote | 14/5/2006
  6. andy said:

    My only disappointment here is that you seem to have retained the menu layout and that unnecessary double page load needed for anything beneath the default option. It would have been so much sweeter to have gone for proper drop-down menus - single click - which are so easy to implement (I publish a plugin that does just this) in just CSS. Saves time - saves bandwidth. Itâ��s worth considering…

    Andy, I like what you’ve done; we battled long and hard regarding how to make everything look clear to everyone. It was decided to keep things as simple and familiar as possible however giving it that much needed facelift.

    6 Khaled
    Quote | 14/5/2006
  7. Nice, the mockups look fantastic! Can’t wait to get my hands on it as I’ve been following this project since it was first mentioned.

    I was going to suggest releasing it as a plugin in the interim as Steve has done with his Tiger Admin theme, but then realized Shuttle is probably a lot more involved than that. Awesome that it’s going to be incorporated into future official WP releases. Congrats on that!

    7 Matt Brett
    Quote | 14/5/2006
  8. Congratulations on finishing the project guys! I think the Wordpress community as a whole thank you for the time and effort you’ve all put in to the project. :)

    8 Dan
    Quote | 14/5/2006
  9. Congratulations to contributers, thanks for your nice looking work. I hope not to wait too long to touch & feel the new dashborad :)

    9 ali
    Quote | 14/5/2006
  10. Thanks to all of you who have been working so hard to make our lives more pleasant, I really appreciate it.

    10 C. Wess Daniels
    Quote | 14/5/2006
  11. Great stuff - that’s one of thé most sexy UIs I’ve seen. I bet somebody will label it bloated and cluttered, but I love exploring my admin panels, so for me it’s a good thing.

    Must be a great feeling to get to contribute such a big piece to the official Wordpress puzzle. Congratulations to all involved!

    By the way, can’t say I envy Matt for his task of implementing these mockups.. :)

    11 Olav
    Quote | 14/5/2006
  12. wow, great work by all. Looking forward to seeing it in real life. Congrats to all who worked so hard on the project !

    12 Paul
    Quote | 14/5/2006
  13. Wordpress shirtpress….the site looks so fcuking cool!

    13 Fadi
    Quote | 15/5/2006
  14. I’m so glad that Shuttle is shaping up to be much more than just a CSS restyling of the administration panel. The fact that you guys have been focusing on building a more functional system makes me believe that Wordpress stands a fighting chance of staying at the top.

    I’m excited!

    14 Yas
    Quote | 15/5/2006
  15. Wow. Amazing job with that interface. I can’t wait to get a chance to play around with it within Wordpress.

    15 Derek Punsalan
    Quote | 15/5/2006
  16. It’s great to see something like this finally working its way to WordPress.

    WordPress is one of the simplest (if not the simplest) blog and CMS tools I know of, but I think the original interface scared away a number of people; the 2.0 version is better, I believe, but this will really make it. The current style just isn’t all that intuitive unless you’ve used it for a while (we old users will have to relearn, won’t we? haha!).

    The new login screen is bordering orgasmic.

    16 Lelia Katherine Thomas
    Quote | 15/5/2006
  17. That looks really neat, I’m definitely looking forward to using it!

    17 Prashant
    Quote | 15/5/2006
  18. Wow, the mockups looks fantastic, cant wait to get my hands on it

    18 Bharath Kumar
    Quote | 15/5/2006
  19. I don’t know what I was hoping for, but while I am impressed with much of what you have done, I don’t think it was a far enough departure from what we have currently.

    I love how you did the themes area though, the way it shows the thumbnails and stuff, very cool.

    I look forward to downloading the Shuttle ready WordPress 2.1.

    19 David
    Quote | 15/5/2006
  20. So, um…what resolution is this designed for? It seems rather large (larger than 1024). Is it a liquid or fixed width?

    20 Shaun Andrews
    Quote | 15/5/2006
  21. This is why we need opensource development. Great work guys.

    21 Haasim Mahanaim
    Quote | 15/5/2006
  22. I love the emphasis you guys put into making it accessible, usable AND stylish. Wordpress is definatly improved with this.

    Great work!

    22 André Costa
    Quote | 15/5/2006
  23. First off, the redesigns look great, and as a user of Wordpress, I’m really excited about the functionality and the design behind these mockups.

    However, the current menu styling (2.0.2) has a larger font-size and for the top menu and the three bars along the top also have different heights.

    I think that this not only looks better, but also helps aid in the making the that whole area more intuitive by giving different treatments (besides just color) to the different types of functionality in that area. I would really hate to see that change.

    23 Darren Ansley
    Quote | 15/5/2006
  24. Congratulations, and thank you so much!

    24 Owen
    Quote | 15/5/2006
  25. Wow, amazing job by all of you. This looks like it can take wordpress so much father, the current admin panel is so lacking, and this really helps address all the issues and organizes everything perfectly. WP 2.5 + Shuttle? That’d be sweet.

    25 AJ
    Quote | 15/5/2006
  26. I can’t wait you works in public! Good Job!

    26 touchan
    Quote | 15/5/2006
  27. Strangely, the main admin page reminds me quite a bit of the MT main admin page. Is that intentional, or is it just me being on crack?

    27 Eric Meyer
    Quote | 15/5/2006
  28. Thanks everyone for the great support, I’m working on another post that should hopefully address a number of your questions and comments, but I thought I’d answer this one now, since it’s Eric’s first comment on the Kode that I can remember :).

    Eric Meyer said:

    Strangely, the main admin page reminds me quite a bit of the MT main admin page. Is that intentional, or is it just me being on crack?

    Definitely crack, or maybe speed? Seriously though Eric, you got that impression o_0? I’ll be expanding on our design in the coming week but I think you’ll find that apart from the the shuttle admin looking like it’s a commercial application (which MT is) it’s effectively an extrapolation of the elements that were in the WP admin from version 1.2 onwards.

    Unless MT have changed things around (I’ve not actually seen screenshots since we started this project to be honest, because we did our research and looked at everyone else’s admin first)?

    28 Khaled
    Quote | 15/5/2006
  29. Wow! I love the layout changes which makes it WP look even better! :) I love layouts which are clean and simple yet look professional at the same time.

    29 Jacques Marneweck
    Quote | 15/5/2006
  30. thanks and great work.

    if anyone cares for feedback, can the instructions column on the left be made to slide in and out? once they’re read, we’ll not be needing them :)

    30 tayler
    Quote | 15/5/2006
  31. I agree, the new admin pages do look better, much cleaner altogether. If I had any one comment, it might be that the use of a drop-down box to select the displayed name in the User Profile section always seemed like a waste of screen real estate - wouldn’t a properly labeled option circle next to each of the four text boxes not only work just as well, but look cleaner?

    Still, I have to admit to looking forward to Shuttle, and the next major release of WP in general. Great work!

    31 Aquaricat
    Quote | 15/5/2006
  32. Nice I idea. But will there be options of the way it looks? Because the login area now I personally like. Also the same with the rounded movable post option boxes (there not rounded in the example) The way the menu looks now I like too. I know it’s not quite ready but options and were could we give suggestions. But over all nice. Thanks…

    32 Joe
    Quote | 15/5/2006
  33. Well done guys! Can’t wait to see it in action (Matt says will get it first, which is nine kinds of cool)

    33 Karan
    Quote | 16/5/2006
  34. Clarify one thing for me…after a year and a bit, all you have is photoshop mockups? No code yet?

    34 seriocomic
    Quote | 16/5/2006
  35. 60 Comments…oh wow…..popular this thing aye!

    35 Fadi
    Quote | 16/5/2006
  36. To clarify, won’t get it before regular WordPress or anything, I’ll code for WP first and then port it, but while I’m working on the changes it might be a good excuse to do some A/B testing on the live site and share the results. It will either serve to reinforce the designs against people who might object to the process, or identify areas to iterate on.

    36 Matt
    Quote | 16/5/2006
  37. seriocomic said:

    Clarify one thing for me…after a year and a bit, all you have is photoshop mockups? No code yet?

    Many lessons were learnt Mike, many lessons were learnt. The development would happen in bursts. Fury of action for like 3 or 4 weeks and then it would go quiet for a while. Open Source development has it’s advantages and disadvantages. Lessons learnt :).

    37 Khaled
    Quote | 16/5/2006
  38. Wait, you have the css and html finished?

    38 David
    Quote | 16/5/2006
  39. The screenshots look great. Been looking forward to this for a while.

    39 kristin
    Quote | 16/5/2006
  40. David said:

    Wait, you have the css and html finished?

    Read the FAQ which is on the front page now ;)

    40 Khaled
    Quote | 16/5/2006
  41. I’m going to have to disagree with Khaled in that Shuttle was not open source development because it happened behind closed doors. The product is released to the community, but the process of open source I think is intrinsic to its name.

    41 Matt
    Quote | 17/5/2006
  42. Matt said:

    I�m going to have to disagree with Khaled in that Shuttle was not open source development because it happened behind closed doors. The product is released to the community, but the process of open source I think is intrinsic to its name.

    You could argue it that way but at the same time it was done by a group of people for a non-commercial reason for the aid of an open source project.

    You’re right the process wasn’t completely ‘open’ however for what we thought was a good reason. It wasn’t completely design by commitee but then again it kind of was. It was a manageable commitee :). Anywho lessons learnt lessons learnt :).

    42 Khaled
    Quote | 17/5/2006
  43. Great work.

    The admin area of WP has always been a major weakness for anyone using it as a CMS, this looks to address a lot of the problems in making WP easily usable by a client.

    43 3stripe
    Quote | 17/5/2006
  44. Thanks… Cool…

    44 Viking KARWUR
    Quote | 17/5/2006
  45. how to use this Project? i

    45 thil
    Quote | 27/5/2006
  46. I think you did a great job… even though some people are complaining like big babies :)

    46 Shawna
    Quote | 28/5/2006
  47. Beautiful ! (and the “howdy user!” is gone :) )

    47 stilgar
    Quote | 6/6/2006

Trackbacks & Pingbacks

  1. Happily Obstinate » Shuttle pingbacked
  2. trackbacked
  3. WordPress T�rkiye » Blog Archive » WordPress ��in Uzay Meki�i pingbacked
  4. Sporadic Nonsense » Shuttle for WordPress pingbacked
  5. wordpress™ wank » way beyond blue pingbacked
  6. The Tech Central » Shuttle for WordPress Launched pingbacked
  7. Shuttle for WordPress Launched at JohnTP’s Home pingbacked
  8. Koray Online | Blog Archive » Call NASA, shuttle has launched. pingbacked
  9. Shuttle Launched at jarkolicious pingbacked
  10. 5ThirtyOne | Wordpress Shuttle admin interface pingbacked
  11. » Blog Archive » Shuttle has lifted off pingbacked
  12. Shuttle Finally Launches at Jim Kem pingbacked
  13. » Blogroll Dive: 5/15/06 pingbacked
  14. Wooden Fish » Shuttle Has Landed pingbacked
  15. Bharath Kumar trackbacked
  16. Shuttle at Blogalistic pingbacked
  17. Deranged Hermit » Shuttle launched! pingbacked
  18. Photo Matt » Shuttle pingbacked
  19. : Blog Archive : Shuttle Launches? pingbacked
  20. The Shuttle has landed at Pixl Sht pingbacked
  21. Yellow Swordfish » Doing The WordPress Shuttle pingbacked
  22. BlogBuster » Blog Archive » Nyt admin design til WordPress pingbacked
  23. oBeattie : Form and Function » Liftoff pingbacked
  24. Pulling back the curtain on Shuttle at FactoryCity pingbacked
  25. Webdiva » Shuttle Launched pingbacked
  26. WordPress Admin Panel Overhaul - OptiNiche: WordPress Optimization Blog pingbacked
  27. Fightingfriends » Article Archive » Shuttle Isn’t Impressive pingbacked
  28. Shuttle screenshots released — cre8d design blog pingbacked
  29. Shuttle Preview » All Forces pingbacked
  30. Ellis Web » Items of Interest: 2006.05.16 pingbacked
  31. Shuttle se incorporará a la próxima versión de WordPress » La mate por un yogur pingbacked
  32. Stupid Wordpress Tricks » Shuttle Launched - Redesign of Wordpress Admin Panel pingbacked
  33. WordPress Admin Redesign Mockups pingbacked
  34. The Shuttle That Wasn’t at Binary Bonsai pingbacked
  35. smackfoo » Blog Archive » Broken Kode - Shuttle Launched pingbacked
  36. Shuttle Admin Panel Screenshots - pingbacked
  37. Lorelle on WordPress » New Interface and Administration Panels Coming for pingbacked
  38. Interknox » Blog Archive » Shuttle Project - New WordPress Backend pingbacked
  39. smackfoo » Broken Kode - Shuttle Launched pingbacked
  40. acid:sugar » Blog Archive » WordPress Shuttle pingbacked
  41. Yellow Swordfish » The Architecture Of WordPress pingbacked
  42. Die Spürnase. » 博客文章 » WordPress Shuttle | Administration Redesign Project pingbacked

Leave a Comment