Design the interface before you start programming
Too many apps start with a program-first mentality. That’s a bad idea. Programming is the heaviest component of building an app, meaning it’s the most expensive and hardest to change. Instead, start by designing first.
Design is relatively light. A paper sketch is cheap and easy to change. html designs are still relatively simple to modify (or throw out). That’s not true of programming. Designing first keeps you flexible. Programming first fences you in and sets you up for additional costs.
Another reason to design first is that the interface is your product. What people see is what you’re selling. If you just slap an interface on at the end, the gaps will show.
We start with the interface so we can see how the app looks and feels from the beginning. It’s constantly being revised throughout the process. Does it make sense? Is it easy to use? Does it solve the problem at hand? These are questions you can only truly answer when you’re dealing with real screens. Designing first keeps you flexible and gets you to those answers sooner in the process rather than later.
The Orange Pen That Started Blinksale
As soon as I realized my frustration with off-the-shelf invoicing software, I decided to draw out how I would prefer my invoicing solution to work. I pulled out an orange pen, because it was the only thing handy that evening, and had about 75 percent of the UI drawn out within a few hours. I showed it to my wife, Rachel, who was ironing at the time, and asked, “What do you think?” And she replied with a smile, “You need to do this. For real.”
Over the next two weeks I refined the designs, and completely mockedup static html pages for almost the entire first version of what would become Blinksale. We never did any wireframes beyond those orangepen sketches, and getting straight into the html design helped us stay excited about how “real” the project was becoming, even though at the time we really didn’t know what we were getting into.
Once the html mockups were completed, we approached our developer, Scott, with the idea for Blinksale. Having most of the UI designed up front was extremely beneficial on several levels. First, it gave Scott a real vision and excitement for where we were going. It was much more than just an idea, it was real. Second, it helped us accurately gauge how much of Scott’s effort and time it would require to turn the design into a functioning application. When you’re financially bootstrapping a project, the earlier you can predict budget requirements, the better. The UI design became our benchmark for the initial project scope. Finally, the UI design served as a guide to remind us what the application was about as we progressed further into development. As we were tempted to add new features, we couldn’t simply say, “Sure, let’s add that!” We had to go back to the design and ask ourselves where that new feature would go, and if it didn’t have a place, it wouldn’t get added.
—Josh Williams, founder, Blinksale