“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. ;)
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.”
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.
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.
“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.
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.
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.
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.
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.
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.
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.
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.
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.