Shuttle Launched
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).
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!
↓ Quote | 14/5/2006
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.
↓ Quote | 14/5/2006
Awesome job guys! Looks pretty good!
↓ Quote | 14/5/2006
Yay! The wait is over. Thanks to everyone that ever contributed to the project.
↓ Quote | 14/5/2006
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.
↓ Quote | 14/5/2006
andy said:
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.
↓ Quote | 14/5/2006
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!
↓ Quote | 14/5/2006
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. :)
↓ Quote | 14/5/2006
Congratulations to contributers, thanks for your nice looking work. I hope not to wait too long to touch & feel the new dashborad :)
↓ Quote | 14/5/2006
Thanks to all of you who have been working so hard to make our lives more pleasant, I really appreciate it.
↓ Quote | 14/5/2006
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.. :)
↓ Quote | 14/5/2006
wow, great work by all. Looking forward to seeing it in real life. Congrats to all who worked so hard on the project !
↓ Quote | 14/5/2006
Wordpress shirtpress….the site looks so fcuking cool!
↓ Quote | 15/5/2006
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!
↓ Quote | 15/5/2006
Wow. Amazing job with that interface. I can’t wait to get a chance to play around with it within Wordpress.
↓ Quote | 15/5/2006
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
borderingorgasmic.↓ Quote | 15/5/2006
That looks really neat, I’m definitely looking forward to using it!
↓ Quote | 15/5/2006
Wow, the mockups looks fantastic, cant wait to get my hands on it
↓ Quote | 15/5/2006
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.
↓ Quote | 15/5/2006
So, um…what resolution is this designed for? It seems rather large (larger than 1024). Is it a liquid or fixed width?
↓ Quote | 15/5/2006
This is why we need opensource development. Great work guys.
↓ Quote | 15/5/2006
I love the emphasis you guys put into making it accessible, usable AND stylish. Wordpress is definatly improved with this.
Great work!
↓ Quote | 15/5/2006
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.
↓ Quote | 15/5/2006
Congratulations, and thank you so much!
↓ Quote | 15/5/2006
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.
↓ Quote | 15/5/2006
I can’t wait you works in public! Good Job!
↓ Quote | 15/5/2006
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?
↓ Quote | 15/5/2006
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:
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)?
↓ Quote | 15/5/2006
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.
↓ Quote | 15/5/2006
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 :)
↓ Quote | 15/5/2006
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!
↓ Quote | 15/5/2006
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…
↓ Quote | 15/5/2006
Well done guys! Can’t wait to see it in action (Matt says WP.com will get it first, which is nine kinds of cool)
↓ Quote | 16/5/2006
Clarify one thing for me…after a year and a bit, all you have is photoshop mockups? No code yet?
↓ Quote | 16/5/2006
60 Comments…oh wow…..popular this thing aye!
↓ Quote | 16/5/2006
To clarify, WP.com 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.
↓ Quote | 16/5/2006
seriocomic said:
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 :).
↓ Quote | 16/5/2006
Wait, you have the css and html finished?
↓ Quote | 16/5/2006
The screenshots look great. Been looking forward to this for a while.
↓ Quote | 16/5/2006
David said:
Read the FAQ which is on the front page now ;)
↓ Quote | 16/5/2006
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.
↓ Quote | 17/5/2006
Matt said:
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 :).
↓ Quote | 17/5/2006
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.
↓ Quote | 17/5/2006
Thanks… Cool…
↓ Quote | 17/5/2006
how to use this Project? i
↓ Quote | 27/5/2006
I think you did a great job… even though some people are complaining like big babies :)
↓ Quote | 28/5/2006
Beautiful ! (and the “howdy user!” is gone :) )
↓ Quote | 6/6/2006