• Immutable Page
• Info
• Attachments
• More Actions: Raw Text Print View Render as Docbook Delete Cache ------------------------ Check Spelling Like Pages Local Site Map ------------------------ Rename Page Delete Page ------------------------ Subscribe User ------------------------ Remove Spam Revert to this revision Package Pages Sync Pages ------------------------ Load Save SlideShow

Designing User Interfaces in Launchpad

When it comes to building User Interfaces in Launchpad, there are a few practices that make the process go faster for everyone involved.

Use light-weight tools for Mockups

There are roughly three types of user interface mockups:

• low fidelity: Pencil and graph paper is common, Balsamiq mockups are awesome

  medium fidelity: Save an existing page, hack the HTML and CSS with Firebug to make it look different

  high fidelity: A full prototype with HTML, CSS and JavaScript

  When it comes to creating a mock-up, use the lightest weight tool possible

You will be going back and forth with the designer many times, perhaps a dozen or more, trying ideas, rearranging information, and integrating your change into the existing page layout. A light-weight mockup takes minutes to create - a typical turnaround between you and the designer is 30 minutes. A medium-fidelity mockup takes a bit longer, perhaps an hour to create, 90 minutes to turn around. A high-fidelity mockup takes hours or days to create: the turnaround is very high (so high that you force the designer to swap back and forth between your design and other work. This is not good for the creative process).

Don't write code first!

The corollary to using light-weight mockup tools is do not write code first. Please, do not start with a high-fidelity mockup using HTML, JavaScript, and CSS. If you do this, it will take days to go through one feedback cycle between yourself and the designer, and the norm is to have a half-dozen such cycles per-feature.

Balsamiq Mockups

One tool that is very nice for doing quick mockups is Balsamiq Mockups. In fact, it can be faster than paper. You can find some sample mockups of the "Related branches" bug page module here.

The team at Balsamiq have graciously provided our Open Source project with a team license. If you would like to use Balsamiq, get in touch with Martin.