The Garden Room 🏡

Web designer & developer.

Challenge

Create a brand‐new online presence for an established local company. Empower the company to take ownership of their content.

Outcome

An easily editable, secure website designed responsively and elegantly. Increased Google page ranking from 5th to 1st page.

Introduction

The Garden Room is a boutique for stylish living based in Fairhaven, Washington. When I joined in 2015, they had a website that was built in Flash that was 400 by 400 pixels and failed to reflect the high‐end décor and beauty products they sell. They needed my help to create a simple yet elegant website crafted around their well‐established brand.

We went through multiple design iterations before arriving at a clean and light interface. The owner wanted their site to have a luxurious feel and still maintain the image of a locally owned and operated business. I took inspiration from their gorgeous photos and knew that I wanted to incorporate judicious use of negative space in the design. The white border around the site gives a feeling of a work of art mounted in a frame. It also helps balance the photos with the text.

Animation showing the homepage of the Garden Room
Homepage hover effect for the Garden Room.

My Responsibilities

After experimenting with floating divs and flexbox-based models, I decided to use a CSS grid to show off their product lookbook. In doing so, I was able to expand support for their website to Internet Explorer and Edge browsers. The lookbook is meant to show off a selection of products available at the shop, but not to provide an ecommerce experience; this allowed a more flexible design.

A screenshot of the Lookbook page demonstrating CSS grid
CSS grid demonstrated on the Lookbook page.

To cut costs and improve site performance, I decided against using any content management system. Instead, I built the site using handwritten HTML and CSS, with some JavaScript for interacting with the server. This allowed me to utilize the free hosting provided by Google’s Firebase, lowering hosting costs from around $10 a month to none. The caching that Firebase provides also allows for faster loading times of the images and content which improves the user experience. Firebase also uses Let’s Encrypt to supply SSL certificates at no extra cost, ensuring secure connections for all users of The Garden Room’s website.

PreviousHCDEsa 🐺