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.
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.
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.”
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”.
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.
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.
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.
Framer, which is available for both Mac and Windows, now comes with Smart Components, including variants, variables, animations, interactions, visual states, and more.
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.
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.
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.
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.
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.
Volt is a kit of 11 prototypes by Framer that helps you create interactive flows and prototype products with components and no-code transitions.
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.