Issue 9 — September 2018Designing with difficult data, prototyping with words in Adobe XD, the proper use of animation in UX, and: Framer X is here.

Hi! How is it already October? ;) Anyway, time for the best prototyping links of the past month and one topic really stood out this time: designing with data. Using realistic or even real data when making design decisions right from the start will save you a lot of headaches later in the process. And with prototyping, you have a tool at hand that is perfect to experiment with data, because building a prototype is relatively inexpensive and less risky compared to creating dozens of variations of a static layout or building a full-fledged application. Toolmakers seem to realize that there is a growing demand to work with data and are increasingly adding functionality that allows for working with mock-up data or even APIs more easily. No doubt, there are interesting times ahead. If you built, wrote, or found something worth sharing, please let me know: Just write an email to matthias@prototyping.news.
– All the best! Matthias

Links

Design with Difficult Data

“With modern design and prototyping tools, HTML/CSS/JS prototypes, and even static mockups, we only cheat ourselves if we aren’t pushing our designs to the breaking point.” That’s why Steven Garrity advocates for designing with real, difficult data whenever possible, in this brilliant piece for A List Apart.

Content First, Design Second: Prototyping with Words and Adobe XD

Graeme Fulton takes the same line of “Content First” design in this article on Prototypr.io. Realistic content keeps us better informed when designing and so he shows how you can use detailed, realistic proto content already by the time you’re moving into low fidelity mockups — and especially when building prototypes in a tool like Adobe XD.

How Paper Wireframing Will Make You a Better Designer

I for one have a somewhat fractious relationship with paper prototypes: They are often too abstract to feel like an interface and thus require a lot of imagination by the people using and testing them. Nevertheless, I start almost every project by drawing rough sketches of screens or modules, and this article by Alexander Skogberg contains lots of good reasons, why paper wireframes are an incredibly valuable tool in the design process.

The Ultimate Guide to Proper Use of Animation in UX

Animations are everywhere these days, yet they still often aren’t used appropriately and effectively. Maybe this article by Taras Skytskyi helps to change that for good. Taras collected the most important principles and rules concerning animation of interfaces and combined them to a great overview of practical advice and techniques you can use to make your next animation prototypes even better.

Dropbox Design: Designing with real data

And yet another article on designing with real data: This time, Zach Johnston explains how the team at Dropbox uses Framer X to rebuild their Desktop Kit of components with real data at its core and shows some example components like a translator component that uses the Google Translate API to convert text into over 100 languages.

Tutorials

How to Prototype at Light Speed

If you rely on Sketch for your design process and want to add version control and prototyping to the equation, this tutorial by Elijah Wood will show you how to set up a workflow and create a simple three-page app with tools like Abstract, Sketch, Craft, and InVision.

Design System in Figma

Design systems have become a huge topic in digital design, providing visual and functional consistency across different teams and products and allowing to quickly prototype new solutions based on existing components and modules. This course by Meng To takes you through all the important steps to create a design system with Figma and using it to prototype an app flow.

Tools

Framer X Is Here

Framer X is now available for public download. It lets you create wireframes, responsive designs, everyday interactions, and reusable React-based components that you can compose into complete design systems — all in one tool. Although React code may not be the best fit for many projects, it is still amazing to see the first tool that really seems to deliver on the promise of usable code output by a visual design tool.

September 2018 Release of Adobe XD: Responsive Resize, Timed Transitions, and More

With the September update, the Adobe XD team released a feature they have been working on for quite a long time and that is really impressive to use: Responsive Resize. With Responsive Resize, you can now resize any group and even whole artboards in XD and a smart algorithm will recalculate the positions of all elements so that they stay in position. Furthermore, you can now use timed transitions in your XD prototypes and native Spell Check helps you avoid spelling errors — unless you’re still using Lorem Ipsum. ;)

By the way: If you want to give Adobe XD a try, there are a couple of opportunities to get your hands dirty in October. I will be giving workshops for Adobe on designing and prototyping with XD at the UX-DAY Mannheim (Oct 10), the World Usability Congress Graz (Oct 16), and push conference in Munich (Oct 19). So if you’re around I’d be happy to see you there!

Principle 4

Prototyping tool Principle has arrived in the next version. Version 4 brings a lot of new features like slow motion preview, animation scrubbing, video control, curve presets, and a rewritten video exporter.

React Proto

React Proto is a React application prototyping tool for developers and designers. You can quickly create, drag, and resize components to create a visual representation of your application and export project files.

Figma, faster 🏎

Performance is a key feature of modern design and prototyping tools. That’s why the Figma team has been busy to improve the speed of the tool: File loading, dragging & zooming in Figma is now up to 3x faster.

ProtoPie 3.9: More Powerful Than Ever

With the latest update, you can now use formulas and variables in your ProtoPie prototypes and even use native keyboard input in iOS or Android prototypes.

Prototyping Tools in 2018: The Time Machine

If you want to recall the last year in terms of the rapidly changing landscape of prototyping tools, prototypr.io has built a neat helper to see when which tools were introduced or updated: The Prototypr Time Machine.

Introducing Marvel + Sketch

The design platform Marvel just added support for Sketch prototypes. You can now turn your sketch prototypes into Marvel projects, sync artboards, and even handoff your designs to developers: Marvel will automatically generate CSS, Swift and Android XML code for your designs.