Biker Theme Nightclub |
The biker theme nightclub (BTN) project was built on a custom dynamic PhP framework in much the same manner today's modern CMS platforms are designed. This meant that the site's content was coded in small parts, each in its own container. These containers could then be called by the PhP code in the webpage template to assemble the page on-the-fly. This is an excellent method of content management for sites with many pages as it allows those pages to be updated with a single edit—whereas, in the past, each page of the site would have to be updated individually. At the time the BTN site was designed, this dynamic container approach was cutting edge.
The BTN project also contained some very unique, customized design elements. On the onset of the project, I imagined a fictional spokesperson and endeavored to create one out of imagery unique to the client. A bit of the creation process is shown in the slide show above.
The character was designed around a vintage gas pump and took a healthy share of design hours in Photoshop. I started with hi-resolution images I took with my Nikon. Then I twisted, bent, and shaped the pump into the character (below right).
Once the character was created, I incorporated it into the site's design. My favorite design feature creates the illusion of the character popping out from behind a site panel and pointing to the opt-in conversion form. The movement catches the visitor's eye and draws their attention to the form. But the real challenge was coding it to work. The task required absolute alignment of a stack of content containers. The illusion of popping out was achieved by precisely coding the CSS z-index values to align with pixel-perfect PNG graphics with 24-bit alpha channeling.
Another design shows the fictional character sitting on a chopper. Again, this took some serious warping in Photoshop, but in the end, I achieved the goal.
I started by wandering about at some bike exhibits searching for a candidate. I came across the red chopper and took some hi-res images with flash that came out bold and bright. You can see the original image in slide #8 at the top of the page.