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/

On Design Thinking

Design Thinking is often treated as a sort of magic bullet to solve all kinds of problems. But what is Design Thinking, really? Maggie Gram explores this question and takes us on a fascinating journey into the history of design theory and how IDEO invented the idea that the design process could be applied outside its usual context. But her article also reminds us that to solve the real “wicked problems”, simply following a prescribed method like Design Thinking is not enough to guarantee success.
https://nplusonemag.com/issue-35/reviews/on-design-thinking/

Don't use low-fidelity prototypes to test desirability

When you test a prototype with users, it is important to think about the right level of fidelity: Low fidelity paper prototypes and wireframes are great for feedback on usability, but, as Brett van Zuiden argues, working with high-fidelity prototypes can be much more effective when you want to assess the desirability of a product. The more realistic and detailed the prototype is, the more it looks like a real choice to potential users and this will result in more authentic feedback.
http://brettcvz.com/posts/58-dont-use-lowfidelity-prototypes-to-test-desirability

Why wireframes are becoming obsolete

Wireframes are still a popular tool in the design process and people justify their use with arguments like: Wireframes let stakeholders focus on interactions instead of visuals. Wireframes are faster to create than more detailed designs. Wireframes are an effective tool to document interactions. But does all of this still hold true? Anton Sten objects and suggests to try a much rougher alternative instead that also leaves room for discussion and subsequent contributions by others: Sketching.
https://www.antonsten.com/wireframes/

Design Sprints are Absurd

The “Design Sprint“, a process popularized by Google Ventures for quickly validating ideas and solving problems, is used by thousands of companies to innovate and solve new problems. Jeff Davidson challenges the idea of Design Sprints as the magic bullet for problem-solving and shows where the process falls short. For example, in that it forces businesses to make critical decisions very quickly without proper contextual understanding and that sprinting encourages teams to pile on features as opposed to sculpting value.
https://medium.com/swlh/design-sprints-are-absurd-a462e6413b7e

Executing UX Animations: Duration and Motion Characteristics

Animation can help make an interface easier to use by providing feedback and a visual cue of state changes. But animation is also a detail that can be hard to get right which is also why building little animation prototypes can be invaluable. Page Laubheimer looks at duration and motion characteristics of UI animation and shows how to use it effectively to improve the overall user experience.
https://www.nngroup.com/articles/animation-duration/

Agile as Trauma

Dorian Taylor shares an in-depth analysis of the roots of agile software development and some of its current limitations. Agile as a practice seems to be preoccupied with the ever same topics and patterns, like incremental and iterative development or user involvement. Yet it mostly fails to address other important areas: Like the question of why agile principles remain constrained to project management and rarely influence procurement and contracting practices. Or, for example, the problem of feature factories. Teams that keep adding new features as an end in itself instead of focusing on a much more valuable concept: behavior.
https://doriantaylor.com/agile-as-trauma

Constrained CSS grids without max-width.

CSS Grid fundamentally changes the way we do layout on the Web. And I’ll keep repeating it over and over again: Building HTML (and CSS) prototypes with your team will help designers get their heads around the new possibilities of CSS Grid and how to think beyond the fixed canvas. One excellent example of this is the technique Ethan Marcotte shares in this post. He explains how he uses CSS Grid – and in particular the empty space around his design – to create a layout that has a maximum width but can also conveniently be extended into a full-bleed layout when needed.
https://ethanmarcotte.com/wrote/css-grid-without-max-width/

Tools

Visly

Visly is a tool that lets you build React components visually. It is based on a Flexbox implementation in Rust and you can either import existing components or design them in Visly from scratch, including variants and different component states.
https://visly.app/

Ideate Visually Anywhere with the Whiteboard Plugin for Adobe XD

The Adobe Design team created the Whiteboard plugin for Adobe XD which you can use to remotely ideate, sketch, and design as a team, ideally with XD’s Coediting feature.
https://theblog.adobe.com/ideate-visually-anywhere-with-the-whiteboard-plugin-for-adobe-xd/

March 2020 Release of Adobe XD: Prototype with Audio, Anchor Links, and More

In the March release, the Adobe XD team added audio playback support to XD. So you can now not only prototype with voice triggers but also play sounds to build even richer voice interfaces or to add a sound layer to your UI design.
https://theblog.adobe.com/xd-march-2023-audio-prototyping-anchor-links-more/

ProtoPie 4.3: More Flexibility With Nested Components

Prototyping tool ProtoPie comes with a few useful additions in version 4.3. First and foremost: nested components. Moreover, you can use background blur in your iOS prototypes and utilize the system status bar on both iOS and Android to make your prototypes feel even more realistic.
https://blog.protopie.io/protopie-4-3-more-flexibility-with-nested-components-6754520464eb

JetBrains Mono

JetBrains Mono is a typeface for developers. It is free and open-source and has been optimized for a better code reading experience. It also comes with code-specific ligatures and four weights with matching italics.
https://www.jetbrains.com/lp/mono/

MarkUp

MarkUp is a visual commenting platform that allows you to turn your website into a dynamic canvas ready for feedback and collaboration.
https://www.markup.io/

Jamm

Jamm is a lightweight voice and video collaboration tool for remote teams. It is free for the next three months.
https://jamm.app/en/

Why Prototyping is a Must for Teams

Many teams still work with static mockups to visualize their ideas and communicate them to stakeholders and other team members. Jarrod Drysdale looks at the many advantages prototypes have over static layouts, like better communication between designers and developers, an increased understanding by stakeholders for interactivity and user flows, and better feedback from user testing.
https://www.framer.com/blog/posts/why-prototyping-is-a-must/

Faking is Good: Back-end Data and API Prototyping with Faker.js and JSON-Server

Working with realistic data as early as possible in the design process can be invaluable because you can design and prototype content-first. Pulling in realistic data into your prototypes is not limited to coded prototypes anymore. With plugins like Data Populator, you can also pull data from APIs into tools like Sketch or Adobe XD, for example. But what if you want to use realistic data while the API is not ready yet? That’s where mocking an API can prove useful and in this post, Tapas Adhikary walks you through the process of setting up a local fake REST API that responds to your requests with generated but realistic fake data.
https://blog.greenroots.info/faking-is-good-back-end-data-and-api-prototyping-with-fakerjs-and-json-server-ck5q8yc2k06evqks1rhvas00n

20 Most Inspirational Interactive Prototypes for 2020

If you are looking for some prototyping inspiration, have a look at this list of 20 prototypes and their animations and micro-interactions. Fredo Tan collected a broad range of examples, from mobile apps and voice interfaces to dashboards and desktop applications. All prototypes are made with ProtoPie.
https://uxplanet.org/20-most-inspirational-interactive-prototypes-for-2020-cad0b5bb711

4 ways to prototype a hover state: InVision, Framer, Sketch, Figma

Prototyping is not only invaluable to explore comprehensive solutions but equally useful to get the small details and micro-interactions of a project right. Polo Chen takes a look at one of the most basic interaction patterns on the web, the hover effect, and how it can be prototyped in four of the most popular prototyping tools. And in case you also want to know how to prototype an auto-animated hover effect in Adobe XD, watch this Adobe XD Hover Effect Design & Prototype Tutorial video by Caler Edwards.
https://uxdesign.cc/prototype-a-hover-state-4-ways-85851436ffae

Simple Image Placeholders with SVG

Image placeholders are super useful for HTML prototyping and you can use services like PlaceIMG, Placeholder.com, or placekitten to get placeholders via a URL that can then be used in a prototype. External requests can significantly slow down local development, though, so Tyler Sticka made a tiny, dependency-free library called Simple SVG Placeholder that generates data URIs for placeholder images. In this post, Tyler explains how the library works and how you can use it in your prototypes.
https://cloudfour.com/thinks/simple-svg-placeholder/

Video Tutorials

Prototyping in the Browser with CSS Grid Layout

CSS Grid is a game-changer in how quickly different layouts can be prototyped directly in the browser with only a few lines of code. If you are not yet convinced, watch this 5-minute video by Jeremy Osborn. He does a great job of explaining why prototyping in the browser with CSS Grid is so powerful.
https://thegymnasium.com/take5/prototyping-in-the-browser-with-css-grid-layout

Overview: Prototyping in Adobe XD with Jonathan Pimento & Arun Kaza

Adobe XD lets you intuitively link screens to create prototypes quickly but it is equally suited for building high-fidelity prototypes with multiple interaction triggers – like touch, voice, and keyboard input –, different component states, and animations. In this session from Adobe MAX, Jonathan Pimento and Arun Kaza explain in detail how to prototype effectively with XD, including a lot of pro tips and tricks.
https://www.youtube.com/watch?v=Em57ib2rACk

Tools

Play

Play is a new tool that promises to revolutionize how you design apps – directly on your mobile phone. You can build your product from scratch or by using over 100 customizable components. Play will export to Xcode supporting Swift, with plans to roll out more languages in the future. You can sign up for the private beta now.
https://www.createwithplay.com

Diagrams

Whether you want to create a sitemap, visualize a software architecture, or prototype a user flow, diagrams are a helpful tool in the design process. Diagrams is a new diagram editor for Mac that lets you easily create beautiful and structured, well, diagrams.
https://diagrams.app

January 2020 Release of Adobe XD: Content-Aware Layout, New Plugin APIs, and More

Besides star shapes and drag-and-drop support for XD plugins, the January release of Adobe XD introduced powerful smart layout controls: In its initial release, Content-Aware Layout finally brings padding to groups and components in XD. So you can now create buttons that adapt to different text lengths or components that grow when you add new layers to the group.
https://theblog.adobe.com/xd-january-2020-content-aware-layout-plugin-apis/

Introducing Cloud Inspector — free developer handoff in the browser

The Sketch team announced the first beta version of a new Cloud Inspector in January. Cloud Inspector lets you share designs more easily with developers and provides details like measurements, fonts, or colors for selected artboards and layers.
https://blog.sketchapp.com/introducing-cloud-inspector-free-developer-handoff-in-the-browser-59917220334a

Leonardo: an open-source contrast-based color generator

Creating a color palette that meets accessibility criteria such as minimum contrast ratios defined by the Web Content Accessibility Guidelines can be quite a challenge. This is where Leonardo comes in, an open-source tool for creating adaptive color palettes based on a target contrast ratio.
https://medium.com/@NateBaldwin/leonardo-an-open-source-contrast-based-color-generator-92d61b6521d2

CSS Grid for Designers

CSS Grid is here but there is a huge problem: Many designers still don’t know about the exciting possibilities that CSS Grid offers, possibilities that go far beyond the 12 column grid. In this article, Johna Mandel of the New York Times masterfully explains the foundations of Grid from the viewpoint of a designer, facilitating a basic understanding of what is possible and why Grid is so great for designers. In the end, CSS Grid has made her “love HTML and CSS prototyping again”. So how about the next time you start to sketch out a web layout you do it with an HTML prototype – and CSS Grid?
https://open.nytimes.com/css-grid-for-designers-f74a883b98f5/

The Right Amount of Perfect

When you are building something new, you don’t necessarily need a polished, production-quality result all the time. Instead, what perfect means entirely depends on the project and the situation you are in. What you really need, is only the right amount of perfect, argues Jonas Downey in this post on Basecamp’s Signal v. Noise blog: “When you’re making a prototype of an idea, the right amount of perfect is a barely-working demo. Can you show the idea to someone, well enough to demonstrate how it should work—even if it’s stitched together with duct tape and popsicle sticks? Perfect.”
https://m.signalvnoise.com/the-right-amount-of-perfect/

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/

The Power of Prototypes in the Creative Process

Prototypes can be a catalyst for creative decisions and allow you to iteratively refine an idea into a final product. In this post about the power of prototyping in the design process, Jim Nielsen summarizes the main points from Ken Kocienda’s book “Creative Selection” regarding the role of prototyping in Apple’s evolutionary process of developing the original iPhone and other innovative products.
https://blog.jim-nielsen.com/2019/the-power-of-prototypes-in-the-creative-process/

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/

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

It’s Never a Good Time to Do Research

Research is not only often neglected, but often teams struggle to find the right time to do research. Erika Hall, the co-founder of Mule Design and author of ‘Conversational Design’ and ‘Just Enough Research’, explains why there is never a good time to do research – you simply should be doing research all the time. Because when everyone is working from clear goals and good information, everything goes faster, feels more meaningful, and has a much higher chance of success – also prototyping. So you better get into a mode of continuously asking questions and gathering evidence. Also make sure to read Erika’s post “The 9 Rules of Design Research”, too.
https://medium.com/mule-design/its-never-a-good-time-to-do-research-1ef719158980

Critique your shortcut to better designs

Introducing regular structured critique to your design process is one of the keys to improving the design quality of a team and growing the design literacy of whole organizations. But to have the desired effect, critiques have to be done right. So, in this post on the Clearleft blog, Chris How explains how to run a productive design critique and make it part of your practice.
https://clearleft.com/posts/critique-your-shortcut-to-better-designs

Every Layout – Relearn CSS Layout

With the advent of Flexbox, CSS Grid, and multi-column layout, the possibilities to solve different layout problems have changed quite substantially. CSS layout isn’t a hack anymore and it’s about time to explore the best ways to work with those powerful layout algorithms. Whether you want to implement new layout solutions in production right away or want to explore them in prototypes first, Every Layout by Andy Bell and Heydon Pickering is an invaluable resource.

“Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.”
https://every-layout.dev/

Machine Learning For Front-End Developers With Tensorflow.js

Not a day goes by, at least in my perception, without some sort of news around AI and machine learning. It might seem as if machine learning is still a futuristic technology, yet it is already astonishingly ubiquitous. From the camera in your smartphone to assistive technology in cars to spam detection for social networks and the taste-predicting skills of Netflix – machine learning technology is already all around us. So if you think that the time is right to start learning about machine learning, what it is and how you can try it and use it yourself, for example in a first rough prototype, this article by Charlie Gerard is for you. Charlie covers the three main features currently available using Tensorflow.js and also talks about the limits of using machine learning in the frontend.
https://www.smashingmagazine.com/2019/09/machine-learning-front-end-developers-tensorflowjs/

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

Future Ethics, by Cennydd Bowles

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 a 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.

Shape Up, by Ryan Singer

The team at Basecamp is known for approaching projects differently but their unique process has never been laid out for all to see – until now. With “Shape Up” Ryan Singer has written an inspiring and insightful (free) book about how to design and build products differently by creating “a spirit of prototyping and piecewise enablement among the designers and programmers” and “shaping” work in six-week cycles, on two parallel tracks.

“Shaping work is qualitatively different from building. It’s unknown in advance which ideas will turn into bettable projects and which ones won’t. Some projects are shaped quickly, some take multiple cycles, and some never come together. What’s important is to always have some good options for the betting table before each cycle.”
https://basecamp.com/shapeup

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 talks of 2019. 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/

Tom Chi on Rapid Prototyping & Product Management

I already shared a talk by Tom Chi in issue 12 and although this exceptional talk here is from 2015, it is still highly relevant and well worth your time. Tom, who served as head of product experience at Google X developing technology such as Google Glass and Google's self-driving car, shares lessons he has learned in rapid prototyping that are also applicable to product management. For example, he emphasizes how important it is to create a culture of learning and to stay in the medium instead of creating too many abstraction layers. He also stresses the importance of reducing the loop length of improving a prototype after user feedback. This way, you generate the key learnings necessary to improve the product experience much faster.
https://www.mindtheproduct.com/2015/07/video-tom-chi-on-rapid-prototyping-product-management/

Lean, Agile, & Design Thinking, by Jeff Gothelf

Lean, agile, and Design Thinking are all popular frameworks that teams apply to work more effectively. But in reality, teams often don’t align their different ways of working and processes that are meant to improve the output of work are in fact not working for anyone. In this great talk from Mind the Product Singapore, Jeff Gothelf, author of Sense & Respond, explains why we have to move away from “implementing processes”. Instead, we should focus on the underlying principles of agile methodologies and Jeff provides ten such principles that work with any methodology your team may choose to use.
https://www.mindtheproduct.com/lean-agile-design-thinking-by-jeff-gothelf/

Podcasts

CodePen Radio – Prototyping with Dave and Trent

Dave Rupert and Trent Walton from the web design shop Paravel join Marie Mosley and Chris Coyier for this episode of the CodePen Radio podcast. They talk about their approach to web design, which includes a lot of prototypes, preferably in the browser, and also about how prototyping can improve project progress and lead to far better results, especially if the prototypes are shared early and often with clients and colleagues.
https://blog.codepen.io/2019/01/15/206-prototyping-with-dave-and-trent/

How to Test Prototypes with Customers: The Five-Act Interview

Interviewing customers can be invaluable to decide if an idea or design works. But how do you conduct a successful interview? One technique is the so-called Five-Act Interview, which is part of the book Sprint by Jake Knapp and others from Google Ventures. In this short video, you can see the Five-Act interview in action.
https://library.gv.com/how-to-test-prototypes-with-customers-the-five-act-interview-80305d98c407

The Long History of Prototypes

Prototyping, although it wasn’t called that way, has always been a part of how humans build things. In this article, Michael Guggenheim takes a look at the history of prototyping and outlines some of the reasons why prototypes have regained certain prominence and visibility in recent times, after being pushed back for a long time as being messy and amateurish in a world dominated by experts, planning, and science.
https://limn.it/articles/the-long-history-of-prototypes/

First Person Interview: James Oliver Senior and Grant Wedner on Prototyping

Prototyping is a very powerful process for discovery but it’s still not how most people work every day. So Jim Rosenberg from IDEO sat down with two experts, James Oliver Senior and Grant Wedner, to learn more about the advantages of prototyping, like testing hypotheses and refining ideas. In a few short videos, they also explain what makes a good prototype, for example, why surprisingly simple low-fidelity prototypes are often all you need and why defining a narrow problem space can be helpful to get started in solving big complex problems.
https://challenges.openideo.com/blog/first-person-interview-james-oliver-sr-and-grant-wedner-on-prototyping

The State of UX in 2020

For the fifth year now, Fabricio Teixeira and Caio Braga from UX Collective share a few of the trends they have identified which our industry has been writing, talking, and thinking about. One of the key trends they observed: Teams are increasingly adopting workflows that are less based on design files as deliverables. Instead, the product of design work is “every decision we made with the team and how we influenced the organization at large.” One key aspect of this shift: Collaboration and sharing, for example of prototypes, is becoming more important than ever.
https://trends.uxdesign.cc/

Talks

Lean, Agile, & Design Thinking by Jeff Gothelf

Lean, agile, and Design Thinking are all popular frameworks that teams apply to work more effectively. But in reality, teams often don’t align their different ways of working and processes that are meant to improve the output of work are in fact not working for anyone. In this great talk from Mind the Product Singapore, Jeff Gothelf, author of Sense & Respond, explains why we have to move away from “implementing processes”. Instead, we should focus on the underlying principles of agile methodologies and Jeff provides ten such principles that work with any methodology your team may choose to use.
https://www.mindtheproduct.com/lean-agile-design-thinking-by-jeff-gothelf/

Tools

2019 Design Tools Survey

More than 3000 designers from all over the world participated in the third annual UXtools.co Design Tools Survey. In nine categories from wireframing and prototyping to user testing and design system tools, designers shared what they use and what they are excited about.
https://uxtools.co/survey-2019/

Sketch 60 — your design system starts here

Version 60 of Sketch introduced a new Components Panel that brings Symbols, Text Styles and Layer Styles into a single tab. The team also improved the onboarding process for shared libraries and the transition from local to Cloud Libraries for Sketch for Teams.
https://blog.sketchapp.com/sketch-60-your-design-system-starts-here-a056cfa5b550

GSAP 3

The Greensock Animation Platform is one of the industry standards for building JavaScript-based animations and it is, therefore, also a great tool to build animation prototypes. Version 3, which is a complete re-write of the library, now comes at half the file size and with over 50 new features, like a simplified API, motion paths, new utility methods, keyframes, and much more.
https://greensock.com/3/

Basecamp Personal

The popular project management software Basecamp now offers a free version for up to 3 projects: Basecamp Personal is “perfect for freelancers, students, families, and personal projects” and also includes the infamous hill chart to track progress, of course.
https://basecamp.com/personal

Abstract – Now available in public beta: Adobe XD file support

After the Adobe MAX release of XD brought, among other new features, component states and real-time coediting, here comes the next great news on XD: The Abstract team just released Adobe XD file support into public beta for all customers, so you can now use Abstract to manage your XD files in a workflow based on branches, commits, and merges of stakeholder-approved design work.
https://www.abstract.com/blog/adobe-xd-beta/

Angle 3

The updated Angle 3 by Meng To and his team now comes with over 1000 vector and 3D device mockups for Sketch, Figma and Adobe XD.
https://angle.sh/

Flowkit

Flowkit is a UI kit to create user flows from pre-defined components. It is available for Sketch, Figma, and Adobe XD.
https://useflowkit.com

Wireframer

Wireframer is a neat little tool by Jim Raptis that lets you create SVG placeholder text for easy use inside – you probably guessed it – Sketch, Figma, and Adobe XD.
https://wireframer.netlify.com

The Hot Potato Process

Handoff between design and development is still a much-discussed topic and I also had my fair share of projects in the past where a bad handoff caused a lot of frustration on both sides of the “canyon“. And while processes have changed a lot in recent years towards more collaboration, there is still a noticeable number of designers who simply hand off comps to developers and think their work is done. Dan Mall and Brad Frost are vocal proponents of a workflow they call “The Hot Potato Process,” where ideas and artifacts are continuously passed back and forth from design to development and back again. A process that can involve a lot of prototyping, too.
http://danmall.me/articles/hot-potato-process/

Using the Platform

Part of the huge success of the Web as a platform has always been its permanence and stability, while at the same time allowing for change and experimentation. In this wonderful piece, Tim Kadlec reminds us, that this stability of the Web is by design and that a lot of thought and consideration goes into what becomes a standard and what doesn’t. Security, performance, and accessibility are inherent qualities of the platform, so Tim suggests that you should “use the platform until you can’t, then augment what’s missing.” And what could be better suited to explore how to use the platform than a little HTML prototype?
https://timkadlec.com/remembers/2019-10-21-using-the-platform/

Critique your shortcut to better designs

Introducing regular structured critique to your design process is one of the keys to improving the design quality of a team and growing the design literacy of whole organizations. But to have the desired effect, critiques have to be done right. So, in this post on the Clearleft blog, Chris How explains how to run a productive design critique and make it part of your practice.
https://clearleft.com/posts/critique-your-shortcut-to-better-designs

Introducing Design Critiques to large UX organizations

How design critiques can work in a larger UX organization is the focus of this article by Jan Kiekeben, Product Designer at XING, where about 60 UX professionals with different backgrounds regularly exchange their ideas and discuss UX work intensively. Jan shares lessons learned from implementing their very own formal design critique format and, for example, why specifying what type of feedback you want as a result of the critique is so important.
https://medium.com/xing-design/introducing-design-critiques-to-large-ux-organizations-53ea8ba78e5

To Design Better Products, Write Better UX Copy

Words are vital elements of digital products, especially on the Web. Nina Feinberg, a senior product designer at The New York Times, explains why considering language at the start of the design process can improve the quality of user experiences and shares a few exercises you can use to make sure that you strike the right tone and communicate effectively.
https://open.nytimes.com/to-design-better-products-consider-the-language-f17b923f8bae

Designing accessible color systems

Because good contrast makes it easier for people with visual impairments to use products, the team at Stripe wanted to improve the color contrast of their interfaces. And because, as Daryl Koopersmith and Wilson Miner share in this post, none of the existing tools helped them define colors that met the WCAG contrast guidelines while at the same time still being the Stripe colors, they set out to prototype and shape their own color tool that would help them define accessible colors in the perceptually uniform CIELAB color space.

GV’s Guide to UX Research for Startups

Research is essential if you want to learn more about your customers and create products and interfaces that work. Google Ventures has helped hundreds of startups use UX research and in this guide, Michael Margolis, UX Research Partner at GV, shares an extensive list of lessons and articles on the topic. Whether you want to learn more about why research is important, want to know how to plan and conduct user interviews, or if you would like to test prototypes with users and evaluate the results – this guide is for you.
https://library.gv.com/gv-guide-to-uxresearch-for-startups-b6d0c8ac81b3

Prototyping for innovation

The message of this article by Lulo is as true as it is powerful: You should see prototyping as a tool, not as a mere phase in the process. Prototyping is “something you do continuously to discover, learn, test and even pilot ideas”. Throughout the whole design process, prototyping can be used to visualize concepts, test hypotheses, and to test execution.
https://medium.com/design-thoughts-case-studies/prototyping-for-innovation-2983421b64cb

Videos

Mozilla Developer YouTube Channel

Whether you are a designer who wants to know why CSS is so weird, or you are a developer who wants to learn CSS Grid or how to improve image loading, the new Mozilla Developer YouTube channel got you covered. Miriam Suzanne and Jen Simmons are on fire bringing you the latest and greatest about building websites in the browser. And there is much more to come, like a series on the “Cascade”, for example.
https://www.youtube.com/channel/UCh5UlGiu9d6LegIeUCW4N1w/

Tools

November 2019 Release of Adobe XD: Coediting, Document History, Component States, and More Unveiled at Adobe MAX

Yes, this is news from November already, and yes, there was an Adobe XD release in October, too, that brought, for example, blend modes and improved selection of elements. But the latest XD release dropped on Monday and it is simply too huge to wait until next month to spread the news. So here you go: For their impressive Adobe MAX release, the team added major new features that will change how people work with XD. It starts with component states which can also be auto-animated and, yes, hover interactions. But beyond that, you are now able to work collaboratively in the same document in real-time (Coediting), you can access a document’s version history, and even name the versions to keep track of milestones. The Plugin Manager also received a complete overhaul and it is now much easier to find great plugins and app integrations.
https://theblog.adobe.com/xd-november-2019-update-coediting-more

ProtoPie for Teams: Collaborate More Efficiently, Prototype Better Together

The ProtoPie team has also been busy and just released the new ProtoPie for Teams, which includes useful collaboration features like invites, link sharing, commenting, and version history. Also very interesting: The new ProtoPie 4.1 now supports Lottie animations and a full-screen preview window.
https://blog.protopie.io/protopie-for-teams-collaborate-more-efficiently-prototype-better-together-176be696351e

Sketch 59 — New Typography Features & Smart Layout Improvements

The October update of Sketch brings new Typography features like variable font support and more OpenType features (e.g. ligatures and contextual alternates) as well as improvements to the Smart Layout feature introduced in Sketch 58.
https://medium.com/sketch-app-sources/sketch-59-new-typography-features-smart-layout-improvements-4ef2492cb396

BuilderX

“Beautiful, Readable & Production-ready Code – Designers and Developers on one platform”, that’s the bold promise of BuilderX, a new browser-based design tool that codes React Native & React for you.
https://builderx.io/

placeholder.pics

Placeholder.pics is a free service that lets you quickly include placeholder pictures into your HTML prototypes via a URL. What’s nice about it is that all images are served up as sub-kilobyte, fully optimized SVGs and you can adjust properties like size, color, or labels.
https://placeholder.pics

A Scientific Method for Impactful UX Prototyping

While iterative design and prototyping can be the key to improving a design over time, the process of trial and error alone often isn’t enough to come to a great solution. Prototyping isn’t a magical guarantee for improvement, it is work and therefore, a more structured approach can help you to decide what to focus on and to identify when your prototyping efforts were successful. Derived from the basic scientific method and based on a simple equation of what constitutes a successful prototype, Mike Dodge explains his idea of a framework for impactful UX prototyping and decision making.
https://modus.medium.com/a-scientific-method-for-impactful-ux-prototyping-9ab6c7a1dcde

A guide to experimenting and prototyping

Experimenting and prototyping are key to innovation. Through a well-designed experiment, we can think differently, test our assumptions, and gain new insights that lead to better solutions. Yet many organizations shy away from experimenting because they associate experimentation with ambiguity, risk, and failure. In this great piece for Cooper Professional Education, Kelly Lai, a Lead Experience Designer at Designit Sydney, explains why experimenting and prototyping can help your team avoid costly mistakes and how you can approach your experiments in the right way – whether you are creating a digital product, a non-digital product, or a service.
https://www.cooper.com/journal/2019/09/a-guide-to-experimenting-and-prototyping/

Tools for Unmoderated Usability Testing

Testing your designs with real users is super important if you want to know whether you are on track of really solving the right problem and if your solution is easy to use and understand. But where to start? Unmoderated remote usability testing is a popular method and there are many platforms out there that make your life as a designer or researcher much easier. But the features of the different tools are often quite similar and it can be hard to decide which tool best suits your needs. In this article for the Nielsen Norman Group, Kathryn Whitenton compares several tools and also explains why the decision for the right tool mostly depends on the type of data that you need to collect.
https://www.nngroup.com/articles/unmoderated-user-testing-tools/

Machine Learning For Front-End Developers With Tensorflow.js

Not a day goes by, at least in my perception, without some sort of news around AI and machine learning. It might seem as if machine learning is still a futuristic technology, yet it is already astonishingly ubiquitous. From the camera in your smartphone to assistive technology in cars to spam detection for social networks and the taste-predicting skills of Netflix – machine learning technology is already all around us. So if you think that the time is right to start learning about machine learning, what it is and how you can try it and use it yourself, for example in a first rough prototype, this article by Charlie Gerard is for you. Charlie covers the three main features currently available using Tensorflow.js and also talks about the limits of using machine learning in the frontend.
https://www.smashingmagazine.com/2019/09/machine-learning-front-end-developers-tensorflowjs/

Turn the lights off — designing for dark mode 🌌🌒

Dark modes are all the rage at the moment but there is more to them than just the good looks. Especially in low-light situations, dark interface color schemes are easier on the eyes and they also save battery life. Designing a dark UI, however, does not mean simply inverting the colors and turning white into black. There is a lot to consider, as Briandito Priambodo shows in this article, and prototyping can help you to test the results on real devices and with the people who will use your product.
https://uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6

Why version history is not version control

“We’re no longer just designing screens. We’re actively building products, together.” The way we design digital products has changed a lot over the past few years. One increasingly popular way of working is based on an idea borrowed from software development: A workflow based on the concept of branches and commits. In this post, Josh Brewer and Kevin Smith, co-founders of Abstract, share how such a branch-based open design workflow can work and how version control can bring structure, clarity, and better collaboration to formerly messy workflows of teams and whole organizations.
https://www.abstract.com/blog/version-history-version-control/

Podcasts

Sounds Like Good Design

Sound is becoming increasingly important in digital user interfaces and can be key to designing successful experiences, but doing sound right is not that easy. In this excellent episode of his podcast Wireframe, Khoi Vinh speaks to sound designer Connor Moore and psychoacoustic expert Susan Rogers on the best ways to design for the ear and how the construction of certain sounds creates different effects in our brains.
https://creative.gimletmedia.com/shows/wireframe/49h6xv/sounds-like-good-design

Rapid Prototyping – Philip Pantelides on The Product Experience

Philip Pantelides, Head of Product for Premium Services at Cookpad, is on a mission to make everyday cooking fun. He and his small, cross-functional team have global and fairly complex problems to solve, and they use prototyping as a way to navigate their problem space with reduced risk. In this podcast episode, Philip shares how prototypes and demos allow the team to focus on moving to the next version of the product quickly and test the riskiest assumptions first.
https://www.mindtheproduct.com/2019/09/rapid-prototyping-philip-pantelides-on-the-product-experience/

Tools

Sketch: Introducing Smart Layout

With Sketch 58, the team added a new feature that allows you to create content-aware layout components in Sketch: “Smart Layout allows you to maintain the padding and spacing between layers in a Symbol when editing its overrides. Once you’ve set up Smart Layout, a Symbol instance will automatically resize when its overrides are changed.”
https://www.sketch.com/features/smart-layout

Adobe XD in 2019: How Far We’ve Come and Where We’re Going

Andrew Shorten, Senior Director of Product Management for UX Design at Adobe, reflects on some of the more recent feature additions to Adobe XD and provides insights into the future roadmap of the platform, including upcoming features like support for component states (including Auto-Animate), a new marketplace experience for plugins, and real-time collaboration, also known as Coediting.
https://theblog.adobe.com/xd-roadmap-future-plans-recent-features/

Figma: Designing for top feature requests, like Smart Animate

Other prototyping tools like Adobe XD already have a similar feature, now the Figma team added “Smart Animate” to their software, too. Smart Animate automatically animates similar objects and improves existing transitions. On top of that, Figma now also supports a simple drag gesture.
https://www.figma.com/blog/announcing-smart-animate-and-advanced-transitions/

The Official Place to Learn Framer

The Framer team just updated the Framer website with a new Learn section full of videos, written guides, and more. Courses, lessons, and how-to guides cover a wide range of topics, from a 101 crash course to mobile prototyping fundamentals to designing with APIs.
https://www.framer.com/learn/

Advanced Prototyping with ProtoPie

Meng To has published a new course on Designcode.io about advanced prototyping with ProtoPie. You’ll learn how to create high-fidelity prototypes with animations and variables, formulas, conditions, and sensors.
https://designcode.io/protopie-course

UI Bakery

UI Bakery is a new component-based prototyping tool that lets you build the front-end for your project using a drag-and-drop builder. It uses machine learning to create adjust the visual styles of your interface and generates Angular front-end code.
https://uibakery.io/

Generated Photos

You might have heard of thispersondoesnotexist.com, a website that shows images of faces generated by NVIDIA’s machine learning generator architecture StyleGAN. Now, a team of about 20 AI and photography professionals used the same GAN to generate 100,000 (quite symmetrical) faces – free to download for your next prototype.
https://generated.photos

Pitch

Christian Reber and a few other former Wunderlist team members just launched the private beta of their new tool Pitch. Pitch is a new kind of presentation software “with superpowers that you’ve always wanted in a modern tool. Smart formatting and custom-crafted templates make designing beautiful slides feel like magic. Collaboration features help you stay up-to-date on progress, reuse and remix the best content from your team and stay on brand.“
https://pitch.com/news/announcing-our-limited-preview-beta-and-new-funding

UX Myths – Prototyping, User Testing, and UX Deliverables

Prototypes take too much time, right? Prototypes are interactive dummies of the final designs, right? Five users will uncover 85 % of usability issues, right? False, false, and false again. In this piece, James Tucker answers why and debunks a few more common UX myths that pervade design projects.
https://www.toptal.com/designers/ux/ux-myths-prototypes

Fjord and UX research: Prototyping for Child Welfare Services

Especially when you have very little time but have to come up with a meaningful solution that solves important problems, research and prototyping are invaluable. In this detailed case study, Rebeca Costa shares how Essi Salonen, Senior UX designer at Fjord, delivered a tangible prototype of a tool for the Child Welfare Services with her team that would help parents of children taken into foster care communicate with their caseworkers.
https://www.justinmind.com/blog/ux-research-fjord-case-study/

How To Test UX Design Early On In Your Process

Prototypes are useful to experiment with new ideas and to improve team collaboration, but most importantly, you can use them to test your assumptions with real users in different ways. In this article, Naomi Francis shares a few useful tips on how to test your design with prototypes effectively.
https://blog.marvelapp.com/how-to-test-ux-design-early-process/

Voice User Interface Design by Cheryl Platz

Jeremy Keith liveblogged from An Event Apart Chicago, where Cheryl Platz was speaking about voice interfaces. The resulting notes are quite insightful: What makes natural language interactions so special? How do you get started? Why are sample dialogues your new wireframes, and why are functional prototypes really important for designing and delivering voice user interfaces?
https://adactio.com/journal/15737

How Google Uses Rapid Prototyping to Validate Ideas (And So Can You)

5,127. That’s the number of prototypes it took James Dyson to develop his revolutionary bagless vacuum cleaner. But this is not the only interesting fact Emilia Bratu shares in her article: She also walks you through the three main rules of Tom Chi’s approach to learning, who heavily used prototypes to quickly evaluate ideas and concepts when developing Google Glass.
https://www.qualitance.com/blog/how-google-uses-rapid-prototyping/

Prototype with a Purpose

Prototyping can be useful in many different situations. From best-case scenarios to the worst, they help you decide what to do and what not to do. Shan Shen writes about how to prototype with purpose: How prototypes can put continuity to work, how you can test the endurance of details of your design, and how to leverage prototyping when designing for temporary disabilities.
https://www.framer.com/blog/posts/prototype-with-purpose/

Tools

Introducing Drama

Drama App is a new all-in-one design, prototyping, and animation tool. It allows you to draw scenes and create interactive triggers to create prototypes with automatic transitions. Thanks to a feature called Magic Move layers with the same name are automatically animated during those scene transitions. But you can also use timeline editors to create your animations. With a Mirror App, you can run your prototypes on iPhones and iPads, it allows you to use 3D layers, and has built-in versioning to access all previous versions of your document.
https://www.drama.app/

Meet ProtoPie 4.0: Accelerate Your Workflow with Components

The ProtoPie team has been busy adding new features to their already great prototyping tool: Besides a new brand design, version 4.0 brings reusable interaction components, constraints for responsive resizing, a revamped scene panel, and much more.
https://blog.protopie.io/meet-protopie-4-0-accelerate-your-workflow-with-components-e2c97f17bf3e

August 2019 Release of Adobe XD: CSS Code Snippets in Design Specs, Improved Integration with Photoshop, and a New Frontier for XD Plugins

The August release of Adobe XD brought the ability to open and edit images in Photoshop right from XD, CSS code snippets in Design Specs, but most importantly: The new Plugins Panel now allows plugins to live right next to the design canvas and several new plugins for XD already take full advantage of this.
https://theblog.adobe.com/xd-august-2019-update-auto-css-plugins-panel-more/

Turn Adobe XD into production apps with Supernova V7

Supernova is a tool that lets you create interactive apps and generate production-ready code from your design files, including production-ready animation code. Now, it also supports Adobe XD files. You can import the design to get started and Supernova even allows you to reimport files when you make any changes.
https://blog.prototypr.io/turn-adobe-xd-into-production-apps-with-supernova-v7-aba1cf8ae01

OverVue, a Vue Prototyping Tool

OverVue is a tool to prototype Vue.js apps. It’s is a desktop application built with Vue and Electron that lets you create Vue components and set up routes with Vue Router, all in a graphical user interface. You can then generate boilerplate code for a project.
https://medium.com/better-programming/overvue-a-vue-prototyping-tool-f2b8a2f0c229

Five Habits of Design Thinking

Design Thinking is a powerful methodology. It allows you to explore research and ideas widely and helps you define the problem space. By producing a wide range of ideas and narrowing insights down to possible solutions with tests, it then helps you implement only the most viable and innovative solutions. But putting Design Thinking into practice effectively isn’t easy and requires practice and the right approaches. Otherwise, it’s just buzzword bingo. Christina Wodtke shares five habits of Design Thinking, from interviewing to critique and iteration, that will help you internalize Design Thinking and build better products.
https://medium.com/@cwodtke/five-habits-of-design-thinking-45bb61b30393

6 Things I Learned by Building My First Voice Prototype

Voice UI might still not be on your radar if you are primarily building websites or other more “classical” screen-based user interfaces. But the number of devices with voice capabilities and voice experiences like Amazon Alexa Skills is growing rapidly. Voice UI is here to stay and it’s time to get your head around the specifics of designing and prototyping voice user interfaces. Cara Neel shares her experiences from building a voice-first home security skill for Amazon Alexa called HomeSafe in Adobe XD and explains, for example, why you should talk to your prototype as much as you can and user test early and often.
https://theblog.adobe.com/6-things-learned-voice-prototyping-designing-voice-uis

Every Layout – Relearn CSS layout

With the advent of Flexbox, CSS Grid, and multi-column layout, the possibilities to solve different layout problems have changed quite substantially. CSS layout isn’t a hack anymore and it’s about time to explore the best ways to work with those powerful layout algorithms. Whether you want to implement new layout solutions in production right away or want to explore them in prototypes first, Every Layout by Andy Bell and Heydon Pickering is an invaluable resource.

“Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.”
https://every-layout.dev/

Smart Prototyping with Arduino and Framer X

Prototyping is perfect to try out new technologies and learn more about the materials we use to build our design solutions, especially when it comes to emerging technologies and web-connected hardware. In this post, Steve Ruiz walks you through the process of building a prototype that connects Framer X to an Arduino Uno and lets you control three LEDs over a slider UI. Time to buy that Arduino Starter Kit, it seems…
https://medium.com/@steveruiz/smart-prototyping-with-arduino-and-framer-x-126fc529011a

Best Practices for Prototyping Keyboard Accessibility

That we all are building interfaces and websites that are accessible to everyone should be a given – but it is still neglected far too often. One of the input methods your design should support is the good old keyboard. For many people, it is the primary method of navigating the Web and interacting with user interfaces. In this article, Oliver Lindberg shares a number of tips by four accessibility and UX experts to help you implement the keyboard operation of UI, which is also useful when you want to build prototypes to test and improve the accessibility of your interface.
https://theblog.adobe.com/best-practices-for-prototyping-keyboard-accessibility/

Prototyping with Angular

Prototyping with code and real data is incredibly powerful, especially if you want to test concepts and ideas with real users and already have a working product and a component library or design system in place. Google’s Edwin Lee writes about how he used AngularJS to prototype an improved search experience in Greentea, Google’s internal CRM, using Google Sheets as a backend database.
https://blog.angular.io/prototyping-with-angular-a83fbf0533ef?gi=5061417ad772

Prototype Showcase

If you are looking for some inspiration for your next prototyping project, take a look at Prototype Showcase by the UXPin team. It’s a nice curated gallery full of prototypes from designers around the world.
https://showcase.uxpin.com/

Books

Shape Up, by Ryan Singer

The team at Basecamp is known for approaching projects differently but their unique process has never been laid out for all to see – until now. With “Shape Up” Ryan Singer has written an inspiring and insightful (free) book about how to design and build products differently by creating “a spirit of prototyping and piecewise enablement among the designers and programmers” and “shaping” work in six-week cycles, on two parallel tracks.

“Shaping work is qualitatively different from building. It’s unknown in advance which ideas will turn into bettable projects and which ones won’t. Some projects are shaped quickly, some take multiple cycles, and some never come together. What’s important is to always have some good options for the betting table before each cycle.”
https://basecamp.com/shapeup

Webinars & Video Tutorials

Prototyping With React + Framer

Prototyping With React + Framer is a new online course that takes you through the creation of several UI component prototypes. Along the way, you’ll learn the basic concepts of JavaScript and React. The first two modules of the course are free to try.
https://learnreact.design/prototyping-with-react-framer

Prototyping Your Game With A Gamepad (Adobe XD Tutorial)

Adobe XD allows you to prototype interaction with gamepad triggers. In this short tutorial video, game developer Thomas Brush shows you how you can prototype a menu flow in XD with gamepad triggers and animated transitions.
https://www.youtube.com/watch?v=n0roaS5qGuU

Tools

Automate work. Bring in real data. Extend what’s possible with Figma Plugins.

Figma, the design and prototyping tool, can now be extended with plugins. Over 40 plugins are already available, ranging from utility plugins that help automate repetitive tasks to accessibility plugins.
https://www.figma.com/blog/introducing-figma-plugins/

“Alexa, Open Adobe XD”: Introducing XD’s Integration with Amazon Alexa

Voice prototyping without a line of code has been a part of Adobe XD for a few months. With a new XD plugin and an Alexa Skill, you can now also test your prototypes on real Amazon Echo devices. This is especially interesting if you are building a multi-modal UI that combines voice and touch interactions.
https://theblog.adobe.com/alexa-plugin-skill-xd-export-test-voice-prototypes-on-echo/

Introducing Framer Motion

Framer Motion is the production-ready motion library for React that powers Framer’s animations and advanced gestures. Now, Framer Motion is available as an open-source animation library!
https://www.framer.com/blog/posts/introducing-framer-motion/

A New System for Designing Motion With Both Sketch and Figma

AEUX is by Adam Plouff and the team at Google Design is a new set of panels for After Effects and Sketch and a converter for Figma that let you transfer layers into After Effects to create motion prototypes for your UI design.
https://medium.com/google-design/aeux-f79e06e01594

July 2019 Release of Adobe XD: Improved Designer-Developer Collaboration, Mobile Commenting, and More

The July release of Adobe XD brings improved designer-developer collaboration with unified links, which means that you can now share a link that includes both an interactive prototype and the design specs of your project. You can also navigate prototypes with a new grid view and view and comment on prototypes right from your mobile device.
https://theblog.adobe.com/xd-july-2019-update-unified-links-grid-view-mobile-commenting/

Smart Distribute, Cloud documents and Sketch for Teams — What’s New in Sketch?

Sketch also received another update this month. The team improved the recently added Smart Distribute feature that now also supports a grid layout. Text overrides for Symbols can be edited directly on the canvas and Sketch lets you now open and save Cloud Documents.
https://blog.sketchapp.com/smart-distribute-cloud-documents-and-sketch-for-teams-whats-new-in-sketch-4de2e21e1d6f

Import Sketch Designs into Axure RP

If you’re designing your UI in Sketch and using the new Axure RP 9 for wireframes and prototyping or also documentation, there’s now an easier way to get your work from Sketch to Axure: A plugin, that also converts your layers into Axure widgets.
https://www.axure.com/blog/import-sketch-designs-into-axure-rp

Fragments iOS Wireframe Kit

Fragments is an iOS wireframing kit that contains Figma & Sketch files with over 370 layouts in 10 categories and over 100 elements based on the GUI of iOS.
https://fragments.pixsellz.io/

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/

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

The Power of Prototypes in the Creative Process

Prototypes can be a catalyst for creative decisions and allow you to iteratively refine an idea into a final product. In this post about the power of prototyping in the design process, Jim Nielsen summarizes the main points from Ken Kocienda’s book “Creative Selection” regarding the role of prototyping in Apple’s evolutionary process of developing the original iPhone and other innovative products.
https://blog.jim-nielsen.com/2019/the-power-of-prototypes-in-the-creative-process/

Building to learn: the role of prototyping in Design

“The faster you can bring an idea to life, the sooner you can make a deliberate and well-informed decision to either take it to market or put it to rest.” Christian Cantrell runs a team of prototypers inside the Adobe Design organization and shares many valuable lessons on prototyping effectively, why it is important to take the time to prototype and also the three primary ways prototypes help save time throughout the product development lifecycle: Design validation, research and user testing, and creating a living specification.
https://uxdesign.cc/building-to-learn-977a8cd88ced

Learning to prototype is more important than learning to code

Prototyping is often misunderstood as simply connecting static mockups into an interactive click dummy. Yet, as Ben Holliday emphasizes in this article, prototyping is much more than that. It is a way of thinking about problem-solving and therefore is much more valuable as an applied skillset for designers than, for example, learning to code.
https://www.hollidazed.co.uk/2019/02/26/learning-to-prototype-is-more-important-than-learning-to-code/

The Place of UX

There’s much discussion going on about the role UX and user research should play in organizations. In this post, Basecamp’s Ryan Singer takes a look at a few concepts that draw meaningful distinctions, for example, the one between modular vs integrated boundaries in the value chain: Some teams are small and intensely collaborative, some have more of a distant third-party style relationship. In both cases, prototypes can help facilitate the creation of better user experiences. PS: Also make sure to take a look at the comments section for more insightful information about Basecamp’s product design process.
https://m.signalvnoise.com/the-place-of-ux/

Interviewing: more than a user research method

Interviewing is one of the most effective research techniques designers can rely on to uncover not only behaviors but also the motivations and frustrations of the people who have influence over a project. In this article for UX Collective, Arturo Ríos provides many resources and useful advice on how to prepare and conduct successful user interviews.
https://uxdesign.cc/interviewing-more-than-a-user-research-method-81ab92420497

5 steps for including motion design in your system

Design systems are all the rage and motion design is a critical component in building a unique design system. Caleb Barclay shares five steps for including motion design in your system that can also be useful when prototyping animations.
And remember: The fastest way to check if an animation works is always – a prototype.
https://www.designsystems.com/5-steps-for-including-motion-design-in-your-system/

Tools

Marvel Enterprise 3

The Marvel team released a new platform for enterprise customers allowing them to better organize their work and build design systems and documentation. Marvel Enterprise also integrates with tools like Sketch, JIRA, Slack and many more.
https://blog.marvelapp.com/introducing-marvel-enterprise-3/

Datapopulator

Datapopulator is a super useful plugin for Adobe XD and Sketch that automagically populates your design mockups with JSON data from files, URLs, or APIs.
https://www.datapopulator.com/

Evolt Design Suite

Evolt is a “design thinking suite” built to help you plan and design better user experiences. You can create user personas, storyboards, or a business model canvas based on existing templates. Experience mapping, brainstorming, and mood boards are soon to come.
https://evolt.io/

Startup 3

Startup is a website builder to create website or prototype projects. It promises to fit all kinds of projects thanks to unlimited web elements and pre-designed modules, styles, options, and templates. It is based on Bootstrap 4 and designed with Figma.
https://medium.com/@designmodo/startup-3-is-here-c8eb54fc51ac

Taskade

Taskade is a beautiful organization and collaboration tool for getting things done. You can create task lists, notes, and also video chat.
https://www.taskade.com/new/today

Maizzle – Framework for Rapid Email Prototyping

Maizzle is an email framework that helps you quickly build emails with advanced, email-specific post-processing.
https://maizzle.com/

Sections UI Kit

Sections is a huge wireframing and prototyping kit for Sketch, Figma, Adobe XD, and Photoshop that consists of 330+ layouts in 17 categories, including light and dark UI components.
https://sections.pixsellz.io/

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/

The right amount of perfect

When you are building something new, you don’t necessarily need a polished, production-quality result all the time. Instead, what perfect means entirely depends on the project and the situation you are in. What you really need, is only the right amount of perfect, argues Jonas Downey in this post on Basecamp’s Signal v. Noise blog: “When you’re making a prototype of an idea, the right amount of perfect is a barely-working demo. Can you show the idea to someone, well enough to demonstrate how it should work—even if it’s stitched together with duct tape and popsicle sticks? Perfect.”
https://m.signalvnoise.com/the-right-amount-of-perfect/

It’s Never a Good Time to Do Research

Research is not only often neglected, but often teams struggle to find the right time to do research. Erika Hall, co-founder of Mule Design and author of ‘Conversational Design’ and ‘Just Enough Research’, explains why there is never a good time to do research – you simply should be doing research all the time. Because when everyone is working from clear goals and good information, everything goes faster, feels more meaningful, and has a much higher chance of success – also prototyping. So you better get into a mode of continuously asking questions and gathering evidence. Also make sure to read Erika’s post “The 9 Rules of Design Research”, too.
https://medium.com/mule-design/its-never-a-good-time-to-do-research-1ef719158980

The knowns and unknowns framework for design thinking

The Knowns and Unknowns framework – most famously used by Donald Rumsfeld to make the case for the invasion of Iraq – is a useful method to analyze the extent and quality of knowledge we have about something. In this article on UX Collective, AJ Justo explains the concept and provides some historical background to then go on and provide a starting point of how to use the framework in a Desing Thinking process to be more aware of facts, hypotheses, and prejudices, and to explore the unknown. An idea that can easily be applied to prototyping, too.
https://uxdesign.cc/the-knowns-and-unknowns-framework-for-design-thinking-6537787de2c5

Prove it with prototyping: How to test your ideas and focus your innovation

The story that James Gordon, a technologist in the RJI Innovation & Futures Lab, shares in this article is a classic example of maybe the most powerful advantage of prototyping: It allows you to test and validate ideas quickly and to adapt your approach with new insights after gathering feedback from real users. Prototyping is not so much about solving a problem, but about helping you to better frame it. And consequently, every new idea offers a new vantage point and an opportunity to formulate a more coherent perspective of the challenges and opportunities before you. In this case, the team decided to throw away a prototype they built for sportswriters and to try something completely different – which was only an easy thing to do, because the initial prototype was cheap and therefore easily abandoned.
https://www.rjionline.org/stories/prove-it-with-prototyping-how-to-test-your-ideas-and-focus-your-innovation

The Magic of Motion in UX Prototyping

Tyler Beauchamp is a Product Designer at HubSpot who works on Canvas, the company’s design system for their products. Canvas allows for making a high-fidelity prototype with just a few clicks. But there was still something missing: motion. So Tyler created a supplementary animated component library in Principle that includes the vast majority of elements that are in use. In this post, Tyler explains the benefits of prototyping with motion and you also get to see lots of examples of animated components.
https://medium.com/tyler-beauchamp/the-magic-of-motion-in-ux-prototyping-d2e4b8876043

Using Artificial Intelligence to Generate Alt Text on Images

Machine learning is currently gaining a lot of traction and there are already lots of APIs available to build interesting new things. In this article for CSS-Tricks, Nino Ross Rodriguez explains how you can leverage an image recognition service like Microsoft Azure‘s Computer Vision API to generate alt texts for images on the Web to improve accessibility and SEO performance. Only one of many potential applications for AI and machine learning that can best be explored by building prototypes.
https://css-tricks.com/using-artificial-intelligence-to-generate-alt-text-on-images/

Talks

Mind the Product: Tom Chi on Rapid Prototyping & Product Management

I already shared a talk by Tom Chi in issue 12 and although this exceptional talk here is from 2015, it is still highly relevant and well worth your time. Tom, who served as head of product experience at Google X developing technology such as Google Glass and Google's self-driving car, shares lessons he has learned in rapid prototyping that are also applicable to product management. For example, he emphasizes how important it is to create a culture of learning and to stay in the medium instead of creating too many abstraction layers. He also stresses the importance of reducing the loop length of improving a prototype after user feedback. This way, you generate the key learnings necessary to improve the product experience much faster.
https://www.mindtheproduct.com/2015/07/video-tom-chi-on-rapid-prototyping-product-management/

Podcasts

CodePen Radio – Prototyping with Dave and Trent

Dave Rupert and Trent Walton from the web design shop Paravel join Marie Mosley and Chris Coyier for this episode of the CodePen Radio podcast. They talk about their approach to web design, which includes a lot of prototypes, preferably in the browser, and also about how prototyping can improve project progress and lead to far better results, especially if the prototypes are shared early and often with clients and colleagues.
https://blog.codepen.io/2019/01/15/206-prototyping-with-dave-and-trent/

Prototypes

arOS Concept

A super amazing prototype by Asher Vollmer, who used Unity and ARKit to explore the relation of AR glasses and touchscreen phones. Stuff like dragging and magnifying UI elements from the smartphone screen into an AR environment.
https://www.youtube.com/watch?v=PhiRxJCUXu8

Tools

Conversational UI Tools

CUI Tools is “a directory of the best conversational AI design tools and resources to help you master your next voice- or text-based bot project” – including a collection of prototyping tools.
https://cui.tools/

Marvel – Prototyping meets User Testing

Exciting news from Marvel: They are improving their prototyping tool by adding user testing features that allow you to get video, voice, and analytical feedback on designs and prototypes. Afterward, you can invite your team and stakeholders to view and feedback on test results. Speech detected in your user tests is automatically converted to text, you can recruit participants in just a few clicks, and even integrate and automate user testing with many tools in your workflow via a GraphQL API.
https://marvelapp.com/user-testing

Introducing Anima 3.0 — High-Fidelity Prototyping in Sketch

Anima is a plugin that lets you build High-Fidelity Prototypes right within Sketch, including real inputs, video, or also your own HTML/CSS/JavaScript. You can then preview your prototype in a browser and create a shareable link that can be commented on.
https://medium.com/sketch-app-sources/introducing-anima-3-0-high-fidelity-prototyping-in-sketch-df8537b23508

8th Wall Release 10: New Year, New Product, New Interface

8th Wall is an augmented reality platform that makes it easy to build mobile AR content for the mobile web, iOS, and Android. The latest version of the platform features an AR camera with a drag-and-drop interface AR prototyping tool.
https://medium.com/8th-wall/release-10-new-year-new-product-new-interface-890a11643c6d

Better overrides, a brand new Fill Popover and faster prototyping in Sketch 53

The latest release of Sketch brings many useful improvements like, for example, better overrides for symbols, a totally redesigned Fill Popover adding named colors, color presets in libraries, HSL and more, and improved performance when working on complex prototypes.
https://blog.sketchapp.com/better-overrides-a-brand-new-fill-popover-and-faster-prototyping-in-sketch-53-160e6f760919

New Features in Adobe XD 16

The February 2019 release of XD brings a few useful enhancements to existing features. Most notably, you can now add narration using your microphone when you record a video of your prototype in preview mode and the new eyedropper shortcut makes changing colors much easier.
https://helpx.adobe.com/ca/xd/help/whats-new.html

CodeSandbox

CodeSandbox is an online editor that's built for web application development and makes it easier to start a project by doing most of the configuration for you. You can then build, import or export your project and share a single URL. All this makes CodeSandbox a promising tool for spinning up an application prototype quickly.
https://codesandbox.io

Gimbalst – Prototype your navigation

This is nice: Copy your sitemap into Gimbalst, and it creates a fully interactive navigation prototype for you. You can then check if the labels fit and are clear or how the navigation works on mobile viewports.
https://gimbal.st/

On Simplicity

There is one thing that we all certainly aren’t short of these days: Complexity. Max Böck, a designer and developer from Vienna, reminds us that while we often try to solve complexity by following best practices and the newest trends, tools, and technologies, we should remember that complex solutions are not always the best solutions. “Sometimes the smarter way to build things is to try and take some pieces away, rather than add more to it.” Which, by the way, is also good prototyping advice.
https://mxb.at/blog/on-simplicity/

Exploratory Prototyping in Product Design

Prototyping is often perceived as creating the most value in the converging phases of the design process when it comes to testing and validating a specific solution, often at a sufficient, higher fidelity. But, as Felix Heibeck points out, prototyping can also be a great tool to explore new ideas and to better understand a problem area or – incredibly important – context. Exploratory prototypes, which, just like sketches, should be quick to make and easy to abandon, can help you focus on a single feature of a concept and specific aspects of an experience and as a result, spark new ideas that can then be further explored.
https://medium.com/a-view-from-above/exploratory-prototyping-in-product-design-6d89ff17f542/

Prototyping ways of prototyping AI

In this super-interesting article in ACM Interactions, Philip van Allen argues that we need new tools for the prototyping of autonomous systems and their interactions: “Our tools should enable us to develop a facility with AI as a material for design projects. Designers need to develop a strong tacit understanding of AI through tinkering, exploring, and building. This demystification and understanding can lead to new collaborations, design concepts, and methods for AI through the unique engagement that designers have with their material.” With his Delft AI Toolkit, he then presents the first prototype of an open source visual authoring system that integrates AI techniques and technologies into an easy-to-use drag-and-drop environment and that is the first step towards new tools that allow for the design of the behaviors, sociality, and narratives that AI systems need.
http://interactions.acm.org/archive/view/november-december-2018/prototyping-ways-of-prototyping-ai/

CSS Grid for Designers

CSS Grid is here but there is still a huge problem: Many designers still don’t really know about the exciting possibilities that CSS Grid offers, possibilities that go far beyond the 12 column grid. In this article, Johna Paolino of the New York Times masterfully explains the foundations of Grid from the viewpoint of a designer, facilitating a basic understanding of what is possible and why Grid is so great for designers. In the end, CSS Grid has made her “love HTML and CSS prototyping again”. So how about the next time you start to sketch out a web layout you do it with an HTML prototype – and CSS Grid?
https://open.nytimes.com/css-grid-for-designers-f74a883b98f5/

Hear It from a Skill Builder: How to Design and Validate an Alexa Skill Idea in 5 Days

Voice user interfaces will ultimately make their way into our everyday lives. Some even call it a paradigm shift in the way we interact with computers. But how do you best approach designing a voice experience? Andrea Muttoni shares how Alex Baxevanis, Experience Director at Webcredible, and his team use the design sprint method to condense the creation of a voice UI down to a five-day process, from ideation to validation with real users. And, you might have guessed it, including a lot of prototyping.
https://developer.amazon.com/de/blogs/alexa/post/02732c1d-bab8-41fa-8afe-30d02d9a4280/hear-it-from-a-skill-builder-how-to-design-and-validate-an-alexa-skill-idea-in-5-days/

Prototype Fidelity: It’s More than High and Low

Choosing the right fidelity for a prototype is important because it can save you precious time or make your prototype look more realistic, which is especially important if you want to get reliable results in user testing. In this great article, Kyle Murphy explains why it is not enough to merely distinguish between high and low fidelity prototypes and why you should instead make use of five independent dimensions of fidelity: Visual, interaction, breadth, depth, and content.
https://medium.com/in-the-hudl/prototype-fidelity-its-more-than-high-and-low-4dedb4cb1a0/

Talks

Best practices for fast game design in Unity - Unite LA

Prototyping has a long tradition in game design, where it is used to explore gameplay concepts and evaluate feasibility, game-feel, or appeal of a concept. In his talk, Renaud Forestié, Gameloft Montreal's Gameplay Director and lead of the Gameloft Prototype Team, shares 10 tips for prototyping effectively, shows a case study as a practical example of how to come to a good prototype in one week, and talks about improving game-feel. There is a lot to take away from this talk that can also be applied to user interface prototypes. For example, that is is important to pick the right scope for a prototype and to focus your time and resources on what you really want to demonstrate or explore. Also, make sure to listen to the Q&A at the end of the video.
https://www.youtube.com/watch?v=NU29QKag8a0

Tools

Scrumpy – Agile Planning, Made Simple.

Scrumpy is a project management tool for agile teams. It includes estimates, sprints, burndown charts, reporting, and a beautiful, simplistic UI. Might be a good alternative to Jira if you don’t need that many features and want something more lightweight.
https://scrumpy.io/

Color by Cloudflare Design

A neat and useful tool by the Cloudflare design team: Grab a Color palette from any website or create it from scratch and preview it against different UI elements. You can cycle through accessible color combos and export and share palettes as CSS, Sass, JavaScript, or JSON.
https://cloudflare.design/color/

tris-webpack-boilerplate

If you need to set up an HTML prototyping environment quickly, this Webpack boilerplate for static sites can come in handy. Of course, you can also use it as a starting point for your production environment.
https://github.com/tr1s/tris-webpack-boilerplate/

Stark

Stark is a plugin for Sketch and Adobe XD that helps you design products that are accessible and inclusive. It allows you to check the color contrast of your designs and simulates the various forms of color-blindness directly in Sketch or XD.
http://www.getstark.co/

Introducing Figma Organization: Our first enterprise-grade offering

Big news from Figma, the in-browser design and prototyping tool: The team just announced their first enterprise-grade offering, with advanced controls and security features like unified billing, audit reports, shared fonts, unlimited teams, and organization-wide design systems.
https://www.figma.com/blog/figma-organization/

This Is Framer X15—Our Biggest Release To Date

Framer X also got an update this month. The biggest release since launch comes with: Exponentially faster project loading and saving, an all-new smooth zoom and infinite canvas, no lag time when you install and use multiple interactive components, and a completely revamped graphics container that adjusts to everything you draw.
https://framer.com/blog/posts/introducing-framer-x15/

Adobe XD January 2019 release

This month, the Adobe XD team improved two of the most recent and powerful prototyping features of XD: Auto-animate, which lets you automagically animate states between artboards, now also works in the browser for published prototypes. And XD’s voice prototyping feature now supports all Adobe XD languages for both commands and speech playback.
https://helpx.adobe.com/xd/help/whats-new/2019.html

As part of the XDI team, I will be giving workshops on designing and prototyping with XD again this year. If you’re interested in a workshop at your event or for your team, get in touch or come to one of the events on this list which is updated regularly.

Prototyping Empathy

When building prototypes for user research, there is no shortage of tools. But how do you make sure that you are building your prototypes with the right amount of empathy and truly human-centered? Penny Collisson and Genny Mangum from Microsoft share six strategies for staying focused on people while prototyping.
https://medium.com/microsoft-design/prototyping-empathy-1bdb08e3260c

Voice First, Screen Second: Designing for Voice in Adobe XD

Voice interfaces are on the rise and it is becoming ever so obvious that we need a way to design for voice interfaces today. And this is where the lately added voice prototyping feature of Adobe XD comes in. In this detailed article, Graeme Fulton explores where the differences and strengths of voice interfaces are, explains which best practices already exist, and then shows how to prototype a voice interface with Adobe XD.
https://blog.prototypr.io/voice-first-screen-second-designing-for-voice-in-adobe-xd-1a9e5efdca15

Journey Mapping 101

Journey maps are a UX tool to visualize a process in an interface that a user goes through to accomplish a certain goal. A journey map can be a prototype by itself but it is also really useful if you want to plan and build a user-centered prototype because it helps you identify scenarios to focus on or potential pitfalls to avoid. In this post, Nielsen Norman Group’s Chief Designer Sarah Gibbons explains the basics of journey mapping and how to use it successfully.
https://www.nngroup.com/articles/journey-mapping-101/

10 Most Awesome Hi-fi Prototypes of 2018

ProtoPie is a prototyping tool that has its strengths in UI animation and interactions including multi-touch and even sensor input. Fredo Tan shares a curated list of the best high-fidelity prototypes embracing advanced interactions from 2018. A great source of inspiration and a joy to watch, too.
https://blog.prototypr.io/10-most-awesome-hi-fi-prototypes-of-2018-35527725e0a3

Adobe XD: putting auto-animate to the test

Since October, Adobe XD comes with a feature called Auto-Animate which lets you animate the elements between two artboards with automatic transitions. Shane Williams put the feature to the test and took the time to build some really impressive examples of UI animations and interaction patterns like pull to refresh, swipe to delete, or a comparison slider.
https://uxdesign.cc/adobe-xd-putting-auto-animate-to-the-test-b09f957d53ae

The State of UX in 2019

At the end of every year, the UX Collective team shares their State of UX report, isolating a few trends in what our industry is writing, talking, and thinking about. One of the thoughts that stood out to me is that new technologies like voice, augmented reality, virtual reality, platform integrations, or social channels are such seamless experiences and in a steady state of flux that they will require new metaphors beyond the good old artboard – which is still the dominant way to design for the screen although it is not how people will experience our design. Once more, prototyping FTW. ;)
https://trends.uxdesign.cc

Podcasts

UXPodcast #199 – Physical prototypes with Kathryn McElroy

Kathryn McElroy, author of the O’Reilly book “Prototyping for Designers”, talks to Per Axbom and James Royal-Lawson about the importance of becoming a multi-modal designer today, how prototyping with electronics can help to bridge the gap between the physical and the digital, and many other benefits of prototyping.
https://uxpodcast.com/199-physical-prototypes-kathryn-mcelroy/

Talks

Getting Effective Session Outcomes, Tom Chi

Tom Chi served as head of product experience at Google X developing technology such as Google Glass and Google's self-driving car. In this talk, he emphasizes the importance and huge potential of prototyping for making decisions without smart guesses but based on direct experiences while also increasing certainty. Also ideally, instead of just testing your product for completeness, you should use prototyping to find what Tom calls the “magic moment” – that moment when people use your product and their eyes light up.
https://youtu.be/z_elgzL9sns

“Prototyping: The Scientific Method of Business”, Daniel Burka — An Event Apart Denver 2017

In this talk from An Event Apart Denver 2017, Daniel Burka, then design partner at Google Ventures, shows how to level up your effectiveness with the use of prototyping by creating a shared understanding of the problems you want to solve. He demonstrates how you can use prototyping to test hypotheses with realistic customers, and – the master class – how a team of professionals can create a prototype together and test it in a realistic setting with real people within one week, also known as a Design Sprint.
https://aneventapart.com/news/post/prototyping-the-scientific-method-of-business-by-daniel-burka-aea-video

Tools

Uizard

Uizard lets you transform your hand-drawn paper wireframes into Sketch files and prototypes — automatically using machine learning. You can test your ideas quickly, create high-fidelity prototypes, and even export front-end code. You can sign up for the beta now.
https://uizard.io/i/GpwlR

Draftium

Draftium is a website prototyping tool allowing you to quickly visualize an idea based on templates and collect online feedback from your team or clients – all in one place.
https://draftium.com/

Flow

Flow is a motion-design tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by generating native code that can be directly incorporated into larger more complex projects by a developer.
https://createwithflow.com

Remove.bg

Yet another tool based on machine learning and you probably already heard of it: Remove.bg removes backgrounds from photos, 100% automatically and in 5 seconds – without a single click. No more cutting out of hair in Photoshop. The output size is not that large (yet), but especially for quick prototyping Remove.bg is super fast and convenient.
https://www.remove.bg/

Adobe XD Update December 2018

The December 2018 release of Adobe XD brings new features again: The team has improved collaboration with cloud-native documents, you can now flip objects, search the layers panel, preview linked symbols on the canvas, and much more.
https://helpx.adobe.com/xd/help/whats-new.html#NewFeaturesinAdobeXD14

Introduction to Product Design Kit for Figma

Mateusz Wierzbicki created a great design kit for Figma which you can use to create high fidelity wireframes and prototypes, user interfaces, and style guides for your desktop products. It’s fully customizable and free.
https://blog.prototypr.io/introduction-to-product-design-kit-for-figma-f477cf76ba90

Montage

With Montage, you can prototype your app with a user-generated library of components. No design skills are needed. All you need to do is browse a library of app components and add them to your prototype. Montage is free for public projects.
https://www.trymontage.com/

Experimenting with brain-computer interfaces in JavaScript.

The best way to explore the nature and the possibilities of a new technology is to experiment and tinker around with it. Neurotechnology as a human-machine interface is such a technology and Charlie Gerard sure knows how to build interesting prototypes with it. In this super-interesting article, she shares her experiences from developing for brain sensor devices like the Emotiv Epoc and explains the limitations and potential of the technology.
https://medium.com/@devdevcharlie/experimenting-with-brain-computer-interfaces-in-javascript-8d6cb891fda8

Prototypes and production

Prototyping is getting more and more important in the design process as a tool to validate ideas. But, as Jeremy Keith notes, when coding prototypes there is an important distinction to make. While the code for a prototype can and often should be quick, dirty, and disposable, production code requires a very different attitude: Here, code quality and care for end users is key.
https://adactio.com/journal/14562

Agile Machine Learning – by Alex Kirsch

Machine learning is one of the hottest topics today and if we want to positively shape our future with AI we need to understand how to include methods into our design processes that allow avoiding the most common mistakes of this scarily powerful technology. Because let's be honest: If we approach AI like Social Media campaigning or IoT, we’re doomed. ;) Alex Kirsch shares how at Intuity, a UX design studio from my hometown Stuttgart, the team uses a prototyping-based approach to master the challenge of creating useful AI solutions for clients.
https://www.intuity.de/agile-machine-learning-by-alex-kirsch/

3 Tips to Help You Prototype a Service

I already shared a few links about service design in the past issues of this newsletter, and for good reason. Great service design requires involvement from users, for which prototyping is ideal. And so, according to Melanie Bell-Mayeda, a Partner and Managing Director at IDEO, the most successful service design prototypes are based on real customer needs and co-created with the people responsible for delivering the service – iteratively improving the design and considering the user experience not just during the moment, but also before and after.
https://www.ideo.com/blog/3-tips-to-help-you-prototype-a-service

Redesigning the transport booking experience for Grab app — a UX case study

How do you approach the redesign of the transport booking experience of Southeast Asia‘s largest transportation platform? Rice Tseng, Senior Product Designer at Grab, did exactly that with his team. In this great case study, she talks about how the team got the redesign done by hosting a lot of workshops, collecting assumptions, doing user research, and testing interaction flows and assumptions with tons of prototypes.
https://uxdesign.cc/redesigning-the-transport-booking-experience-for-grab-app-52fbe796c36c

Beyond 800 words: News formats for personalizing and understanding

The BBC started a project last autumn to explore what the future of online news might look like. In particular, they looked at how to design personalized story formats and formats that would enhance the understanding of stories and issues. For that, they built over 30 prototypes and tested them with users. In this article, Tristan Ferne explains what worked best, walks you through some of the really interesting prototypes, and shares what the team learned over the past year.
https://medium.com/bbc-news-labs/beyond-800-words-news-formats-for-personalising-and-understanding-dd9a6c5ac6c9

Tips on Prototyping for Usability Testing

One of the main reasons to use prototypes is that you can test your design with users. But there are some differences between testing a prototype and testing a fully functional product. Jim Ross takes a look at the most substantial ones like that ideally, you should test a prototype which has its actual content in place and that you should conduct multiple rounds of usability testing, using prototypes with increasing levels of fidelity.
https://www.uxmatters.com/mt/archives/2012/10/tips-on-prototyping-for-usability-testing.php

Tools

Introducing Craft Player

With InVision’s Craft plugin, you can transform your Sketch designs into clickable prototypes. Now they added a player to the plugin that allows you to preview how InVision prototypes play out right inside Sketch.
https://www.invisionapp.com/inside-design/craft-player-sketch/

A Guide to Creating Design Systems In Framer X

The Framer team launched a beta version of the Framer X Team Store, a place to create, build and scale your company’s design system as a single source of truth for all your brand assets and even production components.
https://framer.com/blog/posts/design-systems-in-framer/

A new direction for Atomic

After nearly five years, the prototyping tool Atomic is being shut down in the middle of next year, because the team is changing their focus to designing a “new platform for development and product teams”.
https://atomic.io/prototyping

Bruck

Bruck is an experimental HTML prototyping system by Heydon Pickering built with web components and the Houdini Paint API. Quickly create and comment on interface layouts. The output is screen reader accessible and responsive without you having to author breakpoints.
https://github.com/Heydon/bruck

Felipe – intention-based design

Felipe is an interesting plugin for Sketch to turn Wireframes to UI. Simply draw simple shapes or text layers, and Felipe magically turns them into the symbols you meant to add. While I’m not that sure about the real practical use (yet), the idea of “intention-based design” behind it is brilliant and we will certainly see much more of such solutions in AI-driven design tools in the near future.
https://www.arielverber.com/felipe/

Torch: AR Prototypes

Torch is an app that lets you build augmented reality prototypes without code. It also includes real-time collaboration features and integrates with Sketchfab, Poly, and various cloud services.
https://www.torch.app/

Flowkit 2.0

Flowkit is a set of symbols and components that allows you to quickly create user flows inside Figma and Sketch. Version 2.0 has been redesigned from the ground up and brings a new grid, new components, flows, and more.
https://useflowkit.com/

Best Practices for Voice UI Design and Prototyping in Adobe XD

Using an iterative, prototyping-based approach is the best way to develop voice interfaces. In this post, Oliver Lindberg explains why it is also important to focus on the user and he shares some do’s and don’ts by Marc Webster, director of product at Adobe, when using the new voice prototyping feature in Adobe XD.
https://theblog.adobe.com/best-practices-voice-user-interface-design-and-prototyping/

A Practical Guide to Designing Conversational Voice Interfaces

This article on UX matters digs a bit deeper into the details of designing voice user interfaces. Based on their experience from building a language learning VUI called Chattie, the authors – Pallavi Benawri, Puhe Liang, Ruchi Ookalkar, and Sonali Tandon – share six useful design principles that can serve as guides for designers creating conversational VUIs.
https://www.uxmatters.com/mt/archives/2018/10/a-practical-guide-to-designing-conversational-voice-interfaces.php

User flow is the new wireframe

Not only voice interfaces are conversational: Using graphical interfaces like websites is a constant conversation, too, involving a series of steps towards a goal, the so-called user flows. Alexander Handley quickly walks you through the steps of creating user flows and explains where they differ from good old wireframes.
https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a

Everything you need to know about skeleton screens

Skeleton screens, those grey placeholders that are progressively populated with final UI components and content, have found their way into user interface design as a way of improving the perceived (loading) performance of apps and websites. Bill Chung wanted to know if and how they work, so he did some user testing. In this extensive post, he shares his findings and tips on how to best design skeleton screens.
https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a

What I Learned Making 5 ARKit Prototypes

“By materializing an idea as a prototype, we can experience it firsthand and explore possible improvements.” Nathan Gitter created five augmented reality (AR) prototypes and now shares his prototypes and his findings, together with five basic concepts to consider when prototyping and designing for AR.
https://medium.com/@nathangitter/what-i-learned-making-five-arkit-prototypes-7a30c0cd3956

Becoming a better designer through prototyping

Prototyping is a helpful tool on many levels. Peter Vachon shares some of his favorite reasons to build prototypes, like the incredibly rich feedback you get from them, or that they will save your business time and money. Also, he provides some nice examples of how you can add some finesse to your prototypes and explains why you should always consider the scope and the audience of a prototype.
https://uxdesign.cc/becoming-a-better-designer-through-prototyping-2de76df8c866

No more excuses: Idea to Prototype in 30 Days

If you ever had an idea for a product or apps that didn’t come to live, the Prototypr.io prototyping challenge might be a great chance to change that. For 30 days you can join the challenge to create a prototype of your idea with the support of Prototypr.io.
https://blog.prototypr.io/no-more-excuses-idea-to-prototype-in-30-days-4defe5152bf4

An Organized Workflow for Prototyping

Rocio Lopez shares some really useful guiding principles and tips to effectively prototype in agile project settings and also talks about what to look for when you want to prepare prototypes for user testing.
https://medium.com/sumo-logic-ux/an-organized-workflow-for-prototyping-dfb9169f31d0

Tools

October 2018 Release of Adobe XD: Voice-Based Prototypes and More Unveiled at Adobe MAX

The Adobe XD team saved a lot of interesting new features for their impressive Adobe MAX release: First and foremost, the previously mentioned voice prototyping feature which allows you to use voice triggers and speech playback in your XD prototypes. Then, there is the amazing Auto-Animate feature that lets you quickly create animated transitions between artboards. With Linked Symbols, you can use symbols across multiple documents. On top of that, Adobe also added support for drag gestures, Illustrator documents, and export to After Effects.
https://theblog.adobe.com/xd-october-2018-update-and-adobe-max/

Microsoft Maquette

Microsoft is working on a new way to prototype ideas in VR: Maquette is a mixed reality tool for creating spatial prototypes using a PC VR headset and it is now available as a public beta.
https://www.maquette.ms/

wiARframe

wiARframe lets you build augmented reality prototypes quickly, with no coding skills required. But it is also a platform for discovery and co-design where you can explore and share your ideas with a community of AR prototypers.
https://www.wiarframe.com

Framer X: Introducing the Page Tool

The Framer team added a new feature to Framer X: The page tool. It lets you design multiple types of interactions, from simple swipe gestures or 3D numeric pickers to even momentum-based flicking.
https://framer.com/blog/posts/page-tool/

Supernova: Introducing CodeX

Pretty impressive: Supernova Studio, a design, prototyping, and development tool, now produces production-ready code. “CodeX” allows you to preview the entire interface code right within the software in real time. For that, all design elements are backed by native components and are translated into production-ready code for iOS, Android, and React Native.
https://blog.prototypr.io/introducing-codex-5cdaf7140090

Designing with Ratio

A super-interesting project by Florian Schulz: Ratio is a new tool for working with type on the Web that combines modular scales, fluid typography, color transformations, design tokens and the layout power of modern browsers. “It’s about the relationships, the boundaries, the extremes, and everything in between.” The first video of the software looks very promising, so make sure to sign up to be notified when it leaves closed Alpha.
https://medium.com/@getflourish/designing-with-ratio-dcc656d5385d

Animate your Figma designs with our new Principle integration

Figma now integrates with the prototyping tool Principle. You can import your designs from Figma and then build advanced animations and interactions like scrolling, swiping, and more.
https://blog.figma.com/animate-your-figma-designs-with-our-new-principle-integration-f6f1488d5c0a

Design with Difficult Data

“With modern design and prototyping tools, HTML/CSS/JS prototypes, and even static mockups, we only cheat ourselves if we aren’t pushing our designs to the breaking point.” That’s why Steven Garrity advocates for designing with real, difficult data whenever possible, in this brilliant piece for A List Apart.

Content First, Design Second: Prototyping with Words and Adobe XD

Graeme Fulton takes the same line of “Content First” design in this article on Prototypr.io. Realistic content keeps us better informed when designing and so he shows how you can use detailed, realistic proto content already by the time you’re moving into low fidelity mockups – and especially when building prototypes in a tool like Adobe XD.

How Paper Wireframing Will Make You a Better Designer

I for one have a somewhat fractious relationship with paper prototypes: They are often too abstract to feel like an interface and thus require a lot of imagination by the people using and testing them. Nevertheless, I start almost every project by drawing rough sketches of screens or modules, and this article by Alexander Skogberg contains lots of good reasons, why paper wireframes are an incredibly valuable tool in the design process.

The Ultimate Guide to Proper Use of Animation in UX

Animations are everywhere these days, yet they still often aren’t used appropriately and effectively. Maybe this article by Taras Skytskyi helps to change that for good. Taras collected the most important principles and rules concerning animation of interfaces and combined them to a great overview of practical advice and techniques you can use to make your next animation prototypes even better.

Dropbox Design: Designing with real data

And yet another article on designing with real data: This time, Zach Johnston explains how the team at Dropbox uses Framer X to rebuild their Desktop Kit of components with real data at its core and shows some example components like a translator component that uses the Google Translate API to convert text into over 100 languages.

Tutorials

How to Prototype at Light Speed

If you rely on Sketch for your design process and want to add version control and prototyping to the equation, this tutorial by Elijah Wood will show you how to set up a workflow and create a simple three-page app with tools like Abstract, Sketch, Craft, and InVision.

Design System in Figma

Design systems have become a huge topic in digital design, providing visual and functional consistency across different teams and products and allowing to quickly prototype new solutions based on existing components and modules. This course by Meng To takes you through all the important steps to create a design system with Figma and using it to prototype an app flow.

Tools

Framer X Is Here

Framer X is now available for public download. It lets you create wireframes, responsive designs, everyday interactions, and reusable React-based components that you can compose into complete design systems – all in one tool. Although React code may not be the best fit for many projects, it is still amazing to see the first tool that really seems to deliver on the promise of usable code output by a visual design tool.

September 2018 Release of Adobe XD: Responsive Resize, Timed Transitions, and More

With the September update, the Adobe XD team released a feature they have been working on for quite a long time and that is really impressive to use: Responsive Resize. With Responsive Resize, you can now resize any group and even whole artboards in XD and a smart algorithm will recalculate the positions of all elements so that they stay in position. Furthermore, you can now use timed transitions in your XD prototypes and native Spell Check helps you avoid spelling errors – unless you’re still using Lorem Ipsum. ;)

By the way: If you want to give Adobe XD a try, there are a couple of opportunities to get your hands dirty in October. I will be giving workshops for Adobe on designing and prototyping with XD at the UX-DAY Mannheim (Oct 10), the World Usability Congress Graz (Oct 16), and push conference in Munich (Oct 19). So if you’re around I’d be happy to see you there!

Principle 4

Prototyping tool Principle has arrived in the next version. Version 4 brings a lot of new features like slow motion preview, animation scrubbing, video control, curve presets, and a rewritten video exporter.

React Proto

React Proto is a React application prototyping tool for developers and designers. You can quickly create, drag, and resize components to create a visual representation of your application and export project files.

Figma, faster 🏎

Performance is a key feature of modern design and prototyping tools. That’s why the Figma team has been busy to improve the speed of the tool: File loading, dragging & zooming in Figma is now up to 3x faster.

ProtoPie 3.9: More Powerful Than Ever

With the latest update, you can now use formulas and variables in your ProtoPie prototypes and even use native keyboard input in iOS or Android prototypes.

Prototyping Tools in 2018: The Time Machine

If you want to recall the last year in terms of the rapidly changing landscape of prototyping tools, prototypr.io has built a neat helper to see when which tools were introduced or updated: The Prototypr Time Machine.

Introducing Marvel + Sketch

The design platform Marvel just added support for Sketch prototypes. You can now turn your sketch prototypes into Marvel projects, sync artboards, and even handoff your designs to developers: Marvel will automatically generate CSS, Swift and Android XML code for your designs.

Real Work vs. Imaginary Work

“Thinking about how you’re going to do something is not the same as rolling up your sleeves and trying.” Ryan Singer from Basecamp elaborates why, when using the concept of Hill Charts to track project progress, imaginary work doesn’t count and the only way to move forward (or “uphill”) is to do real work by getting running code, a rough interface, an outline of a copy early. Prototyping FTW. ;)
https://m.signalvnoise.com/real-work-vs-imaginary-work-8bdb84a7d1da

Prototyping in practice

In this short video, Laura James shares how the UK's National Health Service uses prototyping to explore and illustrate new technological possibilities. The most remarkable quote: “We’re making things that show what’s possible, objects that will help us think and discuss ideas with other people.”
https://www.oreilly.com/ideas/prototyping-in-practice

Your Ultimate Guide To Successful Usability Testing

Prototypes are perfect to test your assumptions and see if features really work as intended. And ideally, you do usability testing with real users as often as possible throughout the product development process. Anna-Zsófia Csontos explains the basics of usability testing, including useful guidelines and best practices.
https://uxstudioteam.com/ux-blog/usability-testing/

Prototyping a smoother Map

This brilliant article by Antin Harasymiv, a UX Engineer at Google, gets to the heart what prototyping with code can do that is simply not possible with static layouts: Exploring a material and its traits directly and thus mastering a certain technology. In this case, Antin dives deep into the inner workings of mapping applications like Google Maps – how a 3D globe is projected onto a 2D map, how tiles are rendered, and how zooming and panning works – and then explains how he created prototypes that allowed for synchronizing animations with smooth zoom of a rasterized map.
https://medium.com/google-design/google-maps-cb0326d165f5

Are wireframes really dead?!

“Wireframing is that step of the design process that helps understand the product at a structural level.” And thus, Ana-Maria Ghinita argues, wireframes are an invaluable part of the digital product design process. Wireframes communicate structure, but also content, information hierarchy, functionality, and behavior – and allow a team to see the bigger picture, to better understand user flows and also discuss technical challenges early.
https://blog.prototypr.io/are-wireframes-really-dead-868a78c9561b

Prototyping New Story Formats for News

I already shared the corresponding article last month, but still, I don’t want to withhold this one from you: A video about how the BBC used prototyping to create new interactive story formats for news. Really great to see those prototypes in action.
https://www.youtube.com/watch?v=1nAVVuzpYoo

Tutorials

InVision Studio Tutorial: Low-Fidelity Prototyping

Although it is still a product in an early stage, InVision Studio might be worth a first look. In this step-by-step tutorial, Daniel Schwarz walks you through the basics of screen design and low-fidelity prototyping with InVision Studio, converting a storyboarded idea into an actual mockup.
https://uxtricks.design/blogs/invision-studio/low-fidelity-prototyping

How to Create a High-Fidelity Prototype with Sketch

High-fidelity prototypes allow for testing user experiences with an interface that feels more like a final product. This tutorial quickly shows you how to create such a high-fidelity prototype in Sketch with the help of Anima Toolkit.
https://medium.com/sketch-app-sources/how-to-create-a-high-fidelity-prototype-with-sketch-798358644ac2

Talks

Prototyping With Code, Andrey Salomatin

A great talk by Andrey Salomatin at the AmsterdamJS Meetup about the many benefits of prototyping, like making better decisions in an environment of uncertainty, and many practical tips on how to use prototyping effectively in practice to create better products.
https://www.youtube.com/watch?v=K_CVmB6Ux68

Tools

Sketch, Figma, Adobe XD, UXPin or InVision Studio: which one?

The title of the post says it all: Which tool is the one that best suits your needs? Koos Looijesteijn, an expert lead designer at BCG Digital Ventures in Berlin, does a great job comparing the tools in terms of their UI and specific strengths and weaknesses.
https://www.kooslooijesteijn.net/blog/Sketch-Figma-Adobe-XD-UXPin-InVision-Studio

The New Adobe XD Ecosystem: Supercharging Design Workflows with Third-Party Plugins

Another major step in the development of Adobe XD: Adobe is opening up the Adobe XD platform for developers, who will be able to build new features, automate workflows, and connect XD to tools and services. The XD extensibility APIs and an initial set of plugins will be available later this year.
https://theblog.adobe.com/the-new-adobe-xd-ecosystem-supercharging-design-workflows-with-third-party-plugins

The finale of Prototyping Week: Interactions

This month, Figma was celebrating their ‘Prototyping Week’, with daily releases of new prototyping features like landscape device frames and clickable URLs. As the final feature update, Figma added Interactions: You can now add hover and pressed states to buttons as well as imitate long presses and drop-down menus.
https://blog.figma.com/the-finale-of-prototyping-week-interactions-e30182a8ff8e

Preely

Preely is a new tool to quickly test interactive prototypes. You can create a prototype in Preely or use your existing Invision or Sketch prototypes. It then lets you recruit testers and finally provides you with analytics and feedback.
https://preely.com/

Steve Jobs on Prototypes

Jonathan Snook shares an interesting video of Steve Jobs talking about NeXT and the role of prototyping at the company. To not have to change technology, they didn’t do much prototyping but instead involved manufacturing from day one and used the real material right from the beginning. Something that isn’t yet possible with most of our current digital design tools, with their disconnection between design and production (code).
https://snook.ca/archives/design/prototypes-steve-jobs

Prototyping in the Browser

In his article for CSS Tricks, Robin Rendle explains how he uses Codepen to build HTML prototypes of animations and interactions really quickly. This is indeed also a great way to gradually increase the use of prototypes in established processes, especially if you follow Robin’s three useful lessons he learned from using this setup. I personally never want to do without Codepen prototypes again.
https://css-tricks.com/prototyping-in-the-browser/

Beyond 800 words — part 2: prototyping formats for news and Generation Z

In this super interesting article, Tristan Ferne writes about how the team at BBC R&D used prototyping to explore innovative story formats for news which are more effective than conventional video or article formats. They developed ideas into testable prototypes on a weekly basis, using real news stories, and over eight weeks showed 12 prototypes to 26 people. The four best prototypes found their way into the article.
https://medium.com/bbc-news-labs/beyond-800-words-prototyping-new-story-formats-for-news-e3102e783b5f

6 Common Pitfalls When Prototyping

Nick Babich talks about six of the most common pitfalls you should avoid to prototype effectively. A quick and useful read that touches on many important aspects like the idea of failure as a natural part of the prototyping process, selecting the right fidelity for your prototype, or the importance of sketching.
https://uxplanet.org/6-common-pitfalls-when-prototyping-6fefa4bd80ea

Improving the Design Process with Animated Prototypes

Animations have become an integral part of user interface design. Ayana Campbell Smith explains why prototyping animations is so valuable for defining an experience and discusses the pros and cons of some of the best tools for prototyping animations.
https://blog.envylabs.com/improving-the-design-process-with-animated-prototypes-23be999a4900

Delivering your work in layers

Fabricio Teixeira shares useful design advice which is especially important when building prototypes: Instead of trying to design detailed artifacts, you should do your work in layers and get used to sharing unfinished work. One of the biggest benefits of that approach: You can keep a bird's eye view on the entire product and can gradually improve it as a whole.
https://uxdesign.cc/delivering-your-work-in-layers-f28d80974de5

How to start with variable fonts on the web

Your typographic choices can be improved a lot by building prototypes. This is not only true if you are evaluating details like font size, weight, contrast, or the readability of text on different screens, but also for exploring and mastering new technologies like variable fonts. Oliver Schöndorfer, who will also speak at beyond tellerrand Berlin in November, wrote this great introduction to variable fonts in which he also covers the possibilities and challenges this new font technology brings.
https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html

Books

Flexible Typesetting, by Tim Brown

“For the first time in hundreds of years, because of the web, the role of the typographer has changed. We no longer decide; we make suggestions”, Tim Brown writes in his new book Flexible Typesetting, published by A Book Apart. It’s a concise exploration of the new web typography, full of practical techniques for setting web type in a robust but flexible way that honors the complexity of today’s Web.
https://abookapart.com/products/flexible-typesetting

Tools

Invision Studio, Framer, Supernova, Protopie… A tour of the prototyping tools available

Although there is no tool to rule them all, it’s still useful to occasionally have a look at some of the most promising design and prototyping tools and their features. This time, Antoine Marin compares 20 tools, including Adobe XD, Axure, Framer, Invision Studio, Protopie, or Sketch.
https://blog.prototypr.io/invision-studio-framer-supernova-protopie-a-tour-of-the-prototyping-tools-available-65f3eeefa967

A first look at Framer X

After the announcement of their new React-based tool Framer X last month, and some more details surfacing at the beginning of July, the Framer team now shared an impressive video of Framer X in action. It looks as if we need to add another tool to the list of serious Sketch competitors – or even the next generation of tools that finally bridges the gap between visual design and code.
https://framer.com/x

July Release of Adobe XD

The July update of Adobe XD brings the ability to label assets like colors, character styles, and symbols right in the Assets Panel, commenting on design specs, paragraph spacing, better third-party workflow integrations (with tools like Zeplin, Avocode, and ProtoPie) for Windows and many more improvements.
https://theblog.adobe.com/july-2018-release-of-adobe-xd-stroke-enhancements-commenting-on-design-specs-and-more

Styles in Libraries and fixed elements in Prototyping in Sketch 51

Sketch received an update, too. In Sketch 51, the Sketch team added styles to libraries, as well as fixed elements like headers or footers to the prototyping feature.
https://blog.sketchapp.com/styles-in-libraries-and-fixed-elements-in-prototyping-in-sketch-51-aab4074c3f46

UIengine 1.0

Dennis Reimann recently published version 1.0 of his UIengine, which has grown from a Fractal-like tool to build pattern libraries and documentation for design systems into an impressive workbench for UI-driven development – and prototyping.
https://dennisreimann.de/articles/uiengine-1-0.html

Userflows – Made with the Marvel API

Interesting: Userflows lets you transform Marvel prototypes into user journey maps. It automatically generates a birds-eye view of how users will move from screen to screen, helping you tell a better story to developers, stakeholders, and clients.
https://blog.marvelapp.com/userflows/

Flow – Professional Sketch Animation Software

Flow a motion-design tool for animating Sketch files that bridges the gap between design and development by generating native code that can be directly incorporated into larger projects by a developer.
https://createwithflow.com

Teutonic

When prototyping directly in HTML, using a framework can speed up your workflow immensely. Teutonic is a 12KB small, versatile, and well-documented CSS framework to jump-start your HTML.
https://teutonic.co

Design Thinking: Get Started with Prototyping

“Prototyping quickly, and frequently, is the best way to test your assumptions, learn about users, and improve on your ideas.” In this concise article for the Interaction Design Foundation, Rikke Dam and Teo Siang explain the role of prototyping in Design Thinking processes and how a ‘thinking by doing’ mindset will help a lot in creating tangible forms of your ideas.
https://www.interaction-design.org/literature/article/design-thinking-get-started-with-prototyping

Prototyping and Scenario-Based Design – Designer vs. Developer

An interesting interview with Brendan Kearns, a Senior Interaction Designer at Google, about the benefits of prototyping and scenario-based design – which can be explored with prototypes as well.
https://www.youtube.com/watch?v=qFQC9VNjWpY

Scenario based design

Inspired by the conversation (above) with Brendan Kearns, Mustafa Kurtuldu wrote this article which nicely outlines the basics of scenario-based design and how to use paper prototypes to test scenarios with users.
https://medium.com/dev-channel/scenario-based-design-a4aded4bab4d

Chatbot Prototyping: 7 Tools to Shape A Bot With No Coding

Whether you like chatbots or not, they are definitely here to stay. At the same time, they are also really hard to get right, as nothing is more annoying than a chatbot that gives useless or even wrong answers. Prototyping can help a lot when developing a chatbot and Oleksii Kharkovyna shares seven tools to quickly create a chatbot prototype.
https://chatbotsmagazine.com/chatbot-prototyping-7-tools-to-shape-a-bot-with-no-coding-f2bfac3c94e3

Interaction personas: why, what, and how

When you start prototyping, it can be useful to consider the context in which a user interacts with your design. Mattia Compagnucci shares a really interesting idea to better understand the physical, environmental, emotional and mental state of the user at the moment of the interaction: Interaction personas.
https://medium.com/@matcom_/interaction-personas-e24f3a958d07

Speed Up Development With Prototyping and Vue

In this step-by-step walkthrough, PJ Trainor shows how to build a basic Codepen prototype for a “Sunrise and Sunset” app with Vue.js. The article is a good example for how quick it can be to build a prototype with code to validate an idea, even if the tools that are used to build the prototype aren’t necessarily the ones you would use in production.
https://vuejsdevelopers.com/2018/06/04/rapid-prototyping-vue

Tools

The all-new Axure RP 9 – Coming Soon

Axure, a long-time industry standard for prototyping and UX documentation, is getting a major overhaul. Coming this summer, Axure RP 9 features a new hardware-accelerated rendering engine for better performance, a new interactions builder, and improved design features. Given the strong competition, this feels like a much-needed update.
https://www.axure.com/blog/new-in-9/

Framer X – React, meet design

The Framer team just announced a … drum roll … “game-changing new product that seamlessly blends design and development.” We’ve heard this promise time and time again from a number of tool makers. Let’s see if Framer finally … drum roll … cracks the code. ;)
https://framer.com/announcement

June 2018 Release of Adobe XD: Overlays, Fixed Elements, and More

The June release of Adobe XD brings two much-requested additions: Overlays and fixed elements. So you can now, for example, design and prototype off-canvas menus and sticky navigation bars in XD. Besides that, the team added features like private sharing, improvements to image cropping, and – maybe my favorite addition – calculations in property fields.
https://theblog.adobe.com/june-2018-release-adobe-xd-overlays-fixed-elements/

Introducing Zeplin 2.0 — Components and a ton more goodies

With version 2.0, Zeplin introduces support for components. You can group components, list them in your style guide, and also see all screens in which the components are used. And you can also select components within the screens of your project.
https://blog.zeplin.io/introducing-zeplin-2-0-components-and-a-ton-more-goodies-7c09dacc1f48

Figma 3.0

Figma had a big announcement this month as well with version 3.0 shipping and it brings a lot of improvements: Prototyping is now even more powerful with device frames, fixed objects, scrolling, and transitions. And with Styles and the new Team Library functionality, you can create and maintain a design system in Figma.
https://blog.figma.com/figma-3-0-217d6c248f85

Atomic: Embedding videos, maps, audio and other media

You can now easily embed video, audio, sounds, maps, webpages and more into an Atomic prototype, using a simple URL.
https://help.atomic.io/prototyping/embedding-videos-maps-audio-and-other-media

Whimsical

Whimsical is an interesting tool for creating flowcharts, user journey maps, and wireframes that also includes real-time collaboration features.
https://whimsical.co/

Satyr.io

Satyr.io is a dummy image generator just like placeholder.com but with some additional features that make it even more useful for HTML prototyping. For example, you can simulate a slow connection by adding a delay parameter or test the robustness of your interface with variable image dimensions.
https://satyr.io/

Prototyping Early and Often: A Creative Director’s Approach to User-Centered Design

“Prototyping is essential. All designers should advocate for and include it throughout their design process.” – Kathryn McElroy, author of the great O’Reilly book “Prototyping for Designers”, explains why prototyping is such an essential tool for getting feedback and improving ideas over time. And why it is so important to develop a mindset where you are comfortable with testing unfinished ideas in order to make the best result possible.
https://medium.com/@argodesign/prototyping-early-and-often-a-creative-directors-approach-to-user-centered-design-953c974bcf7

Priority Guides: A Content-First Alternative to Wireframes

While wireframes are great for sketching and exploring design ideas, they can have their downsides, too. For example, they tend to limit creativity when visual designers are just coloring wireframes instead of understanding them as a conceptual guideline that can be further improved upon. That’s why Heleen van Nues and Lennart Overkamp suggest “Priority Guides” as an alternative that helps prioritize content at the start of a project.
https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes

Prototyping Information Architecture

In this talk (and transcript) from the IA Summit 2018 in Chicago, Andy Fitzgerald talks about how to use modeling and simulation to more effectively solve the dynamically complex problems we increasingly face as practicing designers of information spaces. Because “while prototyping is important for the validation and testing process, is it equally if not more important for the learning and creation process.” He then provides an example of a prototyping process for information architecture including an example from his recent work and shares his open-source toolkit for prototyping with content.
http://www.andyfitzgeraldconsulting.com/speaking/prototyping-ia/

Low-Fidelity vs. High-Fidelity Prototyping

There’s no one-size-fits-all approach to prototyping. That’s also the reason why prototyping can be applied so flexibly in different stages of product development or to achieve different goals. One aspect to think about and get right when building a prototype is choosing the right fidelity, the right level of detail. In this post, Emily Esposito compares low-fidelity to high-fidelity prototyping and shares the differences and respective advantages of each strategy.
https://www.invisionapp.com/blog/low-fi-vs-hi-fi-prototyping/

Rapid Prototyping Process and Fidelity: A 10-Minute Guide for UI and UX Designers

And yet another piece about fidelity: Jerry Cao, content strategist at UXPin, explains in depth which factors can affect the right level of fidelity to build into a prototype, but also looks at different strategies of including prototyping in the design process, and ways to combine fidelity and functionality in prototypes.
https://www.uxpin.com/studio/blog/rapid-prototyping-process-fidelity-10-minute-guide-for-ui-ux-designers/

Courses and Events

Human-Centered Design 201: Prototyping, a course with IDEO.org

+ACUMEN offers a free prototyping course in cooperation with IDEO.org. You will learn methods that IDEO.org designers use to quickly build prototypes, learn best practices for testing those ideas in the field, and collecting real user feedback to iterate efficiently.
https://www.plusacumen.org/courses/prototyping

Framer Loupe Conference

Framer is hosting a conference at the EYE Filmmuseum in Amsterdam this September. You can expect interesting talks about design and prototyping and there will also be hands-on Framer workshops including advanced topics like prototyping with data or hardware.
https://framer.com/loupe

Tools

Adobe XD is now free (!)

What an unexpected move by Adobe. Adobe XD is now completely free in the new Starter Plan. Included are all design and prototyping capabilities and you can create an unlimited number of XD documents. The number of active, shared prototypes and design specs is limited to one each. The May release also introduces password protected design specs, the ability to swap symbols, paste elements to multiple artboards, and also brings improvements to the Sketch and Photoshop integrations.
https://theblog.adobe.com/may-2018-update-adobe-xd/

Marvel introduces a free API

This really is a big step for Marvel: They just announced their new, free API, built with GraphQL which enables developers to build their own Marvel integrations or apps.
https://blog.marvelapp.com/introducing-the-marvel-api/

Overflow now in free public beta

Overflow, a new user flow diagramming tool, is now publicly available for free. With Overflow, you can create, share, and present “a playable and interactive user flow diagram that allows zoom in and out to focus on the details or on the big picture”.
https://blog.overflow.io/announcing-overflow-public-beta-33fafc45d357

New Toolbox by Prototypr

Finding the right prototyping tool can be a challenge. Prototypr now makes it a little easier for you with their Toolbox which lets you compare design and prototyping tools by platform, features, and pricing.
http://prototypr.io/toolbox/

Lobe

Lobe is a new visual tool that lets you build custom deep learning models, quickly train them, and ship them directly in your app or website using the Lobe Developer API. Looks like more users will be able to prototype with AI very soon.
https://lobe.ai

Sketchize sketch sheets

Sketchize are a free set of useful sketch sheets by Halil İbrahim Çakıroğlu with devices like smartphones, tablets, or browsers with and without a dotted grid.
https://sketchize.com

Lightwire plugin for Sketch

This plugin for Sketch adds a panel with ready-to-use wireframes of 38 screens that you can use to test ideas quickly and as a starting point for UI prototyping.
http://lightwireplugin.com

Modular – Android UI Kit

Material Design at your fingertips: The Framer team released a free Android UI Kit featuring Material Design elements that adapt to any screen size.
https://framer.com/modular

In Defense of Design Thinking, Which Is Terrible

This first article seemingly doesn’t have anything to do with prototyping. I included it anyway. For one, because this piece by Khoi Vinh is just too good to be left out, but also because it directly correlates with the collaborative nature of prototyping. In his talk, Khoi argues that although design now has claimed a seat at the table and is more important than ever, designers still jealously protect the language and tools of design. Yet to become truly powerful, design has to be further democratized – it needs to get out there into the world and in the hands of millions of people.
https://www.subtraction.com/2018/04/02/in-defense-of-design-thinking-which-is-terrible/

Prototyping and the Wintergatan Marble Machine

Dave Rupert shares the story of the Wintergatan Marble Machine, an “enormous mechanical device filled with over 2000 marbles raised up by a conveyor belt and dropped on a xylophone, drum contact mics, and bass guitar.” Martin Molin, one of the creators of the magical device, now documents the process of building the next version of the Machine on YouTube with a process that heavily relies on prototyping to experiment and prove ideas.
https://daverupert.com/2018/04/prototyping-wintergatan-marble-machine-x/

Death to Process Machines!

Adam Stoddard from Basecamp explains how you can find your ideal design process by sticking to a few simple principles instead of a rigid script. A great example of the different kind of mindset needed when moving away from linear workflows towards more flexible approaches.
https://m.signalvnoise.com/death-to-process-machines-e928c135ee89

8 Tips for Creating Better User Flows

“User flows are visual representations of the path the user can follow to achieve a goal while using an app, website or any other product.” Overflow is a new tool for creating those user flows and the Overflow team now shares 8 practical tips for designers who are new to user flow diagramming.
https://blog.overflow.io/8-tips-for-creating-better-user-flows-e46eb0d2a2c6

Quantitative User-Research Methodologies: An Overview

When it comes to testing prototypes with users, quantitative methodologies can offer many insights about your product’s user experience. Kate Meyer covers some of the most popular types of quantitative research like A/B testing, Card Sorting, or Eyetracking and explains their advantages.
https://www.nngroup.com/articles/quantitative-user-research-methods/

Quick Prototyping Tools for Emerging Technologies

Prototyping is invaluable in the creation of innovative solutions for today’s Web and beyond. “Only by building a fleshed out prototype can we get a sense of its challenges and possibilities, revealing insights that give us a glimpse of where emerging technologies like blockchain, AI, IoT, and XR can take us.” And that’s why the people at IDEO CoLab share a roundup of their favorite tools for emerging technologies.
https://medium.com/ideo-colab/quick-prototyping-tools-for-emerging-technologies-3fb56f62360a

Prototyping maps with Framer and Mapbox

Prototyping often is about combining different possibilities into new constellations. In this case, Sergey Voronov combined Mapbox and Framer to create a prototype of a map experience. In his article, he walks you through the steps needed to build such a prototype by yourself.
https://blog.framer.com/prototyping-maps-with-framer-and-mapbox-207512463e9a

Tools

Introducing Framer Form

Emil Widlund published a module that lets you integrate 3D-graphics into your Framer Prototype, including concepts like Animations & States.
https://blog.framer.com/introducing-framer-form-288fcb162ca2

Storyboarder

As the name suggests, Storyboarder by Wonder Unit is a new (free) tool for creating storyboards and animatics. You can export your work to Premiere, Final Cut, Avid, PDF, and as an animated GIF.
https://wonderunit.com/storyboarder/

Maze – Analytics for InVision prototypes

Maze is a testing tool for InVision prototypes: You can define missions, collect actionable insights and analyze how your design performed, with 0 lines of code.
https://maze.design/

Lunacy, Sketch for Windows

It’s as simple as that: Lunacy is a native Windows app that works offline and supports .sketch files. Yay!
https://icons8.com/lunacy

Adobe XD adds password-protected prototypes and filtered search in the Assets Panel

This month, Adobe XD’s update included a lot of useful changes, for example, the ability to protect your prototypes with a password. You can now also highlight assets in the asset panel (colors, character styles, and symbols) with a right click on the element you want to inspect and search in the assets panel for color values, font families, layer names of symbols and much more. The Sketch and Photoshop integration which was added last month also received further enhancements.
https://theblog.adobe.com/april-2018-update-adobe-xd/

Sympli: Introducing Prototyping Support

Collaboration and workflow platform Sympli now handles prototyping information for both Sketch and Adobe XD in the design specs and preview modes.
https://sympli.io/blog/2018/03/27/introducing-prototyping-support/

Avocode update: Open and inspect Sketch designs on Windows, Linux, and macOS

From now on, Avocode enables anyone to import, open and inspect layered Sketch designs on Windows, Linux (yes Ubuntu too), or on macOS without Sketch app. It even works in the browser.
https://blog.avocode.com/major-update-open-and-inspect-sketch-designs-on-windows-linux-and-macos-458bbe1b166e

Stackswell

Stackswell is a Sketch plugin that adds Responsive Typography features and Smart Symbols which automatically adapt to different viewport widths. You can now sign up for early access here.
https://medium.com/sketch-app-sources/bringing-css-smarts-to-sketch-c183e8cd1dc9

Sketch macOS UI Library

The Sketch team shares its comprehensive macOS UI Library, with almost 300 Symbols and over 50 designed especially for the MacBook Pro’s Touch Bar.
https://sketchapp.com/libraries/mac

Sketch UX Kit

Mikolaj Dobrucki has created a Sketch UX Kit full of symbols, presets, and examples. A great start for wireframing and prototyping your next project.
http://mikolajdobrucki.com/sketchuxkit/

A Comprehensive Guide To Wireframing And Prototyping

In this comprehensive article for Smashing Magazine, Christopher Murphy explains some of the many advantages of prototyping and walks you through different stages of prototype fidelity – from paper prototyping to interactive wireframes to high-fidelity mockups.
https://www.smashingmagazine.com/2018/03/guide-wireframing-prototyping/

The Design Genome Project – Explore the DNA of the world’s most successful product Design Teams

InVision’s Design Education Team just published The Design Genome Project, a series of reports based on hundreds of hours of interviews with product teams of successful companies like Netflix, Slack, Shopify, Capital One, and Pinterest investigating what workflows and organizational structures enable those teams to create products that dominate a market.
https://www.invisionapp.com/blog/design-genome-project/

Design Challenge: Rapid Prototyping a functioning Augmented Reality App

Garrett Sheridan, Principal UX & Product Designer at Marino Software, wrote about how his team, using Unity and Xcode, created a working prototype of an AR app that helps people with specific dietary requirements to find suitable products in a supermarket. The prototype allowed them to gain an understanding of the immense potential as well as the limitations of the technology: “It can be ugly, there can be unknowns but the goal is to make something realistic enough to learn from.”
https://uxplanet.org/design-challenge-rapid-prototyping-a-functioning-augmented-reality-app-fb73ede33a4e

6 Tips for How to Prototype a Service

One challenge of designing a service is that most of the time you don’t design a physical product but an intangible experience. So how can you use prototyping to design a service that meets the needs of the people who use it? In the IDEO U Creative Confidence Series chat, Suzanne Gibbs Howard and Ilya Prokopoff share examples of service design prototypes and 6 tips for prototyping a service.
https://www.ideou.com/blogs/inspiration/6-tips-for-how-to-prototype-a-service

How you can train an AI to convert your design mockups into HTML and CSS

Within the next years, deep learning will fundamentally change web and software development which will also lead to changes in the design process. For example, it will be possible to use a neural network to generate HTML and CSS code based on sketches or wireframes. If you’re interested in how this works under the hood, this article by Emil Wallner is a must-read. Even if you don’t delve into all the concepts it’s still a valuable insight into what is possible already and what is yet to come.
https://medium.freecodecamp.org/how-you-can-train-an-ai-to-convert-your-design-mockups-into-html-and-css-cc7afd82fed4

An in-depth look at Prototyping in Sketch

Last month, Sketch 49 was released and with it, native prototyping found its way into Sketch. The Sketch blog takes a closer look at this interesting new feature and shows you how to create interactive prototypes with links and hotspots as well as how you can preview your prototypes and share them on Sketch Cloud.
https://blog.sketchapp.com/an-in-depth-look-at-prototyping-in-sketch-942394341f3c

Prototyping An App’s Design From Photoshop To Adobe XD

Adobe XD also added a powerful new feature with the latest release: You can now import Sketch and Photoshop files including artboards and layers. In this step-by-step tutorial on Smashing Magazine, Manuela Langella shows how to create an interactive app prototype from Photoshop designs.
https://www.smashingmagazine.com/2018/03/prototyping-photoshop-adobexd-apps-design/

Tools

Overflow

The Proto.io team released a new tool this month: Overflow lets you turn your designs into playable user flow diagrams that describe the user journey from start to end. Here’s an example of how such a user flow diagram looks like: https://overflow.io/s/9ST7SX/ You can now sign up for an early beta.
https://blog.prototypr.io/meet-overflow-9b2d926b6093

Introducing Supernova Studio

“Supernova Studio is the first tool which truly bridges the gap between designers and developers.” Supernova Studio introduces itself with a bold claim – one that other tools failed to deliver on in the past. But maybe this time it’s different, at least the feature list reads really impressive: 1:1 conversion of designs from Sketch, fully native design components, creation of navigation chains and user flows, automatic responsive layouts, full-fledged multi-platform animation engine, export of code, assets, fonts, and much more. Supernova is available now for OS X with Windows support planned for later.
https://blog.prototypr.io/introducing-supernova-studio-35335de5044c

PixelSnap

PixelSnap is a clever little helper to measure anything on your screen. It works in every app, detects objects, and measures distances – and you can copy the dimensions to your clipboard or take a screenshot.
https://getpixelsnap.com/

MockingBot

MockingBot is a collaborative prototyping tool for UI/UX designers that comes with Sketch import and a handoff feature.
https://mockingbot.com/

Timeline for Sketch

Timeline is a plugin that adds a, well, timeline to Sketch. You can create animations with keyframes and export them as a GIF or MP4 video.
https://medium.com/sketch-app-sources/timeline-for-sketch-is-now-available-c429fd6a884e

Figma Prototyping now with transitions

The Figma team added transitions to the prototyping feature, so you can now use a dissolve, slide, or push effect to link frames to each other.
https://blog.figma.com/figma-prototyping-now-with-transitions-197f817ae7a8

Copy and paste from Sketch to Framer

Release 114 of Framer introduces the ability to copy and paste artboards, groups, layers, and paths from Sketch to Framer.
https://framer.com/updates/#v114

Photoshop and Sketch integration in Adobe XD

Adobe XD is on a monthly release cadence and with the March update the team added support for importing Photoshop and Sketch files. You can now also copy and paste symbols between documents, style grouped elements all at once, and edit the viewport of scrollable artboards more easily.
https://theblog.adobe.com/march-2018-update-adobe-xd/

If you want to learn more about design and prototyping with Adobe XD, I invite you to join me on 9 May 2018 for my Adobe XD Deep Dive workshop at beyond tellerrand Düsseldorf. More info and registration: https://beyondtellerrand.com/events/duesseldorf-2018/workshops/adobe-xd-deep-dive

Are you approaching prototyping all wrong?

Paul Boag shares an important aspect of prototyping on his Digital Insights podcast: Instead of prototyping what will be built anyway, a much more powerful way to use a prototype is to create a discussion piece that is a vision of what a great user experience would look like. Make sure to also have a look at Paul’s comprehensive post about the basics and the potential of prototyping: Prototyping: Why Bother and Where to Start? A Definitive Introduction

Learning Framer By Creating A Mobile App Prototype

In this tutorial for Smashing Magazine, Greg Rog introduces you to all the basics of Framer, from building frames in design view to coding animations and interactions – and even fetching real data for use in your prototype.
https://www.smashingmagazine.com/2018/02/introduction-to-framer/

Sketching in the Browser

In this brilliant post, Mark Dalgleish covers how his team works with design systems and how they set up a workflow that seamlessly connects their codebase with Sketch so that changes to the code are continuously flowing through into the Sketch library. A solution that can also prove beneficial when working with HTML prototypes.
https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526

Test your Menu Flow in Minutes with an Xbox or PS4 Controller using Adobe XD

What a nice hack: Ettore Ink shares how to set up a prototyping environment in Adobe XD to test the menu flow of your game with a controller.
https://medium.com/@ettore_ink/test-your-menu-flow-in-minutes-with-an-xbox-or-ps4-controller-using-adobe-xd-91216710acf7

Prototyping UI in Unity

Unity, a popular 3D game engine, isn’t necessarily the first tool you think about when it comes to prototyping user interfaces. But especially if you are interested in AR or VR, 3D environments like unity play to their strengths. So this series of posts by Mike Mariano that walks you through the creation of a photos app prototype is really interesting stuff.
https://medium.com/@marianomike/prototyping-ui-in-unity-introduction-db12458020ae

A simple solution for prototyping voice interfaces

Voice UI is one of the hot topics at the moment and it’s a field where prototyping can be incredibly useful to explore concepts and observe how humans interact with a system. Shankar, an Interaction Designer at Angie’s List, explains how you can use the iOS app Workflow to create simple voice interaction prototypes.
https://uxdesign.cc/a-simple-way-to-prototype-voice-interfaces-5e99d4e3c698

Tools

Sketch Version 49

Fresh from the press: The Sketch team released Sketch Version 49 today, which brings a lot of enhancements and also a new prototyping feature. You can now connect artboards with links and hotspot layers to create basic interactive prototypes of your designs directly in Sketch.
https://www.sketchapp.com/updates/#version-49

An Inside Look at Framer’s 2017

Framer had a successful 2017 that culminated in the launch of a full vector editing toolkit in December. In this post, the Framer team looks back at everything that happened with their product, company, and community.
https://blog.framer.com/an-inside-look-at-framers-2017-88aea3b1a15

Fluid

Fluid is a free iOS 11 UI Kit for Framer for your next mobile prototype. It features native elements like switches, keyboards, and navigation bars that intelligently adapt to any screen size.
https://framer.com/fluid/

Haiku

Haiku is a design tool mainly built for app design with a high focus on animations and collaboration between design and development. It brings a timeline, supports Sketch assets, and the design file format is hackable, hand-editable code.
https://www.haiku.ai/blog/introducing-haiku

Interplay

Interplay lets you design and prototype using your own real code components, then share those in-browser prototypes instantly with customers and stakeholders. You can now sign up for the private beta.
https://interplayapp.com

Mirr.io

Mirr.io is a Sketch plugin and a preview tool in the form of a desktop app. You can use it to add events and transitions to your Sketch artboards and preview your prototype in any browser on any device.
https://mirr.io

Protowire Sketch Plugin

With Protowire you can create scrollable areas, transitions between screens, and animate layers to create responsive prototypes that adapt to different screen sizes. The prototype can be shared on the cloud and viewed on a desktop or mobile browser.

Atomic adds JavaScript script expressions

Atomic, a really promising design and prototyping tool with collaboration features, added a powerful new feature: You can now enhance your prototypes with JavaScript.
https://help.atomic.io/prototyping/script-expressions

Running in Circles – Why Agile Isn’t Working and What We Do Differently

This great piece isn't only about prototyping but also about iterative processes in general. Ryan Singer explains how, at Basecamp, they use the so-called uphill phase to learn – through prototypes – what’s hard and what’s possible in a project.
https://m.signalvnoise.com/running-in-circles-aae73d79ce19

Why You Should Start Prototyping—Right Now

A nice piece by Pedro Andrade from IDEO about how prototyping can provide a fresh perspective and spark an early conversation.
https://www.ideo.com/blog/why-you-should-start-prototyping-right-now

Generating Wireframe Boxes with CSS and HTML5

Eric Meyer, the grand seigneur of CSS, shares a nice technique to create wireframe boxes with CSS and HTML5. Really useful for your next HTML prototypes.
https://meyerweb.com/eric/thoughts/2017/11/27/generating-wireframe-boxes-with-css-and-html5/

Rapid Prototyping Process and Fidelity: A 10-Minute Guide for UI and UX Designers

If you want an overview of how prototyping fits in the product design workflow and are looking for a concise introduction into various prototyping techniques and best practices, this article by Jerry Cao has you covered with a lot of useful advice.
https://www.uxpin.com/studio/blog/rapid-prototyping-process-fidelity-10-minute-guide-for-ui-ux-designers/

Laws of UX

When building your prototype, it can be extremely helpful to consider design principles like contrast or visual hierarchy. Laws of UX by Jon Yablonski is a beautifully designed collection of 10 maxims and principles that designers can consider when building user interfaces – and prototypes as well.
https://lawsofux.com

Saving Your Web Workflows with Prototyping

Shameless plug: I wrote an article that explores the role of prototyping to explore different materials and the importance of prototyping in web workflows when building resilient, performant experiences.
https://matthiasott.com/articles/saving-your-web-workflows-with-prototyping

Talks

Vague But Exciting – Dave Rupert

Last November, Dave Rupert gave a wonderful talk at beyond tellerrand Berlin exploring the role of prototyping in our workflows. He particularly concentrated on lessons from the field of game development, where prototyping plays a vital role in the iterative development of a unique game feel and innovative characters.
https://vimeo.com/242036572

An Event Apart: Prototyping The Scientific Method of Business – Daniel Burka

Daniel Burka, a design partner at Google Ventures, talked at An Event Apart Denver about how to use prototyping to create value for businesses. Luke Wroblewski, the author of the book Mobile First, shares his notes from the talk:
https://www.lukew.com/ff/entry.asp?1983

Success stories from Kenya's first makerspace – Kamau Gachigi

In an interesting TED talk, Kamau Gachigi, a technologist from Kenya, shares some of the extraordinary projects and innovations coming out of his fab lab Gearbox. A great example of the importance of prototyping for economies facing the challenge of industrialization in the 21st century.
https://www.ted.com/talks/kamau_gachigi_success_stories_from_kenya_s_first_makerspace

Tools

InVision Studio

InVision already is a popular solution for creating online prototypes out of static comps but now they are joining the screen design software game. InVision Studio, advertised as “the world's most powerful screen design tool”, is now rolling out and it looks really promising. Responsive prototyping, animation, and shared design systems all in one tool – it sounds almost too good to be true. I guess many of us are eager to test it out and we will see if it holds up to the high expectations.
https://www.invisionapp.com/studio

Framer Update

Framer started as a mainly code-based tool for interface prototyping with its great strength being interactions and animations. But for quite some time now, the team has been expanding Framer into a powerful screen design tool. In December, Framer received a major update, adding advanced path editing, boolean operations, adaptive layouts and much more.
https://framer.com/features/design/
Prototypr.io has written an in-depth review of the new features: Unwrapping the new Framer

Zeplin now integrates with Adobe XD CC

Adobe is continuously adding new features to Adobe XD, their design and prototyping tool. The January update, for example, brings batch object export, radial gradients, and the possibility to switch color models. But most importantly, Adobe XD now integrates with several third-party tools. The most interesting one may be Zeplin, a collaboration and design hand-off tool. More details on the Zeplin blog:
https://blog.zeplin.io/zeplin-now-integrates-with-adobe-xd-cc-726c8a4b2f22

Tracy

And last but not least: Florian Schulz created a neat little tool to convert monochrome sketches to SVG. You simply scan your drawing with your smartphone and Tracy syncs it to your computer as a vector graphic. Magic! ;)
http://www.usetracy.com