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).
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.
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.
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.
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.
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.
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.
“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.
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.
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.
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.
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.
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.
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 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.