[Interview] W.E.B Vol. 177 – Jongmin Kim and Sanghee Cho

News | September 11, 2014 | 1 Comment
a1
a2
k1
k2
k3
k4

PRESS

[Interview] CA Korea – DDANGA

News | April 9, 2014 | 1 Comment
IMG_0769
흐르는 갤러리

디자인: 조상희
DDANGA.COM
&
개발: 김종민
CMISCM.COM


땅아(DDANGA) 프로젝트
디자이너 조상희가 포트폴리오 웹사이트를 디자인하였다. 사이트의 전체적인 컨셉은 ‘흐르는 갤러리’이다. 갤러리 섹션에서는 이미지, 동영상, 시퀀스, 세 가지의 형식으로 작품들이 전시되고, 프로젝트 섹션에서는 각각의 프로젝트들을 일러스트 아이콘으로 상징화하여 재미를 주었다. 블로그 섹션의 이미지 프레임은 그녀의 닉네임인 ‘땅아’의 한글 형상을 모티브로 작업하였다.

이 사이트의 특이한 점은 메뉴 대신, 갤러리, 프로젝트, 블로그의 세 가지 작업의 공간을 한곳에 모아서, 마치 미술관에서 지도를 보고 전시장을 찾듯, 맵 페이지를 통해 각각의 페이지를 찾아갈 수 있게 하였다. 또한 세 가지 작업에 배치된 동물 아이콘이 네비게이션 역할을 수행한다.

“프로젝트 섹션은 제가 가장 좋아하는 작업인 일러스트 작업으로 꾸며보고 싶었어요. 그래서 각각의 프로젝트에 맞는 주제를 정해 이미지를 아이콘으로 만들어보았죠.” 조상희가 프로젝트 아이콘에 대해 설명한다. 그녀는 아이콘 작업을 하는 도중, 아이콘을 스티커로 만들어보면 어떨까, 하는 생각에 <히어로즈 프로젝트>를 진행하기도 하였다. 또한 스티커.js(stickers.cmiscm.com)라는 자바스크립트 라이브러리 프로젝트로 발전시키기도 하였다.

개발을 맡은 김종민은 HTML5와 PHP로 사이트를 제작하였다. 또한 아이패드에서의 구동에 신경 써, 부드러운 움직임을 위해 애니메이션의 디테일과 코드의 최적화에 중점을 두고 작업을 진행했다. 전체적인 움직임은 CSS 트랜지션(Transition)을 사용하였으며, 물결 애니메이션과 갤러리 시퀀스 부분은 캔버스 드로잉(Canvas Drawing)을 사용하여 성능을 향상시켰다.

PRESS

DDANGA

Projects | February 6, 2014 | 7 Comments

RUNNING ON IPAD

SLIDE SWIPE PROTOTYPE

SLIDE ONLY ITEMS IN VISIBLE AREA

ICON DESIGN

iCON_noline_blog

WEBSITE DESIGN

a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12
a13
a14

CMS

b1
b2
b3
b4
b5
b6

DESCRIPTION

DDANGA is the portfolio website of Interactive/Mobile/UI Designer Sanghee Cho. The website is designed with a concept of a flowing gallery, and the interaction was implemented to reflect this concept.

In keeping with the minimal design, I placed a significant emphasis on the movement to enhance visual detail. Additionally, I incorporated interactive elements such as a wave-shaped background fill and 3D rotation of round icons upon clicking on thumbnails, in order to seamlessly blend with the background colors. The backend of the website was built using PHP and includes a content management system to facilitate ease of updates.

Technologies & Tools

  • JavaScript
  • PHP
  • CSS3
  • HTML5
  • Canvas
  • Animation
  • Interaction

RELATED PROJECTS

  • +Sticker.js
  • +Heroes!

AWARDS

  • +19th Webby Awards, Official Honoree – April 2015
  • The FWA, Site of the Day – March 2014
  • The FWA, Mobile of the Day – March 2014

PRESS

  • +W.E.B Vol. 177 – September 2014
  • +CA Korea – April 2014

ROLE

  • Designer : Sanghee Cho
  • Developer : Jongmin Kim