Issue 7 – July 2018
Steve Jobs on prototypes, working in layers, prototyping in the browser and for news, variable fonts, and flexible typesetting for the Web

Hi! One thing that keeps me writing this monthly roundup of links is that I truly believe that prototyping is one of the most important elements of designing and developing anything for the Web today. However, prototyping is still not considered a hot topic like, for example, animation, performance, or accessibility. In the end, mastering all of the diverse aspects of today’s digital product design involves a lot of exploration and validation of ideas and technologies. Building a prototype allows for exactly that. This month, the breadth and depth of articles were astounding, which makes me confident that we might see an even deeper involvement with and usage of prototyping in the near future. If you have a story to share, write an email to or DM me on Twitter.
– All the best! Matthias


Steve Jobs on Prototypes

Jonathan Snook shares an interesting video of Steve Jobs talking about NeXT and the role of prototyping at the company. To not have to change technology, they didn’t do much prototyping but instead involved manufacturing from day one and used the real material right from the beginning. Something that isn’t yet possible with most of our current digital design tools, with their disconnection between design and production (code).

Prototyping in the Browser

In his article for CSS Tricks, Robin Rendle explains how he uses Codepen to build HTML prototypes of animations and interactions really quickly. This is indeed also a great way to gradually increase the use of prototypes in established processes, especially if you follow Robin’s three useful lessons he learned from using this setup. I personally never want to do without Codepen prototypes again.

Beyond 800 words — part 2: prototyping formats for news and Generation Z

In this super interesting article, Tristan Ferne writes about how the team at BBC R&D used prototyping to explore innovative story formats for news which are more effective than conventional video or article formats. They developed ideas into testable prototypes on a weekly basis, using real news stories, and over eight weeks showed 12 prototypes to 26 people. The four best prototypes found their way into the article.

6 Common Pitfalls When Prototyping

Nick Babich talks about six of the most common pitfalls you should avoid to prototype effectively. A quick and useful read that touches on many important aspects like the idea of failure as a natural part of the prototyping process, selecting the right fidelity for your prototype, or the importance of sketching.

Improving the Design Process with Animated Prototypes

Animations have become an integral part of user interface design. Ayana Campbell Smith explains why prototyping animations is so valuable for defining an experience and discusses the pros and cons of some of the best tools for prototyping animations.

Delivering your work in layers

Fabricio Teixeira shares useful design advice which is especially important when building prototypes: Instead of trying to design detailed artifacts, you should do your work in layers and get used to sharing unfinished work. One of the biggest benefits of that approach: You can keep a bird's eye view on the entire product and can gradually improve it as a whole.

How to start with variable fonts on the web

Your typographic choices can be improved a lot by building prototypes. This is not only true if you are evaluating details like font size, weight, contrast, or the readability of text on different screens, but also for exploring and mastering new technologies like variable fonts. Oliver Schöndorfer, who will also speak at beyond tellerrand Berlin in November, wrote this great introduction to variable fonts in which he also covers the possibilities and challenges this new font technology brings.


Flexible Typesetting, by Tim Brown

“For the first time in hundreds of years, because of the web, the role of the typographer has changed. We no longer decide; we make suggestions”, Tim Brown writes in his new book Flexible Typesetting, published by A Book Apart. It’s a concise exploration of the new web typography, full of practical techniques for setting web type in a robust but flexible way that honors the complexity of today’s Web.


Invision Studio, Framer, Supernova, Protopie… A tour of the prototyping tools available

Although there is no tool to rule them all, it’s still useful to occasionally have a look at some of the most promising design and prototyping tools and their features. This time, Antoine Marin compares 20 tools, including Adobe XD, Axure, Framer, Invision Studio, Protopie, or Sketch.

A first look at Framer X

After the announcement of their new React-based tool Framer X last month, and some more details surfacing at the beginning of July, the Framer team now shared an impressive video of Framer X in action. It looks as if we need to add another tool to the list of serious Sketch competitors – or even the next generation of tools that finally bridges the gap between visual design and code.

July Release of Adobe XD

The July update of Adobe XD brings the ability to label assets like colors, character styles, and symbols right in the Assets Panel, commenting on design specs, paragraph spacing, better third-party workflow integrations (with tools like Zeplin, Avocode, and ProtoPie) for Windows and many more improvements.

Styles in Libraries and fixed elements in Prototyping in Sketch 51

Sketch received an update, too. In Sketch 51, the Sketch team added styles to libraries, as well as fixed elements like headers or footers to the prototyping feature.

UIengine 1.0

Dennis Reimann recently published version 1.0 of his UIengine, which has grown from a Fractal-like tool to build pattern libraries and documentation for design systems into an impressive workbench for UI-driven development – and prototyping.

Userflows – Made with the Marvel API

Interesting: Userflows lets you transform Marvel prototypes into user journey maps. It automatically generates a birds-eye view of how users will move from screen to screen, helping you tell a better story to developers, stakeholders, and clients.

Flow – Professional Sketch Animation Software

Flow a motion-design tool for animating Sketch files that bridges the gap between design and development by generating native code that can be directly incorporated into larger projects by a developer.


When prototyping directly in HTML, using a framework can speed up your workflow immensely. Teutonic is a 12KB small, versatile, and well-documented CSS framework to jump-start your HTML.