Go from brainstorm to sketches to HTML to coding
Here’s the process we use to Get Real:
Brainstorm
Come up with ideas. What is this product going to do? For Basecamp, we looked at our own needs. We wanted to post project updates. We wanted clients to participate. We knew that projects had milestones. We wanted to centralize archives so people could easily review old stuff. We wanted to have a big-picture, bird’s-eye view of what’s going on with all our projects. Together, those assumptions, and a few others, served as our foundation.
This stage is not about nitty gritty details. This is about big questions. What does the app need to do? How will we know when it’s useful? What exactly are we going to make? This is about high level ideas, not pixel-level discussions. At this stage, those kinds of details just aren’t meaningful.
Paper sketches
Sketches are quick, dirty, and cheap and that’s exactly how you want to start out. Draw stuff. Scrawl stuff. Boxes, circles, lines. Get your ideas out of your head and onto paper. The goal at this point should be to convert concepts into rough interface designs. This step is all about experimentation. There are no wrong answers.
Create HTML screens
Make an html version of that feature (or section or flow, if it’s more appropriate). Get something real posted so everyone can see what it looks like on screen.
For Basecamp, we first did the “post a message” screen, then the “edit a message” screen, and it went on from there.
Don’t write any programming code yet. Just build a mock-up in html and css. Implementation comes later.
Code it
When the mock-up looks good and demonstrates enough of the necessary functionality, go ahead and plug in the programming code.
During this whole process remember to stay flexible and expect multiple iterations. You should feel free to throw away the deliverable of any particular step and start again if it turns out crappy. It’s natural to go through this cycle multiple times.