Red Handicrafts - Traditional Paper Cutting

This project was for an assignment whose goal was to revamp and redesign a local MSME in our region with the goal of modernising the brand’s look. After creating a brand identity and style guide, it is to be implemented into a website design. As such, this project includes brand identity, brand guide, brand logo, brand website and mockups.

Beauty Shots

Website Development Process

Targeted MSME Company: Red Handicrafts

Red Handicrafts is a small company that mainly sells hand-made intricate traditional Chinese paper cutting. Due to the lack of demand and awareness of these crafts, the business as well as the craft itself is struggling to survive, as the owner works multiple part-time jobs to support his business.

The company mainly sold traditional Chinese paper cutting pieces, the proposed style for the website was a layered visual storytelling website with various Chinese elements. During the time of the assignment, it was also Chinese New Year, so I decided to make the website based on that since the festival resonated with traditional paper cutting. Below are visual references gathered from various websites like Google and Pinterest to get a better sense of my art direction.

Art References

Brand Logo Development

After consulting with my lecturer, he advised a change of direction for the logo, as it was barely visible when zoomed out. Out of the blue, an idea for a logo incorporating a koi fish was thought out and quickly sketched out in paint. Koi fishes are a popular symbol of luck and prosperity in China, which fits the theme of the brand.

Through this sketch, multiple variants were constructed. The fish logos were given an ugly-cute approach to appeal to the newer generations, with the store owner’s signature hat on just to put a more personalised and unique characteristic to it. (the store owner is always seen rocking a bucket hat on pictures and interviews)

Final selected version of the logo was the one in the middle at the bottom row.

Web Design Development

Wireframe

The wireframe includes only three pages of the website which was Home, Collection and About Us. The frames on the first two rows are test frames of how the page would appear in the computer’s resolution along with the overlay. Focused pages were the home page and about us page, as they were most important pages that would leave an impression on the visitors, so I decided to make them animate on scroll design, to sort of tell a story as the user scrolls, instead of just listing out the brand values or products.

Asset Creation

Final Prototype Design

Final Website Execution

This project also includes the actual execution of the prototype and website design. This is entirely done in html, css and javascript, also utilising open source code found online. Due to the limitations on Figma, the prototyping application used, some designs were unable to be executed on the prototype, but were executed during the final website fabrication.

Below is the final website design walkthrough.

Beauty Shots

Other Visuals

The Enddd. Thanks for checking out my project!

References Used:

Smooth Scrolling (Open Source):

https://codepen.io/sabina_abbasova/pen/yLLqPdx

Other vague referencing are from stackoverflow community posts.