Erik Furtado

Boutique Hotel Website

Creating a City Oasis in The Form of a Sleek and Simple Webpage with HTML and CSS

Intro

When tasked with developing a responsive website for a boutique hotel that would attract sophisticated travelers visiting New York City, I knew I had to be ambitious in my design approach and challenge my pre-existing coding skills.

Design Approach

For this coding project, I conceptualized Hustle & Bustle, a boutique hotel that features upscale and soundproof accommodations in the heart of NYC. Providing a silent oasis for city workers and guests, Hustle & Bustle is a complete juxtaposition of what the hotel offers. The visual brand identity is represented with a logo set in a bold-weight sans-serif typeface that features a unique and modern ampersand. A shortened variation of the logo includes “H&B” and is used on the mobile version of the site.

hotel logo

To achieve the goal of a sleek and simple brand identity, I researched other hotels that fit the modern and simplistic feel. I then investigated their website for inspiration of color palette and page layout. After my research I landed on a color palette of black, white, and gold, using pastel yellow, and light gray as accent colors in my website. The main color palette was chosen to give the hotel a high-class and modern feel that helps the hotel feel established among the other competition in New York City.

During the development of this website, I leveraged wireframe sketches and site mockups made using Adobe Xd, and then dove into coding. This assignment required the class to learn and use Foundation Framework which provided a pre-built JavaScript framework but complicated much of my customized design direction such as links, hover states, and spacing.

Wrapping Things Up

Using Adobe Premier Pro, I produced a dynamic video for the hero image on the home page and chose to use a static image on the mobile version of the site. By coding each section of the webpage individually, I created a responsive experience during which the user can comfortably scroll to the various sections to find information quickly. Building on my design skills and knowledge of HTML and CSS, I was able to create an engaging and interactive website with a sleek and simple design. 

erik furtado boutique hotel
Programs Used:

Sublime Text, Adobe Illustrator, Adobe Premiere Pro

Year:

2022

Fields of Focus:

Web Design, Branding