Wireframing Before Code

Starting a new software project is not an easy task for anyone, specially if you have a great imagination and some coding habilities. Sometimes the process of creating a simple app or utility can become a big and infinite nightmare with endless resources and pending ideas if it is not very well planned.

Among the traditional steps of documentation of a software project I usually like to start with the wireframing step (or sketch as some people like to say), where turns it possible to see how the final product will looks like and also bring some insights about the resources that need to be planned on the tasks. This kind of effort can save a lot of time, believe.


When wireframing the screens of the project is possible to see some options and some limitations that you only would remember when you see the final product. Also, this effort makes the process of filtering bad ideas that seemed to be good on your mind but did’t going well when applied.


There is not a standard way for wireframing, it is just a way to put your ideas and thoughts in a way that you and your coworkers can see what you are thinking to do. Follow some design patterns (mobile-patterns, pttrns) are a good choice if you dont know where to begin.

As wireframing is not a trivial task for me, and I just do it when start a new project, I don’t have a favorite app to do this, instead of that I always make a search on internet an find what is trending. On my past project I found the mockflow web app which is a very complete tool with a lot of resources and also have components that are similar to those used on developing, like: bootstrap, htm5, android, iphone, etc.

Mockflow is a paid app and also have a free version, which is limited by the number of pages that you can add on the wireframe project. For a free version is good enough.