The Design Tools We Use

Design tools help us plan, visualize and put together everything you use online every day. At Windscribe, we’re no stranger to these tools. In this blog post, I’m going to take you on a journey through the design tools we use, when we use them, and why. Maybe this will spark some ideas and inspire you to take a couple of leaves out of our book for your next product design project. If this is all old news to you, maybe you’re a perfect fit to be a designer at Windscribe.

Pen & Paper

Believe it or not, these two old boys are still good at getting all the chaos out of your head quickly. Skip this step and you risk the chaos, creeping its way into your digital mockups later. Pen and paper are also great for collaboration and getting everyone else’s feedback early before moving further into something more final- looking. This part is all about narrowing down your direction and getting you started on the right path.

Figma <3

Yup, I switched teams, and I’m glad I did. I had been using Sketch for the longest time. Recently, however, I realized that at Windscribe, we wanted something more cross-platform and collaborative so I switched to Figma without any friction. This tool is where I spend most of my time putting together mockups to guide the plan and implementation. It prepares developers for what they’re about to build with detailed specifications, which in turn keeps them happy and working smoothly (most of the time). This process also reduces the iterative cycle. In the past, the ‘iterative cycle’ was a constant back and forth struggle. By using something more collaborative, I’m easily able to hammer out UX details right in the prototype, so that developers can see everything working before they ever start writing code. If you want, you can also turn your mockups into interactive prototypes to illustrate how they’re meant to work or test them to see if the flow is what you envisioned.

Zeplin

This tool is the last step of the process. This is where all the final designs go once they’re approved by the team. Zeplin will generate the appropriate specs and code from the mockups made with Figma that the developers need in order to bring them to life. It’s also great for maintaining and organising all your designs, assets and style guide in one place for everyone to see. Zeplin will also keep all older versions of your designs, which is called “Version Control”,  and allow anyone to visually compare them.

Principle

This little guy is great for animations and interactive prototypes, especially for apps and web components. I use it mostly to illustrate interactions that need to be animated for certain designs like hover effects and dropdowns but you can certainly get away without it now that Figma has interactive components available.

Eventually all of these tools will get absorbed by a single one of them but the idea remains the same. They help me get my ideas out there quickly and, efficiently, set goals, foster collaboration and reduce friction between all team members.