Overview:

Download the .ZIP file here: https://drive.google.com/drive/folders/1OUDYxMOtO-Cme4fSnF0Ab8FOFXtbOUFs?usp=sharing

*NOTE: When you download and extract the .zip file, open the index.html with Google Chrome because the other browsers are problematic. Since I previewed with Google Chrome, I made some unnecessary alterations that caused issues with other browsers (tested on IE and Firefox). The other pages can be navigated via the icons on the top right corner.*

 

Home Page (index.html)

 

Info Page (info.html)

 

Contact Us Page (ContactUs.html)

 

Shopping Cart Page (shopping_cart.html)

Description

I followed the wireframe for the pages.

Home Page

I took store pictures from the Boardwalk Games Inc. Facebook page and added a friendly welcome message for the landing home page. The store information is placed at the bottom of the page with the tan and brown colors that correspond to the typography I used in place of a logo. The chess board background was also a nod to the horse chess piece in the typography.

Info Page

This design was thought to originally be for the Contact Us page which is why I chose cards from the game Love Letter with the envelope style card sleeves. Nonetheless, I appreciated the “If you discard this card, you are out of this round.” caption for the Princess card in Love Letter and ultimately kept this. I chose a fancy background that reminded me of royalty to match the color scheme of the Love Letter card as well as to mimic the royalty status of the Princess card.

Contact Us Page

The form on this page is a simple and useful way to be interactive with the general public by allowing people to ask questions, make suggestions and comments. I utilized a background with some mail envelopes since the main purpose of this page was to essentially enable customers to email us.

Shopping Page

Again, this page was the most complicated to complete. I kept the Monopoly Deal design but I was limited to one game per card. Moreover, I was not able to accomplish the complete look that was shown on the Wireframe so I simplified the page. To relate to the Monopoly Deal theme, I chose Monopoly money as the background. I liked this background in particular because shopping is also analogous to money.