Issue 24 – December 2019
Best of 2019

Links

CSS Grid for Designers

CSS Grid is here but there is a huge problem: Many designers still don’t know about the exciting possibilities that CSS Grid offers, possibilities that go far beyond the 12 column grid. In this article, Johna Mandel 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/

The Right Amount of Perfect

When you are building something new, you don’t necessarily need a polished, production-quality result all the time. Instead, what perfect means entirely depends on the project and the situation you are in. What you really need, is only the right amount of perfect, argues Jonas Downey in this post on Basecamp’s Signal v. Noise blog: “When you’re making a prototype of an idea, the right amount of perfect is a barely-working demo. Can you show the idea to someone, well enough to demonstrate how it should work—even if it’s stitched together with duct tape and popsicle sticks? Perfect.”
https://m.signalvnoise.com/the-right-amount-of-perfect/

Zooming In and Out of UX Design Resolutions

Using Charles and Ray Eames’ legendary 7-minute short film “Powers of Ten” as a metaphor, Jared M. Spool shares his view of the different resolutions, or zoom levels, of user experience which have evolved from early “green screens” to applications to service design to organization-wide experiences to whole ecosystems like the Internet of Things. Each resolution demands different tools and methods because the challenges we face also change. And as ever new resolutions appear, we need to develop our skills and techniques to handle them. Prototyping is one of those skills.
https://articles.uie.com/zooming-in-and-out-of-ux-design-resolutions/

The Power of Prototypes in the Creative Process

Prototypes can be a catalyst for creative decisions and allow you to iteratively refine an idea into a final product. In this post about the power of prototyping in the design process, Jim Nielsen summarizes the main points from Ken Kocienda’s book “Creative Selection” regarding the role of prototyping in Apple’s evolutionary process of developing the original iPhone and other innovative products.
https://blog.jim-nielsen.com/2019/the-power-of-prototypes-in-the-creative-process/

Six Steps to Superior Product Prototyping: Lessons from an Apple and Oculus Engineer

Caitlin Kalinowski has worked for companies like Facebook, Apple, and Oculus and is a “master of the prototyping process, with a deep understanding of where, when and how changes should be slotted in, from the first iteration to the last.” In this brilliant interview, she shares, among other great advice, her six-step approach to building strong prototypes, how and why you must define your non-negotiables before starting to build prototypes, how to design a process that fits in as many iteration cycles as possible, and why you should make seriously ugly prototypes, too.
https://firstround.com/review/six-steps-to-superior-product-prototyping-lessons-from-an-apple-and-oculus-engineer/

Prototypes, Permission + Possession

Richard Saul Wurman loves dummies. So he always makes “binding dummies” when he’s working on a new book. In this wonderful post, Dan Klyn wonders: are Richard Saul Wurman’s dummies and the prototypes designers make the same thing? In a way they are, but there’s an important difference: While prototypes are often used for validating a concept with real users, the purpose of said binding dummies is to let stakeholders experience and touch a real physical object to get their permission to continue with the project. Which can also be a useful application of digital prototypes, of course.
https://www.good-fit.org/5-lives/dummies

It’s Never a Good Time to Do Research

Research is not only often neglected, but often teams struggle to find the right time to do research. Erika Hall, the co-founder of Mule Design and author of ‘Conversational Design’ and ‘Just Enough Research’, explains why there is never a good time to do research – you simply should be doing research all the time. Because when everyone is working from clear goals and good information, everything goes faster, feels more meaningful, and has a much higher chance of success – also prototyping. So you better get into a mode of continuously asking questions and gathering evidence. Also make sure to read Erika’s post “The 9 Rules of Design Research”, too.
https://medium.com/mule-design/its-never-a-good-time-to-do-research-1ef719158980

Critique your shortcut to better designs

Introducing regular structured critique to your design process is one of the keys to improving the design quality of a team and growing the design literacy of whole organizations. But to have the desired effect, critiques have to be done right. So, in this post on the Clearleft blog, Chris How explains how to run a productive design critique and make it part of your practice.
https://clearleft.com/posts/critique-your-shortcut-to-better-designs

Every Layout – Relearn CSS Layout

With the advent of Flexbox, CSS Grid, and multi-column layout, the possibilities to solve different layout problems have changed quite substantially. CSS layout isn’t a hack anymore and it’s about time to explore the best ways to work with those powerful layout algorithms. Whether you want to implement new layout solutions in production right away or want to explore them in prototypes first, Every Layout by Andy Bell and Heydon Pickering is an invaluable resource.

“Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.”
https://every-layout.dev/

Machine Learning For Front-End Developers With Tensorflow.js

Not a day goes by, at least in my perception, without some sort of news around AI and machine learning. It might seem as if machine learning is still a futuristic technology, yet it is already astonishingly ubiquitous. From the camera in your smartphone to assistive technology in cars to spam detection for social networks and the taste-predicting skills of Netflix – machine learning technology is already all around us. So if you think that the time is right to start learning about machine learning, what it is and how you can try it and use it yourself, for example in a first rough prototype, this article by Charlie Gerard is for you. Charlie covers the three main features currently available using Tensorflow.js and also talks about the limits of using machine learning in the frontend.
https://www.smashingmagazine.com/2019/09/machine-learning-front-end-developers-tensorflowjs/

Books

Prototyping for Designers, by Kathryn McElroy

I can’t recommend Kathryn McElroy’s book “Prototyping for Designers” (O'Reilly Media, 2017) highly enough. Not only because she explains the goals and methodologies behind prototyping and shows how to prototype for both physical and digital products and test your prototypes with users, but – maybe even more important – because Kathryn gets you to recognize that prototyping is not only a tool or a specific process but instead a way of thinking, a mindset.
http://shop.oreilly.com/product/0636920049487.do

Future Ethics, by Cennydd Bowles

Future Ethics is the name of the latest insightful and thought-provoking book by Cennydd Bowles, a product designer, futurist, and former Design Lead at Twitter. Among so many important topics that make the book required reading, at one point, Cennydd talks about the potential of prototyping to envision possible futures and spark a conversation. Design fiction so to say. He calls those prototypes provocatypes, which I like a lot:

“A provocatype creates a curious wormhole between design and research: it’s a designed product that nevertheless exists mostly as a research probe. The big difference from regular prototyping is we make provocatypes with not just a problem-solving mindset but also a problem-creating mindset. If we’re successful, a provocatype will spark better reactions than a hypothetical discussion would.“

Order Cennydd’s book here: https://www.future-ethics.com/buy/ It’s available as both paperback and ebook.

Shape Up, by Ryan Singer

The team at Basecamp is known for approaching projects differently but their unique process has never been laid out for all to see – until now. With “Shape Up” Ryan Singer has written an inspiring and insightful (free) book about how to design and build products differently by creating “a spirit of prototyping and piecewise enablement among the designers and programmers” and “shaping” work in six-week cycles, on two parallel tracks.

“Shaping work is qualitatively different from building. It’s unknown in advance which ideas will turn into bettable projects and which ones won’t. Some projects are shaped quickly, some take multiple cycles, and some never come together. What’s important is to always have some good options for the betting table before each cycle.”
https://basecamp.com/shapeup

Talks

The World-Wide Work, Ethan Marcotte

This talk by Ethan Marcotte from New Adventures is one of the best I’ve ever seen and certainly one of the most important talks of 2019. Ethan, who coined the term Responsive Web Design nine years ago, looks at the current state of the Web and the many challenges facing our industry and draws parallels to the technological breakthroughs during the industrial revolution: Just like with other technologies that came before, the invention and growth of the Web was accompanied with high hopes for a better future. But instead, we are now continuously facing ethical, moral, and political crises while automation and machine learning are reshaping our world and the way we work. It is time for us to start asking ourselves what kind of work we want to do in this world and also to realize that we’re all in this together. And only together we can bring about lasting change.

Everyone working in our field (and beyond) should watch this talk.
https://newadventuresconf.com/2019/coverage/ethan/

Tom Chi on Rapid Prototyping & Product Management

I already shared a talk by Tom Chi in issue 12 and although this exceptional talk here is from 2015, it is still highly relevant and well worth your time. Tom, who served as head of product experience at Google X developing technology such as Google Glass and Google's self-driving car, shares lessons he has learned in rapid prototyping that are also applicable to product management. For example, he emphasizes how important it is to create a culture of learning and to stay in the medium instead of creating too many abstraction layers. He also stresses the importance of reducing the loop length of improving a prototype after user feedback. This way, you generate the key learnings necessary to improve the product experience much faster.
https://www.mindtheproduct.com/2015/07/video-tom-chi-on-rapid-prototyping-product-management/

Lean, Agile, & Design Thinking, by Jeff Gothelf

Lean, agile, and Design Thinking are all popular frameworks that teams apply to work more effectively. But in reality, teams often don’t align their different ways of working and processes that are meant to improve the output of work are in fact not working for anyone. In this great talk from Mind the Product Singapore, Jeff Gothelf, author of Sense & Respond, explains why we have to move away from “implementing processes”. Instead, we should focus on the underlying principles of agile methodologies and Jeff provides ten such principles that work with any methodology your team may choose to use.
https://www.mindtheproduct.com/lean-agile-design-thinking-by-jeff-gothelf/

Podcasts

CodePen Radio – Prototyping with Dave and Trent

Dave Rupert and Trent Walton from the web design shop Paravel join Marie Mosley and Chris Coyier for this episode of the CodePen Radio podcast. They talk about their approach to web design, which includes a lot of prototypes, preferably in the browser, and also about how prototyping can improve project progress and lead to far better results, especially if the prototypes are shared early and often with clients and colleagues.
https://blog.codepen.io/2019/01/15/206-prototyping-with-dave-and-trent/