Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Moy Yat Kung Fu

Modernizing a site. Make it mobile and make it awesome.


DEMO: moyyatvingtsunkungfu.com


Preface

Moy Yat Ving Tsun Kung Fu is a martial arts school located in New York City. The school was founded by Grandmaster Moy Yat, a former student of the famed Kung Fu master Yip Man and former classmate of Bruce Lee. Today, the school has become the international headquarters for all of their satellite schools located around the globe.

Redesigning

When I first saw the school’s site, I quickly noticed that the site was in need of an update. The original site had the branding of the school’s colors and motifs, but the site lacked a modern UI and mobile friendly structure.

The original layout in desktop mode.

 

Same page, but in mobile mode.

 

The original site was based on an older theme that would be too troublesome to retcon the code. It would be much easier to just redesign the entire layout and create an entirely new theme. For inspiration, I decided to visit some of the websites for their satellite schools and eventually visit their newly created website that was dedicated to the school’s federation.

 

The International Moy Yat Ving Tsun Federation website.

 

The newly created federation site included a new branding motif that I decided to adopt into the school’s new UI design. It was only appropriate that I included the same colors and logo because the federation’s headquarters was also the same school I was redesigning a website for.

 

Layouts

I also interviewed the school’s leader, Sifu William Moy, into understanding more about his father Grandmaster Moy Yat. Grandmaster Moy Yat was the founder, however, he had passed away back in 2001. I needed to collect some stories for inspiration and understanding of what the school’s beliefs were and generate the necessary content for the new website.

After sharing some stories, I came to learn that Grandmaster Moy Yat was an artist, a painter and very traditional Kung Fu master. I decided to translate this into designing a simple and elegant presentation of what the school stood for. The new site’s layout would be a one page site, implementing the red branding as a backdrop for showcasing the school’s history, leader profiles and some images.

Sifu William Moy’s profile, including a video interview clip.

 

Furthermore, this site had to be mobile friendly. I adapted Bootstrap to fit into the site’s color palette and customized the brand logo. The menu also required a custom breakpoint to be applied as all the navigation menu items became too long to fit.

The menu spilled over due to the size of the new navigation menu and brand logo.

 

This was remedied with a media query breakpoint to collapse the menu into a mobile menu at 969px.

 

The mobile layout, built using Bootstrap.

Final Touches

Once the site was completed, there were some final touches to the design to make the experience more natural. I added a smooth scroll effect that would slide the website from one section to the next. The default experience would appear that the sections just appeared into place and felt too rigid. The slightly slowed down sliding effect created a much more elegant feel.

The second thing I added was to utilize Scroll Magic. Scroll Magic is an external library that helps you create particular events as you scroll through the page. In this case, I implemented unhiding sections of the website that were initially hidden on loading the page. The transition was then modified to unhide and ease out with a little bit of animation. The final result would be sections appearing to materialize out of nowhere.

Javascript code for implementing Scroll Magic.

 

Finally, an interactive Google Maps map was added to the contact section of the site. The map was generated on Google Maps, which created a line of code to embed. I modified the code to fit in line with the column stylings in Bootstrap and remain mobile friendly across various devices. The map can be clicked and loaded onto either a full desktop browser or open the Google Maps app on a mobile device. Thanks Google for making this map feature available and so easy to implement!

Google Maps for all your Google mapping needs!

 

The finished design was then converted into a WordPress theme (see my entries on WordPress for how I go about this process) and zipped up for use. Since the original site was a WordPress site, it was fairly simple to switch out the previous layout and just upload the new theme. While this theme I created does not presently have features to update the content in the future, I plan on adding additional components to WordPress to accommodate custom fields that will modify the site’s content.