Responses by John Vingoe, creative director; and Keith Marshall, lead developer, The Hideout.
Background: The Oyster & Fish House is the new restaurant by celebrated chef, restaurateur and food writer Mark Hix. The website serves as the main way people can book a table at the restaurant, and gives them a feel and flavor of what’s in store when they visit.
Design core: While the site may feel simplistic in its approach, everything is considered from the interaction and animations to the navigation and page structure. For a restaurant’s website, there are usually three main drivers as to why someone will visit: to find its location, to look at its menus and the main aspect, and to book a table. We make all three of those functions easy to find.
The subtly animated wave patterns and lines elevate the site to the next level. Even styling the OpenTable booking widget—rather than using a default version—gives it a more polished feel.
Time constraints: One of the biggest challenges to this project was the deadline. The website had to be live for the opening of the restaurant, which meant we had four weeks to design, build and content populate the website.
To help with that, our approach was to build the entire site using one template based on our Hideout WordPress Widget Framework. We designed and developed a large number of content widgets in a way that could be used on any page, in any order and as many times as needed. This allowed for full flexibility to create different layouts on pages while knowing everything would look on brand. More importantly, it reduced the development time on an already tight timeline.
Technology: For the back end, we used WordPress with a custom theme we’ve developed around the Advanced Custom Fields plugin—our Hideout Widget Framework. This provides the user with simple but intuitive admin screens and full flexibility for updating and growing the website in the future.
On the front end, we used a combination of jQuery and CSS transitions to create the subtle scroll animations, rollovers and interactions.
Special technical features: For the newsletter signup, we integrated the Campaign Monitor API and used AJAX to send the data back into a segmented list in the client’s account. Once successful, the user gets a thank you message on screen without being directed away form the current page, making the experience nice and seamless.
Although the site is fairly simple in terms of functionality, the design, movement and animations help elevate a brochureware site to something very special.