Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Restaurant Website Redesign

Giving flavor a new look


DEMO: http://drewcodes.io/chowhouse

Background

Anyone that knows me knows that I love food. It’s just something I live for. Exploring new cuisines, sharing a meal with family and friends, and ultimately discovering new things. You can call it my “second job” if you’d like.

The Chow House is the new restaurant on the Bleecker Street strip. With such an eclectic mix of different restaurants, bars, and dessert shops; Chow House was bringing something new to the neighborhood in the form of authentic Sichuan recipes straight from China to your table.

The Concept

The Chow House isn’t just another project for me. After having dinner one evening with some good company; I fell in love with the food, the presentation and the atmosphere. I felt that there was something special about the place and I wanted people to see the incredible gem this restaurant is going to become.

The restaurant’s motif is centered around red, black and white. Falling on the graces of authentic Chinese furniture and traditional lanterns hanging about; the restaurant was certainly thought out in a classical presentation of an old Jet Li Hong Kong film. There’s something about the allure of reds and blacks that seem to elicit the most emotional responses from people. Whether its on a Valentine’s Day card or even on the local supermarket sale sign; it’s good to take notice when the colors are demanding to be front and center.

For this concept I focused on laying out the minimalistic vibe of the restaurant. I chose to forego the heavy, often over-designed restaurant layout so that the photographs of the food speak for themselves. Sichuan dishes tend to rock artsy swirls of red, yellows and greens in a medley that looks almost like a surreal Salvador Dali painting. The plating of the dishes are simple, white porcelain that allows the food’s vibrant and unique colors to captivate your attention. My job was to find a way to let the food do all the fancy presentation while maintaining a functional layout.

The Process

The initial wireframe of the website was done by hand. I chose to lay out the site in a familiar pattern where most users can immediately jump to what’s important; the food.

The artwork consists of photographs that were professionally taken at the restaurant, along with a couple of stand-in pieces due to some images being unavailable.

I used a combination of Pixelmator and Affinity Designer to modify and treat the images to reflect the site’s motifs and color palette. While I could’ve chosen to do the tints and some of the manipulation using code; I didn’t feel that it was necessary. Perhaps when the site is nearing its finalized version, I may opt to recreate the color treatments via code to allow easy updates using untreated images and avoiding the need for a designer to treat them.

The site is coded using standard HTML5, CSS and Javascript. The stylesheet was written in LESS, while the Javascript includes a mixture of jQuery and custom scripts to deal with the responsive handling. The website’s size is scalable and is set to collapse into mobile after the screen width hits 500px or less. I chose to do all my sliders and animations using CSS, triggered by Javascript, which will keep the site lean on resources and running more or less the same across different browsers.

The Menu

The built in menu on the site is a miniature version of another project I’m currently building for the restaurant. It’s a modest and simple slider that stands in for an online-ordering platform menu. While simplistic; I really wanted a slider layout that allowed easy mobile responsiveness without losing the presentation of colorful images while displaying the menu items.

There are plans to add an online-ordering platform that will eventually replace this slider function. It’s important in my eyes as a designer who is also a fan of the food and its visuals; that I keep the photos of the dishes available for curious eyes to see. I know I like seeing what my food will look like before I order it. It helps let me know if the dish is right for me.

The Minor Features

While it’s not blatantly out there; I did add some recurring usage of the restaurant’s motifs. The mobile version the site features a simple white menu layout, including a mini contact section. The map on the site is a Snazzy Map implementation of the color motif, which avoids the ugly vanilla Google Maps map that you would see elsewhere.

The effects and animations are subtle. In desktop mode, the navigation menu collapses in height; lending more screen space to display beautiful images and more information. The menu section features hidden words that appear on hover, unveiling additional information without cluttering the interface.

Moving¬†Forward…

As this concept continues to evolve, I look forward to designing and building this project almost like a visual art piece that mimics the beautiful food in the photos. This is certainly a project that I am really enjoying and I look forward to seeing it completed and live.