How to speed up your design prototyping process in Frontend Development?

Introduction

Designing a world class product requires patience, and a considerable amount of iterations until you reach that almost perfect stage. The design process is a process of finding the best design to attract more users to the service/product by providing an experience the user feels comfortable in. It's not just about providing functionality, but providing the user with easy to comprehend and navigate options. The entire process revolves around the comfort of the end-user. And to achieve that, quite obviously the developers have to iterate over many design prototypes, improving at every stage

What is 'prototyping', you may ask? Well, it is the stage when an idea is translated into a very basic and crude product/service which is perfect in not a single way but is the starting stage. You can say it is more like a foundation stone. So you can get a picture of how important it is. But again, prototyping itself also requires some amount of time. Although nowadays when we've so many options to choose from, e.g, services like Figma and Adobe XD provide really useful prototyping tools. But even those tools cannot beat the speed with which a person can scribble some design using his hand on a piece of paper.

Drawing prototypes on a paper have its perks and limitations. Here is a list of some of the advantages of prototyping using your hands on a paper.

Advantages

• You can draw very quickly using your hands while using some software would require you to switch shape selector tools, coloring tools/ adjusting tool which require too many clicks and drag and drops actions which directly translates to slow prototyping.
• You don't need any licensed software or service which might cost some money. Even the free software does need something in return from you, be it your email address (which they use for sending newsletters/advertisement) or perhaps asking access to your online accounts for the same old advertisement purpose. You know how it goes pretty well. There is no such thing as free lunch in this world.
• No need for any special device/equipment like laptop/desktop/tablet/phone etc. You can start drawing anywhere, and on any surface, say paper, cardboard, paper bags, some cloth, walls, trees, sand on a beach, literally anywhere. This is sarcastic actually. Please only use paper for this. Don't use walls etc. Consequences could be drastic if you have a strict mom/wife.
• There is no learning curve as anyone who is in this domain literally knows how to hold a pen/pencil for drawing. That is all it requires. While using the software would require you to learn the software/ different tools/ settings initially to fully utilize the software to its potential.

While drawing with hands could have advantages, it certainly also has disadvantages, as follows

Disadvantages

• There might be some drawing which could be very difficult to draw using hands which using a software, it could be a cake-walk.
• You can share your digital illustrations easily with different desingers and they would be able to edit the design pretty easily without any hassle while doing the same using a paper prototype drawn on paper would require you to send that paper via post to other designer, and then there is no way the other desinger would be able to edit/alter your designs.
• Designers nowadays have at least one device (even in third-world or developing countries) and hence can use the apps-services on their devices to draw digital illustrations and share that with the world.
• In geologically spread out teams(where some designers are in one geo-location and developers/programmers are in some other geo-location), using digital illustrations is the only way to work. Drawings by hand is not an option at all.

So now that you know when and where you use which strategy, there is still one key problem which is solved in this blog post. The problem is, in using your hands, you need to draw the outer container again and again and again which is kind of repetitive and there is a better way to do that.

Practical Solution

Instead of drawing the outer contour of the Web-browser/mobile phone etc with your hand, you can simply use some kind of stamp which is very cheap, reusable, and is small/light enough to carry around. The obvious answer is to 3D print a stamp with the outer contour of a web-browser/ Mobile phone or even a tablet. You can simply download the 3D object files from the internet, scale it to your preference and print it. The stamps would be small and light enough that you can carry them even in your pockets while traveling on a bus/train etc.

The 3D printed stamps also solves the problem of drawing the contour of same size again and again. So you can simply draw your Front-end designs on the go.

Conclusion

Having talked about different aspects, how exactly should one process then, in order to speed up the prototyping phase? The answer to this is conditional. When you are having a brain-storming session with your manager/supervisor, you can use this technique to quickly show him/her a couple of designs instantly even during coffee breaks. But after you've decided what exactly you have to design and how, then you should make your rough wireframes in software like Adobe XD or Figma or any other prototyping software of your choice. Selecting the right tool depends on the situation and circumstances. A kitchen knife could be an excellent tool for cutting vegetables but is not an optimized tool for cutting trees in forests. For that, we've electric tree cutters. I hope this makes it clear how one can speed up the prototyping phase.

---

Feel free to write your opinions, questions or any errors you may have come across while reading this blog in the comments section below.

You can use the contact form as well.