Hacker News new | ask | show | jobs
by pan69 4840 days ago
I have been using an extra step what I'd to call "Interactive wire frames". The entire process goes something like this:

1) Write down in a few paragraphs the objective of your project. what it is you want to do and what this project needs to achieve. If you work for a client, discuss this text with your client until you're both happy about it. It's this text that's going to define the scope of your project.

2) Set up a requirements and scope document. This document will describes in greater detail what you discussed in the document at step 1 and it's this document that will become your official Scope of Work document. If you have a client, discuss this document with your client and get sign off.

3) Based on the requirements and scope I create wire frames using Balsamiq. If you have a client then discuss the wire frames with your client and get sign of before moving on.

4) Based on the wire frames I now create "Interactive wire frames" using Bootstrap. I basically recreate the Balsamiq wire frames in Bootstrap. This allows you and your client to click through it. The difference between a paper wire frame and an interactive one is that the interactive wire frame will bring out issues early on. Again, if you have a client get sign off.

5) Build. Uh? That's right. At this point I build as much of the core functionality as possible and I use the interactive wire frames for the front end of it. This allows me to fine tune the functionality and to test if all the objectives are met. Discuss with your client whenever you have something significant to demonstrate.

6) Design. Often design can be started during step 5. Very important here, discuss the designs with your client (if you have one) and get sign off.

7) Implement designs and cross browser test. Again, with a client, get sign off.

1 comments

That's interesting. To me it seems like a long process, but if you can't afford mistakes and need the client's approval it may make sense.

Thanks for sharing!