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:
- 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.
- 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.
- 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!
http://img.skitch.com/20080911-1kp86j4r2gx6j2i45ddan8t76s.jpg
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
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
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/
crowd-sourcing interface design…brilliant!
I’m just loving this idea! Brilliant. I’m w/ Josh. what a great way to bring design to this process.
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
This is a brilliant idea, especially for an open source project. Thanks for sharing!
My two minute effort, via iPhone so apologies for the size:
http://www.flickr.com/photos/thewatchmakerproject/2847707897/
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!
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.
Two ideas + screenshots from 1.5 years ago:
http://kika.trip.ee/node/298
http://kika.trip.ee/node/302
http://www.flickr.com/photos/isriya/2320380693/
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
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.
I really dig the bits I found on here. :D
http://farm4.static.flickr.com/3231/2850876565_7da1d25743_o.jpg
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.
@Joshua Porter Brilliant or insane, I can’t quite tell which yet :)
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. ;)
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
I’m a little late to the game, but here we go… http://www.flickr.com/photos/emmajane/tags/wireframinggame/
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.
I’ve posted a wireframe for a handbook page at http://groups.drupal.org/node/14928#comment-50539
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.
[…] thought you might be interested to know a little about what we did with all the wireframes people submitted for the Drupal Redesign […]
Nice information. Thank you.
I need to use wireframes more often. Cheers.
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,