Issue 13 – January 2019
Prototyping ways of prototyping AI, exploratory prototyping, prototyping in game design, and simplicity as a feature.
Hi! I hope you all had a great start into 2019. Maybe you started with some good resolutions and even took the first steps in creating something exciting. I hope you are successful in your endeavors – and are prototyping a lot on the way. ;) As designers and creators for the Web and beyond, our work today has a profound impact on society. And although what we are doing in our day-to-day work might not always seem like a large contribution (not everyone is working on biased algorithms as of yet), it all adds up to the state of technology at large. With artificial intelligence and machine learning paving its way into software and the products and services we create, the growing need for making ethical choices should be obvious to all of us. In the end, we are still building stuff for real humans. Humans with their very own life stories and experiences, with emotions, with biases, with fears, with hopes. We always owe them our best work and to think critically about what design decisions we force upon them. Consider that when you start building your next prototype or when you’re deciding what to prioritize.
If you enjoy this newsletter, please share it with people who you think would appreciate it, too. Thank you so much! 🤗
– Happy prototyping! Matthias
Links
On Simplicity
There is one thing that we all certainly aren’t short of these days: Complexity. Max Böck, a designer and developer from Vienna, reminds us that while we often try to solve complexity by following best practices and the newest trends, tools, and technologies, we should remember that complex solutions are not always the best solutions. “Sometimes the smarter way to build things is to try and take some pieces away, rather than add more to it.” Which, by the way, is also good prototyping advice.
https://mxb.at/blog/on-simplicity/
Exploratory Prototyping in Product Design
Prototyping is often perceived as creating the most value in the converging phases of the design process when it comes to testing and validating a specific solution, often at a sufficient, higher fidelity. But, as Felix Heibeck points out, prototyping can also be a great tool to explore new ideas and to better understand a problem area or – incredibly important – context. Exploratory prototypes, which, just like sketches, should be quick to make and easy to abandon, can help you focus on a single feature of a concept and specific aspects of an experience and as a result, spark new ideas that can then be further explored.
https://medium.com/a-view-from-above/exploratory-prototyping-in-product-design-6d89ff17f542/
Prototyping ways of prototyping AI
In this super-interesting article in ACM Interactions, Philip van Allen argues that we need new tools for the prototyping of autonomous systems and their interactions: “Our tools should enable us to develop a facility with AI as a material for design projects. Designers need to develop a strong tacit understanding of AI through tinkering, exploring, and building. This demystification and understanding can lead to new collaborations, design concepts, and methods for AI through the unique engagement that designers have with their material.” With his Delft AI Toolkit, he then presents the first prototype of an open source visual authoring system that integrates AI techniques and technologies into an easy-to-use drag-and-drop environment and that is the first step towards new tools that allow for the design of the behaviors, sociality, and narratives that AI systems need.
http://interactions.acm.org/archive/view/november-december-2018/prototyping-ways-of-prototyping-ai/
CSS Grid for Designers
CSS Grid is here but there is still a huge problem: Many designers still don’t really know about the exciting possibilities that CSS Grid offers, possibilities that go far beyond the 12 column grid. In this article, Johna Paolino of the New York Times masterfully explains the foundations of Grid from the viewpoint of a designer, facilitating a basic understanding of what is possible and why Grid is so great for designers. In the end, CSS Grid has made her “love HTML and CSS prototyping again”. So how about the next time you start to sketch out a web layout you do it with an HTML prototype – and CSS Grid?
https://open.nytimes.com/css-grid-for-designers-f74a883b98f5/
Hear It from a Skill Builder: How to Design and Validate an Alexa Skill Idea in 5 Days
Voice user interfaces will ultimately make their way into our everyday lives. Some even call it a paradigm shift in the way we interact with computers. But how do you best approach designing a voice experience? Andrea Muttoni shares how Alex Baxevanis, Experience Director at Webcredible, and his team use the design sprint method to condense the creation of a voice UI down to a five-day process, from ideation to validation with real users. And, you might have guessed it, including a lot of prototyping.
https://developer.amazon.com/de/blogs/alexa/post/02732c1d-bab8-41fa-8afe-30d02d9a4280/hear-it-from-a-skill-builder-how-to-design-and-validate-an-alexa-skill-idea-in-5-days/
Prototype Fidelity: It’s More than High and Low
Choosing the right fidelity for a prototype is important because it can save you precious time or make your prototype look more realistic, which is especially important if you want to get reliable results in user testing. In this great article, Kyle Murphy explains why it is not enough to merely distinguish between high and low fidelity prototypes and why you should instead make use of five independent dimensions of fidelity: Visual, interaction, breadth, depth, and content.
https://medium.com/in-the-hudl/prototype-fidelity-its-more-than-high-and-low-4dedb4cb1a0/
Talks
Best practices for fast game design in Unity - Unite LA
Prototyping has a long tradition in game design, where it is used to explore gameplay concepts and evaluate feasibility, game-feel, or appeal of a concept. In his talk, Renaud Forestié, Gameloft Montreal's Gameplay Director and lead of the Gameloft Prototype Team, shares 10 tips for prototyping effectively, shows a case study as a practical example of how to come to a good prototype in one week, and talks about improving game-feel. There is a lot to take away from this talk that can also be applied to user interface prototypes. For example, that is is important to pick the right scope for a prototype and to focus your time and resources on what you really want to demonstrate or explore. Also, make sure to listen to the Q&A at the end of the video.
https://www.youtube.com/watch?v=NU29QKag8a0
Tools
Scrumpy – Agile Planning, Made Simple.
Scrumpy is a project management tool for agile teams. It includes estimates, sprints, burndown charts, reporting, and a beautiful, simplistic UI. Might be a good alternative to Jira if you don’t need that many features and want something more lightweight.
https://scrumpy.io/
Color by Cloudflare Design
A neat and useful tool by the Cloudflare design team: Grab a Color palette from any website or create it from scratch and preview it against different UI elements. You can cycle through accessible color combos and export and share palettes as CSS, Sass, JavaScript, or JSON.
https://cloudflare.design/color/
tris-webpack-boilerplate
If you need to set up an HTML prototyping environment quickly, this Webpack boilerplate for static sites can come in handy. Of course, you can also use it as a starting point for your production environment.
https://github.com/tr1s/tris-webpack-boilerplate/
Stark
Stark is a plugin for Sketch and Adobe XD that helps you design products that are accessible and inclusive. It allows you to check the color contrast of your designs and simulates the various forms of color-blindness directly in Sketch or XD.
http://www.getstark.co/
Introducing Figma Organization: Our first enterprise-grade offering
Big news from Figma, the in-browser design and prototyping tool: The team just announced their first enterprise-grade offering, with advanced controls and security features like unified billing, audit reports, shared fonts, unlimited teams, and organization-wide design systems.
https://www.figma.com/blog/figma-organization/
This Is Framer X15—Our Biggest Release To Date
Framer X also got an update this month. The biggest release since launch comes with: Exponentially faster project loading and saving, an all-new smooth zoom and infinite canvas, no lag time when you install and use multiple interactive components, and a completely revamped graphics container that adjusts to everything you draw.
https://framer.com/blog/posts/introducing-framer-x15/
Adobe XD January 2019 release
This month, the Adobe XD team improved two of the most recent and powerful prototyping features of XD: Auto-animate, which lets you automagically animate states between artboards, now also works in the browser for published prototypes. And XD’s voice prototyping feature now supports all Adobe XD languages for both commands and speech playback.
https://helpx.adobe.com/xd/help/whats-new/2019.html
As part of the XDI team, I will be giving workshops on designing and prototyping with XD again this year. If you’re interested in a workshop at your event or for your team, get in touch or come to one of the events on this list which is updated regularly.