Issue 10 – October 2018
Voice prototyping in Adobe XD, everything about skeleton screens, and prototyping for augmented reality.

One, two. One, two. Can you hear me? Probably not. Unless you’re using assistive technologies, chances are that you are reading this newsletter quietly to yourself. Voice interfaces are still not that well-established, but with over 90 million smart speakers in the U.S. alone by the end of this year and a growth rate unseen since the smartphone, this is changing rapidly at the moment. So it is about time that we – both designers and developers – learn about the strengths and weaknesses of this type of user interface to improve our understanding and to positively shape the future of technology. Prototyping is perfect for that since it allows you to experiment and explore this new field fairly inexpensively. And since this October, Adobe XD comes with intuitive voice prototyping capabilities – without the need of writing a single line of code. I really hope you enjoy the links I selected for October. As always: If you built, wrote, or found something that should find its way into this newsletter, simply write a short email to or send a tweet mentioning @PrototypingNews.
– Happy prototyping! Matthias


Best Practices for Voice UI Design and Prototyping in Adobe XD

Using an iterative, prototyping-based approach is the best way to develop voice interfaces. In this post, Oliver Lindberg explains why it is also important to focus on the user and he shares some do’s and don’ts by Marc Webster, director of product at Adobe, when using the new voice prototyping feature in Adobe XD.

A Practical Guide to Designing Conversational Voice Interfaces

This article on UX matters digs a bit deeper into the details of designing voice user interfaces. Based on their experience from building a language learning VUI called Chattie, the authors – Pallavi Benawri, Puhe Liang, Ruchi Ookalkar, and Sonali Tandon – share six useful design principles that can serve as guides for designers creating conversational VUIs.

User flow is the new wireframe

Not only voice interfaces are conversational: Using graphical interfaces like websites is a constant conversation, too, involving a series of steps towards a goal, the so-called user flows. Alexander Handley quickly walks you through the steps of creating user flows and explains where they differ from good old wireframes.

Everything you need to know about skeleton screens

Skeleton screens, those grey placeholders that are progressively populated with final UI components and content, have found their way into user interface design as a way of improving the perceived (loading) performance of apps and websites. Bill Chung wanted to know if and how they work, so he did some user testing. In this extensive post, he shares his findings and tips on how to best design skeleton screens.

What I Learned Making 5 ARKit Prototypes

“By materializing an idea as a prototype, we can experience it firsthand and explore possible improvements.” Nathan Gitter created five augmented reality (AR) prototypes and now shares his prototypes and his findings, together with five basic concepts to consider when prototyping and designing for AR.

Becoming a better designer through prototyping

Prototyping is a helpful tool on many levels. Peter Vachon shares some of his favorite reasons to build prototypes, like the incredibly rich feedback you get from them, or that they will save your business time and money. Also, he provides some nice examples of how you can add some finesse to your prototypes and explains why you should always consider the scope and the audience of a prototype.

No more excuses: Idea to Prototype in 30 Days

If you ever had an idea for a product or apps that didn’t come to live, the prototyping challenge might be a great chance to change that. For 30 days you can join the challenge to create a prototype of your idea with the support of

An Organized Workflow for Prototyping

Rocio Lopez shares some really useful guiding principles and tips to effectively prototype in agile project settings and also talks about what to look for when you want to prepare prototypes for user testing.


October 2018 Release of Adobe XD: Voice-Based Prototypes and More Unveiled at Adobe MAX

The Adobe XD team saved a lot of interesting new features for their impressive Adobe MAX release: First and foremost, the previously mentioned voice prototyping feature which allows you to use voice triggers and speech playback in your XD prototypes. Then, there is the amazing Auto-Animate feature that lets you quickly create animated transitions between artboards. With Linked Symbols, you can use symbols across multiple documents. On top of that, Adobe also added support for drag gestures, Illustrator documents, and export to After Effects.

Microsoft Maquette

Microsoft is working on a new way to prototype ideas in VR: Maquette is a mixed reality tool for creating spatial prototypes using a PC VR headset and it is now available as a public beta.


wiARframe lets you build augmented reality prototypes quickly, with no coding skills required. But it is also a platform for discovery and co-design where you can explore and share your ideas with a community of AR prototypers.

Framer X: Introducing the Page Tool

The Framer team added a new feature to Framer X: The page tool. It lets you design multiple types of interactions, from simple swipe gestures or 3D numeric pickers to even momentum-based flicking.

Supernova: Introducing CodeX

Pretty impressive: Supernova Studio, a design, prototyping, and development tool, now produces production-ready code. “CodeX” allows you to preview the entire interface code right within the software in real time. For that, all design elements are backed by native components and are translated into production-ready code for iOS, Android, and React Native.

Designing with Ratio

A super-interesting project by Florian Schulz: Ratio is a new tool for working with type on the Web that combines modular scales, fluid typography, color transformations, design tokens and the layout power of modern browsers. “It’s about the relationships, the boundaries, the extremes, and everything in between.” The first video of the software looks very promising, so make sure to sign up to be notified when it leaves closed Alpha.

Animate your Figma designs with our new Principle integration

Figma now integrates with the prototyping tool Principle. You can import your designs from Figma and then build advanced animations and interactions like scrolling, swiping, and more.