Introduction

As developers, once we have an idea, we generally love to start cranking out code. However, this is almost always a bad idea. Whenever I have done this, I have realised that I would have done better, had I started with some basic wireframing and design.

Just the act of thinking about how our product should look, forces us to think of how our users will interact with the product. It also forces us to slow down and rethink what we want to acheive. Sometimes you will realize that something you had not even tought of might be critical for a user, and at times you might realize that the prized feature you have been thinking of, is really not all that great. Such insights are very important, and you would rather have them early than late.

A wireframe also gives you a point of communication with either your customers or peers. I am a firm believer in early feedback, and a wireframe is the earliest feedback you can get on what you are trying to build, even before you start building it.

In this section, you will make wireframes of the web application you want to build. Remember, you are not making a detailed design of what you are building. You are simply making a rough design of the most important screens, the elements, they will contain and the flow a user will go through as they navigate through your application.

Try not to get too much caught up in details right now. Use wierframing as a tool to get usability and design insights into what you intend to build, and a blueprint to guide you as you go about developing your software.

I have listed a few articles about creating wireframes and mockups. Different people like to use different tools for creating mockups. However, the simples tool is a paper and pencil. You can simply draw the screens that you want to make. You can scan and upload your drawings if you want to share them with others. Having said that, there are indeed some tools which will make your life easier. Some are free, whereas some are paid. For your convinience I have also listed a few tools which you may choose to use.

Articles describing best practices for creating mockups:

• The benefits of wireframing a design


• Wireframing with patterns

Tools for creating mockups

• Wireframe sketcher


• Moqups


• Balsamiq


• Mockflow


• Serena prototype composer


• ForeUI