Website / App Prototyping

It takes a stretch of days at a time to get the coding and programming in place for your web app and if something goes wrong in the process, it hurts to start it all over again. At times when you haven't checked and rechecked your app beforehand, you may come to find out that in the middle of the creation process that the idea you had isn't going to work or the budget for your project is not big enough. This harsh realization can really spoil things. This is the reason why prototyping is a good idea, and can become pivotal for our work as developers. Let's dive into this concepts and really understand prototyping and user testing, and the steps involved in this, in a more detailed manner. 9B5TYBRAVU49


Prototyping means creating a sample model of an app, which will form the base of how your app is going to look and function. Below we outline the steps which will help you go about it.

1. Brainstorm

Work Smart: Brainstorming Techniques to Boost Creativity

The first thing you need to do to start the prototyping process (and one of the most important parts) is get to brainstorming! When you are working on a new idea, gathering inputs from different sources is a great way to not stereotype your app with the tunnel vision that can sometimes come from one point of view. Having a session with developers who have ample knowledge and some experience about interfaces, will surely help you create a good base to start from. With the ideas you gained during the brainstorming session, start making wireframes of the screens and focus more on the important screens that will be used the most rather than screens you know just need to be there (as creating a frame for every imaginable screen is not productive – you can build them once the project is working!). Usually, the same frame can be used for different screens as functions are similar, and if not you can probably modify it to fit (and save some time) in early prototype wireframing.

2. Prioritize

Paper Prototyping As A Usability Testing Technique

Now is the time to prioritize screens – using a pen and paper you can list out all the features or the components it is going to have in the end product. Listing the visual elements such as graphs, menus, texts, buttons and other components like warning messages, default and others is the next step. Do not forget to incorporate the most important screen elements like the logo, search box and others. After listing them, prioritize from the most important to the least important and conclude with a common pattern.

3. Mockups, Wireframes and Prototyping

Wireframing, Prototyping, Mockuping – What’s the Difference?

This is the step where you have to focus on how the app is going to look, create multiple interfaces, and perform the trial and error method to shortlist a few of the most interesting features, keeping the best ones and getting rid of what doesn’t work. This is the time when you might face glitches and problems but this is the most important part as now you would be able to solve these problems right now and reduce future issues that would give you a headache later when actual users are on it. Now is the time to gather all of the pieces of what you have done so far and stick the puzzle together. Here we are talking about the way the screens will work and what the interaction will be like among the elements on the them. For a better execution you can also use apps like Google Docs Drawing, Keynote and other similar programs. Once this is done you have to focus on the last step which is prototyping so that your app can be tested by users. Fireworks or Photoshop can be used for this step as now you have to create a flat prototype image and the interactivity can be manual. You can then export slices as HTML to create basic functionality with some simple hand coding. Then of course, rinse and repeat as necessary. Once your app is coded out and looking how you want it to look – Your app is now ready for user testing!