Il Nido Seattle

For Il Nido's most recent design update, I wanted to highlight the chef's photography while also adding visual elements to complement and emphasize the dynamism of both cuisine and chef.

I sought to create a visually appealing set of overlays, using the owner's photography to highlight the variety of flavors and textures.

In this detail, we see the a responsive view for small screens. CSS Grid was used along with media queries to achieve various layouts depending on screen size.

Due to the restaurant's daily and seasonal menu, we settled on displaying only the street address, hours, and contact information. This almost business card-like approach dovetails nicely with the chef's use of social media for promotion and marketing. Chef Mike opted to use the Resy system for handling reservations.

A primary objective was to create a logo and type treatment that reflected visually and conceptually Chef Mike's vision.

Initially, my idea was to create a graphic "nest" as a play on the Italian word nido. However, after a few rounds of discussion, we agreed brand integrity was more important. We decided to maintain the crow imagery consistent across brands, settling on the crow resting on a branch. Conceptually, the crow imagery binds the two restaurants together, reinforcing the relationship between brand, cuisine, and philosophy.

We spoke at length about color schemes and what colors best represented the new restaurant's look and feel. I had two covers for the Russian Criminal Tattoo books in a mood board presentation. Ultimately we settled on having yellow be the predominant color. Fresh pasta takes on a warm, somewhat desaturated color, the interior at Il Corvo has a similar tone, and overall it presents a warm and inviting feeling. We included warm wood and earth tones to the final composition as a direct analog of the flooring, seating, and overall exterior colors of the historic location in West Seattle.

From a development standpoint, there are several moving parts; careful font loading strategy with FontFaceObserver coupled with minified markup, and only a single image. Instead of using an image type for the logo, I used an SVG coupled with SVGO to compress and remove extraneous code from the file. I began the development process with HTML5 Boilerplate and Modernizr. I wanted the site to be maximally backward compatible. I employed Gulp.js to help out with essential development and deployment. To that end, Gulp handles SCSS compilation, and minification of all files served to the user.

The final piece of the puzzle was to integrate the site with Google's webmaster and business tools. Following the recommendations, I generated a JSON/LD file following the specifications laid out by Schema.org. All of the required entries appropriate for the type of business, hours, and location, used the webmaster tools to validate, and inserted the code into the markup.