Issue 27 – February 2021
The State of Prototyping, on Design Engineering, a Tale of Four Prototypes, and a Podcast Episode.
Hi! Prototyping.news is back from a far too long pandemic-induced break. I hope you are all well and that you have found a way to deal with this extraordinary situation which has been a challenge for every one of us. Depending on where you live on our blue dot, you might still feel the consequences of COVID-19 and I wish you all the very best. Stay healthy! 💚
The pandemic has fundamentally changed the way we live and work and some of those changes will persist for the years to come. I’m speaking, of course, of remote work and collaboration. Teams that used to work together in a physical space suddenly were forced to find ways to produce their best work from home. Although much about this situation is very different from how remote work usually feels, many employees have tasted the sweet wine of remote work with its more flexible schedule, saved commute time, and longer stretches of uninterrupted, focused work. And so, many people realized that being in the same physical space is not always necessary to work together with great success.
Still, generating and executing ideas together is challenging when everyone is working from a different location. How do you generate spaces where people can ideate and think collaboratively? How do you make sure everyone is talking about the same thing? How do you encourage the transparency which is necessary so that everyone on the team knows what to focus on and how the project advances? And, most importantly, how do you *create* together? Many of the best practices, tools, and systems that help us tackle those challenges are still under development. But there are already a lot of useful things we can use and it will be interesting to see how they improve over the months and years to come. One of the most effective tools for collaboration is prototyping. By building a prototype together, you and your colleagues can create a shared understanding, generate and refine ideas, and solve problems together step by step – even from a distance. Many of the tools we use today are already offering collaborative features, so creating and sharing prototypes has never been easier. They say that a prototype is worth a thousand meetings – and what could be better than saving a few meetings in those very special times?
– All the best, stay healthy, and happy prototyping! Matthias
Links
State of Prototyping
Prototyping is increasingly becoming a fundamental part of the process for in-house teams and agencies alike. The 2020 State of Prototyping industry report by Design Week in partnership with Framer takes a look at the rapid rise in both the popularity and accessibility of prototyping and shows that prototypes are catalysts for creativity and – contrary to what many people think – actually a cost-saving tool.
https://www.framer.com/state-of-prototyping/
On Design Engineering: Prototyping
Trys Mudford shares a bunch of good reasons to start prototyping with your team: Prototypes unearth assumptions, get buy-in, can be deliverables to the engineering team, and help you focus on the things that really matter. And when it comes to building your prototype with real data, using Preact, Nuxt.js, or Eleventy can let you go to work fast.
https://www.trysmudford.com/blog/prototyping/
A tale of four prototypes
I love this post by Dave Rupert: “I really liked all of these ideas and it’s a difficult choice to not mature these into full-featured applications, but it’s important to acknowledge that it’s okay if prototypes go nowhere. By their nature, prototypes aren’t something you should be heavily invested in. For every 10 prototypes I make, there’s probably one good idea I should explore further. For every 100 prototypes, there’s maybe one success story.”
https://daverupert.com/2020/11/a-tale-of-four-prototypes/
What Cooking Dinner for Friends Taught Me About Prototyping
Nicki Schäfer, with illustrations by Khyati Trehan, shares how his hunt for the perfectly-cooked steak ended up with him hooking up an Arduino board to a heating rod, an electronic thermometer, and a milk-stirrer. A great example of how using a prototyping mindset in your everyday life can have the “magical effect of turning common challenges into moments of playful exploration”.
https://www.ideo.com/blog/what-cooking-dinner-for-friends-taught-me-about-prototyping
CodePen as a Component Editor
CodePen is a great tool when you need to quickly prototype something in the browser. When they were looking for ways to create component playgrounds to include in the Duet Design System, they had an idea: Why not use the CodePen API to add a button to the components of the design system that lets you play with the code of the component with on click? The nice side-effect of this implementation: It got some of their designers to start using CodePen as their favorite tool for prototyping.
https://viljamis.com/2020/codepen-as-a-component-editor/
Podcasts
Prototyping – The Clearleft Podcast
Jeremy Keith of Clearleft, together with his colleagues Benjamin Parry, Lorenzo Ferronato, and Trys Mudford, provides insight into how the team uses prototypes to test hypotheses and explore different solutions to design problems, like an interactive map for library vans. Later, Adekunle Oduye, a UX engineer working on the MailChimp design system, shares how they use prototypes in the world of product design to make sure they are building the right thing and collaborate better.
https://podcast.clearleft.com/season02/episode04/
Tools
Adobe XD for Visual Studio Code
Design systems can be the missing link between design and development. But our tools often don’t reflect that reality. With the recently announced Adobe XD extension for Visual Studio Code, we get one step closer to a tighter integration of design systems for both designers and developers: When you export your design tokens, like colors and character styles, from XD, you can now import them as a shareable Design System Package into VS Code. You can then convert the design tokens into platform-specific variables like CSS custom properties, which the developers can directly use via IntelliSense in their code, together with code snippets they add to the components of your design system. A very promising extension, also when you think about rapid prototyping with an existing design system.
https://letsxd.com/vscode
Framer – Announcing Smart Components
Framer, which is available for both Mac and Windows, now comes with Smart Components, including variants, variables, animations, interactions, visual states, and more.
https://www.framer.com/blog/posts/announcing-smart-components/
Yes Sur: Behind the scenes of Sketch’s macOS makeover
The Sketch team shares how it redesigned the interface for the release of Sketch 70, their Big Sur update. An evolution instead of a revolution that also includes new icons.
https://www.sketch.com/blog/2020/11/18/yes-sur-behind-the-scenes-of-sketchs-macos-makeover/
ProtoPie 5.1: Give Your Interactions a Voice
After ProtoPie 5.0 added interaction recipes, a feature that lets you generate specs by recording interactions, and interaction libraries as a central space for all your components, you can now also use ProtoPie for voice prototyping.
https://www.protopie.io/blog/voice-interactions
Anima for Adobe XD
Anima, a tool to create high-fidelity prototypes and export responsive and interactive HTML, CSS, and Javascript code, is now available for Adobe XD. You can add videos, GIFs, Lottie animations, links, real input fields, hover effects, and even embed custom code.
https://blog.animaapp.com/announcing-anima-for-adobe-xd-6db773468f4f
Conceptboard – Your Visual Collaboration Workspace
Conceptboard is an online whiteboard to collaboratively work on ideas together. You can work on an infinite canvas with live cursors together and get started with a large collection of templates. Nice for prototyping collaboratively or running workshops.
https://conceptboard.com/
heywires Adobe XD Wireframe Kit
Wireframes are still a thing and a good way to get started in no time is by using a wireframe kit like heywires. It is available for Adobe XD comes with over 370 individual elements and 60 components for mobile and desktop viewports.
https://heywir.es/
Contra Wireframe Kit
Contra is an open-source wireframe kit available for Adobe XD, Figma, Invision Studio, and Sketch. It contains more than 150 components and over 50 mobile screens. You can also create new components and screens easily with the help of its style guide.
https://contrauikit.com/
Volt
Volt is a kit of 11 prototypes by Framer that helps you create interactive flows and prototype products with components and no-code transitions.
https://www.framer.com/volt/
CleanShot X Screen Capture
One quick way to share ideas with team members or clients is to record your screen. CleanShot X takes your screenshots and screen recordings on a Mac to the next level. You can create shareable links for your annotated screenshots, capture scrollable content, and record your screen and save it as a video or an optimized GIF file.
https://getcleanshot.com/