Let me tell you the truth about User Interface.

Whenever someone asks me what I do for a living, I tell them: "I'm a Product  Designer specialised in Design Systems".

And then comes a long silence... I can clearly see the person didn't get a word of what I just said, so most of the time the person will try to break the ice and ask: "Okay! So you're a Designer, and you design some products... like chairs and tables?!"

To what I answer: "Oh no, I build User Interfaces... You know, like websites and apps..."

Now a new moment of silence kicks in. And then the person usually says: "Alright... but... how does that work? How can you build something that doesn't really exist? And actually, what is a Design System?"

Most of the time when I reach this point in the conversation I take my phone and try to show real examples of my work. Sometimes it helps and sometimes it doesn't.

The truth is, for some people the internet, web technologies and user interfaces are just abstract concepts, it's not physical, you can't touch it, it's made of code and they just assume it's something that magically works and pops up on your screen when you need it. And actually it's true, the internet and web interfaces feel kind of magical in a way!

But what if it wasn't magical? What if everything we see on our screens was the result of a very complex and hidden mechanical system? You don't believe me?

Let me bring you behind the scene of User Interface.

Checkboxes

You tap/click on it and it magically turns blue? No, sorry.

A proper checkbox is based on a simple closed loop water system. The water is stored in an expansion tank (or two), the tap/click of the user triggers the relief valves that let the water flow into the checkbox container. The second tap/click triggers the draining system which empties the checkbox container, brings the water into the pressure controlled pump before storing it back into the expansion tank. Of course the water doesn't have to be blue, natural food coloring powder works just fine.

Toggle buttons

It certainly doesn't move by itself.

It starts with the engine, high power is not necessary and an electric one is definitely the best option in order to get reliability and silence. However, the real deal here is about the gears! The combination of gears will depend on the size of your toggle button but a simple  12 teeth gear (6RPM) connected to a larger 24 teeth gear will do the job. And don't forget to lubricate the gears.

Tooltips

Looking for tips? Use the right tools!

On an app/website you don't see tooltips that often, they are hidden and there is a good reason for it. They are quite a piece of engineering! Air is being sucked in and compressed by the air compressor, before being sent and stored into the air receiver tank. Upon tap/click the main valve opens and let the compressed air go through the flow controller where the rubber air cell is attached and inflates. Always use high quality rubber cells and be careful with the amount of pressure, you don't want your tooltip to explode.

Convinced?

Here it is, now you know how it works!

Personally, I will be able to explain my job better to everyone asking me: "Product Designer? User Interface? How does it work?"
On your side I hope you will look at apps and websites with a different eye now and remember ; nothing is magical!

Thank you for reading! I had quite some fun making this "absurd" project and I hope you enjoyed reading it.
The 3D images and animations were entirely made with Blender.

Do you want to talk about Product Design, 3D animatiom or any other exciting projects? Just drop me a line at this email address: contact.ferrere@gmail.com

You can also find me here:
Twitter    LinkedIn    Skillshare   Instagram