Issue 12 — December 2018
Prototyping empathy, physical prototypes, and prototyping as a scientific method of business.
Happy New Year! 2018 is over and with it the first year of Prototyping.news. If you’re reading this, you still open and hopefully enjoy this newsletter once it arrives in your inbox — and I want to thank you very much for this. This newsletter is a personal project and when I started it in December 2017 I had no idea how it would work out. Overall, I am really happy I gave it a shot. I somehow indeed managed to write 12 monthly issues with many amazing articles in it, I switched from MailChimp to managing the list via a self-hosted Mailtrain instance in May — because of GDPR — and the number of signups is in three figures. But what was most important to me was to find a way to share the latest news about prototyping in a way that would be useful and also delightful to other people. And from the various positive feedback I received over the past year, from people I know personally as well as from people from all over the industry, I feel like Prototyping.news is indeed a source of inspiration to many. This makes me very happy and so I will keep writing this newsletter in 2019, too. Maybe with some new ideas here and there — and if you have suggestions for improvements of any kind, I’d be happy to hear from you.
— All the best and happy prototyping in 2019! Matthias
Links
Prototyping Empathy
When building prototypes for user research, there is no shortage of tools. But how do you make sure that you are building your prototypes with the right amount of empathy and truly human-centered? Penny Collisson and Genny Mangum from Microsoft share six strategies for staying focused on people while prototyping.
https://medium.com/microsoft-design/prototyping-empathy-1bdb08e3260c
Voice First, Screen Second: Designing for Voice in Adobe XD
Voice interfaces are on the rise and it is becoming ever so obvious that we need a way to design for voice interfaces today. And this is where the lately added voice prototyping feature of Adobe XD comes in. In this detailed article, Graeme Fulton explores where the differences and strengths of voice interfaces are, explains which best practices already exist, and then shows how to prototype a voice interface with Adobe XD.
https://blog.prototypr.io/voice-first-screen-second-designing-for-voice-in-adobe-xd-1a9e5efdca15
Journey Mapping 101
Journey maps are a UX tool to visualize a process in an interface that a user goes through to accomplish a certain goal. A journey map can be a prototype by itself but it is also really useful if you want to plan and build a user-centered prototype because it helps you identify scenarios to focus on or potential pitfalls to avoid. In this post, Nielsen Norman Group’s Chief Designer Sarah Gibbons explains the basics of journey mapping and how to use it successfully.
https://www.nngroup.com/articles/journey-mapping-101/
10 Most Awesome Hi-fi Prototypes of 2018
ProtoPie is a prototyping tool that has its strengths in UI animation and interactions including multi-touch and even sensor input. Fredo Tan shares a curated list of the best high-fidelity prototypes embracing advanced interactions from 2018. A great source of inspiration and a joy to watch, too.
https://blog.prototypr.io/10-most-awesome-hi-fi-prototypes-of-2018-35527725e0a3
Adobe XD: putting auto-animate to the test
Since October, Adobe XD comes with a feature called Auto-Animate which lets you animate the elements between two artboards with automatic transitions. Shane Williams put the feature to the test and took the time to build some really impressive examples of UI animations and interaction patterns like pull to refresh, swipe to delete, or a comparison slider.
https://uxdesign.cc/adobe-xd-putting-auto-animate-to-the-test-b09f957d53ae
The State of UX in 2019
At the end of every year, the UX Collective team shares their State of UX report, isolating a few trends in what our industry is writing, talking, and thinking about. One of the thoughts that stood out to me is that new technologies like voice, augmented reality, virtual reality, platform integrations, or social channels are such seamless experiences and in a steady state of flux that they will require new metaphors beyond the good old artboard — which is still the dominant way to design for the screen although it is not how people will experience our design. Once more, prototyping FTW. ;) https://trends.uxdesign.cc
Podcasts
UXPodcast #199 — Physical prototypes with Kathryn McElroy
Kathryn McElroy, author of the O’Reilly book “Prototyping for Designers”, talks to Per Axbom and James Royal-Lawson about the importance of becoming a multi-modal designer today, how prototyping with electronics can help to bridge the gap between the physical and the digital, and many other benefits of prototyping.
https://uxpodcast.com/199-physical-prototypes-kathryn-mcelroy/
Talks
Getting Effective Session Outcomes, Tom Chi
Tom Chi served as head of product experience at Google X developing technology such as Google Glass and Google’s self-driving car. In this talk, he emphasizes the importance and huge potential of prototyping for making decisions without smart guesses but based on direct experiences while also increasing certainty. Also ideally, instead of just testing your product for completeness, you should use prototyping to find what Tom calls the “magic moment” — that moment when people use your product and their eyes light up.
https://youtu.be/z_elgzL9sns
“Prototyping: The Scientific Method of Business”, Daniel Burka — An Event Apart Denver 2017
In this talk from An Event Apart Denver 2017, Daniel Burka, then design partner at Google Ventures, shows how to level up your effectiveness with the use of prototyping by creating a shared understanding of the problems you want to solve. He demonstrates how you can use prototyping to test hypotheses with realistic customers, and — the master class — how a team of professionals can create a prototype together and test it in a realistic setting with real people within one week, also known as a Design Sprint.
https://aneventapart.com/news/post/prototyping-the-scientific-method-of-business-by-daniel-burka-aea-video
Tools
Uizard
Uizard lets you transform your hand-drawn paper wireframes into Sketch files and prototypes — automatically using machine learning. You can test your ideas quickly, create high-fidelity prototypes, and even export front-end code. You can sign up for the beta now.
https://uizard.io/i/GpwlR
Draftium
Draftium is a website prototyping tool allowing you to quickly visualize an idea based on templates and collect online feedback from your team or clients — all in one place.
https://draftium.com/
Flow
Flow is a motion-design tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by generating native code that can be directly incorporated into larger more complex projects by a developer. https://createwithflow.com
Remove.bg
Yet another tool based on machine learning and you probably already heard of it: Remove.bg removes backgrounds from photos, 100% automatically and in 5 seconds — without a single click. No more cutting out of hair in Photoshop. The output size is not that large (yet), but especially for quick prototyping Remove.bg is super fast and convenient.
https://www.remove.bg/
Adobe XD Update December 2018
The December 2018 release of Adobe XD brings new features again: The team has improved collaboration with cloud-native documents, you can now flip objects, search the layers panel, preview linked symbols on the canvas, and much more.
https://helpx.adobe.com/xd/help/whats-new.html#NewFeaturesinAdobeXD14
Introduction to Product Design Kit for Figma
Mateusz Wierzbicki created a great design kit for Figma which you can use to create high fidelity wireframes and prototypes, user interfaces, and style guides for your desktop products. It’s fully customizable and free.
https://blog.prototypr.io/introduction-to-product-design-kit-for-figma-f477cf76ba90
Montage
With Montage, you can prototype your app with a user-generated library of components. No design skills are needed. All you need to do is browse a library of app components and add them to your prototype. Montage is free for public projects.
https://www.trymontage.com/
