Shuttle Wave One

Update: The smaller images now click onto LARGER versions for your viewing pleasure.

For the past year the Shuttle team has been working on the beautification of the WordPress administration panel. The original team was just going to be myself and a couple of coders (Chris and Joshua) who were going to take the designs I came up with and make into a reality. Luckily Michael was having the same thoughts at the time and so he joined our rag tag team. In a cunning move he brought in the inimitable Joen to the fold as well. So now we had enthusiasm (me), flair (Michael) and experience (Joen) along with Chris and Joshua ready to kick some coding ass and take names. That young upstart Veloso joined us half way through the year to add some insight and youthfulness.

Matt caught a whiff of this and though we were forking, which obviously we’d never dream of. So we invited him to oversee where we were going with all of this. Meanwhile Steve was working on his Tiger admin panel half way through our design, and as you can imagine the stakes got raised ever so slightly. Unphased we continued to plow through. Email after email, mockup after mockup.

Version 2.0 was released and the first signs of the work we’d done on Shuttle began to appear. No they weren’t exactly how we mocked them up to be honest (you can blame us for the blue colours and the collapsable tabs on the side though). A year is a long time and we were pretty determinded to finish this off by the end of January. We blew that deadline, but the desire was still there.

As of today we’ve officially completed Wave One of the Shuttle project. I effectively took all the work we’d done so far, all the things we’d talked about and tried to come up with a cohesive solution. Just hammering page after page. I’m not really sure were it all came from, but I guess it was mainly due to the fact that we’d sat on this for so long that is was time we just dealt with it all.

Here are a couple of images for you to have a look. I’m working on a mini-site to show all the work done so far.

Dashboard_small.jpg Themes_small.jpg Links_small.jpg

Just to stress a few things, these ARE NOT THE FINAL mockups. I have changed a great deal since our last working mockups. The boys now have the psds and will hopefully be tweaking and doing their magic to try and pull everything together. How much of this makes it into the final WordPress install is really dependant on Matt. The boys and I will be talking at length about our design decisions in the near future; we’ve got enough emails to troll through to find hot contested parts etc.

So for all those wondering about the status of this project, that’s where we are right now. I for one see this as a HUGE milestone since we’ve been working on this for over a year now and it’s good to find some form of closure. I know it’s never really over, but at least I believe it’s a step in the right direction.

87 Comments

  1. It’s something i’d of loved to work on personally (and I did something similair till I saw you were working on something similair already. I have faith in the work especially as I work with Bryan and know Chris too.

    If you ever need another hand :|)

    1 Zach Inglis
    Quote | 7/3/2006
  2. I can’t wait to see the final product when you guys have finished. Things look great so far.

    In the few spare moments that I have, I’ve been doing a bit of customizing to the Wordpress admin myself. More than anything, it’s to make the application a little more enjoyable to use for a few of my clients that use Wordprss on their sites. It will also hopefully to get me writing on my own blog a little more often than I have been.

    2 Jeff Smith
    Quote | 7/3/2006
  3. You don’t fancy taking on the Textpattern admin panel next, do you? Now that is a mess…

    3 Matthew Pennell
    Quote | 7/3/2006
  4. I think it looks beautiful so far! Keep up the great work.

    4 Kory Twaites
    Quote | 7/3/2006
  5. It looks really nice, and I second Jeff - neither I can’t wait to see the final version.

    5 Johan
    Quote | 7/3/2006
  6. I’ve already said this to you Khaled but I’ll say it again; nice work!

    Thanks for undertaking a project for which many WP hands (mine included) have been eagerly pining for:)

    6 Phu
    Quote | 7/3/2006
  7. This looks great and will be a huge jump on the default.

    7 Dennis
    Quote | 8/3/2006
  8. You are such a tease!!! I can’t wait to fall in love with it.

    8 Jennifer
    Quote | 8/3/2006
  9. Hey Khaled, the screenshots look great. I can’t wait to see the final product, I mean, you guys have been working on this for a while and the anticipation for Shuttle is pretty high.

    9 Kathan
    Quote | 8/3/2006
  10. I’ll keep it short, simple and sweet: You guys f’ing rock!

    Final or not, it looks damn sweet - and can’t wait, to hopefully have a copy in my hands.

    10 Chris Boulton
    Quote | 8/3/2006
  11. It looks awsome, I can’t wait for the final.

    11 BobDawg
    Quote | 8/3/2006
  12. This is proving to be well worth the wait. I think about how far all of you have come since Manji, Kubrick, Persian and the like. We’ve watched you evolve as designers/developers and it’s been both fun and rewarding. Your work on shuttle clearly illustrates this growth. Can’t wait to see the final product.

    12 The Human Museum
    Quote | 8/3/2006
  13. Looking very professional! Great effort all round, guys.

    13 Karan
    Quote | 8/3/2006
  14. Really nice and clear design. I can’t wit to see the final shuttle in action. Keep it up!

    14 Olly
    Quote | 8/3/2006
  15. Great work all, kudos for the project. It has been months since it was started, but it seems that it may be all for a greater good ;)

    15 Gustavo Barrón
    Quote | 8/3/2006
  16. Looks good - only thing I’d be worried about, is if there’s enough space on small screens. Especially the bottom bar.

    I say this, because using the Tiger-Style adminpanel for wordpress on a 1024×768 screen left me with no option but to edit the bottom bar out.

    16 James AkaXakA
    Quote | 8/3/2006
  17. Looks amazing. What I’ve always wanted.

    17 Oompa
    Quote | 8/3/2006
  18. It’s looking great so far, and you guys are doing a great job, but I was really hoping you’d do something about that menu…

    Ahh well, it’s still a damn sight better than WordPress’s effort.

    Keep it up, I can’t wait to get it running!

    Just one question, is this going to take the form of a plugin (like Tiger Admin), is it going to be a seperate distribution of WordPress (with the core intact) or will Matt be taking it on as the default admin theme?

    18 Jonic
    Quote | 8/3/2006
  19. Looks good! Can’t wait.

    19 Justin Lee
    Quote | 8/3/2006
  20. Looks good! Can’t wait.

    Ditto.

    20 David Babylon
    Quote | 8/3/2006
  21. Those look great, is there any chance of seeing bigger versions?

    21 matthew
    Quote | 8/3/2006
  22. Mmm… looks quite tasty.

    22 bish
    Quote | 8/3/2006
  23. Lookin’ hott Khaled!

    23 Paul Stamatiou
    Quote | 8/3/2006
  24. Man. I’ve been waiting on this from the moment you first mentioned it. Nice to see some screen shots.

    24 zforrest
    Quote | 8/3/2006
  25. wow, thats awesome. I’m really looking forward to seeing as much of that as possible in the admin screens.

    Thanks!

    25 duran
    Quote | 8/3/2006
  26. looks great !! can’t wait now…

    26 tilak
    Quote | 8/3/2006
  27. Nice work, it looks slick!

    27 Ben Bishop
    Quote | 8/3/2006
  28. It exists, it really exists!

    With such a great team behind it, Shuttle certainly had a lot of expectation to live up to. It’s great to see it living up to the hype. Looking forward to seeing how this baby develops.

    28 Tauquil
    Quote | 8/3/2006
  29. Looks pretty tasty. I look forward to the end result!

    29 Stuart
    Quote | 8/3/2006
  30. Thanks everyone for the enthusiasm. Honestly that sort of feedback makes it all worthwhile in the end.

    James AkaXakA - As far as I can tell we’ve not increased anything from it’s current size. I’m not sure if the current wp works well with 800×600 but I think this stuff will most definitely not increase the size; so you’ve got nothing to worry about. That’s why we’ve got Chris, Joshua, Ryan and Matt doing the coding, they’ll not let that be an issue.

    Jonic - The deal is we design and do the code and then Matt will hopefully incorporate it into the proper admin. Now how literally he takes it all is going to be up to him. However I will say that one way or another the admin panel will look like the way the Shuttle team design it. We don’t want to put any pressure on Matt, so if he doesn’t want to use it all, that’s cool we’ll release a plugin to patch the holes so to speak. Some of the Usability features and Ajax however will probably need him to incorporate it all so we’ll see. The next couple of months will be very telling.

    Matthew - I’m sorting out some bigger versions for you now.

    30 Khaled
    Quote | 9/3/2006
  31. WAY to windowsy. you’ve got that windows underline the letter, even clear type text! verdana BLEGUGH. not enough padding, really tight margins.. The colors are OK but a bit dull and not very invigorating. Still, this is better than the shity one right now… You might just decide to dump wordpress for textpattern or the BEST one of all Symphony

    31 Pat
    Quote | 9/3/2006
  32. With a pep talk like that, I’m switching over to Symphony RIGHT THIS INSTANT…actually no I’m not :). I’m just fine where I am, but thanks for the comment Pat.

    32 Khaled
    Quote | 9/3/2006
  33. i like try this administration panel.
    where i download it?

    33 Ruben Rojas
    Quote | 9/3/2006
  34. Why are people always so obsessed with ‘cool looks’?! I trade any fancy interface for some needed admin functions any day.

    34 orangeguru
    Quote | 9/3/2006
  35. Great work! I realy like to see a good looking admin panel. The ‘normal’ one is boring.

    Go on man!

    35 Markus
    Quote | 9/3/2006
  36. >Why are people always so obsessed with �cool looks�?! I trade any fancy interface for some needed admin functions any day

    You are not aesthete

    36 Setti
    Quote | 9/3/2006
  37. The screens look great.

    The only problem I have is the about and help info on the left. I know what everything is and don’t want half the screen taken up with that info. I would guess (hope) it can be hidden?

    Hey whatever - it’s all better than what wordpress has now :)

    37 Ben
    Quote | 9/3/2006
  38. Ben, the sidebar information is something we’ve still discussing how and where to put. I would like it to be in the default, but having an option in the erm options section which hides these things effectively rather than having javascript the whole time to hide things..then again I could be completely wrong about how to handle this. The information however needs to be present because most new users and the average user honestly don’t know about most features.

    38 Khaled
    Quote | 9/3/2006
  39. LOOKS good. And I’ll second the call for an easy way to turn off (hide) things like the sidebar. I’d much rather have too many options and be able to customise the admin panel to how I work than have something forced on me (like wot we ‘ave now guv).

    Here’s hoping Matt takes the feedback on board as well. WordPress is great and efforts like this need applauding.

    applaudes

    39 Gordon
    Quote | 9/3/2006
  40. @Setti: You are not aesthete Rubbish! Form should still follow function. Good DESIGN is functional and ‘PRETTY’. Just making things looks pretty when you design web applications is beside the point. Go and read some works of Otl Aicher and some decent interaction designer like Bruce Tognazzini.

    40 orangeguru
    Quote | 9/3/2006
  41. Ignore the troll; this stuff looks great.

    I do miss the use of serif type in the UI, however. That always seemed like a unique aspect of the WordPress experience to me. You might also want to bump the type size up a bit. As Ellen Lupton, author of Thinking With Type points out (apparently quoting Paula Scher), “Amateur typographers make their type too big. Experienced designers, however, make their type too tiny.”

    My only other suggestion would be to cut back on the blue a little bit. Blue has been over-used on the Web for years, and it does little to enforce a unique brand image or aesthetic for WordPress.

    41 Adam Messinger
    Quote | 9/3/2006
  42. Adam, I hear you completely about the type, that’s where we’ll be playing around the CSS, and then Matt will probably bump it up a couple of sizes :) nooch :). We’ll be sure to keep that in mind though.

    As for the blue, we decided earlier on that we needed a colour to distinguish WP from the rest. Orange was taken (txp), grey/green was taken (MT), green and whatever was taken (Symphony), simple grey was too drab (at least that what I thought), blue’s a good solid colour. Loads of reasons to go for blue. Just a quick point there are 3 shades of blue and that’s it. They are used everywhere, but only those three shades.

    42 Khaled
    Quote | 9/3/2006
  43. Please don’t even think about using the same fonts as the current admin theme. It looks way too ugly on Windows. Too many jagged edges. And Clear Type is out of the question.

    I switched to another admin theme (can’t remember the name) to prevent that.

    And if you guys really want to use a serifed typo, use Trebuchet MS.
    And the font size… looks OK, as said, could use a point more.

    But NO HUGE AS XBOX FONTS please. Wordpress is a Weblog software, not an advertising panel.

    And BTW I’d love to get a copy of that WP 2.1.0 :P

    43 Stahn
    Quote | 9/3/2006
  44. That’s an awesome admin theme and it even better than tiger admin or maybe I could be wrong. Keep it up guys…

    44 Ron
    Quote | 9/3/2006
  45. Very nice :D Im waiting!

    45 Hacker
    Quote | 9/3/2006
  46. Wow… coming along great… really looking beautiful. I can’t wait to use this one.

    46 Logan Leger
    Quote | 10/3/2006
  47. anybody knows release date ?
    i cant wait :)

    47 junkie
    Quote | 10/3/2006
  48. It looks amazing!
    I hope it’ll be compatible out-of-the-box with RTL languages because it could be a real pain to fit that to right-to-left..
    Thanks for all the hard work!

    48 Sarit
    Quote | 13/3/2006
  49. looks promising, now if only that ‘update available’ button could be joined by an ‘update now’ button.

    49 matthew
    Quote | 13/3/2006
  50. I’m fricking drooling!!!!

    50 nate
    Quote | 20/3/2006
  51. Great work guys, this looks fantastic. Even if it doesn’t make the main build of WP, presumably you’ll make it available as a plugin?

    51 Gerard McGarry
    Quote | 23/3/2006
  52. When is it coming out?

    52 Phil
    Quote | 28/3/2006
  53. Personally I like the current dashboard style and it could use a fix up but the sidebar is complete gone, not what I was hoping for.

    53 Joe
    Quote | 15/5/2006
  54. WOW!
    It’s realy cool! When is it coming out? I need it!

    54 Mimono
    Quote | 19/5/2006
  55. Any chance we can get a white on black version for tired eyes that are practically bleeding from blazing white background? I noticed that even your site here has a dark blue background ;)

    Looks good though, can’t want to see it released…

    55 _ck_
    Quote | 4/8/2006
  56. So does this work with a 1024 layout screen size or do you need an absolute 1280? Not everybody that blogs has their screen maximizes to the full res, or for that matter have the capability for it.

    56 Father Dom
    Quote | 14/8/2006
  57. Great looking admin theme, looking forward to use it on the release mate :)

    57 John
    Quote | 6/10/2006

Trackbacks & Pingbacks

  1. Shuttle Preview at Johan Sundkvist pingbacked
  2. Shuttle Wave One at Pixel Meadow pingbacked
  3. Drama-King » Shuttle: Neues Backend für Wordpress pingbacked
  4. First glimpse at Shuttle at MooBlog pingbacked
  5. Shuttle, un rediseño a la interfaz de Wordpress en idealabs pingbacked
  6. Take a Gander at Shuttle at Binary Bonsai pingbacked
  7. monochrome | weblog trackbacked
  8. noscope | Stream of Consciousness #3 pingbacked
  9. Viewfinder Design » Blog Archive » Fly Shuttle pingbacked
  10. Blogging Pro China » Blog Archive » WordPress Shuttle Project pingbacked
  11. Blogalistic » Shuttle pingbacked
  12. aNieto2K » Shuttle, para Wordpress pingbacked
  13. El Tintero: politics, technology, and other important stuff trackbacked
  14. Found And Lost » 2.0.2 en Shuttle pingbacked
  15. Shuttle Preview at intarweb-master pingbacked
  16. Niklas’ blog » Blog Archive » Dinner, Skype, tech, Blixa, and WoW pingbacked
  17. Random bits at 13 steps pingbacked
  18. ./cewood » Blog Archive » Shuttle anyone? pingbacked
  19. Tech593 - Tu pulso tecnológico » Blog Archive » Shuttle reforma la interfaz de Wordpress pingbacked
  20. layer|twenty|two » Blog Archive » Ah, beatiful WordPress pingbacked
  21. Weblog - labrys » Blog Archive » Shuttle, una interfaz mejorada para WordPress pingbacked
  22. MacManX.com » Blogroll Dive: 3/13/06 pingbacked
  23. Xrossblog » Blog Archive » Wenn ich nicht schon meinen eigenen Blog hätte… pingbacked
  24. Shuttle at Eric-Taylor.com pingbacked
  25. theory.isthereason » Today’s Links: Where is Apple’s 30th Anniversary Mac? pingbacked
  26. Wordpress 2.0.3 « fotomurcia.com.es pingbacked
  27. oosterhoff digital » Archiv » Entwürfe eines neuen Wordpress Admin-Bereichs pingbacked
  28. oosterhoff digital » Entwürfe eines neuen Wordpress Admin-Bereichs pingbacked
  29. Carols Vault » Blog Archive » WP Tiger Admin - Perfect wordpress admin pingbacked
  30. ATELRED | Atrapadoenlared.com pingbacked

Leave a Comment