WEB DESIGN & DEVELOPMENT

Fontology

Fontology is a flash based interactive website, which provides background stories and basic informaiton of fonts. It tells the history of the development of typefaces, enables users to compare different typefaces, and provides brief guidelines of choosing and using fonts.

Tools: Macromedia Flash 8+Actionscript 2.0+Adobe Photoshop CS2

Check the project →

Wordpress Theme - Blossom

Blossom is the first Wordpress Theme I created for my own blog. WordPress is a free and open source blog publishing application and content management system. I choose to use Wordpress as my blog tool since it’s created on CSS+PHP+MySQL. I created the theme following the tutorial: So you want to create wordpress themes huh? By Small Potato. I love wordpress and will try to create more themes for it.

Tools: HTML+CSS+PHP+MySQL

Check the project →

Asian Studies Center, Michigan State University

Description: During 2005 - 2007, I've worked for the Asian Studies Center as the webmaster and student assistant. I've rebuilt the whole site for Asian Studies Center, design the interface, and using HTML and CSS to build the site.

Tools: Macromedia Dreamweaver MX 2004, Macromedia Flash 8, Adobe Photoshop CS.

Check the project →

Flash Portfolio

Description: This is the flash portfolio site I created in 2007. It includes the important projects I did during my Master’s program.

Tools: Macromedia Flash 8+Actionscript 2.0+Adobe Photoshop CS2

Check the project →

Animation

The beauty of Chinese calligraphy

Project Introduction: This is an animation, to show the beauty of Chinese calligraphy. The project tries to show the historical changes of calligraphy, from image to character, from complex character to simplified one.

Description: With the launch of Flash, more and more people get the access to create animation. I love Flash, it helps me to visualize my thoughts, so that I can communicate with other people through an interesting and totally new way.

Tools: Macromedia Flash 8, Adobe Photoshop CS.

Check the project →

Pimp my Cart

Project Introduction: This is a semester group project for TC446: Advanced Interactive Media Design. The idea of this animation came from the popular MTV show: Pimp My Ride. In this interactive animation, the player can choose from three bums, and help to customize their shoping cart. Interesting things will happen after that...

Description: I worked as the character illustrator and animator in this project, drawing the character Xzibit and one of the bum who looks like Einstein ;p

Tools: Macromedia Flash 8, Adobe Photoshop CS.

Check the project →

Game Design

Virtual Gardener

Project Introduction: This is a simulation game that allows casual game players to cultivate a garden over time. It is expected to support Nintendo DS(primary), and other mobile devices.

Description: I worked as the UI designer for the game. I created different game screen, and also the icons and buttons for the game.

Tools: Macromedia Flash 8, Adobe Photoshop CS

Check the project →

Graphic Design

Project Introduction: The aim of this project is to research a graphic designer, and then design a poster advertising a lecture given by the designer. The post should follow the style of the designer you are introducing.

Description:The designer I chose is Paula Scher, she is good at using typography elements in her graphic design. I designed the poster according to one of her work, a cover for CBS Record. I tried to using different size and color of font to introduce people about different information, keep a balance between Readability and legibility.

Tool: Adobe Illustrator cs2

Check the project →

Project Introduction: Print® magazine is an industry standard of reference for the western design world. In this project, the designer should choose an current issues concerning the field of graphic design and try to create a cover for Print® magazine to communicate that issue.

Description: The issue I chose to communicate is "Decoration is coming back again," in current graphic design field, the trend of using patterns as the decoration comes back again.

The painting scroller is used as a metopher of design in this project. The image tries to express that using pattern to decoration is popular again.

Tool: Adobe Photoshop cs2

Check the project →

Project Introduction: Graphic designers often faced with the overwhelming task of condensing an entire novel, movie, play, or exhibit into a single visual statement. The challenge is getting beyond just simple storyline and actor promotion in order to communicate the thematic essence of the text. The aim of the project is to choose a play by William Shakespeare, and design a poster for it.

Description: I chose to design a poster for Hamlet. The whole play is quite complicated, thus I need to keep focus on the key point. I tried to focus on Hamlet, and his struggle between moral integrity and his obligation of avenging his father’s murder.

My inspiration came from the Jack of poker, tried to use two sided of the prince to show his dilemmaa. You can find that, one of the prince holds a sword, while the other holds a leaf. All these two sided image, subtle difference are trying to show the struggle inside Hamlet.

Tool: Adobe Photoshop cs2

Check the project →

Design Research

Design Research for a Multimedia Chinese culture Website
- Final paper for TC 841 Design Research

Description:The aim of the research is to find out the appropriate method and content to create a good website. The target audience of the website is college students who are interested in China. And the aim of the website is to provide useful information for college students, help them to build a new conception of modern China.

Download the PDF version

Why do We Love Role-Play Game
-- Human's original need of presence

Description:Why do we love Role-Playing Game? Why do we need the feeling of presence? In this article, we try to give the answer of these questions through the factors that determine the level of presence, to explain the original human natural that determine people’s enthusiasm about develop the technology of presence, and to find the reason of the prevalence of Role-Playing Game.

Download the PDF version

Recommendations for Launch.com
-- Paper for TC848 Information Architecture

Description:This is an analysis for Launch.com and its other competitors. Try to point out the strengths and weaknesses of all these sites.

Download the PDF version