Prototyping Happiness: A Designer’s Guide
I don't have kids of my own yet, so I can only imagine what it feels like to hold your child in your hands for the very first time, look it in the eyes as it stares back at you and realize that your life as you know it will never be the same again. I'm going to assume that it’s a close second only to learning how to animate and prototype your designs.
Huh?
One of the main challenges any designer faces is getting the ideas we have inside our heads (where it all seems so nice and clear) into the real world, where other people can experience and enjoy them too.
As a Product Designer, one of my main challenges is not only getting those ideas out from inside my head and onto paper or a sketch file, but also getting them into an engineer, PM or client’s head in a way that will be clear and easy to understand and implement.
How does one do that?
For the majority of the past 6 years that I have been designing, when I had to show a design to a client or stakeholder, or handoff my design to a developer, I would use anything from lots of screens linked together in InVision to attaching a long text file with arrows and explanations of what I want my design to look like along with the design file. I would even use Flash or AE to build some basic animations when I needed to demonstrate something a bit more complex.
And the problem with that is…?
Well first of all, time.
The time it took me to write design requirements, animate something with flash, or try to explain my vision face to face was very costly, and sometimes even equal or more to the time I put into the design itself.
On top of that, a lot of the time even after all that, it still wouldn't be what I had in mind, or it would be what I wanted but when seeing it live I would realize that it doesn't look as good as I thought it would.
Secondly, it split the design and the prototyping into two separate steps. Only when the design was finished would I start to think about how it would feel; it was more of an afterthought than part of the design process.
So what's the solution?
The solution is learning a prototyping tool and animating your ideas.
This might seem a bit obvious to you - of course designers should prototype! you just shouted through your mustache. But in most of the places I worked, they didn’t really.
I always and still use InVision to display my flows, but when it came to explaining how a design would feel and move with complex animations, it was left mostly to hand gestures.
I've heard endless discussions about whether or not designers should code, but I didn’t hear too much about the importance of prototyping.
Why is it so important?
Here are six things that happened to me since I started to animate almost all of my designs.
- I work much faster.
I don't split my design into 2 separate parts anymore for design and prototyping / animating, so not only do I get to see how it will look in a shorter amount of time and make adjustments as I go, I get to show it to others much quicker too as well as get real live feedback on the final result. - My designs are better.
After animating my ideas for a while, I started to get into a motion state of mind. Now, when I’m working on a UX problem I feel that I have a new set of tools to use to solve complex problems. - It’s easier to get people on board.
Not everyone can picture what we have inside our head, and chances are the person you will have to convince the most isn't a designer or even a visual person. That means that they will need to see things as close to the final product as possible if you really want to sell them on your vision. - Quality of production has gone up.
This is a side effect that I didn't foresee, but it turns out that when you show a developer an animation of what you want it to look and feel like and it's not only impressive but visually airtight, it raises the bar on what you will get back as “done”. - It became a design principle.
In the SimilarWeb design team where I work, we wrote some design principles a few months ago, and I added animation as a principle.
It seemed a bit weird at first, but after we saw the effect that it had on the entire process of passing design through an agile team, we knew it was a good idea. - I moved from Tel aviv to New York.
I can't say there is a direct correlation between prototyping and my move, but I can see the huge communication and time barrier it breaks when I can provide my team in Tel Aviv with something from halfway around the world and they can see and use it exactly the way I wanted without me even having to talk to them.
How to get started
There are plenty of prototyping tools out there such as Atomic, Flinto, Principle, Motion by InVision and Adobe XD. There are also lots of articles about the differences and benefits of each one.
Here is just one that came up when I searched on Medium, but I trust the combination of your Google skills and curiosity to find the one that best fits your needs.
Like anything in life, the most important thing is just to get started.
For me personally, it was Principle.
I don't remember how I picked it out of the rest of them, but maybe i'm just a sucker for the color purple.
From the minute I started playing around with Principle and until I was using it at work full time was about a week. And seeing that you get a trial period, I think it's definitely worth giving it a shot.
If you have a basic understanding of timelines or have used AE in the past, the learning curve isn’t steep at all and you can create some very complex animations in no time.
Just the tips
I'm a big believer in teaching yourself stuff, so instead of spoon feeding you with a pile of tips and links, I hope I got you motivated enough to figure out by yourself what tool fits you best and give it a try.
That said, I'm not a total DB, and If you do decide to give Principle a shot, here are a few links that really helped me learn it.
- A pretty great Facebook group where people can ask questions and share their designs and source files.
- The tutorials that Principle has on their website are easy to follow and cover the basics.
- Maex & Sketchapp TV youtube channel.
- Principlerepo.com — some great resources and files.
To sum it all up
I'm a happier person, and you can be too.
I get to spend less time writing design specs and holding my developers hand and more time designing and solving problems. As a designer, that makes a huge difference, and all it took was a few hours over the course of one week to get there.
If I can get even 1 designer to start animating their designs after they read this, I feel that I have done my part here. Actually just 1 is a total waste of the last 5 hours, let's aim for 15!
Hit me up on twitter and let me know if you started using any sort of prototyping tool after reading this and if it’s helped you as much as it helped me, with any questions, or just to say hi.
Happy Prototyping!
Read: Does design even matter?
