Issue 3 – Mar 2018
A comprehensive guide to wireframing and prototyping, prototyping an AR app, service design prototyping, and prototyping in Sketch and Adobe XD

Hi! This month was once more full of news around design and prototyping tools. InVision Studio finally landed with the first people receiving their invites, but also Sketch, Adobe XD, Framer, and Figma improved a lot with their latest updates. There is in fact so much buzz around tooling these days that it sometimes feels like we need to remember that prototyping isn’t primarily about the tools you use but the insights you gain from building and testing your prototype. And also that anything can be a prototype: An interactive series of artboards, of course, yes, but also a working proof-of-concept for an AR app, an AI that converts wireframes into code, or a plain simple paper prototype for a service design. So don’t restrict yourself by clinging to a specific tool but think about what works best for the problem you need to solve. As always: I’d love to hear what you think about this newsletter and how I can further improve it. Also, if you find something that should be included in the next issue, don’t hesitate to write me an email.
– Have a wonderful weekend! Matthias

Links

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