“If all you have is a hammer, everything looks like a nail.”

It is obvious that the tools we use impact our perspective, our approach and generally everything we create. Design is a complex, multifaceted discipline that requires an understanding of all the different components that impact the user experience. As such we need a diverse tool-set for things like visual design, flows, testing and animation.

This is the story of how updating my tools hugely impacted the way I work and the things I create. More specifically this is the story of what happened when I added Framer and Sketch to my tool belt.

Levelling up on collaboration

When I started out as a UX designer I worked in a waterfall process. I would sketch out different directions, create a couple of wireframes in Axure, potentially test them out with users and then when satisfied, hand my wireframes over to a visual designer to “colour between the lines”. I luckily haven’t been working in this manner for quite a while.

Like a lot of other designers I have been working in dedicated design teams, where I work alongside visual designers, developers and strategists. We all work together to materialise a vision into a product. But the workload of a designer, developer and a UX designer is not necessarily equal throughout the process. There are times when interaction design is a bottleneck and times when visual design is the bottleneck. Making sure that everyone can contribute throughout is difficult, and surprisingly the tools we use play a big role in helping to solve this.

Over the last 6 months I have worked in teams where every designer (UX/UI/IxD etc.) is working in Sketch and what I have noticed is that responsibilities have become much more fluid. Everyone is all of a sudden able to step in and help out regardless of whether it is rolling out design, conceptualisation, creating assets or writing design documentation. The wonderful thing about Sketch is the fact that it is equally good at creating wireframes and final visual design, which means that the border between those two become more fluid. All off this actually means that agility in the team increases and there are essentially no more bottle necks. The fact that everyone is getting in everyone’s business also means that there are more discussions, iterations and knowledge sharing. All things that essentially makes for a better product.

Designing for (e)motion

Bridging the gap between different design disciplines is naturally important, but from my experience the biggest gap in the creation of digital artefacts is not between the different designers. The bigger gap is between designers and developers. Designers usually limit themselves to creating beautiful but static PNGs or PSDs, while developers master the tools to create magical spaces where pixels change, flow and adapt based on user interaction. As such, it is an atrocity that developers are limited by the static documentation they often receive from designers.

I love motion, both as a user and as a designer. Motion is a fantastic way of showing intent, layering, hierarchy and generally adding a bit of magic. Yet when I look back at my portfolio there are only sparse examples of well executed and well intended motion design. And the reasons for that is now painfully obvious to me now. The tools I was using were not designed with motion in mind. And this is where Framer steps in to much applause.

Creating great motion design is as hard, and requires the same level of iterations as a beautiful UI component. Yet designers that work only with static design tools like Adobe CS are likely to explain motion and animation with this kind of detail:

“then this box moves up here and expands while the text fades in.”

If you want animations to feel fluid and magical you need to be able to specify timing, easing and speeds, and to me this was incredibly difficult to get right before I used Framer. Motion and animations were created as an afterthought before I started using this tool, simply because it was not part of the capabilities of my primary design tools. What Framer allows me to do, is to import my static design and with very simple code bring the design to live. I don’t need more than a couple of lines of code to make things dance across my screen, and the most wonderful thing is that this code can be used by developers, so they don’t have to guess the timing and movement.

As designers we have intent for the objects we design. We do research and tests to inform our designs and we put a lot of effort into making our designs effective. But the final product coming out of our design process is not only a result of our intent, but also the tools and processes we use to create the design. So before you select the tools for your next design process, spend some time exploring the many interesting tools that are coming out at the moment. The tools I have talked about here might not be right for you, but know that whatever tools you choose will influence what you create.