A sketch to screen case study 24 Feb 2006
50 comments Latest by raghavendra
We’re giving Basecamp some love these days and I’m working on the Files section. The current Files tab has a long, full-page “Upload a file” screen, and it’s just overkill. I thought I’d share the process of redesigning the “Upload a file” screen as a small dialog.
Step one: Make a mental list of the must-haves
You have to know what you’re designing. I looked at the current ‘Upload a file’ screen and decided these things must stay:
- The ‘Choose file’ widget
- An optional description
- The privacy checkbox
- Email notification
These things can go:
- The long explanatory text
- Labeling a file
And finally, we’re adding a new feature: Categories.
This process was completely mental and took all of two minutes. Writing these facts down is a waste of time. But you should think about it.
Step two: Sketch a layout on paper
Approaching the sketch, I had a couple concerns. First, I was unhappy about all the metadata (description, privacy, categories, etc). But I knew we needed it. So I decided to make sure the single “Choose a file” widget was far more prominent than the other options. I also knew the Notification block requires a lot of width (the Notification block is already shared by a few screens in Basecamp). With these two things in mind, I made the sketch.
Here’s the most important thing about paper sketches: If they aren’t borderline indecipherable to anyone who wasn’t present while they were drawn, you wasted your time. As long as you know what the elements mean, that’s enough. You’ll be making the real screen in five minutes anyway.
The sketch includes the must-haves and satisfies my two concerns. The Choose File widget is inside a box. The box was shorthand for the full idea: I’ll highlight the widget by using a different background color and a border. The Notification is full width on the bottom. That left space on the right of the Choose File box for smaller options, and I tossed the description in the middle. Done.
Step three: Make the screen
The screen mostly followed the sketch, except for the controls in the upper right and the description field. That’s fine, because at step two those details Didn’t Matter. Coding the real thing, I found room for all three of those pieces in the top-right, and that worked better.
Thinking and sketching took me 10 minutes. Creating the real screen and updating the code can take two or three hours. That lopsided pattern, with short make-believe-time on the left and long build-time on the right, is always a good sign that you’re making progress. Ideas and paper are necessary, but they’re destined for the trash bin. So burn through them and focus on the good stuff.