Loading ...
Jonathan Yuen, art director/writer/graphic designer/programmer/illustrator/project design and development/client

"The beautiful and elegant animations provide a non-linear path throughout the site that really begs visitors to explore. In particular, I really enjoyed not having to click on things and to, instead, just let the mouse touch the red plus marks throughout the site." —juror Jason Zada

"I love the way this grows and expands so organically and gracefully." —juror Liz Castro

Overview: A self-promotional showcase for a multidisciplinary designer, this site may have a simple navigation, but its richly detailed, ink-inspired illustrations and intricate animations entice users to explore the catalog of work again and again.

• 7 sets of illustrations
• 105 individual files in 3 folders
• 69 featured works

Comments by Jonathan Yuen:
"The challenge to designing a self-promotion Web presentation is not only to engage potential employers/clients with good work in the portfolio, but also to give the viewer insight into the designer's personality, belief and goals.

"With that challenge in mind, I designed my site as an interactive design narrative, a journey that slowly unfolds in a series of segments as the viewer explores the site. Each segment uses illustrated metaphors to represent the attributes and information about me.

"The conceptual and design stage took a lengthy five months. The process was slow because it also became a period of self-discovery; much of what was narrated on the site are various bits of self-realization. By narrating and presenting private facts, I hoped to draw the viewer into a very individual and personal journey.

"The navigation interface is vastly simplified, so to be as virtually transparent. Interface elements drive the linear structure of the narratives and react to mouse movement. The idea was to have minimal clicking, so that viewer focus would be drawn instead to the content and visual elements. During the conceptual stage, I had reservations about the interface paradigm being too abstract and defying conventional Web interface behavior. But after seeing how smooth the experience became in the final stages of interface design, I was convinced it was a risk worth taking. Animations are brought to life using basic motion and shape tweening with simple keyframe techniques. The inking effects are achieved literally with frame-by-frame masking, mapped-out manually. Various creature animations were accomplished by deconstructing body parts into simple units, animating them individually and reintegrating them as a whole. The challenge was to get every motion to appear lifelike.

"I have always appreciated the aesthetic of traditional Chinese painting; I have based my illustration style on it. The classical style says so much about my artistic base. My goal was to have this cultural, graphic approach lend a unique visual narrative experience to the site."

X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In