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.
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.
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.”
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.
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.
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.
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.
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.
“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.
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.
MockingBot is a collaborative prototyping tool for UI/UX designers that comes with Sketch import and a handoff feature.
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.
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.
Release 114 of Framer introduces the ability to copy and paste artboards, groups, layers, and paths from Sketch to Framer.
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.
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