In a recent post, I hinted at how much I’ve learned while building a web application over the past year. A huge lesson came when I decided to do the third version of the design myself, which is what I should have done from the very beginning.

Over the last year, I’ve learned enough HTML and CSS in order to build a functional mock up of the application, and working with great people that can check my work ensures that it’s up to snuff.

$14 later

I started by buying an HTML template for $14. There are tons of templates available on the internet. I highly recommend buying an interface template of ready-made styles, buttons, forms, error messages, info messages, etc rather than spending scarce dollars on a custom design.

Custom designs are important, but only after a product has gained enough momentum to ensure its own survival. There’s not much point in devoting thousands of dollars to an early version of a software product’s design unless you need help visualizing it.

I know, because I wasted those thousands of dollars myself. The designers I hired for the first two versions were competent, but my thinking wasn’t clear enough to give them the information they needed. Only by going through the design process myself was I able to clarify my thoughts, get exactly what I wanted, and to fully understand how complex and variable building a web app can be.

So after 14 dollars and a lot of staring at my screen, I had a functional mock up of what I wanted the first release to look and act like. Thankfully, the developers gave it the thumbs up and said, “It’s bloody fantastic”.

Simplicity isn’t easy

A basic version still requires a surprising amount of design. I’m glad I did the third design myself so that I now fully understand how complex a web app can be. (Hint: Ryan Singer’s “What they see, what they do” idea and his “Using Patterns in Web Design” are great places to start.)

I started out by thinking that if I kept the first release really basic, then there wouldn’t be that many screens for me to build. 96 hours later I realized the truth. Even with limited functionality, I still needed 28 screens. All the more reason to start a web app by building almost nothing as a first release.

Although the first version of Sales on Rails is very simple, here’s the screen list:

1. Account sign up, paid
2. Account sign up, free
3. Sign up thank you
4. Login
5. Forgot password
6. No known account error
7. Account settings
8. Cancel account confirmation
9. Generic error
10. 404 not-found error
11. Blank state welcome
12. Blank state dashboard
13. Blank state orders
14. Blank state customers
15. Blank state products
16. Dashboard
17. Orders summary
18. Import orders
19. Import orders field mapping
20. Single order
21. Customers summary
22. Import customers
23. Import customers field mapping
24. Single customer
25. Products summary
26. Import products
27. Import products field mapping
28. Single product

Twenty-eight screens is a lot. I never would have guessed that there’d be that many when I started out. After going through the design process myself, I would say that trying to anticipate each click-path and error state without putting anything on paper is pretty much impossible. Even now with all these screens done, there are still others to do when new features, bug fixes or unanticipated uses come up.

Even if you don’t know — or don’t want to learn — HTML and CSS, if you’re building any type of software, you need to sketch every screen that you think you may need. Only by asking, “What do they see? What can they do?” will you be able to flesh out most of your use cases. Even if it’s just a Sharpie, drawing it out can tell you if you’re on the right track and if you’ve thought of everything that you need to.

• Tweet