For a maneger, all things in a system exist for the system.

Because a bucket have all planks are of equal length is

necessary for peak efficiency.

But for a designer, all things in the system exist for a goal

or a problem, which is the magic door connected the the

reality with human inner world.

To me, Graphic Interface Design is very the beautiful

key to the door. That's why I fall in love with it.

For a maneger, all things in a system exist for the system.

Because a bucket have all planks are of equal length is

necessary for peak efficiency.

But for a designer, all things in the system exist for a goal

or a problem, which is the magic door connected the the

reality with human inner world.

To me, Graphic Interface Design is very the beautiful

key to the door. That's why I fall in love with it.

For a maneger, all things in a system exist for the system.

Because a bucket have all planks are of equal length is

necessary for peak efficiency.

But for a designer, all things in the system exist for a goal

or a problem, which is the magic door connected the the

reality with human inner world.

To me, Graphic Interface Design is very the beautiful

key to the door. That's why I fall in love with it.

For a maneger, all things in a system exist for the system.

Because a bucket have all planks are of equal length is

But for a designer, all things in the system exist for a goal

or a problem, which is the magic door connected the the

To me, Graphic Interface Design is very the beautiful

key to the door. That's why I fall in love with it.

Vocaloid Family

Main color? The color sheme of HATSUNE MIKU

Features?

Or facial expression？

One?

Or more?

Recognition Emotion

FANS

MIUI Theme Design: Vocaloid FamilyThis is the re-creation of vocaloid personas. Vocaloid is a singing voice synthesizer developed by Yamaha Corporation (2003), also the general term describing its derivatives.

1 2 3

DESIGN OF VI

Vocaliod Family

DESIGN OF Andriod Themeno.1

1 2 3

FutureHope

YouthStudents

管 理Industry &Commerce

BusinessAdministration

BusinessAdministration

FlyUp

工 商

商工

商工 Fire Flower

DESIGN OF VI

no.2 Management AdministrationDESIGN OF VI

100$

sort4

25%

sort5

100$

sort4

25%

sort5

MetroEyes

30%

3.4. LOGO

3.3. Dashboard

KPI + TILE

3.1. Mainpage View Layout

LAYOUT

3.2. Charts

Redesign

Peak Value100$

Peak Value100$

Chart title Chart title

Chart title

DESIGN OF VI no.3

MetroEyes

WIN 8 APPno.3

Peak Value100$Peak Value100$Peak Value

Chart title

Peak Value100$

Peak Value100$

Peak Value

Chart title

100$100$100$

sort4sort4sort4

25%25%25%

sort5sort5sort5

30%

Chart title

MetroEyes3.4. LOGO

MetroEyes LOGO

MetroEyes

3.3. Dashboard

KPI + TILE

3.1. Mainpage View Layout

LAYOUT

3.2. Charts

Redesign

XXxxxxxxxxxxXXxxxxxxx

KPI Industry Agriculture

KPI Industry Agriculture xxx xxx xxx

KPI

Industry

Agriculture

xxx

xxx

xxx

Business Technology Agriculture

InformationRecommendation

Plan 1

Plan 2

Toolbar

Settings

NEWS Customization SubpagesDASHBOARD

NO.3.1

At first, my idea focused on news layout and quick links, therefore I designed two mainpage layouts both have news recommendation.

Customization: we can never knows what do users want. Users could customize their personalized content presentation.

They could use the tab we offered, such as business, technology, automobile, or sort out the tile to their liking.

MetroEyes

ViewLayout1 2

no.3.1

News Recommendation

News Recommendation

U.S.

England

Korea

Fran

ce

kazakhstan

Germany Russia

Italy

Hungary China

26% 24%

14% 9%China U.S

England Korea

Ch

art Title

26% 24%

14% 9%China U.S

England Korea

or

MetroEyes

Pie Chart Redesignno.3.2

32%

Series 1

Series 2

Series 3

Series 4

Series 5

Series 6

Series 7

U.S.

England

Korea

Fran

ce

kazakhstan

Germany Russia

Italy

Hungary China

Chart Title name4na

me

name

name1

30%

Ch

art Title

The sigle pie chart could beused as tiles in the mainpage as part of dashborad.

The composite pie chart could be used to present more information.The single charts are the details of each section of the pie chart in the top, also link to the relevant detals or news.Data sources: London 2012 Medal Tally. 8/7/2012

Common pie chart don't suit for presenting informationin win 8 tiles.

Chart Title

1 2 3

MetroEyes

Line Chart Redesignno.3.2

Series &Data

Series &Data

Series &Data

Series &Data

Series &Data

Peak Value

Chart title

Data

Axis title

Axis title

Series NameSeries Name

Data 1Data 2

Series name

Series name 2Series name 1

The single charts / tiles of the composite line chart are the details of each line of the chart in the top, also link to the relevant news. Use different color for people who is color blindnessor color weakness. (Data sources: London 2012 Medal Tally. 8/7/2012).

Chart Title

Peak Value

Minimum Value

1. Changing the common line chart to those just display the peak value and minimum value.

28

Data

Data

Data

6

Data

Data

Data

0

10

20

30

40

50

60

70

Series3

Series2

Series1

中国

美国

英国

韩国

法国

意大

利

哈萨

克斯

坦

德国

俄罗

斯

匈牙

利

2美国

Country

Country

Country

7哈萨克斯坦

Country

Country

Country

1 2 3

2. Display the key data in the tiles, whenthere is the point under the line, the data in the top left corner is the value of the serie the point indicates. If no point under the line,the value in the top is the peak value.

Mid- Value

Datascale

Datascale

Datascale

Datascale

Datascale

Data

Scale

Data

Scale

Data

Scale

Data S

caleD

ataS

caleD

ataS

cale

DatascaleData

scaleDatascale

Datascale

Datascale

Axis title

Axis titleData

DataData Data

Data

Data

DataDataDataData

Data

DataData

Data Data

DataDataData

DataData

Data

DataDataDataData

Data

DataData

DataData

Name

Peak Value

Chart title

MetroEyes

Bar Chart Redesignno.3.2

Mid- Value

Peak Value

Peak Value

Minimum Value

Minimum Value

Datascale

Datascale

Datascale

Datascale

Datascale Data

scale

Datascale

Datascale

Datascale

Datascale

Datascale

Datascale

Datascale

DatascaleData

scaleDatascale

DatascaleData

scale

Axis title

Axis title

Axis title

Axis title

1

2

Change the bar chart in the same way as line chart.

MetroEyes

KPI + TILEno.3.31 2 3

30%

60%

30%

100%

60%

100%

text

text

text

text

text text

Time

Time

Time

Time

Time

Time

Time

One subject - different sections in the middleline represent certain time. Grey tile contain the details, and the white tile has no content.

Subeject Name Subeject Name 1 . Subeject Name 2 . Subeject Name 3

Multiple subjects - the middle time lines each represent a subject, they could be used to organize and diaplay the content at the same time.

Time

Time

Time

Time

Time

Time

Time

Time

Time

Time

Time

Time

Time

Time

Time

Time

Time

texttext

text

text

text

text

text

text

texttext

texttext

texttext

texttext

text text

Key Performance Indicator (KPI)The up or down arrows displayed in the top of each tile means the trend and change of the key data. The key word or data name is palced on down left corner.

Key word Key word

Key word Key word

Key word Key word

text

text

text

text text

text

text

text

texttext

texttext

yes+E

MetroEyes

LOGO no.3.41 2 3

Metro Eyes is developed for providing the data and news of some industries, therefore we finally chose the charts as logo rather than eyes.

Eye & Pie Chart

Metro Eyes is an application designed for providing data in the news and allow uesrs upload their data and visualize them. I chose blue and champagne as main color, because they are more calm and elegant, also could be a balance of the colorful Win 8.

MetroEyes User Info

Technology Industry Agriculture

101,257

sort1

61%

sort2

101,257

sort3

100$

sort4

25%

sort5

+72.6

sort6

1/9

sort7

100$

sort10

100$

sort11

100$

sort12

100$

sort13

100$

sort14

100$

sort15

1600

sort8

+8%

sort9

METRO EYES User Info

Technology Industry Agriculture

101,257

sort1

61%

sort2

101,257

sort3

100$

sort4

25%

sort5

+72.6

sort6

1/9

sort7

100$

sort10

100$

sort11

100$

sort12

100$

sort13

100$

sort14

100$

sort15

1600

sort8

+8%

sort9

User Info

100$

sort11

100$

sort13

100$

sort14

100$

sort15

MicrosoftMicrosoft

ResearchR

Friday is a LBS social APP, developed to help peoplefind the offline activities or organize activities.

DESIGN OF VI

no.4 Friday Night Appliacation

FRIDAY NIGHT

Chronological & distance order

Quicklinks portlet: Friends, Interest list, Organizer,

number of participants.

Activities list / Participate entry

Mainpage Sign in & Login

1.0

Settings5.0

1.0.1

Personal page

Basic Info Avatar Activitiesrecord

Publishentry

Friends & message

2.0

2.0.1 2.0.2 2.0.3 2.0.4 2.0.5

3.0

3.0.1 3.0.2

Version Info AccountSecurity

Logout

Publish / Manage activity

4.0

5.0.1 5.0.2 5.0.3

Fridaty Night

SITEMAPno.41

2

3

1

Mainpage

Activities pageBasic Info: time, site, type, etc.

UserAvatar

List and brief intro of activities

Menu

SubmenuMap-Show the activities according to distance

Or search activities by entering key words

Modify Info

Personla information

Friends & message

Publish entry

Menu

Avatarsetting

Submenu

Arrange in distance from the user

Host

Q & A ( follow the discussion in which there

may have a question)

User could choose the display mode

Discussion

Activities detail

Q&A

Show both

Disclaimer & StateParticipate

NOWMap

Distance to users location

Participants

Apply to participate

Confirm？

Send application

Including necessary personal account info, the application message that system provided, and optional add info.

Discussion

Mainpage & Activities

WIREFRAMEno.4

Modify Info

Event information time, site, etc.

Host

Pictorial record

Participants (avatars and quicklinks to personla page)

Number of ParticipantsAcitivity duration

Avatar gallery

Avatar Settings (it is alsoa little game, user could create their avatar as they like, could also use the avatar parts we offered)

User’s Personal Page

WIREFRAMEno.4Personla information

Activities record

Time point

Past activities

Friends & message

Publish entry

Menu

Avatarsetting

Submenu

1

Discussion

Avatar

5.2. NET Insight

5.1. Miku & Mirai: INFO & Vedio Sharing Site

5.3. Sharepoint Analysis Studio

DESIGN OF

WEB UIno.5

The web aims to provide details information about Hatsune Miku's projection live concerts, introduce some projection technology, also share relevant videos.

5.1. Miku & Mirai: INFO & Vedio Sharing Site

MIKU&MIRAIWEB UIno.5.1

NET Insight-TopologyVisualizationno.5.2

1

2

3

4

Amount of Host ClusterNET Insight is developed for providing real-time infomation of Microsoft’s servers around the world.

The different shape and size represent different

host cluster amount.

The quantity level of host become clear at a glance.

MicrosoftMicrosoft

ResearchR

NETInsight

NETInsight

SharepointAnalysis Studiono.5.3

1 2

Sharepoint Analysis Studio - developed for providing the data analysis result in a time point.

MAINPAGEITEM LIST

ANALYSIS

RESULTDISPLAY

(GENERAL REPORT)

General Report

Main page

AnalysingDetails

Details 1

Details 2 Procesing

Details 3

MAINPAGEITEM LIST

ANALYSIS

RESULTDISPLAY (GENERAL REPORT)

Improve color consistency

Expanded the user interface by turning the item list into horizontal navigation. Hid the items

when the analysing be selected, and the space could be used to show more details clearly.Redesign the button

SharepointAnalysis Studiono.5.3

1 2 3

MicrosoftMicrosoft

ResearchR

ANALYSISSTUDIO

ANALYSISSTUDIO

1 2 3LOGO

Illustrationno.6

PsCorel

Painter SAI

Guardian Deity of TibetMarch 2012

Menma(The Flower We Saw That Day. Ano Hi Mita Hana no Namae o Bokutachi wa Mada Shiranai)November 2011

12

kazami yuuka(Danmaku game. TOUHOU Series)February 2011

Reed & Buffalo. January 2012

Rage of Bahamut. October 2012

Storyboard& Mangano.7

ComicStudio

move houseThe heroine lived in the mountain with her dragon pets. They has to moving again because of the human development activities.

mail carrierAn little angel lived in earth helps people send their wish lists to god.

happy timeSeveral children live in a small town finda broken pipe in a hot summer day.

boysTwo boys want to fled away from the war.

double worldA girl live in a closed world try to go outside and has some adventures.

Characters& Sketchno.8

PsSAI Ai

Animal seriesThe heroine's father and the folks of her hometown.

Biddy HenChatter & Fight

BanalityDragen

Monkey CoupleShrewd & Millwright

Cattiness & RichTiger

Animal seriesThe heroine and her master. She is a tiger, her master is amonkey. She is growing up a little more in the left picture.

Animal seriesThe buffalo sibling and little dragon.

A western god and oriental goddess fall in love and become family. They have a daughter, she always don't know what to do about her life.

Anthropomorphic logos for Graduate union of Tsinghua UniversityFrom left to right: Culture-Music Department. Academic Forum. Public relation/serving Department. Office Support Department.

Trumpet villageTrumpet village

Glede Father Dragon Mother

Fairy of water Fairy of wind Fairy of dew

Copy works: 田中 達之. Cannabis Works. P01, 02

Copy works: Anatomy for artists. Sarah Simblet

tree hotel

E MAIL

W.LOTUS@QQ.COM

LE WEN Graduate. Tsinghua University

MOBILE

(86)151 1698 8269

PORTPORTPORTFOLIOPORTFOLIOLEWENLEWEN

Thank YouFor Your Time!

~FOLIOFOLIOPORTFOLIOPORT WENFOLIOFOLIOWENWEN2009WEN2009WENWENWEN

2012WENWEN

2012201220122012PORTFOLIOFOLIOFOLIO

PORTFOLIOWENLEWEN2009WEN2009WEN~2012WEN

2012WENPORTFOLIOPORTPORTPORTFOLIOFOLIOFOLIOPORTPORTPORTFOLIOPORTFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIO

2009200920092009FOLIOFOLIOFOLIOFOLIO2009200920092009200920092009200920092009FOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIO20092009200920092009FOLIOFOLIOFOLIOFOLIO20092009200920092009

~~FOLIOFOLIO

2009200920092009200920092009~~~~~20122012FOLIO

2009FOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIO2009200920092009200920092009200920092009200920092009200920092009200920092009200920092009200920092009200920092009200920092009200920092009FOLIOFOLIOFOLIO200920092009FOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIO200920092009200920092009200920092009FOLIOFOLIOFOLIO2009FOLIO2009FOLIO2009FOLIO20092009WEN2009WENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWEN200920092009200920092009WENWENWENWEN

20122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012WENWEN

2012WENWENWENWENWEN

2012WENWENWENWEN

2012WEN

2012WENWENWEN

2012WEN

2012WENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWEN

2012WENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENPORTPORTPORTFOLIOFOLIOPORTFOLIOFOLIOFOLIOPORTPORTPORTPORTPORTPORTFOLIOPORTFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIO

2009200920092009FOLIOFOLIOFOLIOFOLIOFOLIO2009200920092009200920092009200920092009FOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIO200920092009FOLIO2009FOLIOFOLIOFOLIO200920092009

~2009200920092009~20092009~

FOLIO20092009200920092009

~2009~~~~2012FOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIOFOLIO

2009FOLIO2009200920092009200920092009200920092009200920092009FOLIO20092009FOLIO20092009WEN2009WENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWEN200920092009200920092009200920092009200920092009WENWENWENWEN

201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012201220122012WEN

2012WENWEN

2012WENWEN

2012WEN

2012201220122012WEN

2012WEN

2012WENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWEN

2012WENWENWENWENWENWENWENWENWENWENWENWEN

2012WENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWENWEN