by Matt Rothenberg

I wrote a playbook to help designers build prototypes using real code

not-found

I’ve built a Prototyping Playbook — a blog of short tutorials (or “plays”) that help designers use the browser for their design and prototyping needs.

5A6toqXOdFcRlyKw2F0OfBKvjnNEZkuEOGsN
Image from my Prototyping Playbook

Over time, I hope to build a comprehensive set of articles about how to implement specific designs. Designers — particularly ones new to front-end development — can leverage these patterns if they are stuck implementing a design decision.

For instance:

  • I can’t figure out how to populate this table with data
  • I can’t figure out how to show a spinner after this button is pressed
  • I can’t figure out how to turn this piece of markup into a “symbol” that can be used & repeated elsewhere

The Goals

People learn best by doing. So the goal of each tutorial is to shed light on a fundamental concept of front-end development.

For example, when designers populate a table with data, they see iteration in action. When designers see a spinner after a button is pressed, they get a glimpse of asynchronous events. When designers turn a custom piece of markup into something reusable, they are learn componentization through practicing it.

The more practical goal is to be a friendly, comprehensive resource for designers to experiment with prototyping in the browser.

I’m fully aware of the myriad resources available to designers to sharpen their front-end skills. For example, websites like CSS Tricks have a ton of great articles on these topics.

This said, I haven’t found an exhaustive collection of short, digestible, and practical tutorials on these topics. And this is precisely what the Prototyping Playbook will provide.

The Content Model

For each “play” in the playbook, I’ve created the following content model:

  1. A title describing the concept(s) to be covered
  2. A scenario for applying a specific front-end prototyping tool
  3. A low-fidelity mockup of the intended design decision
  4. A guided implementation of the design decision in Vanilla JavaScript (ES6), Vue JS, and React JS

The First Issue

The first issue covers the three aforementioned scenarios.

not-found
Image from my Prototyping Playbook

You can view this issue of the Prototyping Playbook here.

This is still a work in progress. Some of the lingering questions I have are:

  • How can we improve the content model?
  • Are these scenarios realistic, understandable, and applicable?
  • Did we implement any design decisions in unconventional ways?

I welcome your feedback via a GitHub issue or pull request.

In addition to feedback, I’m curious to see how you apply these techniques. Feel free to share a prototype that you’re currently working on, particularly if you’ve implemented and improved upon a technique that you found in the playbook. Sharing is caring.

Moreover, I’m open to suggestions for future issues of the playbook. Other topics may include:

  • Working with fake/dummy data
  • Empty and Error States

Happy Hacking!