Il Nido Seattle

An image of the Il Nido website at various viewport dimensions

Seattle based Chef Mike Easton approached me to design and develop the website for his new restaurant concept Il Nido. No longer interested in maintaining a blog, we decided to close down his WordPress site and go with a simple brochure-style single-page site.

Prototyping and Visual Design Version 2

An image of the Il Nido website
A view of the live version of the website
The Second version of the Il Nido website at various viewport dimensions

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.

An image of the home page screen

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

an image of an artifact in the  portfolio item

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.

Visual Design Version 1

An image of the Il Nido website at various viewport dimensions
Utilizing Sketch, I created several drafts of possible outcomes. The main idea was to incorporate Chef Mike's photography into a screen design that captured the location's spirit while not being overly dominated by imagery alone.
An image of the home page screen
The single page achieves a simple goal: displays the location, hours and phone number, with a simple button to make a reservation.

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.

Art Direction and Logo Design

An image of various iterations of the Il Nido logo
Various iterations of the logo.
An image of the Il Nido cut into steel
The logo cut into a slab of Core-10 steel.

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

An image of various iterations of the Il Nido logo

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.

Image of the Russian Criminal Tattoo books
An image of the Alki House exterior
An image of the interior of the Alki House under construction
A close up image of wooden beams found in the Alki Homestead

Coding Standards and Philosophy

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.

SEO

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.