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

Tags:

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

URL

ROLE

  • Solo work

Tags: ,

Interactive Developer : Google Engineer’s Portfolio

Projects | July 31, 2015 | 14 Comments

VIDEO

BOOK

a1
a2
a4
a3
a5
a6
a7
a8
a9
a10
a11
a12
a13
DSC05420
DSC05414
DSC05397

DESCRIPTION

드디어 1년 넘게 공들여 쓴 <인터랙티브 디벨로퍼>가 출간되었습니다. 지난 10년간 제 분야에서 일하면서 경험했던 것을 디자인과 함께 에세이 형식으로 풀어쓴 책입니다. 단순히 책이라기보단 저의 10년을 담은 개인프로젝트를 만든다는 생각으로 글은 물론 책에 실린 사진들에서 표지디자인까지 직접 작업하며 신경을 썼습니다. 보통 책을 발행하면 마케팅 등 여러 가지 이유에서 표지 디자인이나 기타 세밀한 부분을 저자가 마음대로 할 수 없는데, 이번에 한빛 미디어에서 최대한 저의 의견을 반영해 주셔서 아주 만족스러운 책이 나온 것 같습니다. 까다로운 저자 덕분에 같이 많이 고생하신 한빛 미디어의 관계자분들께 감사의 말씀을 전합니다.

DETAILS

  • •Category : IT > Design, IT Essay
  • •Paperback : 344 pages
  • •Language: Korean
  • •Product Dimensions: 190 x 255 x 18 mm
  • •ISBN : 978-89-6848-184-0
  • •Price : KRW 25,000

SUMMARY

Who shall be invited to join Google from Google Headquarter as an engineer? <Interactive Developer : Google Engineer’s Portfolio> contains unique stories how the author has achieved his goal as an interactive developer at Google. In addition, this book contains the author’s award-winning design portfolios as well. Jongmin says, “It’s not only a book but also my new project. I designed the book cover for the design quality of the book.”

CHAPTERS

  • •Part 1. CHANGE
        Chapter 1. Showing my work at the Google I/O 2014
  • •Part 2. CHALLENGE
        Chapter 2. 5 years working experiences in South Korea
        Chapter 3. Working experiences at the Firstborn in New York
        Chapter 4. A creator’s life in New York
  • •Part 3. CREATION
        Chapter 5. (Award-winning) Personal Projects
            • RBT – Red Bus Tracking
            • DESK Project
            • Form Follows Function
            • The mimetic words of Hangeul
            • Material Interaction
  • •Part 4. CONTINUE
        Chapter 6. A Googler in Silicon Valley
        Chapter 7. Next step

RELATED POSTS

  • +Printing the book
  • +Book Cover Design

PRESS

  • +News Wire – July 2015

CREDITS

  • •Author & Photograph & Cover Design : Jongmin Kim
  • •Publisher : Hanbit Media

Tags: , ,