Link to responsive web ui for Prince Tea House HERE

Open index.html to go to start page of website.

Computer View:

Smartphone View:

Background:

For the most part, I tried following the layout of my wireframe in my final website. I used a Bootstrap template in Dreamweaver: taking out the parts that I didn’t need, and modifying the layout, color, and font, as well as adding my own images. The home page features images from an article written about Prince Tea House and from Google images. I used an image carousel that changes between the various images. I also took out the scrollbar selection section on the left (from my wireframe). The menu page is generally the same as my wireframe, featuring a small navigation bar of the menu categories and the menu items listed in the respective sections. For the locations page, instead of a live map (indicated in wireframe), I went with a simpler option: a screenshot of the streets near the location and the address/business hours detailed below. For the about page, I researched a little about the origins of Prince Tea House and its founder, and summarized that information there. Finally, the contact page and smartphone view both did not deviate much from the wireframe. The contact page features a simple contacting interface, looking for name, email, and message. The smartphone view was also able to incorporate the drop-down menu navigation pretty nicely.