An Interactive, Audio-Centric Website And Updated Brand For Vig Bar

We chat with Talia Cotton about the exciting rebrand of a dark, raving late-night NYC drinking staple from the 90s. 

Using sound as a design asset, the site features a highly interactive poster-like logo that encapsulates all that the bar has seen and heard through its eclectic hover states: impressively awkward disco dancing, a trip through a mysterious space portal, and a logo puking up smaller versions of itself, among others...

 

 

Vig Bar is a dark and crowded bar on a corner in the buzzy, hip NYC neighborhood of Nolita-meets-Bowery. The bar has been an essential drinking spot in New York since the late nineties, and over time has gained reputation for being reliably rowdy, raving, and at times outrageous. The bar needed a website upgrade, and the challenge was clear: how can a website truly encapsulate the wild energy that the bar promises?

 

 

Tell us about the logo design

The website is essentially a giant, interactive logo. The three letters “V I G” span the full size of the browser, and a subtly pulsating tiddle (the dot on the “i”) subtly invites the user to play. Upon hovering over it, the user triggers one of a series of random and hilarious animations and transformations that all make use of the logo in a different way: a trip through a mysterious space portal, a red ferrari driving offscreen, a disco dancing spectacle, and a logo puking up smaller versions of itself, just to name a few. Through their diversity, wit, and sheer quantity, the interactions continuously entertain, surprise, and delight the user. 

What this means for the future of branding with the capabilities of web as a design tool

Each action works off of the logo in some capacity: the dot on the “i” becomes the car wheel, or the disco ball, or the thing that triggers the logo to vibrate or vacillate. As such, the website is more than just a fun playground; the website is a statement that a logo doesn’t have to be a static thing— that, to best and most accurately represent the bar itself, the logo, too, can be interactive, fun, and always keep you on your toes. While the interactive version of the Vig Bar logo generates what seems to be a million different states, the interactive version of another logo might be something else entirely that’s appropriate for its brand. Playing with interactivity as a design asset for logos and branding opens up an exciting world of possibility for designers, and a more engaging world of branding for their users.

The bar is described as 'raving and rowdy', how did you play with this in your rebrand?

One of the things that makes the website special (and particularly different) is its audio component. For every interactive visual, there is a carefully directed audio clip— varying from the literal (a car screeching off screen, a record playing a rock n roll song track, a faint background disco) to the abstract (what does “blurry vision” sound like?). Each audio is cued the same way each visual is: by the user’s interaction with the logo. Playing with the interesting tension between the user’s control (their deliberate interaction) and lack thereof (the randomness of the result) creates an addictive quality to the site. 

 

How did you embrace the awkward old logo?

The current logo for the Vig Bar has been around since the bar’s origins in the late-nineties (see image below), and was likely designed by a non-designer (or at least without the same expectation for logos as a brand with more renown.) However, rather than trying to mask or shying away from its odd qualities, the website unapologetically puts them on display as part of the quirky personality of the bar itself. The rampant ghost of the 90s is felt on a night out at Vig—why should the logo be any different?

 

How did you take on responsive web design?

In order for the logo to take up the most amount of space on the site (see above), the design needed to lean into the responsiveness of browsers, resulting in what’s essentially a “responsive logo” (see image below). The logo stretches and squashes intentionally so as to maintain the impact of its size on the site.

 

 

We are obsessed with this new look and can't stop playing... have a go for yourself here

 Follow Talia's work here