Colorfield

Polk Poster Generator

Brand

Polk Poster Generator logo

Project Type

  • Desktop

Colorfield's Role

  • Development
  • Design

Technology

  • Phantom JS
  • HTML5 Canvas

Polk Poster Generator

Colorfield worked with Dojo in San Francisco on their campaign for the Polk Omni Collection, Polk’s new entry into the wireless speaker market. A key component of the campaign is Colorfield’s design and development of a customized poster generator site.

The core idea behind the campaign is that using Polk’s family of wireless speakers is like having a music festival in your own home - with each room being a ‘stage’ that features a different musical genre. The print and broadcast developed by Dojo makes use of beautifully designed concert posters, and the site extends this notion by allowing users to develop a poster that is unique to them.
In addition to the option of using one of your own photos in the poster (via Facebook), the poster generator allows you to customize a wide range of options – everything from color palette to content to font choices – to get a poster that’s uniquely yours.

Colorfield used a hybrid client-side/server-side approach to composite each poster. For modern browsers, the client-side renders a new preview of the poster in HTML5 canvas every time a setting is changed. Other browsers receive a server-side rendered image of the poster whenever an update is requested. Regardless of browser choice, the server (using PhantomJS) renders a beautiful image for download as well as a hi-res pdf for printing.

Photos form the backbone of the posters and by connecting to Facebook you can select one of your own to use. If you don’t want to connect to Facebook, we use a photo from a library we created for each poster layout.

The number of options for customization creates an almost limitless number of variations for each poster. There are six base poster ‘styles’, each of which has three different layout options. In addition, there are image filter options, different textures, three typefaces for each poster style as well as complementary color palettes.

Once you’re happy with your poster layout, it can be downloaded as a hi-res printable PDF and shared across social networks.

More Projects