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

4 Comments

fmuaddib  December 12, 2014 at 5:54 AM

Cool! Can you please post this web project on GitHub?

MrTed  December 14, 2014 at 4:01 PM

Hi Kim
I am so much in love with your material interaction. Can you redesign my website using googles material design principles? I will be excited if you will and will at least be happy if you will reply my email. I love animations so much and I believe that will also draw traffic to my website. If yes, I will like to know the cost implication. Thanks.

Chau  January 23, 2015 at 8:57 AM

Hello Kim, I love your work. Like fmuaddib said: it would be wonderful to see the source code from something like this — even if it’s just the first page without all the background lab codes — just to get a person like me who’s not well verse in material to start playing and tinerking with the MD. With much love from CLT, NC. Github would be amazing!

Leave a Reply