Material Interaction

Projects | December 9, 2014 | 4 Comments

RUNNING ON MULTIPLE DEVICES

DESIGN

a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12
a13
a14

DESCRIPTION

Last week, I launched my latest personal project, Material Interaction. The project was inspired by Google’s launch of Material Design in 2014 and my initial encounter with the Material Design Principles Postcards at a Google I/O Happy Hour event. Upon first viewing the postcards, I noted that while the design was visually striking and playful, it lacked interactive and animation elements. In response, I created this website to bring these elements to life.

The project was developed over a four-day period, and initially, it was designed to work only on Webkit-supported browsers such as Chrome and Safari. However, due to popular demand, I have updated the website to support other modern browsers, with Firefox being a particularly notable addition. The canvas drawing performance on Firefox is not as smooth as in other browsers, which is why I have made a small circle area for the FFF’s Bokeh section and it might be slow with a shadow effect on this website.

Material Interaction aims to showcase interactive experiences for Google’s Material Design Principles and was created using HTML5 and CSS3. The website is fully responsive and works well on mobile and tablet devices.

Technologies & Tools

  • JavaScript
  • CSS3
  • HTML5
  • Canvas
  • UX/UI Design
  • Animation
  • Interaction

AWARDS

  • The FWA, Site of the Day – December 2014
  • The FWA, Mobile of the Day – December 2014

ROLE

  • Solo work

COPYRIGHT

  • © Jongmin Kim
  • Material Design © Google