BAM Design Studio: Crossing Brooklyn Ferry 2013

Crossing Brooklyn Ferry is officially in full swing, and the BAM Peter Jay Sharp Building is peppered with Whitman beards and blue guitars. Ryan Rowlett, Senior Interactive Designer at BAM, created this visual identity, which has been applied to everything from the website to subway posters, festival programs, pins, and more. Read on for the inspiration, process, and "graphic decapitation" that informed this design.

Describe the visual identity of Crossing Brooklyn Ferry 2013 in five words.
Interactive. Fluid. Puzzle-like. Painterly. Whimsical.

What inspired your design?
I looked through tons of Brooklyn-based designs from the turn of the century when researching possible identity directions for the festival; illustrations and designs from cultural events, advertisements, old ferry tickets etc., but in the end decided to approach Brooklyn as I see it today.

I'm continually inspired by Brooklyn's landscape. There is a rich history of sign painting here; you see a lot of hand painted typography in bodegas and down around the Brooklyn Navy Yard where Whitman lived (right around the corner from BAM), which definitely informed the loose brushwork I used for the illustrated instruments.

The designer in action

You have a background in screen-printing, and used screen printing techniques to create the look for the materials. Could you walk us through your process?
The painting used in the design was created by layering painted transparencies on top of one another like in screen-printing or cellular animation (like old cartoons). This process is itself somewhat puzzle-like; breaking an image into shapes by tone (for instance the body of the guitar was one shape, the fret board and depth of the guitar, another, etc.), then compiling them from light to dark. The result is a tonally flattened, graphic spin on last year’s identity, which we really liked.





You paired this more analog technique with very advanced web technology. What exactly is responsive layout and how did it factor into the design of the website?
We started from a web-usability angle. I was inspired by a script called Isotope, which is an amazing bit of code that rearranges web content based on user filtering. It’s perfect for festival info because it can show a data set in multiple views (by schedule, or by headliner status etc.). It's also perfect for creating responsive layouts (fluid layouts, which can re-flow to fit any device or browser size in a bespoke way), so we knew it would work well as both an informational site on a desktop and a festival guide on the phone. We were interested in pushing Isotope's functionality a step further to also rearrange the backgrounds associated with individual pieces of data in a puzzle-like fashion.

CrossingBrooklynFerry.com

Because we know what the dimensions are for common devices, like the iPad, iPhone, Android, etc.,  we try to make the layout optimal at those sizes. You can test this simply by resizing your browser window. All the pieces re-flow and eventually, the navigation flips vertically and simplifies; this is to improve usability on a hand-held device. One challenge about this type of design is it necessitates trading control over the layout for flexibility, which is counterintuitive for me as a designer. Also, it’s a lot more work because you have to predict and design for as many platforms as possible. I have to thank Matt Taylor and Chris Tusciuk of BAM's IT Department who did an incredible job developing the site.

Mobile website

The static elements of the design system are informed by this dynamic reshuffling that happens on the web. Because print is so much more open in terms of layout, we were able to abstract the illustrations further and tailor each piece in a modular fashion akin to Cubist paintings.

What’s the story behind the Whitman beard?
Haha! I wonder if people pick up on that reference. The title “Crossing Brooklyn Ferry” comes from the last poem in Walt Whitman’s Leaves of Grass. When we first started designing, I printed it out and had it in the studio along with a portrait of Whitman. The poem is so beautiful and really captures the Brooklyn experience, and more specifically the feeling of being in the thick of a dense crowd, so it seemed appropriate to play up this element in the festival design. At the same time, the reference is meant to be tangential; after all, it's not a Walt Whitman festival—so I decided to replace his face with the festival branding. This graphic decapitation adds an element of whimsical obscurity to the design and speaks to the iconoclastic spirit of the festival itself.