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.

Beer Flight 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.

So why did Whistle Studios take on the task of building Beer Flight? Simple: We needed it. Badly.

Here’s how it went:

While working on several projects, the Whistle team realized we needed a better way to show off variations of web design prototypes. There had to be a quick and efficient way to show how a design worked in the web browser—something that bridged the gap between prototypes and a pattern library without developing too functionality. So what’d we do? Lament our misfortune? Make do with lackluster technology? Hell no. We built a better tool ourselves.

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, but you can see why Beer Flight is the perfect name.

Buying a beer without tasting it first may not be the biggest waste of time and money, building a product without working through the many variations with all the stakeholders can be. With Beer Flight, clients can see all the options, “taste test” them all, and make a solid decision about what the want to invest in based on experience, not guesswork.

Beer Break! Which 5 beers would be in your perfect Beer Flight?


Tweet


Example: My #BeerFlight includes: [Insert favorite beers] http://beerflight.io/ via @whistlestudios

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?

Check out Beer Flight now and tell us what you think in the comments below or shoot us an email: ftw@whistlestudios.com.