Form Follows Function

Projects | January 22, 2013 | 16 Comments

RUNNING ON IPAD

DESIGN

f1
f2
f3
f4
f5
f6
f7
f8
f9
f10
f11
f12
f13
f14
f15
f16
f17

DESCRIPTION

Form Follows Function is a collection of interactive experiences. Each experience has its own unique design and functionality.
All the experiences are created in HTML5, the site works beautifully on both desktop and tablet.
Form Follows Function demonstrates the power of the browser and current technology, while also pushing the boundaries of what is possible.
 
I had an interesting episode of Wiper Typography section.
The design and interaction was already finished in my head, but I didn’t have any idea about how to make the actual Javascript code. After two days, when I woke up in the morning, I suddenly got an idea about the code. I then made it 30 minutes flat.
For the reason, it’s my favorite section of the project.
 
This project isn’t just a collection of HTML5, it’s also a collection of my favorite things.
I love Vincent van Gogh, Rene Magritte, Andy Warhol, Space Time, Golden Ratio, Minimal Design, and Typography.
For example, “Plant Trees” was inspired by Rene Magritte’s “Empire of Light”. The drawing is single paradoxical combination of day and night. The trees in my project are dark at daylight, but bright and colorful at night.

RELATED PROJECTS

  • +FFF Canvas Prints

AWARDS

  • +Red Dot Award, Winner - July 2014
  • +One Show Award, Merit Award - April 2014
  • +Davey Award, Silver Winner - October 2013
  • +W3 Award, Best in Show Winner - September 2013
  • +17th Webby Awards, Official Nominee - April 2013
  • .Net Awards 2013 – Side project of the year, Nominee - April 2013
  • +The FWA, Site of the Day - February 2013
  • +The FWA, Mobile of the Day - February 2013
  • AWWWARDS, Honorable Mentions - February 2013
  • +The FWA / Adobe, The Cutting Edge Award - January 2013

PRESS

  • +FFF now updated to support mobile devices! - April 2014
  • +Social Technology Quarterly Magazine issue 09 - September 2013
  • Communication Arts / Webpick of the day - July 2013
  • +Web Designing - July 2013
  • +FFF project for The FWA advertisement in Web Designing - June 2013
  • +FFF project on Google Chrome advertisement - May 2013
  • +CA Korea - May 2013
  • +IdN - May 2013
  • +Canoe Technology News and Yahoo News by Relaxnews - April 2013
  • +.Net Issue 240 - April 2013
  • +W.E.B Vol. 160 - April 2013
  • +Content Magazine - April 2013
  • +.Net Awards 2013 Side Project of the Year - April 2013
  • +Adobe Inspire Magazine - April 2013
  • +Web Designing - March 2013
  • +FFF on a Kindle - March 2013
  • +Fast Company - January 2013
  • +Google Chrome Experiments - January 2013
  • +Smashing Magazine - January 2013
  • +Wired - January 2013

CREDIT

  • Solo work

16 Comments

Leona  January 30, 2013 at 5:16 PM

Just saw the site for this. ABSOLUTELY AWESOME! You’re so creative…

Uriel Avalos  January 30, 2013 at 6:41 PM

Wow. Great site.
It would be awesome if you put the code for the site on github.

    cmiscm  February 6, 2013 at 5:47 PM

    Thank you :)

Kathy  February 1, 2013 at 4:13 PM

Really interesting site. Have you written any tutorials for recreating these effects? And what’s the best way to go about learning javascript well enough to do this type of work? I write HTML and CSS, but pretty much copy/paste from other people’s javascript work.

    cmiscm  February 6, 2013 at 5:47 PM

    I have a plan to write a book, but I don’t know when I will start that.

Stan  February 21, 2013 at 7:47 PM

Really nice work Jongmin! Did you use a JavaScript toolkit, or is it all custom?

Cheers!

Jin  March 2, 2013 at 10:20 AM

Hello Jongmin, your site is just excellent! Could you share the code of those great projects? just wanna to learn how to be so creative with HTML5..

    cmiscm  March 10, 2013 at 9:46 PM

    Thanks, I may have a plan to write a book (or blogging) someday to the people who want to learn my style :)

JW-OWN  March 11, 2013 at 12:59 PM

와! 이 작업 김종민님께서 하신거 였군요.

정말 멋집니다.

    cmiscm  March 11, 2013 at 4:21 PM

    감사합니다 :)

      JW-OWN  March 12, 2013 at 2:44 AM

      아, 제 소개를 하는걸 깜빡했네요.
      전 한국에서 웹디자이너로 일하고 있구요. 김종민님이 하신 DESK 작업 보고 이쪽으로 오게 되었습니다. 일전에 한번 메일을 드린적도 있고 페이스북에 친구신청도 했어요.
      (수락 해주셔서 감사합니다)

      한가지 궁금한게 있는데 이 작업을 할때 사용하신 툴이 무었이죠?

      보통 플래시 작업할땐 말그대로 플래시라는 툴을 이용하는데 자바스크립트 기반의 웹사이트는 어떤식으로 작업하시나요? 어도비엣지를 사용하시는지요?

        cmiscm  March 13, 2013 at 5:05 PM

        PhpStorm 이라는 에디터를 주로 사용하구요.
        플래시도 플래시라는 툴을 사용해서 애니메이션을 만드시는 분들이 계시지만, 대부분의 디벨로퍼의 경우엔 Flex나 FDT라는 에디터를 사용해서 코드로 애니메이션을 만들어요.
        이번에 한 작업도 역시 자바스크립트 코드로 만든 애니메이션이구요.
        어도비 엣지는 한번 시험삼아 써봤는데, 코드로 그냥 짜는게 더 편하더라구요.

Nat_Silent  September 27, 2013 at 4:46 PM

One of the most creative projects on web I’ve seen recently!
Really beautifull in form and in function :)
Thank you for your work!

    cmiscm  September 29, 2013 at 1:26 PM

    Thanks :)

Leave a Reply