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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.