Prototyping Experiments in Real World
This article was originally published on my personal website.
For designers and especially beginners is required to keep in mind that picture that you are designing and how it will working is not the same. For web designs it is easier, 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 almost crying from happiness. It was huge step forward in global design vision. And his clear separation by components and idea that virtual things feel and looks like real move me to the idea to create some tool for prototyping using his elements like LEGO.
So I started looking for a solution 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 few layers of small details from paper doesn’t give you “real” feeling. Solution to have all 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 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 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 for using on white board. It would be the great solution to discuss the general structure for a team without drawing by a pen.
So after new delivery of magnet rolls and designing own flowcharts I got something like this:
Again I was not very satisfied with this solution, but anyway, 38 elements were the good compromise between flexibility and ease 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 how to craft such 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 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 prepare it for print. The result was definitely better.
So anyway it is not rocket science, and you can find and improve own flow, and I’ll be glad to help. Just drop my message on Twitter or my email.
Also, I decided to share my flowcharts for free. You can download it here.
But notice that it is not the version for print, it is prepared for using online.
Originally posted on vovakurbatov.com