1.0Overviewso, basically...

The agency I was working at, Zenman, gave me the opportunity as their developer to design and build this site. I pitched an unusual scrolling scheme: the left side scrolled down and the right side up for a unique experience. I also designed an animated dumbwaiter, matching the one Wazee actually used in their restaurant.

Services

Details

  • Designed grunge, single-page interface.
  • Created ultra-unique scrolling functionality.
  • Made an animated dumbwaiter that matched the restaurant’s.
Screenshot of website designed for Wazee Supper Club

2.0Special Highlightslet me draw your attention to...

2.1Only Dumb Waiters Don’t Use, Well, Dumbwaiters…

The interactive dumbwaiter was also a personal touch. Wazee has two levels, with balcony seating overlooking the main restaurant. Instead of sending their waiters up and down the stairs with orders, they (kindly) installed a dumbwaiter for hoisting orders up and dirty dishes back down.

I took a photo of the dumbwaiter at the restaurant and recreated it digitally to match the site’s overall aesthetic. I then built some JavaScript to trigger the animation when the page housing this feature came into view, dropping the empty dumbwaiter down, sliding some beverages onto it, hoisting them back up, and then sliding the beverages off screen for delivery to their thirsty patrons.

3.0Technicalfor the geeks

3.1Scroll Up And Down

The unusual idea I had behind Wazee’s interface was to have the page scroll up and down at the same time. Each “page” was then composed of two pages split down the center. The first page was in fact the first page on the left, but the last page on the right.

Since the page was split in half, the available space for each side was halved. Rather than designing for a full screen width like usual, then, I had to design these “half-pages” within the narrower constraints. Further, because it would look odd to see partially scrolled pages because of the unique scrolling direction, the pages needed to stay the exact height of the browser window at all times. These design challenges proved to be a lot of fun to overcome!

I created a demo of this functionality, getting approval from the client on that before actually building it into the site since it was going to take a pretty time-consuming level of JavaScript development to pull this off.