Issue 3: Protyping versus delivering design, what apps should you use?

Welcome to issue 3 of Interact, the newsletter that helps you keep on top of the interaction design #nocode ecosystem.

In this issue

1. Latest News: Framer adds OpenType support, Play integrates Rive
2. App Watch: Dora, create a a 3D website without code
3. In Focus: Prototyping versus delivering, what app should you use?

Latest News Roundup ??

Framer adds OpenType support

Framer has recently revamped their type capabilities with a huge update for OpenType.

New features include stylistic sets, variants, ligatures, numbers, letter case, contextual alternates and more. You access all the features from a new OpenType panel where you can switch each feature on and off and even search the panel.

You can now do proper fraction formatting and tabular numbers giving each number an equal width which stops the position of numbers from jumping when they change. very useful for animation! Other common features include superscript and subscript rendering characters above and below the line, something we’ve had in DTP apps for decades. This is a great addition enabling us to have much more typographic control over type on the web.

For more information watch the video from the Framer team here

https://www.youtube.com/watch?v=yI1Lzxx4sbE

Play integrates the Rive runtime

Rive’s unique selling point is the fact that you can deploy it pretty much anywhere through the plethora of runtimes they have created. One of those platforms is iOS.

If you haven’t heard of Play, it’s a prototyping app built exclusively for native iPhone. Because it’s a native app under the hood it can implement anything a real app can and so the folks over at Play have implemented the Rive iOS runtime.

With this implementation, you can now integrate Rive animations into your iOS prototypes further bridging the gap between static design and real apps. Play gives you access to a couple of Rive features, Set Rive Input which allows you to add/switch the Rive asset file and Play/Pause which lets you play, stop, pause or restart your Rive animation. Hopefully, more Rive integration features will be added in the near future.

Watch the recording of the live stream here

https://youtu.be/KKjbQ41d9h4?si=iEUQoNnpIfFMsn9t

App Watch ??

Welcome to App Watch! A new segment where I'll cover new apps that have come to my attention. These might be new new, or just new to me :)

Dora

Dora is a nocode website creation app with a unique use case, to create scrolljacked websites with real 3D. Dora has been around for a while but has recently had a revamp and integrated AI into their offering. Sound curious and another one I need to spend some time with. That said there are a few good resources online showing you what you can achieve with Dora so here's are some links

The official Dora website

https://www.dora.run/

A great video from Minh Pham on how to create a Dora 3D web page (you should definitely subscribe to his channel as well)

https://www.youtube.com/watch?v=YG3aPQrANdg&t=17s

In Focus

The difference between prototyping and design delivery apps

This time around I'm going to focus on two types of design activities and their associated apps. Prototyping designs and delivering working design assets.

There are a slew of advanced interaction design apps that give you the ability to create advanced user interfaces without the need to code but are they all the same? What are their use cases, strengths and weaknesses? Which should you use and when? If you want the answer to all these questions and more, then read on!

When it comes to deciding which ones to use it's important for you to understand the differences. Broadly speaking these apps fall into two categories, prototyping and delivery (or production).

For clarity, I'm going to quickly define them.

Prototyping

Prototyping apps enable you to create a usable version of your design that looks and/or works like a real app or website.

What are prototypes used for?

There are three main use cases for prototypes:

1. Prototyping as a design process: Designers use it to explore ideas. It's a cost-effective way to try many different things without incurring expensive development costs. A key part of this validation process involves testing on the target device such as a smartphone with realistic interactions
2. Prototyping as communication: Prototypes are used to share designs in a form that is easy to understand for stakeholders. This is especially powerful with non-designers and c suite executives to help them understand how their product will actually work and feel
3. Prototyping as validation: Prototypes are used to validate concepts and many levels of fidelity. They are used to test with users in usability testing sessions. A key part of a design's lifecycle
4. Prototyping as a blueprint: They are handed over to your engineering team who use them as a reference when building a particular service or feature. Some prototyping apps even have a handoff feature that autogenerates interaction guides giving the team easy access to the values they need for code
5. Prototyping as a design system: component libraries are created enabling rapid interactive design without the need to create everything from scratch. This has been proven to be a real timesaver and optimiser for visual design using Figma but is rarely used for interaction and motion design

Ok, now that you have a good understanding of the use cases, here are the leading apps that enable designers to prototype at a high level of interactive fidelity:

1. ProtoPie
2. Axure

Delivery (or production)

In simple terms apps that focus on delivering ready-to-use artefacts that don't require recoding. These 'artifacts' can be delivered directly to your dev team ready for implementation.

The main use cases for delivering design artefacts:

1. No coding required: Most apps require little or no coding which means you can create very complex interactions and motion very quickly
2. Puts control in the hands of the designer: A key failure point of advanced interaction comes at the point of communication between the designer and developer, especially if advanced prototyping isn't used either. Giving the designer the ability to create this themselves is a strong solution that saves time and money and also increases product quality and experience
3. Allows for design exploration: Like prototyping, being able to explore designs interactively will simply give you better ideas. The process of doing rather than just thinking has been proven time and again
4. The need for less specialist development knowledge: All of these apps are implemented in code in much the same way. The complexity has been taken out of the equation by the companies that create the apps and often implementation is no more than including a runtime or code library

Ok, now that you have a good understanding of the use cases, here are the leading apps that enable designers to deliver ready-to-go design artefacts:

1. Rive for 2D user interfaces everywhere (Web, iOS, Android, Unity, Unreal)
2. Spline for 3D design with the Web and iOS
3. Bezi for 3D design with the Web and Unity

Which tool to use and when?

This is probably the key question so here are the pros and cons for each tool type.

Prototyping by its very nature is a scrappy affair. Even if you are creating at high fidelity you are probably creating non-optimised code underneath. This is a plus as prototyping apps can take licence with this fact which enables them to offer a wide range of features that are simple and quick to use.

If your dev team is all over owning every line of code then they'll probably prefer a blueprint over a deliverable. Prototyping gives them this but still with the level of guidance they need to build properly the first time around. It also gives your QA team an artifact the use for testing.

Prototyping with delivery apps can be problematic. While it's true that they can preview designs seeing them on the target device can be hindered by complexity often requiring partnering with a developer. They are after all often one piece of the design puzzle and can't holistically design a whole app or website.

There is a caveat to this and a trend I'm seeing emerge and that's Prototyping tools implementing delivery tools. Both Framer and Play are doing this. Play is a prototyping tool that has implemented Rive (to a level) and Framer, is itself a nocode delivery tool that allows for the implementation of Rive and Spline, in fact any tool whose output supports web embeds. ProtoPie Connect is following a more unique approach enabling the connecting web embeds in the browser, a feature they call Canvas. You can connect a ProtoPie file to a Unity WebGL embed as well as any other app that supports embeds and merge them all together.

As you can imagine this only shows a path of eventual convergence of tools and outputs in this space. This is an exciting time to be a designer and shows how many opportunities there are for designers to learn new skills and new tools to facilitate the creation of new and unique experiences, something we desparately need.

That's it for this issue, until next time ??