The hype for web apps, whether done in Ruby on Rails, CodeIgniter,Laravel, Node.JS,Backbone.JS or any other back-end framework, is rising more and more since the start of this year, and freelancers want to profit by this. Someone who already has some experience in one of these frameworks will not find it too difficult to create a web application. Anyway, you still need to come up with a good plan (We are software engineers at the same time, remember?). Today, let me show you the steps to take when designing new web applications. The reason i started this article was that, like the following quote, “Been there, done that”, i had many pitfalls while planning and i don’t want you guys to go through the same problems when designing your web applications.

So here’s a list of things to take care of:

1 – Design the User Interface First

When you start with the outside look of the Website, such as how to have the registration process, ideas will pop in your mind, for example: “I can submit this form using Ajax, and return the success message, then display this error based on the returned message”, which will aid you in developing the back-end. Things like latest posts, single post etc. will make you think of ways to extract these amounts of data from the model. Log-in functionality, you may want to put it in the top, so you’ll want to use Ajax with Sessions. So design the UI first, and whatever pops in your mind, write them down. This will be your specification.

2 – Get into the details

Even the most abstract loving big picture person will want to lay out specific details so he can move out of the picture the trivial problems that may arise during the development time. It feels nice when you have the solution for the specific problems in the back of your mind. You will be able to concentrate on the more important parts of the project, while having the functionality stuff already done written on a piece of paper.

3 – Play Around

After having the details for functionality and user interface already decided, you will want to test the functionality that you thought out following what i wrote in the second phase of this article. Open your editor, write the code snippets, and resolve the errors that might arise in your designs one error at a time. Save these snippets somewhere and move on to the writing part.

4 – Go Nuts

Done! Now start writing your application starting from the business model logic. Write functions for getting specific data from the tables (See our Database Design article for ideas on how to plan out the database structure), and start writing that application! You will notice a flow in the process as you have already solved the few problems that could arise. Move on to the controllers (Never design an application without following procedures such as the Model/View/Controller).

See you around for more information about web design and development!