Section Logo
Go

Interactive Annual 13:

Jonathan Yuen (2006)

Launch Live Site Launch Cached Site

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

“I love the way this grows and expands so organically and gracefully.” —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

Creator’s Comments: “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, to be 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.”—Jonathan Yuen

Credits:
Jonathan Yuen, art director/writer/Flash programmer/graphic designer/illustrator/project design and development/client