How design tools are shaping the way we design
By: Darren Bennett
Tags: Prototyping, UX, Visual Design, Product Design, User Experience

In the beginning, when the world wide web was new and web pages were simple, we designed websites in Adobe Photoshop. At the time it made sense. The interaction was super simple and the web as a platform was only seen as a place to put a digital version of your company’s brochure.

There were no micro-interactions or slick transitions. If you wanted something eye-catching you would hire a Flash designer. Flash was the only app you could use to put a highly interactive experience on the web. It was fun and experimental and in some cases downright crazy. But not to get too deep into the heady Frontierland of the early web too much, the point I want to make here is that mostly the web was a static place so we used static creation tools to design our mostly static experiences.

That started to change though in 2007 when the iPhone was released and it’s a mobile operating system that changed not only how we interacted with devices but raised the bar on our expectations. Advanced interaction design had arrived but we didn't have any tools with which to experiment and imagine. The tools that we used to create experiences within this new medium had to change.

In 2010 Sketch came on the scene and was a breath of fresh air in terms of making it easier to create user interfaces specifically for digital. Sketch wanted to simplify the UI creation process and was a specialised tool which unlike Photoshop, was easy to learn. Sketch dominated for a time but soon others joined the party including Figma and Adobe XD .

The web was a static place so we used static creation tools to design our mostly static experiences.

Everyone saw a different problem to solve

While Sketch’s focus was on the creation of pixel-perfect UI, Figma wanted to take it further. Dylan Field, co-founder and CEO of Figma told TechCrunch back in 2015 that “design is undergoing a monumental shift — going from when design was at the very end of the product cycle where people would just make things prettier to now where it runs through the entire process”.

Figma brought live collaboration for teams to the industry and fundamentally evolved design collaboration. If you think about it, it’s hard to think especially Hnow how we could do without it.

As digital continued to evolve, new tools started to emerge to answer another important question and plug a crucial gap in the design creation process. How do we get from the thing in our heads or the comps in our static design tool to a working prototype that we can test with people before we shell out $$$ on development?

Tools such as Axure RP, Origami, and Framer (now Framer classic) emerged to facilitate this need. These tools were a big departure from the tools designers were used to though and tended to be either visually limited or had a steep learning curve. Requiring coding knowledge for anything other than the most basic of interactions.

The pioneers that changed the way we design

We needed tools that every designer could use. We needed design to be democratic and inclusive. Lucky for us some other people thought this as well.

People such as Paul Colton the CEO of Pixate, Tony Kim the CEO of ProtoPie.

The thing that all of these people had in common is recognising the need for a tool that designers could easily learn and use to explore interaction and motion design ideas. Moving designers from designing static comps to designing realistic interactive prototypes.

Even though every designer is aware of the importance of prototyping, it is tough to secure enough time for prototyping regardless of coding capability.

I caught up with Paul and Tony and what is interesting is how similar their moments of clarity were.

I asked Tony what gave him the idea to create ProtoPie, I wondered whether there was a specific moment or event that lead to his moment of clarity.

“When I worked at Google as a designer in 2014, I found that designers always are juggling multiple projects simultaneously. Even though every designer is aware of the importance of prototyping, it is tough to secure enough time for prototyping regardless of coding capability. One of my research topics was how to decompose interactions and recompose without communication noise.”

“One weekend evening, I caught sight of my six-year-old son marking on his music sheets as he was practising the piano. I realized that if I could replace symbols on a sheet denoting which key to press, which pitch to play in, or how long to hold a note, it would be possible to express interactions within a systematic framework.”

Paul Colton the CEO of Pixate had a slightly different origin story.

“First and foremost, I’m a developer, and I’m always faced, no matter what app I write, with the disproportionate effort required to take a finished design and turn it into a running app. With Pixate, we were trying to short-circuit that process by taking a prototype design and previewing it in real-time on a device, fully natively. That is, there was no intermediate presentation, it was native, direct from design to preview.

Getting deep into iOS (iPhone) development was the catalyst, and I just wanted to make UIKit (the UI framework) easier and quicker so I could get an idea up and running with little effort (i.e. not a lot of code writing).”

We can now all appreciate now how key it is to quickly put a working usable prototype of an app in the hands of stakeholders and customers alike.

Pixate and ProtoPie specifically gave designers a no-code interaction design platform they could use to explore. With both Pixate and ProtoPie you could add interaction triggers such as tap and trigger changes and animation properties in your design, but even more important you had the power of conditional logic, variables and the ability to use real hardware features on devices. All of this without the need to learn code.

Another key part that these tools afforded was the ability to deploy and test ideas on real devices. All of a sudden you could see what worked and what didn’t what felt right rather than what looked right. These tools filled a gap that tools such as Sketch, Figma and Adobe XD had yet to explore.

Pixate is sadly no longer with us but was for me was a vision of the future. Pixate played its part in the evolution of the interaction design tool market. ProtoPie is, of course, live and kicking and continuing to advance its features keeping true to its no-code easy-to-use principles. Other tools have started to follow suit as well such as Framer Web, a very different tool to Framer classic with more and more of its coding complexity being hidden behind easy to use components and a thriving development community.

The current state of design

For a long time interaction and motion design were seen as bells and whistles add-on, but I’m glad to say that I’ve seen that begin to change. It is now recognised that motion design and micro-interactions have a huge part to play in how we craft our digital experiences, helping people to understand how to use digital products. More importantly, though, We now have no-code tools to allow designers to design for interaction rather than obsess over pixel perfection on their static comps.

The design of digital products can now start with creating interactive prototypes rather than with static user interface comps. Designers can now explore and test their design ideas on people much earlier before any time is wasted on pages and pages of hi-fidelity design that haven’t had their interaction validated with usability testing.

I asked Paul what he thought of the state of Prototyping tools in the industry today?

“I’m not following these products day to day, but it certainly seems to be some convergence going on. The desktop apps want to go web, and the web apps want to go desktop, and everyone is adding multi-user collaboration (i.e. teams). These all make sense for expanding their market and growing their businesses. I do think it will probably distil down to a couple of “winners”, but as long as the product serves your needs, the consumer wins.”

Tony had some equally interesting thoughts which really ring true.

“Prototyping aims to shape the design ideas in a short time without much effort. Then, we can verify the idea on the market. I believe that prototyping’s basic philosophy would not change no matter what interaction technology or device has become popular. However, designers need to care more about interactions across multiple devices and whole interaction systems rather than a single device. For example, Uber has drivers and passenger app separately, and a passenger wants to see the driver’s reaction right after his input and vice versa.”

Having the tools available is one thing but taking the time to change both personally and culturally is another. I see the legacy of designing statically still dominating in the digital design industry.

My hope is that more designers will look to practice interaction design and make prototyping the start of their process and not the bells and whistles bit at the end. I also hope that the companies will give their design teams the latitude and support to learn and use these tools to explore, experiment, and create. We certainly have the tools today to achieve this but what about prototyping in the future?

A glimpse into the future

Prototyping tools are even more important in the Frontierland of The Next-gen platforms such as Augmented, VR, and Mixed Reality and it’s great to see these evolving platforms are also starting to get some no-code service with tools such as Adobe Aero. I’m excited to see how prototyping develops here in particular.

I asked Tony for his thoughts on AR and VR and whether he saw it as the next step in the ongoing evolution of digital prototyping.

“Indeed, AR and VR are quite emerging and promising interaction technologies I see. However, I would say it is more important to deal with implicit inputs and multi modalities. You can get a location-based service when you enter a specific area without inputting any information, and you can play music through voice command with keeping eyes on the road while driving. It’s the reason why ProtoPie has released the voice feature recently and supports tons of sensors on the smart devices.”

It’s true that more and more we need a way of prototyping interconnected experiences and service regardless of hardware. The internet at its core is a unifying platform of interconnectedness but having the tools to explore this without cots of time and work is key.

With ProtoPie you can already create prototypes that can communicate with each other in real-time. Most recently features have been added to allow you can create an interactive voice experience in minutes. Tony Kim and ProtoPie are continuing to push more deeply into connecting software and hardware together and it’s a key area for them as can be seen with their recent announcements showing the ability to prototype within automotive.

What else could the future hold? We are very focussed on new technologies but maybe the future is somewhere else.

I posited this question to Paul and this is what he had to say.

“Well, this kind of leads me to what I’m working on. In the vein of trying to go from idea to product easily, but taking it even further, my Pixate co-founder (Kevin Lindsey) and I are building a design tool that allows you to design SwiftUI-based apps (“SwiftUI is a simple way to build user interfaces across all Apple platforms”, Apple) completely visually without coding. Design in real-time using SwiftUI components, and what you see if what you get. When you are done, you can export full source code (either code snippets of your component or full Xcode projects). That is, there’s no intermediate step, what you design _is_ the final UI as it will be seen on your users’ devices, natively.”

Paul and Kevin are aiming to have an early beta ready by the end of the year, at the moment they are calling it Tapcast after their company.

In summary

One thing is clear. We now have amazing tools that we can use at the beginning of the design process to design for interaction. and soon maybe in the not too distant future, we’ll be able to interface with even more real hardware products and create even more realistic prototyping environments.

The speed of getting products to market is also changing with Clever people like Paul and Kevin creating the platforms where designers and creators can deliver real products without having to no code and its complexities

One thing is for certain, it’s time to stop using static comps and start embracing the world of interactive design.

References

Read the full interview with Dylan Field:

Read more about Tony Kim’s ProtoPie journey: