Issue 18 – June 2019
Prototypes, permission + possession, iteration sprints, embracing the uncomfortable, and CSS Grid subgrid.
Hi! I hope you are all enjoying the middle of the year and are working on something exciting that gives you pleasure. Whatever it is, I’m pretty sure there are some constraints that you have to deal with. Constraints can be intimidating and even frustrating at times and we catch ourselves thinking: “If only I could work without those constraints.“ But if you are honest, there is nothing that is free of constraints. And on top of that, constraints are a prerequisite for creativity. They are actually quite useful. Anyone who has ever been sitting in front of a blank paper knows that it is far easier to start drawing or writing something if you are given a certain constraint like: Only use red and yellow ink and draw some fruit. Or: Write three sentences about your summer holidays. Constraints activate our problem-solving abilities and fuel our creativity. Constraints are one of the materials we build our products with, so we need to accept and even embrace them. Time, resources, quality, technology, people, contexts – the list of possible constraints is endless. But it is important to take all constraints into account to come up with a viable solution. Prototyping lets you explore the possibilities and boundaries of all those constraints across various dimensions of your project. And the form of the prototype really doesn’t matter here, as long as you get an answer to the question: Is *this* possible given *that* constraint? The answer is often something that no assumption, no stakeholder, and no meeting will ever give you. Only a prototype.
The goal of this project is to help people improve their design process and embrace prototyping as a way of working and a way of thinking. If you know someone who you think would benefit from reading this newsletter, please share it. And if you found or built something that belongs in the next issue, just let me know. Thank you so much! 🤗
– Happy prototyping! Matthias
Links
Prototypes, Permission + Possession
Richard Saul Wurman loves dummies. So he always makes “binding dummies” when he’s working on a new book. In this wonderful post, Dan Klyn wonders: are Richard Saul Wurman’s dummies and the prototypes designers make the same thing? In a way they are, but there’s an important difference: While prototypes are often used for validating a concept with real users, the purpose of said binding dummies is to let stakeholders experience and touch a real physical object to get their permission to continue with the project. Which can also be a useful application of digital prototypes, of course.
https://www.good-fit.org/5-lives/dummies
Nobody really owns product work
Basecamp’s Jonas Downey shares his thoughts on something that is hard to acknowledge sometimes: nobody really owns anything in a product made by a team. The contributions each of us makes are often only a temporary state of a system that is ever-evolving. So it is not about individual contributions, is it about the team collectively accomplishing something greater than any one person could have done alone. And this simple lesson is incredibly valuable when you are building prototypes, too: Almost always prototypes are a disposable artifact, which is why you need to separate yourself emotionally from them. As sophisticated or clever they might be, they are always a means to an end and even if a prototype is thrown away or replaced by something else, it still had an invaluable impact.
https://m.signalvnoise.com/nobody-really-owns-product-work/
Design sprints need iteration
Design Sprints are a popular way for teams to explore ideas and possible solutions quickly and validate them through prototypes and user testing. In this article, Brittni Bowering shares the interesting idea of running an iteration sprint right after the design sprint. Such an iteration sprint is a simplified version of the first design sprint week where a team uses all the feedback and insights from the user tests to make small (or big) changes to the idea. “This gives us the time and framework to rework the solution and bring it closer to something that the target user would love to use.”
https://www.invisionapp.com/inside-design/design-sprints-need-iteration/
To Design a Better Future, Embrace the Uncomfortable
Going all in on the unfamiliar and uncomfortable is key to coming up with creative, innovative solutions. This is especially true for emerging technologies which have the potential to shape the future in new and unknown ways. In order to better understand the consequences and implications of emerging technologies, Elger Oberwelz, an Executive Design Director at IDEO Palo Alto, and his colleagues embarked on an internal IDEO project called “The Discomfort Zone“ and built several prototypes to explore and visualize their ideas around topics like personalized intelligence, augmented realities, or physical tagging.
https://www.ideo.com/blog/to-design-a-better-future-embrace-the-uncomfortable
CSS Grid Level 2 – subgrid is coming to Firefox
Are you busy building HTML prototypes to explore the possibilities of CSS Grid? If not, there might be another good reason to do so: CSS Grid Level 2 / subgrid is now available in Firefox Nightly and in this post, the unstoppable Rachel Andrew explains how it works and what subgrid will be useful for. With lots of CodePen examples, or, as you could also call them: prototypes.
https://hacks.mozilla.org/2019/06/css-grid-level-2-subgrid-is-coming-to-firefox/
Understanding the Design Process through Avengers: Endgame
Not only is it a clever idea to give an overview of the design process as seen through the lens of the super-villain Thanos. Khoi Vinh‘s annotated slides from a recent talk are also full of meta-advice about the role and value of prototyping and a gold mine if you’re looking for design and prototyping quotes.
https://speakerdeck.com/khoi/understanding-the-design-process-through-avengers-endgame
Talks & Webinars
Aquent Gymnasium Webinar, UX Design: Prototyping as Process
Dave Rupert and James Young joined Jeremy Osborn for a webinar about prototyping. Over the course of an hour, they discussed the benefits of prototyping both from a design and a development perspective and how prototyping can help to create and validate ideas and test them with users.
https://gymnasium.github.io/cms/webinars/prototyping-as-process/
The Craft of Prototyping by Caitlin Kalinowski
I already shared an article about Caitlin Kalinowski’s six-step approach to building strong prototypes in the last issue. If you missed it, I highly encourage you to read the article. Or, you could also watch this video from a talk Caitlin gave at Mind the Product San Francisco, in which she explains the principles in great detail.
https://www.mindtheproduct.com/2017/09/craft-prototyping-caitlin-kalinowski/
Tools
CSS Grid Generator
If you are looking for a visual way to explore what’s possible with CSS Grid, Sarah Drasner’s ingenious CSS Grid Generator got you covered. Just set the numbers and units of columns and rows and it generates a CSS grid automatically. You can then manually drag out boxes within the grid. A great way to start your next CSS Grid prototype.
https://cssgrid-generator.netlify.com/
A-Frame
A-Frame is a web framework for building virtual reality experiences built on top of three.js. It supports most VR headsets like Vive, Rift, Daydream, GearVR, desktop, and can even be used for augmented reality.
https://aframe.io/
Sizzy – The browser made for responsive design
Sizzy is a browser made for the development and testing of responsive design. In one browser window, it lets you preview your project on numerous different devices at once and synchronized, simulating the viewport and user agent of each device.
https://sizzy.co
Vempathy
Vempathy is a customer experience research software to conduct remote user tests. What makes it special is that they use machine learning to generate insights into the emotional states of the test participants while they are using your prototype. Plugins are available for Sketch and Adobe XD.
https://vempathy.tech/
June 2019 Release of Adobe XD
The latest monthly update of Adobe XD brought a new properties inspector in prototype mode that makes it easier to keep track of complex interaction and to change the settings for multiple interactions at once. XD now supports superscript and subscript text transforms, the integration with Jira has been improved, and there is a new plugins panel that lets you work with plugins without having to jump through different menus.
https://theblog.adobe.com/xd-june-2019-update-property-inspector-superscript-subscript-more/