Issue 8 — August 2018
Real work vs. imaginary work, successful usability testing, prototyping a smoother map, and a talk about prototyping with code
Hi! I’m back from vacation in New York, a city that feels like it is constantly prototyping, and here comes the August issue. This time with useful advice regarding processes, usability testing, wireframes and much more. As always: If you found, built, or wrote something that should be part of the next issue of this newsletter, write an email to matthias@prototyping.news.
– Enjoy! Matthias
Links
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/
