Prototyping UI with Static Websites: Why?

At Pivotal Labs, we define our success in terms of working software and client enablement. This transforms the typical role of a product designer because we don’t throw polished deliverables over the wall to developers or clients. We strive to test our assumptions, measure risk and develop a working product by building inexpensive low-fidelity artifacts that we can put in front of users.

Surprise! Designs!
“A designer’s job is to shape the workflows to encourage lots of small, iterative choices, rather than collapsing everything into these big, high-risk presentations to the client. I’m looking to a future where design is less about deliverables and more about decisions.”
Jonathan Berger

Increasingly, Pivotal Product Designers have begun jumping right into code to try out design ideas. At first, building An Entire Website to prototype a UI might seem like a lot of work. This set of posts will explore approaches to making web prototypes in tiny chunks with minimum effort.

Why Websites?

  • Websites make it easy to user-test app behavior design ideas. They’re way less manual effort than a series of clickable mockups.
  • Websites enable designers to work directly with UI components, such as Twitter Bootstrap or Pivotal UI.
  • Websites are portable and make it easy to communicate design ideas in a shared medium with developers and client product owners.

Pivotal Labs has spent years iterating on a software development process. We practice extreme programming and test-driven development. Developers defend deployed software. When a build goes red, we drop what we’re doing to fix it. Deployed software is the only (and latest) source of truth.

I began at Labs a few months ago as a software engineer. Lately, I’ve crossed over and refocused on design. I’ve been absorbing how designers manage their attention and decision making. This manifests most concretely in how they use their tools.

What are real strategies to implement a sane software workflow for designers?

Out of the box, developer tools are not necessarily the best fit for designers. They’re optimized for making scalable software, recovering from defects and simultaneous collaboration. For a designer these are all nice-to-have’s potentially, but the upfront cost of learning a complex tool set can distract from simpler, more immediate goals.

The aim of this series of posts is to short circuit the typical web development process. Each post will chunk a typical web development process into the minimum amount of work required to:

  • Setup a website and run a local server on your machine.
  • Deploy a website to a URL.
  • Collaborate on a website with a team.
The Little Prince — Antoine de Saint-Exupéry
“Product design is ultimately about balancing between global maximums and local maximums. Most our time is spent on iterative optimizations — climbing the mountain you happen to be standing on, step after step.”
— Paul Sullivan, Associate Director of Product Design, Pivotal Labs NY

Much of the design work that goes into a product lives in small iterations. Small, static web pages can serve as a a unique canvas for iterating on a UI. More importantly, the portability of a website means that the barrier to user testing is significantly reduced.

There are lots of products and programs that appeal to the growing programming fluency of the modern designer. Whether you’re a CSS wizard or are just getting your feet wet, this series of posts will help you look before you leap into the vast space of developer tools for web.

Next Up:

How to make a website from scratch

Special Thanks

Thanks to Matt Rothenberg, Michelle Kang, Paul Sullivan and Alexis Rondeau for their feedback and guidance.

Show your support

Clapping shows how much you appreciated Larisa’s story.