Form Follows Function

Projects | January 22, 2013 | 13 Comments

VIDEO

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 with its own unique design and functionality. The collection is created using HTML5, ensuring compatibility and optimal performance on both desktop and tablet devices. This project demonstrates the capabilities of current technology and pushes the boundaries of what is possible within a browser-based experience.

One particularly noteworthy aspect of this project is the “Wiper Typography” section, which was inspired by an interesting episode during its development. The design and interaction had already been conceptualized, but the challenge of creating the necessary Javascript code initially stumped me. However, after two days of contemplation, I woke up with the solution and was able to implement it within 30 minutes. This section holds a special place in the project, as it exemplifies the power of perseverance and inspiration.

This project is not just a collection of HTML5 experiences, but also a reflection of my personal interests and inspirations. As an admirer of artists like Vincent van Gogh, Rene Magritte, and Andy Warhol, as well as concepts such as the Golden Ratio, minimal design, and typography, these influences are evident throughout the project. For example, the “Plant Trees” experience was inspired by Rene Magritte’s “Empire of Light”, depicting the paradoxical combination of day and night. The trees in this experience are dark during the day, but bright and colorful at night.

Technologies & Tools

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

RELATED PROJECTS

  • +FFF Canvas Prints

AWARDS

  • +Red Dot Award, Winner – July 2014
  • +One Show Award, Merit Award – April 2014
  • 18th Webby Awards, Official Nominee – 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

ROLE

  • Solo work

13 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.

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!

Leave a Reply