Prototyping Experiments in Real World

Designers and especially beginners are required to keep in mind that picture that you are designing and how it will work isn't the same. For web designs it is more comfortable, you should just change the scale to 100% in a design application, and you'll get approximately the same view. But a design for mobile makes some headache. Upon time ago before InVision and other prototyping tools, it was very challenging. For example, I hated to copy png images on smartphone and to try to imagine that it is the real interface and wants to feel it. I all the time was making sketches on paper in the actual size of a phone, but it was not even close. I considered that solution was somewhere between sketches by pen and ready to use UI kits.
So when Google presented his Material design guidelines, I was more than excited. It was a huge step forward in global design vision. And his clear separation by components and idea that virtual things feel and look like real moved me to the idea to create some tool for prototyping using his elements like LEGO.

‍
So I started looking for a solution about how to move it to the real world and make useful in prototyping. An idea to use thick paper was not cool because having in your hand a few layers of small details from paper doesn't give you "real" feeling. The solution having all the pieces together was evident. I just used the magnet. Yes, like beautiful pictures on your fridge. So, I just ordered the smallest tube of 0,5mm magnet sheet, upload free Material UI Kit, and prepared it for print. And in a few weeks, I had ready the first prototype.

‍
It was looking beautiful. Details have not as real, but literally the realistic shadow. And all of this was possible to take together without fear that this will felt down, and you'll spend next half an hour just to craft it back.

‍

‍

But honestly there were few issues:
1. It wasn't very flexible. Material design elements hierarchy cover a lot of cases. But anyway very often you should change the size of items, merge some of them, or change subelements. It doesn't matter on the prototyping stage but makes some discomfort.
2. There were too many details. Maybe if I had some system for sorting all items, it would be easier. In my case, find a required small icon in a mess from 180 details was very challenging.
3. Few layers of the magnet were working not correctly because of different polarisation.

‍
So, in some time, I stop using it, but an idea of real prototypes keep living in my head.

‍
Few years after this I was playing a lot with UI kits and have done a lot of freelance projects of one-page sites. Wireframes and flowcharts kits were becoming popular, and I felt that this generic structure would be fit correctly for some offline prototyping tool.
To make it maximum flexible, I decided to focus on flowcharts of simple sites to use on a whiteboard. It would be an excellent solution to discuss the general structure for a team without drawing by a pen.

‍
So after new delivery of magnet rolls and designing my own flowcharts, I got something like this:

‍

Again I was not very satisfied with this solution, but anyway, 38 elements were the excellent compromise between flexibility and efficiency of use.
Honestly, I was event count cost of such packages with the idea to sell it as the tool for prototyping. But I was moving to another country and didn't have enough time and desire to working on it further.

‍
As take away, I'll share flow on how to craft such a tool:
1. Order magnet roll
2. Download UI kit or design own details.
3. Prepare files for print
4. Print it on sticky paper
5. Stick this paper on the magnet surface
6. Cut everything with scissors and knives.
At the first time, I made everything myself, and it was not high quality. The second time I found the print company that print, glued and cut everything, so I had just design flowcharts and prepared it for print. The result was definitely better.

‍
So anyway it is not rocket science, and you can find and improve your own flow, and I'll be glad to help. Just drop my message on Twitter or by email.

‍

Also, I decided to share my flowcharts for free. You can download it here.