Issue 25 – January 2020
Why prototyping is a must for teams, prototyping in the browser with CSS Grid, back-end data and API prototyping, and some inspiration for 2020.

Hi! Last week, I spent three days in Milan for Interaction 20, the yearly conference of the IXDA. This year, the theme of the conference was “A New Dawn” and many keynotes and sessions looked at the current and future role of design in this age of machine learning, robotics, a changing climate, and various other social and economic challenges. It felt so good to see and hear designers not only talk about design and processes but also reflect on their larger responsibility as agents of change. The world around us and the technologies we use to solve problems are changing faster than ever and we need to find ways to shape a humane future in accordance with ethical principles. Shaping our future requires that we understand the materials we will have to work with. Yet many of those materials, like artificial intelligence or complex, bioengineered systems, are increasingly hard for us to understand. So it will be crucial that we maintain the ability to explore what the grain of those materials is and how they react to manipulation and different contexts. This is where prototyping comes in: With prototyping, you can test your assumptions and make the effects of your design decisions visible. Prototyping lets you work with complex, dynamic materials, even when they change while you are working with them. This makes prototyping the perfect tool to design not only hypothetical but real, applicable solutions. And those are the solutions we will need to positively shape the future – starting today.

As always: If you enjoy this newsletter, please consider sharing it with a person who might appreciate it, too. If you have any feedback or want to share an interesting link, just write an email. I love to hear from you. Thank you so much! 🤗

– Happy prototyping! Matthias


Links

Why Prototyping is a Must for Teams

Many teams still work with static mockups to visualize their ideas and communicate them to stakeholders and other team members. Jarrod Drysdale looks at the many advantages prototypes have over static layouts, like better communication between designers and developers, an increased understanding by stakeholders for interactivity and user flows, and better feedback from user testing.
https://www.framer.com/blog/posts/why-prototyping-is-a-must/

Faking is Good: Back-end Data and API Prototyping with Faker.js and JSON-Server

Working with realistic data as early as possible in the design process can be invaluable because you can design and prototype content-first. Pulling in realistic data into your prototypes is not limited to coded prototypes anymore. With plugins like Data Populator, you can also pull data from APIs into tools like Sketch or Adobe XD, for example. But what if you want to use realistic data while the API is not ready yet? That’s where mocking an API can prove useful and in this post, Tapas Adhikary walks you through the process of setting up a local fake REST API that responds to your requests with generated but realistic fake data.
https://blog.greenroots.info/faking-is-good-back-end-data-and-api-prototyping-with-fakerjs-and-json-server-ck5q8yc2k06evqks1rhvas00n

20 Most Inspirational Interactive Prototypes for 2020

If you are looking for some prototyping inspiration, have a look at this list of 20 prototypes and their animations and micro-interactions. Fredo Tan collected a broad range of examples, from mobile apps and voice interfaces to dashboards and desktop applications. All prototypes are made with ProtoPie.
https://uxplanet.org/20-most-inspirational-interactive-prototypes-for-2020-cad0b5bb711

4 ways to prototype a hover state: InVision, Framer, Sketch, Figma

Prototyping is not only invaluable to explore comprehensive solutions but equally useful to get the small details and micro-interactions of a project right. Polo Chen takes a look at one of the most basic interaction patterns on the web, the hover effect, and how it can be prototyped in four of the most popular prototyping tools. And in case you also want to know how to prototype an auto-animated hover effect in Adobe XD, watch this Adobe XD Hover Effect Design & Prototype Tutorial video by Caler Edwards.
https://uxdesign.cc/prototype-a-hover-state-4-ways-85851436ffae

Simple Image Placeholders with SVG

Image placeholders are super useful for HTML prototyping and you can use services like PlaceIMG, Placeholder.com, or placekitten to get placeholders via a URL that can then be used in a prototype. External requests can significantly slow down local development, though, so Tyler Sticka made a tiny, dependency-free library called Simple SVG Placeholder that generates data URIs for placeholder images. In this post, Tyler explains how the library works and how you can use it in your prototypes.
https://cloudfour.com/thinks/simple-svg-placeholder/

Video Tutorials

Prototyping in the Browser with CSS Grid Layout

CSS Grid is a game-changer in how quickly different layouts can be prototyped directly in the browser with only a few lines of code. If you are not yet convinced, watch this 5-minute video by Jeremy Osborn. He does a great job of explaining why prototyping in the browser with CSS Grid is so powerful.
https://thegymnasium.com/take5/prototyping-in-the-browser-with-css-grid-layout

Overview: Prototyping in Adobe XD with Jonathan Pimento & Arun Kaza

Adobe XD lets you intuitively link screens to create prototypes quickly but it is equally suited for building high-fidelity prototypes with multiple interaction triggers – like touch, voice, and keyboard input –, different component states, and animations. In this session from Adobe MAX, Jonathan Pimento and Arun Kaza explain in detail how to prototype effectively with XD, including a lot of pro tips and tricks.
https://www.youtube.com/watch?v=Em57ib2rACk

Tools

Play

Play is a new tool that promises to revolutionize how you design apps – directly on your mobile phone. You can build your product from scratch or by using over 100 customizable components. Play will export to Xcode supporting Swift, with plans to roll out more languages in the future. You can sign up for the private beta now.
https://www.createwithplay.com

Diagrams

Whether you want to create a sitemap, visualize a software architecture, or prototype a user flow, diagrams are a helpful tool in the design process. Diagrams is a new diagram editor for Mac that lets you easily create beautiful and structured, well, diagrams.
https://diagrams.app

January 2020 Release of Adobe XD: Content-Aware Layout, New Plugin APIs, and More

Besides star shapes and drag-and-drop support for XD plugins, the January release of Adobe XD introduced powerful smart layout controls: In its initial release, Content-Aware Layout finally brings padding to groups and components in XD. So you can now create buttons that adapt to different text lengths or components that grow when you add new layers to the group.
https://theblog.adobe.com/xd-january-2020-content-aware-layout-plugin-apis/

Introducing Cloud Inspector — free developer handoff in the browser

The Sketch team announced the first beta version of a new Cloud Inspector in January. Cloud Inspector lets you share designs more easily with developers and provides details like measurements, fonts, or colors for selected artboards and layers.
https://blog.sketchapp.com/introducing-cloud-inspector-free-developer-handoff-in-the-browser-59917220334a

Leonardo: an open-source contrast-based color generator

Creating a color palette that meets accessibility criteria such as minimum contrast ratios defined by the Web Content Accessibility Guidelines can be quite a challenge. This is where Leonardo comes in, an open-source tool for creating adaptive color palettes based on a target contrast ratio.
https://medium.com/@NateBaldwin/leonardo-an-open-source-contrast-based-color-generator-92d61b6521d2