Issue 6 – June 2018
Prototyping and scenario-based design, prototyping chatbots, interaction personas, and once more many updates on prototyping tools

Links

Design Thinking: Get Started with Prototyping

“Prototyping quickly, and frequently, is the best way to test your assumptions, learn about users, and improve on your ideas.” In this concise article for the Interaction Design Foundation, Rikke Dam and Teo Siang explain the role of prototyping in Design Thinking processes and how a ‘thinking by doing’ mindset will help a lot in creating tangible forms of your ideas.
https://www.interaction-design.org/literature/article/design-thinking-get-started-with-prototyping

Prototyping and Scenario-Based Design – Designer vs. Developer

An interesting interview with Brendan Kearns, a Senior Interaction Designer at Google, about the benefits of prototyping and scenario-based design – which can be explored with prototypes as well.
https://www.youtube.com/watch?v=qFQC9VNjWpY

Scenario based design

Inspired by the conversation (above) with Brendan Kearns, Mustafa Kurtuldu wrote this article which nicely outlines the basics of scenario-based design and how to use paper prototypes to test scenarios with users.
https://medium.com/dev-channel/scenario-based-design-a4aded4bab4d

Chatbot Prototyping: 7 Tools to Shape A Bot With No Coding

Whether you like chatbots or not, they are definitely here to stay. At the same time, they are also really hard to get right, as nothing is more annoying than a chatbot that gives useless or even wrong answers. Prototyping can help a lot when developing a chatbot and Oleksii Kharkovyna shares seven tools to quickly create a chatbot prototype.
https://chatbotsmagazine.com/chatbot-prototyping-7-tools-to-shape-a-bot-with-no-coding-f2bfac3c94e3

Interaction personas: why, what, and how

When you start prototyping, it can be useful to consider the context in which a user interacts with your design. Mattia Compagnucci shares a really interesting idea to better understand the physical, environmental, emotional and mental state of the user at the moment of the interaction: Interaction personas.
https://medium.com/@matcom_/interaction-personas-e24f3a958d07

Speed Up Development With Prototyping and Vue

In this step-by-step walkthrough, PJ Trainor shows how to build a basic Codepen prototype for a “Sunrise and Sunset” app with Vue.js. The article is a good example for how quick it can be to build a prototype with code to validate an idea, even if the tools that are used to build the prototype aren’t necessarily the ones you would use in production.
https://vuejsdevelopers.com/2018/06/04/rapid-prototyping-vue

Tools

The all-new Axure RP 9 – Coming Soon

Axure, a long-time industry standard for prototyping and UX documentation, is getting a major overhaul. Coming this summer, Axure RP 9 features a new hardware-accelerated rendering engine for better performance, a new interactions builder, and improved design features. Given the strong competition, this feels like a much-needed update.
https://www.axure.com/blog/new-in-9/

Framer X – React, meet design

The Framer team just announced a … drum roll … “game-changing new product that seamlessly blends design and development.” We’ve heard this promise time and time again from a number of tool makers. Let’s see if Framer finally … drum roll … cracks the code. ;)
https://framer.com/announcement

June 2018 Release of Adobe XD: Overlays, Fixed Elements, and More

The June release of Adobe XD brings two much-requested additions: Overlays and fixed elements. So you can now, for example, design and prototype off-canvas menus and sticky navigation bars in XD. Besides that, the team added features like private sharing, improvements to image cropping, and – maybe my favorite addition – calculations in property fields.
https://theblog.adobe.com/june-2018-release-adobe-xd-overlays-fixed-elements/

Introducing Zeplin 2.0 — Components and a ton more goodies

With version 2.0, Zeplin introduces support for components. You can group components, list them in your style guide, and also see all screens in which the components are used. And you can also select components within the screens of your project.
https://blog.zeplin.io/introducing-zeplin-2-0-components-and-a-ton-more-goodies-7c09dacc1f48

Figma 3.0

Figma had a big announcement this month as well with version 3.0 shipping and it brings a lot of improvements: Prototyping is now even more powerful with device frames, fixed objects, scrolling, and transitions. And with Styles and the new Team Library functionality, you can create and maintain a design system in Figma.
https://blog.figma.com/figma-3-0-217d6c248f85

Atomic: Embedding videos, maps, audio and other media

You can now easily embed video, audio, sounds, maps, webpages and more into an Atomic prototype, using a simple URL.
https://help.atomic.io/prototyping/embedding-videos-maps-audio-and-other-media

Whimsical

Whimsical is an interesting tool for creating flowcharts, user journey maps, and wireframes that also includes real-time collaboration features.
https://whimsical.co/

Satyr.io

Satyr.io is a dummy image generator just like placeholder.com but with some additional features that make it even more useful for HTML prototyping. For example, you can simulate a slow connection by adding a delay parameter or test the robustness of your interface with variable image dimensions.
https://satyr.io/