So progress is happening on Design Hub! Robby from Isotope 11 continues to work on the prototype, Colin Zwiebel has been working on setting up infrastructure, and I’ve been hacking on the CSS in any spare time I can scrounge up.

(What’s Design Hub? It’s one of the ideas we talked about at the GNOME UX Hackfest in London last month as a way for us designers to collaborate better! Read more about it in my initial blog post about it, at the GNOME Hackfest writeup about it, and at a follow-up mockup post about it.)

I’ve spent the past couple evenings changing the CSS I had started on to use 960.gs, which Ian Weller had pointed out to me some time ago. I’ve actually been using the Inkscape templates that the 960.gs project has made available for some time since then (for example, the www.fedoraproject.org redesign mockups were made using the 960.gs Inkscape templates.) I never made the leap to actually use the 960.gs CSS itself until now, though, and I’m happy to report that it’s a breeze.

Here’s a screenshot of how far I got tonight before deciding to work on this status report on the project; my mailing list post from tonight has a little more info on it:

Now, Colin Zwiebel has been rocking by getting this project hooked up with some infrastructure in addition to the git repo and bug tracking system Robby and Josh have set up. I did move the wiki page to live.gnome.org; we’re using a Yahoo! group for the mailing list for now. Here’s all the details, because a lot of folks have expressed interest in the project and I want to make sure everyone’s aware we’re all set up for business now:

• Mailing list:design-hub-project@yahoogroups.com
• Wiki page:http://live.gnome.org/UsabilityProject/Whiteboard/DesignHub (this has changed recently)
• git repo / source control: http://github.com/rclements/Fedora-Design-Collab
• Bug tracking: http://www.pivotaltracker.com/projects/58508# (ask for access on the mailing list!)

So please, drop a note to the mailing list if you’d like to get involved!

I put this together for Robby from Isotope11, who has been rocking out on implementing a prototype of the application. (I saw a preliminary prototype last week and was really impressed with the progress! I’m hoping to carve out some time to CSS-ify it soon.) Josh has been doing a great job making sure the project keeps moving forward also, so I’m pretty pumped. (I have the usual post-hackfest ‘shiny-ponies-flying-in-the-air-oh-I-want-them-all’ distractability lately so Josh’s patience & focus has been very helpful.)

Here’s the other screens that need to be mocked up:

• Mockup #1: the first mockup, the details page for a single proposal
• Mockup #2: The same as the project details mockup shown here, but in the mode where the project has been finished and the proposal that ended up getting used is highlighted.
• Mockup #3: A listing of all the projects going on right now. Maybe link to an archive of old ones. Each project should have a little preview of the activity going on ‘new proposal posted yesterday by jambalaya joe’ etc. Deadlines and status should be shown too.
• Mockup #4: submit a new proposal page
• Mockup #5: submit new project page</li

The Isotope11 folks I think need mockups quicker than I am going to be able to produce them. If you’ve any ideas or inclination to sketch out mockups for any of the above (or if you have ideas for other screens or want to revise the suggestions here) please have at it. The latest inkscape source SVGZ that includes the source for both the first mockup – the proposal details page and this latest mockup is available here:

Mockups Source SVGZ

I know at least four of you (hi pcon, Arkanis, Yannik, and Colin Z.! ) besides the folks at Isotope11 have expressed interest in helping out on the implementation of this project. I believe there is or will be a public git repo for it – the project is open source but we haven't really talked too much about sharing the code yet, I'll keep you posted.

Anyway, please drop a comment to let me know what you think about this latest mockup.

One of the topics Garrett made sure to bring up at the GNOME London UX Hackfest was how us designers could continue to collaborate after the hackfest was over. This has been a recurring issue, as us designers meet every year or so, at GUADEC, at UX hackfests, or at GNOME Boston Summits (or even other FLOSS events like LinuxTag) and we get some great collaborate work done during the events – but it peters off after we get settled in back home after the events.

On Friday morning Hylke, Garrett, jimmac, and myself had a discussion with the developers in the room to explain the kinds of FLOSS tools we felt we’d need to be able to collaborate on designs more effectively when we’re remote from each other. This broke down into two main sets of needs:

Challenge A: Designer <=> Designer collaboration tools

Jimmac, Garrett, and Hylke have been using DropBox as a method of sharing design work (SVGs, PNGs for icons and UI mockups) for a whlie now. It’s been a quite effective tool for them to use, but as they pointed out, it is not open source and they would prefer to use a FLOSS tool.

Here’s a little bit on how the Dropbox workflow works:

• A designer gets an invite to Dropbox.com from another designer, granting both of them an extra 250MB on top of the standard 2GB allowance.
• The designer signs up for a Dropbox account at Dropbox.com .
• The designer installs the Dropbox client for Linux. It functions as a sort of plug-in to Nautilus – it puts a folder called ‘Dropbox’ in your home directory (you have to option to place it anywhere you like under your home) and it also has a little applet that sits in your notification area – when other folks upload files to a shared folder it lets you know there are updates.
• Say the designer is working on a totally awesome GNOME mockup in Inkscape – if they save it out to one of the folders in their Dropbox folder, anyone subscribed to that folder will instantly get a copy of it! No extra work needed on the designer’s part – no need to upload it, get a link, send out the link, wait for other designers to comment on it – it automatically gives a copy to any subscribed designers and notifies them that it’s available.
• Dropbox lets you view a log of all the changes in your shared folders and who is doing what – so it’s easy to follow along on what your fellow designers are up to, and to strike up a conversation on what another designer is working on. Without this kind of event logging system, it’s hard for designers to know what the other designers are working on which leads to less opportunity to strike up a conversation or give/receive quick design feedback.
• Dropbox also lets you manage who can read/write files in your shared folders.
• Shared folders take away from your 2GB+ limit. You can earn more space in your dropbox by sending invitations and if you join via invitation, but there is an upper bound to the amount of space you can be awarded.
• You do not have to accept invitations. You can reject them, which you might want to do to make sure you still have space left for your projects.
• Dropbox has built-in version control, and (if we understand correctly) the backed-up / previous versions do not deduct from your Dropbox account space usage.
• We’re not sure if, when you unsubscribe from a folder, if you can ever unsubscribe?
• Dropbox doesn’t resolve conflicts. Instead, it makes copies of folders. This gets a little annoying when you have a file system involved that doesn’t understand the difference between UPPERCASE and uppercase.
• Dropbox is smart in that if you delete all of the contents of a folder you are subscribed to, it does not delete the contents but instead treats your action as an unsubscribe action. So you won’t erase the whole folder for everyone else when it was clear you meant to unsubscribe.
• If you copy a file to a specific folder under your Dropbox folder, you can generate a URL to give to people who do not have Dropbox accounts so you are able to share it with them.

Dropbox Screenshots

It goes without saying – we would love such a system to be available under a free and open source license! Bastien Nocera and Rob Taylor had a discussion about how this might be achieved in FLOSS and seemed to have some feasible ideas. I’m not sure whether they settled on git or wizbit, or even something else – although those were a couple of possibilities that came up during the discussion, and the codename ‘sparkle-pony’ was mentioned…

Anyhow, such a tool would make it much easier for us designers to collaborate in terms of being aware of what the other designers are working on, easily obtaining source files for mockups, and being able to share our own work without any extra time and effort stacked on top of our usual workflow.

So that’s where our discussion went with regards to designer-designer collaboration.

Challenge B: Designer <=> Developer collaboration tools

We also talked pretty briefly on a potential web application that these mockups/files could automagically (remember, we’re talking ponies here) be posted to it with an inline comment-system for providing mockup feedback. One cool idea – if I send a link to my mockup’s page in IRC, a bot sitting in a GNOME IRC channel will see the link and associate any comments about it automatically with that mockup and post the feedback from the IRC user right into the mockup’s page in the web app!

Anyone would be able to view these mockup pages in the application, meaning it’s easy to send a link to a developer to get his feedback (which he could provide in the comments field) and and you post revisions to the mockups it would maintain the ‘family tree’ of the mockup so you can go back and refer to previous versions if needed, but it’s also clear to the developer which mockup is the latest.

I had posted a very rough idea of such a webapp to my blog a few days ago, and Robby & Josh from Isotope 11 have been working on a prototype of it.

On top of this, of course, it would be awesome if Canonical open-source the Use-case mapper John Lea presented last Tuesday so then individual mockups could be linked together in a chronological path so you can get a good feel for how the user’s path through the interface would look.

Other ideas that came up:

• Flickr-style ‘notes’ on top of mockups so people can give feedback on specific areas within the mockup image.
• Similar to the flickr-style ‘notes’, allow for areas within the flat mockup image to be drawn out so you can click them to visit the next mockup. (E.g., so I can draw a box over the ‘next’ button in the mockup and make it go to the page for the mockup of the next screen.)

Raw Notes

Here are the raw notes I took down from some brainstorming Garrett and I did on the topic throughout the hackfest. Also below find the whiteboard from the designers-ask-for-a-pony session on Friday morning:

• Communicate
  • We should share IM usernames – Jabber or AIM
  • IRC channel – #gnome-design
• Tools
  • file dumps (dropbox?)
  • synching (would be nice nautilus feature, to web space hosted anywhere)
  • version-control (could be built-in with client-side git, even if you don’t have access to sersion control server-side)
  • sharing / publishing
  • sharing work with developers
• share mockups
• talk about mockups
  • threaded discussions?
  • comments
  • mailing lists / email == fail, too difficult to keep up with
  • chat – too ephemeral
  • blogs – too much time/effort to post – don’t end up doing as often as you want. Better if stuff is built-in / automatic so it’s not extra work
• Remote whiteboarding == would be a total win. Coccinella – kind of buggy though
• Need to manage sources – eg SVGs – alongside exported mocks
• notification of what the other designers have been up to
• need a nice on-boarding process for folks less familiar with FLOSS / less-willing to deal with quirks
• shared designer complaint list / shared workarounds. If we back each others’ complaints about our tools up, we’re a louder voice and maybe can have more influence over bug fixes that would support a designer workflow (e.g. we would all support each other’s bugs against say Inkscape if we ran into them as well, and share the workarounds/solutions to get the job donein the meantime.)
• sanity-check my design tool – quick feedback tool – operate based on broadcast – eg. ‘anybody have time to give me a quick sanity check on http://url?&#8217;
  • maybe an identi.ca / twitter group would help serve this purpose?
  • website like pleasecritiqueme.com?
• UI path tracing through mockups (e.g. like Canonical use-case mapping tool)
• Maybe setup a photoblog using zenphoto and/or word press for quick critique mockup feedback?
• Sharing with other FLOSS designers – KDE designers or designers who work on particular apps…

P.S. You can now view all my GNOME UX Hackfest posts at my GNOME UX Hackfest blog category page.

Inkscape source – please feel free to download and work it.

Maybe this goes nowhere (except to prove I really ought to find something better to do with my Friday nights…. )