Issue 15 – March 2019
Provocatypes, a shared vocabulary, vulnerability and prototyping, and exploring voice prototyping tools.
Hi! Creating a shared understanding is key to successfully building products and interfaces of any kind. If you want to discuss and evaluate ideas, everyone involved in the project needs to have a clear understanding of what the other person is talking about. Otherwise, you might think that you are talking about the same thing but in reality, you aren’t. And this is when misunderstandings occur or really good ideas get rejected. Not because they weren’t good, but because they weren’t fully understood. Prototypes create the required shared understanding – fast and cheap. By building a prototype, you take an idea and make it tangible and comprehensible. This gets ever more important, especially with the rise of voice interfaces or artificial intelligence and because the artifacts we create are becoming less and less visual. So the next time you want to make sure that an idea is *really* understood by colleagues or clients, build a prototype. Now, you’re all talking about the same thing.
I really hope you enjoy this newsletter. If you do, then please spread the word and share it with people who might appreciate a monthly dose of prototyping news in their inbox. Thank you! 🤗
– Happy prototyping! Matthias
Links
Name It, and They Will Come
A wonderful post by Dan Abramov on why an idea or a project that is the most exciting and magical thing to you, might still not resonate with other people. The reason: We tend to discuss things that are easy to talk about. And if your idea really is new, there might be no shared vocabulary to discuss it yet. Your problem has no name yet. How do you give it a name? By telling a story. With a prototype, for example.
https://overreacted.io/name-it-and-they-will-come/
Vulnerability, Creativity, and Prototyping
Lately, I’ve been writing a bit more on my personal site again, including some thoughts about vulnerability and prototyping: Vulnerability is still highly stigmatized in our society, particularly in business. Yet, there is no creativity without vulnerability. As soon as you create something and put yourself out there, you make yourself vulnerable. Especially if it is the kind of truly innovative and creative work that has the most potential to invoke change. It takes courage to acknowledge your own vulnerability and to do something despite feeling uncomfortable – and although you might fail. But it is also a basic prerequisite for fully embracing a prototyping mindset.
https://matthiasott.com/notes/vulnerability-creativity-and-prototyping
Zooming In and Out of UX Design Resolutions
Using Charles and Ray Eames’ legendary 7-minute short film “Powers of Ten” as a metaphor, Jared M. Spool shares his view of the different resolutions, or zoom levels, of user experience which have evolved from early “green screens” to applications to service design to organization-wide experiences to whole ecosystems like the Internet of Things. Each resolution demands different tools and methods because the challenges we face also change. And as ever new resolutions appear, we need to develop our skills and techniques to handle them. Prototyping is one of those skills.
https://articles.uie.com/zooming-in-and-out-of-ux-design-resolutions/
Building a UI Kit in Figma
Robin Rendle, a product designer at Gusto and staff writer for CSS-Tricks, shares his notes about the process of building a UI Kit in Figma that can be used by the team to quickly prototype new UI solutions. He writes about how he went about organizing the kit and about all the challenges he encountered along the way. His conclusion: “Being slow and considerate – putting all this effort into how things are built – really pays off in the long run.”
https://robinrendle.com/notes/building-a-ui-kit-in-figma/
Prototype or die — 5 reasons why prototyping could save your project
There are many reasons why prototyping should be part of any design process. In this article, Alejandro Castillejo unfolds five core benefits of prototyping: Prototypes are perfect for testing your ideas and assumptions, exploring the feasibility of potential solutions, aligning the internal team, gathering momentum within an organization, and for failing fast and cheap.
https://medium.com/propelland/prototype-or-die-5-reasons-why-prototyping-could-save-your-project-a4181bf79dd4
Practice Your Prototyping Skills With These 4 Resources
IDEO has always been a the forefront of promoting Design Thinking and – as an essential part of it – prototyping. In this post, Jayme Brown – with illustrations from Jane Ha – summarizes four posts on prototyping from the IDEO blog about the reasons why you should start prototyping right now, tips on prototyping a service, the benefits of constraints, and a practical example of a 360° video prototype.
https://www.ideo.com/blog/practice-your-prototyping-skills-with-these-4-resources
Hotspots Are Not Enough. Time for Advanced Prototyping
This article on the Awwwards website is clearly a sponsored post, but I still really like the underlying message: Using static tools for prototyping can only take you so far. Sometimes, and with all the recent changes in the design process increasingly often, connecting static layouts with hotspots just isn’t enough and you need to take your prototype one step further. For example, with code-based design tooling. Let me add: Ideally, by working with the real material.
https://www.awwwards.com/hotspots-are-not-enough-time-for-advanced-prototyping.html
Exploring your ideas: why prototyping is so important
In search of a tool for dynamically prototyping voice interfaces, the team at the Guardian Voice Lab researched various tools that might help them better communicate and document concepts. They settled for Voiceflow, a tool for prototyping voice apps for Amazon Alexa and Google Assistant, and share what went well and where they see room for improvement.
https://www.theguardian.com/info/2019/feb/07/exploring-your-ideas-why-prototyping-is-so-important
Books
Future Ethics is the name of the latest insightful and thought-provoking book by Cennydd Bowles, a product designer, futurist, and former Design Lead at Twitter. Among so many important topics that make the book required reading, at one point, Cennydd talks about the potential of prototyping to envision possible futures and spark a conversation. Design fiction so to say. He calls those prototypes provocatypes, which I like a lot:
“A provocatype creates a curious wormhole between design and research: it’s a designed product that nevertheless exists mostly as a research probe. The big difference from regular prototyping is we make provocatypes with not just a problem-solving mindset but also problem-creating mindset. If we’re successful, a provocatype will spark better reactions than a hypothetical discussion would.“
Order Cennydd’s book here:https://www.future-ethics.com/buy/ It’s available as both paperback and ebook.
Tools
Haiku is now Animator
UI animation tool Haiku for Mac just announced a rebranding: The tool is now called Animator by Haiku. The team also decided to discontinue the free plan. Animator supports importing designs from Sketch, Figma, Adobe Illustrator, or as SVG and allows you to create animations with both a timeline and a code mode.
https://www.haikuforteams.com/blog/haiku-is-now-animator
March 2019 release of Adobe XD
XD is updated monthly and the March update brought some really nice improvements: XD now allows you to resolve missing fonts, it even automatically activates the missing fonts if available in the Adobe Fonts Library. You can now also use drag gestures when you preview your prototype in a browser, copy/paste vector content to Illustrator, and select elements across groups using Cmd/Ctrl+Shift+Click.
https://helpx.adobe.com/xd/help/whats-new.html
Designing a complete UI Kit for Adobe XD based on Semantic UI
Ole Fredrik Lie couldn’t find any decent UI Kit for Adobe XD based on the Semantic UI framework, so he decided to create ”the most awesome UI Kit for Adobe XD to date”.
https://medium.com/@olefredrik/designing-a-complete-ui-kit-for-adobe-xd-based-on-semantic-ui-f214fae8ec37
Figma Help Center: Getting Started with Prototyping
Figma’s Prototyping features allow you to create interactive flows that simulate how a user may interact with your designs. This article takes you through some key prototyping concepts and settings in Figma.
https://help.figma.com/article/199-getting-started-with-prototyping
Flow by Moleskine
Moleskine, the Italian makers of notebooks, just released a new iOS sketching and drawing app. Featuring an infinite canvas, dozens of combinations for paper types, colors, and tools, Flow is built to feel as responsive as drawing on real paper.
https://moleskinestudio.com/
Voiceflow
Voiceflow lets you visually design, prototype, and build voice apps. You can iterate your conversational flow with a lego style block system, integrate your voice app with external API’s, and then deploy your project to both Amazon Alexa and Google Assistant.
https://www.getvoiceflow.com/
Invocable
Invocable is another tool for prototyping Alexa Skills. You create conversation through the visual interface, connecting blocks into conversation flows. You can add audio and customize what your voice app does, based on a variable or event.
https://www.invocable.com/
Mockdown
I’m not sure if I will ever use this, but it is definitely another interesting application of machine learning in the design process. Mockdown is a tool to turn high fidelity UI images into low fidelity mockups.
https://epic.ai/mockdown/
Speak Human
Sometimes we just need a quick copy for mockups or prototypes. Speak Human is a neat little tool that generates little snippets of microcopy – nothing more, nothing less.
http://speakhuman.today/