Phi Interior Design Website

Branding // Graphic Design


Project Overview

Role: Web Designer + Developer

Following the branding project that I created for Phi Interior Design, I wanted to also make a website showcasing this company. This website is fully handcoded using HTML, CSS, and JS. I also used Bootstrap 4 as my framework. This is a simple and minimalist one page website with a gallery, automatic slider, and contact page. Bootstrap grid was used to maximize responsiveness. This site is mobile friendly and 100% reponsive.

Mockups and Revision

I created initial mockup, with the intention to have an overlay menu pop up when the icon on the top nav was clicked. After showing this mockup to some of my peers and listening to their feedback, I revised the mockup to the one on the right. The main issues were: the overlay menu may be more difficult for users to navigate, and it was hard to make it look visually pleasing on a desktop. The clients section looked too cluttered and could be cut down to the essential clients. The contact form could use more fields like type of request. The footer is too “stacked” (not spaced out enough).

Following this feedback I made some revisions and this became the final design of my website.

First Design

Revised Design

Live Website

This website was entirely handcoded, using HTML, CSS, and JS. I also used Bootstrap 4 as my framework. To see the live website, click the button below.

Project Finished!