New Pants Music Band

New Pants Music Band

New Pants Music Band Website

A responsive website created for Chinese pop-punk band New Pants.

  • Role: Developer/Designer
  • Language: HTML/CSS/Bootstrap
  • Fields: Web Development

About this Project

This website aiming to showcase the Chinese pop-punk music band New Pants, the website includes band information, band member introduction, album gallery and events list, etc. Display the unique band identity by using consistent color and style through whole website.

newpantsmockup

Design Process

brainstorm

One Page Website – Brainstorm

brainstorm

New Pants Music Band – Brainstorm

npstyleguide
mobilemockup
newpantsmockup

Final Project

Responsive Christmas card website

Responsive Christmas card website

Responsive Christmas Card website

A responsive website created for Christmas card.

  • Role: Developer
  • Language: HTML/CSS/JavaScript
  • Fields: Responsive grid

About this Project

This project was done in term 2 when I first time touches the responsive design. I create this Christmas card by grid and there are three different layouts in this design. This project was done without framework.

Design Process

The menu has been changed when the screen size down to the mobile device. On the mobile device, the menu change to the hamburger icon, tap on it the menu will extend the whole list. 

webview
tabletview

The ratio of two sides was changed through different devices. Also, the font size was changed on different screens.

Final Project

More Projects

Second Cultures Creation

Second Cultures Creation is a B2B traditional gifts selling company based in Vancouver, BC. This project is to re-design their brand identity.

Mythbuster Animation

Making a mythbusters style animation with Adobe After Effects. Topic of this animation is “Can you really kill someone by dropping a coin from a very high building”.

99 Mythic Taste

99 Mythic Taste

Under Construction

More Projects

Second Cultures Creation

Second Cultures Creation is a B2B traditional gifts selling company based in Vancouver, BC. This project is to re-design their brand identity.

Densha Sushi Restaurant

Densha Sushi is a virtual restaurant we create as a group project for the branding design and website development. I am a web developer in this project.

Densha Sushi

Densha Sushi

Densha Sushi Restaurant

Densha Sushi is a virtual restaurant we create as a group project for the branding design and website development. I am a web developer in this project.

  • Role: Developer
  • Language: HTML/CSS/JavaScript
  • Fields: Restaurant Website

About this Project

We create a virtual restaurant, aiming to make the whole restaurant-related materials. The website includes the basic information, menu and photo gallery of the food.

Design Process

Moodboard

Wireframe – Home page

Wireframe – Gallery Page

Wireframe – Menu

Wireframe – About

Final Project