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.
After sketching, I always jump straight to markup.
Here’s how the design looks without any styles:
And a little CSS closes the gap to finish the 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.