Project Details: Capilano Heights Chinese Restaurant Responsive website – Student Project, Emily Carr University
Responsible for: Concept development, brand identity, UI/Visual Design, HTML, CSS, JAVASCRIPT, Responsive Website Development
Tools: Sketch, Brackets(Code Editor)
Techniques: Mockups, HTML, CSS, Javascript, Responsive Website Development
ABOUT THE PROJECT
Capilano Heights Chinese Restaurant, established by CC Sun, has served delicious Chinese food in North Vancouver for over 45 years. CC’s daughter Kathleen now operates the reataurant, and her son has also had opened a Taiwanese restaurant/cooking class, Drunken Monkey, in Taipei, Taiwan. The site of the restaurant is currently being redeveloped so that the restaurant will have a chance to renovate and upgrade.
This is a great opportunity to revisit the whole branding concept and adding cooking classes to the current business. To meet these needs Capilano Heights will need a website which is designed for mobile-first due to the heavy mobile-usage these days.
BRAND & MOCKUPS
The brand vision for Capilano Heights is to bring warmth to the customers just like the sunshine in the community. I use the initials of the Restaurant name to construct the rays of the sun and use “C” again in the middle of the sun to emphasize the involvement into the community. The main orange color not only brings warmth to people but also triggers appetite. With the new branding, I use sketch to build up the mockups first for mobile, and then move to tablet and desktop layout.
RESPONSIVE SITE CODING
According to my mockups, I started coding the site with mobile-first concept so I begin with the mobile screen size. Then I move on to different screen size styling with CSS3 Media Queries. Last but not least, I use javascript/jQuery to code the following interactions:
⚑ drop-down menu in mobile(tablet) view
⚑ text modal when clicking on the photos
⚑ image modal when clicking magnifier icon on the photos
FINAL RESULT
Click here to visit the responsive site
(The main purpose of this project is to build the responsive layout so only the home/main page shows. The navigation doesn’t go to any sub-page.)
Recent Comments