Drupal.org – come wireframe with me!

There is a design game that I like to play when I’m working face to face with my client (and when there aren’t thousands of stakeholders!) which involves everyone on the project sitting down together and individually sketching up some wireframes that then get shared back into the group.

Aside from being good fun, it is also a really great way to uncover good ideas, common themes, and a whole raft of information and assumptions that haven’t yet surfaced in the project but that are important to us getting the design and information architecture right.

I don’t see why we should let our ‘virtual workspace’ stop us from playing this game, so, let’s do it. Let’s do some wireframing together!

Here’s what I want you to do:

  1. pick a page on Drupal.org – it could be the homepage, it could be your profile page, it could be a project page, it could be a page that doesn’t exist that you think *should* exist – just pick one that is important to you.
  2. have a go at sketching out what you think might go on that page. What are the content and functional elements, and which ones are the most important.
  3. post the page somewhere – if you’re using Flickr, you can post it to our Flickr Group, or perhaps you want to post it on your blog and put a link to your post in the comments here, or you can email it to me if you like and I’ll post it – whatever you prefer. You might want to add some notes as to why you’ve approached the page the way that you have or, if you’re like me, to decipher your handwriting.

You can use whatever you like to wireframe – I tend to use pen and paper to start with or sticky notes. Then I’ll use Omnigraffle a little later. You might prefer to sketch in code. Whatever works for you. As you can see from the example I’ve posted above, early wireframes are usually pretty rough (mine disintegrated into a list at the bottom!) and not so pretty. This is fine. It’s not about how they look or even whether they’re right. It’s about getting ideas down on paper – to paraphrase the old saying – a wireframe is worth a thousand words.

Don’t spend too long on it – try to spend no more than a few minutes on a wireframe. If you’re not happy with it (and you probably won’t be at first!) just put it to one side and start fresh. You don’t want to labour over them too much at this stage.

Don’t think you have to be a designer or a UX person to participate in this exercise – this is all hands on deck. Even if you’re not an experienced Drupal user and you were flummoxed by your experience of Drupal.org – what did you *want* to find on the homepage?

I know there have been lots of discussions over the years about various parts of Drupal.org – let’s roll up our sleeves and get stuck in! Yay!

29 Responses to “Drupal.org – come wireframe with me!”

  1. roy September 11, 2008 at 1:57 pm #

    Dang, no inline images here.

    http://img.skitch.com/20080911-8f3kgumy3rtk1gtdh3yxnujq3q.jpg is a sketch for a working groups homepage on g.d.o/usability

  2. roy September 11, 2008 at 2:02 pm #

    Also, from the d.o. redesign archives:

    mockup: developer.drupal.org:
    http://groups.drupal.org/node/3777

    Possible IA redesign mockup
    http://groups.drupal.org/node/3769

    Mockup for ‘handbooks’ landing page:
    http://groups.drupal.org/node/6568#comment-20287

  3. roy September 11, 2008 at 2:04 pm #

    Oh, and this is a nice case study of the redesign of expression engine.com. Lots of wireframes there as well:
    http://www.digital-web.com/articles/redesigning_the_expressionengine_site/

  4. Joshua Porter September 11, 2008 at 2:05 pm #

    crowd-sourcing interface design…brilliant!

  5. David Malouf September 11, 2008 at 2:08 pm #

    I’m just loving this idea! Brilliant. I’m w/ Josh. what a great way to bring design to this process.

  6. Alan Pritt September 11, 2008 at 2:19 pm #

    Another from the archives. I’d reconsider some of this now, but I think there are some solid thoughts here. This is for the project pages.

    http://groups.drupal.org/node/6186#comment-19163

  7. Jorge Arango September 11, 2008 at 2:24 pm #

    This is a brilliant idea, especially for an open source project. Thanks for sharing!

  8. Matthew Pennell September 11, 2008 at 3:11 pm #

    My two minute effort, via iPhone so apologies for the size:

    http://www.flickr.com/photos/thewatchmakerproject/2847707897/

  9. Anthony September 11, 2008 at 3:12 pm #

    I’ve just dropped one into the Drupal redesign pool… this is a top idea that I will have to remember in the coming few months!

  10. Bridget Stewart September 11, 2008 at 5:13 pm #

    Not a wireframe so much as a design idea:

    Since drupal.org is so massive, so huge, so overwhelming — how about allowing the home page to be “widgetized”? I think a user customizable layout would allow folks coming from their various perspectives/agendas to view a site landing page with what most suits their needs. (think iGoogle-esque, without being a complete copycat)

    I think such a plan should also include the “big ass footer” idea (already posted on the flickr group) that serves much like a site map for all the elements of drupal.org– should their needs change or their interests branch out into other areas.

    This way, the users choose which content is served up to them, in the format that best fits their needs — while keeping them connected to all the other content, so that they don’t remain “outsiders” to other avenues within drupal.org.

  11. Kristjan Jansen September 11, 2008 at 7:07 pm #

    Two ideas + screenshots from 1.5 years ago:

    http://kika.trip.ee/node/298
    http://kika.trip.ee/node/302

  12. roy September 12, 2008 at 1:10 pm #

    http://www.flickr.com/photos/yoroy/2850827704/

    The homepage is in many ways the least of our worries, but I couldn’t resist. Trying to map the ux strategy on it: Welcome, join us and kick ass with Drupal

  13. Kieran Lal September 12, 2008 at 4:44 pm #

    http://flickr.com/photos/23181861@N08/2850364735/in/pool-drupalredesign

    Mock-up by Roy after a few iterations with others. Forums will be changed to Help in the next mock-up.

  14. Chris Charlton September 12, 2008 at 5:38 pm #

    I really dig the bits I found on here. :D

    • pareen July 24, 2009 at 3:10 pm #

      I think it should be on this lines. This wireframe is what will NOT scare away beginners.

      It looks like 37Signals’ site for their new app: clear and simple.

  15. Andy Budd September 16, 2008 at 12:24 am #

    @Joshua Porter Brilliant or insane, I can’t quite tell which yet :)

  16. Derek Wright (dww) September 16, 2008 at 9:47 pm #

    There are some interesting mockups of what project pages could look like along with a collection of links to issues regarding the project UI over at http://groups.drupal.org/node/6186. A must-read for the redesigners. ;)

  17. roy September 17, 2008 at 10:06 am #

    More of a meta-wireframe, showing the kinds of templates we need to unlock our content.

    http://www.flickr.com/photos/yoroy/2865140008/in/pool-drupalredesign

  18. emmajane September 18, 2008 at 8:22 pm #

    I’m a little late to the game, but here we go… http://www.flickr.com/photos/emmajane/tags/wireframinggame/

  19. Kyle Else September 19, 2008 at 10:02 am #

    Our CDMUG has been using ‘virtual user group space’ at meetups… virtually on IRC /server irc.freenode.net /j #cdmug during sessions… this helps when the weather gets windy and members can’t make the CDMUG.

  20. Hilde Austlid (zirvap) September 19, 2008 at 5:28 pm #

    I’ve posted a wireframe for a handbook page at http://groups.drupal.org/node/14928#comment-50539

  21. Claudio Luis Vera September 24, 2008 at 10:49 pm #

    Thanks for having the courage to share your work-in-progress with all of us. Your team is *spot on* with its approach. Our firm has been wrestling with many of your same issues over and over, to the point that some of these patterns are part of the theory we use in designing sites. If not to validate your thinking, here’s what we’ve learned:

    network/portal header – Great idea! We call it a “universal nav” which we use as a valuable strip of real estate at the top to move you around a large site’s different properties. It’s also a good location to let a user log in and log out, and you can use color to reflect this state.

    logged in vs. not logged in: you’ve got great approach, because these really are different pages for different audiences. One version should tout the benefits of joining and have very general information for those not familiar with Drupal. The logged-in version should have personalized content and be customizable to a power user.

    home page vs. portal: Different people will want to see different information, and you may even want to have separate pages for drupal.com (what a newbie would try first) and a link-packed portal page for a power user. Simplicity is great for a first-time brand experience, but lists of links are great time-savers once you know your way around. Personally, I’d keep a portal page in the spec that’s close in structure to the current d.o home page, and maybe give it the URL of my.drupal.org.

    Design site on drupal.org? Design and UI are such loaded issues that you should consider having a home for them on the d.o. site — but also keep a separate site where they can take center stage. “Design” and “usability” can mean _such_ different things to different people, especially when you’re trying to mix developers with the tech-shy creatives that Drupal would like to embrace.

    The creative community has such different values and speaks such a different language that it should have a targeted area separate from the community to court it. On the other hand, there is a huge need for a whole tree of Design and UI forums within drupal.org to address the needs of usability and user experience. That need is far too important to leave to a redesigned thread on g.d.o.

  22. Jon Williams November 17, 2008 at 9:23 pm #

    Nice information. Thank you.

  23. Jon Williams November 17, 2008 at 9:24 pm #

    I need to use wireframes more often. Cheers.

  24. hobi June 15, 2009 at 11:05 am #

    Hello Leisa Reichelt ,

    As I have heard, Drupal 6.12 and 5.18 released somehow I found your link.

    Thank you very much for your explanation,

    Best regards,

Trackbacks/Pingbacks:

  1. disambiguity - » Drupal.org - What we learned from the Community Wireframing Project - September 30, 2008

    [...] thought you might be interested to know a little about what we did with all the wireframes people submitted for the Drupal Redesign [...]

In case you pick the online casino gambling, you do not need to take travels to casinos. | wordpress themes premium | Ubiquinol is better than coq10 for statin takers