While working on several projects we realized we needed a better way to show off variations of web design prototypes. We wanted a quick and efficient way to show how a design worked in the web browser.
We kicked the idea around a while and worked it into a drop-in script for web pages that generates an interactive menu to switch design variations live on the page. The menu options are configured with basic HTML and with CSS Selectors, and you can decide which variations are associated with each option. At first, it was a little confusing—even amongst ourselves—to describe what we were trying to do until we decided on a name for our new tool: Beer Flight.
Plenty of brewpubs have figured out that a well-presented sampler of craft beers is a fun, effective way to showcase a brewer’s best. With the visual appeal of the wooden sampler paddle and the tactile interaction with each small glass, customers can compare each sip in style. And that presentational platter couldn’t be a better metaphor for the tool we’ve built.
Beer Flight is a tool that lets you craft a presentation focused on the prototype parts you want sampled. It’s a tool that allows you and your prototype to be one step closer to production code. People you’re sharing your project with can focus on functionality you’d like to show off with minimal development work. You’ll be showing them and not just telling them.
While Beer Flight is in its infancy, the tool works well in basic scenarios—like layout and template comparison, or demonstrating a notification element. It’s ready for testing and public use, and we want you to try it out and tell us what you think. Drop the script in your next HTML prototype, add buttons to manipulate the CSS. Try your page with Beer Flight and let us know—does it make your designing life easier and more beautiful? We think it will—and we can’t wait to hear what you think.
