Issue 8 – August 2018
Real work vs. imaginary work, successful usability testing, prototyping a smoother map, and a talk about prototyping with code

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/