Issue 17 – May 2019
Why everyone should prototype, prototyping for designers, lessons on superior product prototyping, and The World-Wide Work.
Hi! We’re already quite a few days into June so it is time for the next selection of links and resources around prototyping for the Web. That you are a reader of this newsletter shows that you care about the future of our craft and that you are always looking for new ways to work better and more efficiently. Efficiency, though, is not the only reason why we all should prototype even more. We need to shift the way we create our work because the world around us is changing rapidly. Not only do we have to cope with an ever-growing number of tools and technologies. Moreover, the Web has fundamentally changed how opinions and ideas form and spread and the rise of machine learning is heralding the start of another wave of replacing interchangeable workers with (digital) machines. We are moving straight into a world where it will be crucial for creators like us to make things that are unique and original if we don’t want to be replaced by an algorithm anytime soon. Prototyping provides a way to create ideas and solve problems that perfectly fits this new reality. And developing a prototyping mindset will also empower you to flexibly create solutions for the Web as a place where control is an illusion and which rewards iteration, experimentation, and courage.
As always: If you like this project please share it with someone who you think would appreciate it. If you have feedback or want to share an interesting link, just write me an email. Thank you! 🤗
– Happy prototyping! Matthias
Links
Why Everyone Should Prototype (Not Just Designers)
Especially if you are looking for even more good reasons to start prototyping, this interview by Chris Nyffeler with Coe Leta Stafford, designer at IDEO, is well worth your time. But also if you’ve already embraced prototyping as part of your process this podcast episode holds some very practical and useful advice. For example, instead of seeing prototyping only as an additional step in your workflow, you should use prototyping throughout the whole design process as a means to grasp and think through ideas better. This also includes involving non-designers in the process because you will gain even more valuable insights by having a conversation and getting feedback from them.
https://www.ideou.com/blogs/inspiration/why-everyone-should-prototype-not-just-designers
Six Steps to Superior Product Prototyping: Lessons from an Apple and Oculus Engineer
Caitlin Kalinowski has worked for companies like Facebook, Apple, and Oculus and is a “master of the prototyping process, with a deep understanding of where, when and how changes should be slotted in, from the first iteration to the last.” In this brilliant interview, she shares, among other great advice, her six-step approach to building strong prototypes, how and why you must define your non-negotiables before starting to build prototypes, how to design a process that fits in as many iteration cycles as possible, and why you should make seriously ugly prototypes, too.
https://firstround.com/review/six-steps-to-superior-product-prototyping-lessons-from-an-apple-and-oculus-engineer/
A Beginner’s Guide To User Journey Mapping
User journey maps are a common tool used by UX designers to visualize how people interact with your product in different situations, contexts, and touch points and can help define KPIs as well as inform strategic decisions of product teams. Journey maps can be a prototype in itself but also help decide where to use prototyping to generate more insight and gain more experience. In this article, Nick Babich shares eight steps to create user journey maps, from choosing a scope to validation and refinement.
Proto GP: 5 ways to level up your prototyping workflow
Building prototypes should be as fast and effortless as possible. Figma is one of the tools that combine design and prototyping capabilities and allow for efficiency and flexibility when building your prototypes. In this post, Thomas Lowry shares five tips to speed up and improve your prototyping workflow in Figma, like using components for scrolling content or timed delays and overlays to simulate interactions.
https://www.figma.com/blog/proto-gp-5-ways-to-level-up-your-prototyping-workflow/
Design and code responsive Skeleton Screens
Skeleton screens have become a popular design pattern to convey to users that content is being loaded asynchronously. And, in contrast to loading spinners or progress bars, they come with the huge benefit of increasing the perceived performance of an interface. Marina Aisa explains the benefits of skeleton screens and how to design and build them. An maybe it’s a good idea to use them in one of your next prototypes.
https://marinaaisa.com/blog/design-and-code-skeletons-screens/
Talks
The World-Wide Work, Ethan Marcotte
This talk by Ethan Marcotte from New Adventures is one of the best I’ve ever seen and certainly one of the most important you will see and hear this year. Ethan, who coined the term Responsive Web Design nine years ago, looks at the current state of the Web and the many challenges facing our industry and draws parallels to the technological breakthroughs during the industrial revolution: Just like with other technologies that came before, the invention and growth of the Web was accompanied with high hopes for a better future. But instead, we are now continuously facing ethical, moral, and political crises while automation and machine learning are reshaping our world and the way we work. It is time for us to start asking ourselves what kind of work we want to do in this world and also to realize that we’re all in this together. And only together we can bring about lasting change.
Everyone working in our field (and beyond) should watch this talk.
https://newadventuresconf.com/2019/coverage/ethan/
Prototyping Voice Experiences: Design Sprints for the Google Assistant (Google I/O'19)
Voice interfaces are here to stay and voice will certainly develop into a totally natural way to interact with digital devices in the years to come. Yet, designing and especially prototyping for voice is not the same as for visual designs. In this talk at Google I/O 2019, Kai Haley and Wally Brill provide many examples of practical design patterns for voice user interfaces. They also go into detail about why the format of a Design Sprint must be adjusted if you are designing a conversational experience and highlight how to plan, structure, and run a Conversation Design Sprint.
https://www.youtube.com/watch?v=FrGaV4wzgeo
Books
Prototyping for Designers, by Kathryn McElroy
I can’t recommend Kathryn McElroy’s book “Prototyping for Designers” (O'Reilly Media, 2017) highly enough. Not only because she explains the goals and methodologies behind prototyping and shows how to prototype for both physical and digital products and test your prototypes with users, but – maybe even more important – because Kathryn gets you to recognize that prototyping is not only a tool or a specific process but instead a way of thinking, a mindset.
http://shop.oreilly.com/product/0636920049487.do
Tools
Adobe XD: Introducing Design Systems in Adobe XD: Easily Create, Share, and Manage Reusable Colors, Styles, and Components with Your Team
The May update of Adobe XD is a game changer. It brings useful and long-requested features like artboard guides, keyboard and gamepad triggers for your prototypes, a polygon tool, and additional text formatting options. But on top of that, you can now also build pattern libraries and style guides with linked colors, characters styles, and components. Components work with responsive resize and, in the coming months, the team wants to add support for defining multiple component states and animating between states, to create robust reusable components with interactions.
https://theblog.adobe.com/xd-may-2019-update-create-design-systems
We Are All 3D Publishers Now. Announcing Torch 3.
Torch is a tool to create and share spatial experiences for augmented reality. With Torch 3, the team now took Torch from a prototyping and design tool to a full augmented reality app development and publishing platform. Torch Publish Pro lets you share your creations with anyone with an AR-capable device via Facebook, Instagram, WhatsApp, and soon WebAR and more social networks.
https://www.torch.app/blog/announcing-torch-3-ar-publishing
Introducing Framer Playground
The latest release of Framer X is completely focused on working with code right from within the tool. The update brings a new “Playground” which consists of a new built-in code editor, a complete prototyping library, and proper documentation to get you started quickly.
https://www.framer.com/blog/posts/introducing-framer-playground/
Welcome Overflow 1.0
Overflow, a tool to create interactive user flows, has reached version 1.0. The update features support for organizations, people, and roles, an all-new dashboard, and improved sharing capabilities.
https://blog.overflow.io/welcome-overflow-1-0-b4a23bcbb2f9
Sketch.systems
Sketch.systems is a tool for sketching states of a software product. It is “like Markdown for describing your product behavior”. You can sketch out the different states of your application and then link them together to a prototype with transitions, triggered by events.
https://sketch.systems/
Polypane
Polypane is a browser to create and test websites and apps that lets you see the full range of viewports for your site in a single overview, take screenshots, and much more.
https://polypane.rocks/
ALEX
Alex is a neat command line tool that helps you find gender favoring, polarising, race-related, religion inconsiderate, or other unequal phrasing. And it even offers linting integrations for many popular code editors like Atom, Sublime Text, and Visual Studio Code.
https://alexjs.com/
The Design Sprint Kit
The Design Sprint Kit is an open-source resource by Google that will help you learn, plan, and contribute to the “Design Sprint”, a methodology for solving problems through designing, prototyping, and testing ideas with users.
https://designsprintkit.withgoogle.com