MON

Projects | October 9, 2016 | 5 Comments
ttt
m2
m3
m4
m5
m6
m8
m9
popopo

DESCRIPTION

Halloween is a day that holds great personal significance for me, as it has been a favorite holiday since childhood. As a child, I was particularly drawn to B-horror movies such as Frankenstein and Dracula, finding myself captivated by the underlying themes of sadness and loneliness present in the monsters, as well as the gothic mise en scene. This led to a lifelong appreciation for the works of directors such as Tim Burton, George Romero, and Alfred Hitchcock.

Inspired by my child’s Halloween costume, I decided to create a project utilizing HTML5 technology, specifically the Canvas, Webkit, and WebGL elements. The project is designed to function seamlessly on both desktop and mobile devices, with the added ability to enjoy a full-screen experience by adding it to the home screen on mobile devices.
This project has been a long-time desire, with the concept of minimal design, bold colors, and fun interactions with monsters being central. I would like to express my gratitude to Sanghee Cho for providing the illustrations for all icons used in the project.

Technologies & Tools

  • JavaScript
  • WebGL
  • Metaballs
  • UX/UI Design
  • Animation
  • Interaction

AWARDS

  • DesignAwards.Asia, Design of the Day – October 2016
  • The FWA, FWA of the Day – October 2016

RELATED POSTS

  • +How to make a Prey on Animation

ROLE

  • Art Direction & Design & Coding : Jongmin Kim
  • Icon Illustration : Sanghee Cho

I love SSOL

Projects | June 2, 2016 | 1 Comment

DESIGN

ssol

GIF

sol2_1

PICTURE

DSC08322

STICKERS

DSC03284
DSC03313
DSC03356
DSC03381
DSC03397
DSC03391

DESCRIPTION

My wife has illustrated our baby. Our baby’s nickname is SSOL, so the project name is I LOVE SSOL.
I made stickers with the illustration for my car, skateboard, laptop and iPhone.
It’s our new project working together, we also have a plan to make a book and other stickers for her own stuffs, such as bicycle, water bottle, lunch box and toys.

RELATED PROJECTS

  • +Baby Face Emotion – I LOVE SSOL

ROLE

  • Illustrator : Sanghee Cho
  • Photographer : Jongmin Kim

Booounce

Projects | May 26, 2016 | 1 Comment
bb_title

VIDEO

LOGO DESIGN

logo2

TYPO ANIMATION – JAVASCRIPT TO DRAW ON CANVAS

nytypo

LINE ANIMATION – JAVASCRIPT TO DRAW ON CANVAS

line3

MASKING TRANSITION – JAVASCRIPT TO DRAW ON CANVAS

mask

SKEW BOUNCING TRANSITION – JAVASCRIPT WITH CSS3 TRANSFORM

skew

LOADING

start2

LIST

ac1

LIST PAGING TRANSITION

paging

LIST TO VIEW TRANSITION

select

VIEW PAGING TRANSITION

vpaging

VIDEO PLAYER

ab3

GIF PLAYER

ab5

MORE FUNCTION

ab4
more

ABOUT

ab6

ABOUT TRANSITION

about

SUBMIT

ab7
submit3

ABOUT TO SUBMIT TRANSITION

stoa

SEARCH FUNCTION

search

HELP

ab9

RESPONSIVE

response4

DESCRIPTION

Booounce is a collection of visually inspiring short videos and GIFs, featuring engaging animations and transitions throughout the website. The concept of a “Circle Line Animation” and “Bouncing Ball” was initially developed by myself and my wife for a new project, but the project was ultimately cancelled. I was particularly enamored with the concept and decided to reimagine it as a platform to share inspiring videos for motion design enthusiasts.

The website was built using HTML5, CSS3, and JavaScript, and is designed to be fully responsive on all device sizes. To enhance the user experience, I developed my own animation libraries for the project, such as Typo animation, Skew bouncing transition, Line animation, Bouncing ball transition and Masking transitions. Additionally, I made efforts to optimize performance on mobile devices. The project name “Booounce” was inspired by the song “Bounce” by Cho Yong Pil.

Technologies & Tools

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

AWARDS

  • The FWA, Site of the Day – May 2016

ROLE

  • Solo work