Today I started the UI for a new 37signals internal tool called ‘Champagne.’ It’s a central app for announcing changes to our apps so improvements to our products can be displayed in many places: inside the apps, on our marketing sites, and so forth. The epicenter of Champagne is actually on the consuming end, when the changelog data gets displayed within the app at certain times. That’s already designed. Today I started on the second-most-important screen, the “new entry” screen. Here’s a look at the process from sketch to markup to final design. The whole thing took about thirty minutes.

First I sketched a short list of the elements and sketched a layout. There was more detail in my head, but this little sketch was enough to concretize the main idea.

Champagne new entry sketch

After sketching, I always jump straight to markup.

Champagne new entry markup

Here’s how the design looks without any styles:

Champagne new entry design without styles

And a little CSS closes the gap to finish the design:

Final Champagne new entry design

Small projects are so much fun because you can experience all sides of the design process in a very short time. That’s the beauty of microdomains. We’re looking forward to plugging some code into the Champagne screens so we can better share progress on our apps with our customers.