PORTFOLIO SHOW. 2013. SETLIST INTRO
INTERFACE DESIGN for APP
P1-P4
SET 1
INTERFACE DESIGN for COMPUTER
P5-P12
SET 2
INTERFACE DESIGN for METRO-STYLE
P13-P19
SET 3
ILLUSTRATION
P20-P23
SET 4
CHARACTER DESIGN
P24-P30
SET 5
STORYBOARD & MANGA
P31-P35
ENCORE
SKETCHES & OTHERS
P36-P44
Interface Design
Figure Legends
PORTFOLIO SHOW
INTRO. SET 1. SET 2
Design for APP INTRO
Design for computer SET1
Light color indicated the proportion I finished.
Design for Metro-style SET 2
Dark color indicated the proportion finished by collaborators.
50% For example, this figure mean I am one of two person participated or finished the contents showed in the page.
Participation degree
Beginning point (CCW) Dark color indicated the phase I didn't participated in or haven't finished.
75% Light color indicated the phase I participated in and finished.
For example, this figure mean I participated in or finished the first three quarter of the project.
Progression Month Year S
Design date. The date in dark color is the estimated time I spend in this work, it is not exactly accurate.
M
T
W
T
F
30
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Relevant information Design Theme
PORTFOLIO SHOW
SETLIST PART
Design Type
Design Tools
Page Number
100% Participation degree
100% Progression February 2012 M
T
W
T
F
30
S
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Relevant Info MIUI Theme Design: Vocaloid Family Note. This 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.
PORTFOLIO SHOW
INTRO
ANDROID
ICON THEME
Ai
Ps
1
100% Participation degree AT&T
AT&T
100% Progression January 2012 M
T
W
T
F
30
S
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Relevant Info Guosen Golden Sun Mobile Stock Application To be consistency and clarity, I choose the dark red because it is more elegant, and it make people relatively feel calm than other red colors. The interaction flow is simpler than the original, and all subcategories are sorted into first level menus.
PORTFOLIO SHOW
INTRO
GUOSEN GOLDEN SUN
ICON THEME
INTERFACE
Ps
2
100% Participation degree
25% Progression November 2012 M
T
W
T
F
30
S
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Relevant Info FridayNight It is a LBS social APP in development, it seeks to help people find the offline events or organize an event. The interaction flow has been finished, and it can be divided into four levels.
PORTFOLIO SHOW
INTRO
FRIDAY NIGHT
SOCIAL APP
INTERACTION FLOW
INTERFACE
Omni Graffle
Ai
3
25%
Service Blueprint
16:9
Participation degree
0:00 / 3:59
Value Diagram
100%
Personas
16:9
Progression Prototype
Bodystorming
0:00 / 3:59
January 2012 M
T
W
T
F
30
S
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
16:9
0:00 / 3:59
16:9
Video Sketch WALKMAN Travel APP: Service design & Trip. Taobao Key words: Walking, Sharing, Achieving The other parts of the project report includs Hunt statement, Brainstorming & Touch points, Journey map, Stakeholders, Scenario.
PORTFOLIO SHOW INTRO
Relevant Info trip.taobao.com
0:00 / 3:59
Service Blueprint
Value Diagram
Video Sketch 1/4
Fl
4
50% Participation degree Phase 1
100% Progression April 2012 Phase 2
May 2012 July 2012 S
M
T
W
T
F
30
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Relevant Info Sharepoint Analysis Studio 1 It is developed for providing the data analysis result in a given time point. The development of graphical interfaces has three major phases. The improvement focus on color consistent and maximize the available space. The right part is the process of improving the main layout.
PORTFOLIO SHOW
SET 1
Microsoft
R
Research
Phase 3 SHAREPOINT
ANALYSIS STUDIO
INTERFACE
D4 B4 5
50% Participation degree Sketchow
100% Progression April 2012 Phase 1
May 2012 July 2012 S
M
T
W
T
F
30
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Relevant Info Sharepoint Analysis Studio 2 It is developed for providing the data analysis result in a given time point. The development of graphical interfaces has three major phases. The improvement focus on color consistent and maximize the available space. The right part is the process of improving the processing and detail page, which is one of the core function of this software.
PORTFOLIO SHOW
SET 1
Microsoft
R
Research
Phase 3 SHAREPOINT
ANALYSIS STUDIO
INTERFACE
D4 B4 6
50% Participation degree Step 4
Step 1
50% Progression April 2012 August 2012 S
Step 2
Step 3 NET Insight 1 It is developed for providing providing real-time infomation of Microsoft’s servers around the world. This is the use flow of Latency Heatmap, which allows users find information through three level and back one level.
PORTFOLIO SHOW
SET 1
M
T
W
T
F
30
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Step 5
Step 6
Relevant Info Microsoft
R
Research
NET Insight INTERFACE
Ai
D4 B4 7
50% Participation degree
Phase 1
75% Progression
Phase 2
July 2012 M
T
W
T
F
30
S
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Phase 3
Relevant Info NET Insight 2 It is developed for providing providing real-time infomation of Microsoft’s servers around the world. This is the Overview interface (data center map) of NET Insight, which allows users access the target data center quickly.
PORTFOLIO SHOW
SET 1
Microsoft
Phase 4
R
Research
NET Insight INTERFACE
Ai
8
50% Participation degree Phase 1
75% Progression June 2012 M
T
W
T
F
30
S
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Phase 2
Phase 3
Relevant Info NET Insight 3 It is developed for providing providing real-time infomation of Microsoft’s servers around the world. This is the Net Topology interface (host clusters index) of NET Insight, which could help user find the target host clusters.
PORTFOLIO SHOW
SET 1
Microsoft
R
Research
NET Insight INTERFACE
Ai
9
30%
50% Participation degree
Step 1
Step 1
50%
100% Progression
September 2012 S
Step 2
Phase 2
M
T
W
T
F
S
30
1
2
3
4
5
6
7
8
9
10
11
12
14
15
16
17
18
May 2012 S
M
T
W
T
F
30
1
2
3
4
5
6
13
7
8
9
10
11
12
13
19
20
14
15
16
17
18
19
20
21
22
23
24
25
26
27
21
22
23
24
25
26
27
28
29
30
31
1
2
3
28
29
30
31
1
2
3
Phase 2
R
Research
SET 1
Step 2
Relevant Info Microsoft
PORTFOLIO SHOW
S
Data APP
Provision ProďŹ ler
INTERFACE
Ai
10
Phase 1
Phase 2
Phase 3
30% Participation degree
50% Progression April May 2012 S
Ai
PORTFOLIO SHOW
SET 1
INTERFACE
Yading
Microsoft
M
T
W
T
F
30
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
R
Research
Relevant Info
11
100% Participation degree Secondary page 1
30% Progression June 2012 S
Main Page Miku & Mirai: Web page design The web aims provide details information about Hatsune Miku's projection live concerts and sharing some videos in the second page. It also introduces some projection experiments.
PORTFOLIO SHOW
SET 1
M
T
W
T
F
30
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Secondary page 2
Relevant Info Miku & Mirai
Secondary page 3 Web page
Ps
Ai
12
LOGO
30%
KPI
Industry
Agriculture
101,257
+72.6
1/9
100$
100$
sort1
sort6
sort7
sort10
sort11
100$
25%
61%
100$
100$
sort4
sort5
sort2
sort12
sort13
100$
100$
101,257 sort3
1600 sort8
Participation degree
√
XXxxxxxxxxxx XXxxxxxxx
+8% sort9
sort14
20% Progression June 2012 S
sort15
M
T
W
T
F
30
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Relevant Info Metro Eyes Developed for providing the news and visualized data of some customized industries. The up or down arrows showed in the top of each tile means the trend of the key data. The key words are palced on down left corner.
PORTFOLIO SHOW
SET 2
Ai
LOGO
INTERFACE Metro Eyes
Microsoft
R
Research
13
Pie Chart Chart Title Chart Title
26%
30%
70% Chart Title
Chart Title
Chart Title
Chart Title
Axis title
Series Name Series Name
Line Chart Minimum Value
Peak Value
Axis title
Chart Title
Chart Title
Peak Value
Minimum Value
Data
Minimum Value
65%
Data
Peak Value
Minimum Value
32%
Chart Title Data
Histogram
Peak Value
Data Data Data Data Data Data Data Data Data Data Data Data
Scale
July 2012
R
Research
Scale Data Scale Data
Microsoft
Scale
Chart Design Metro Eyes
Data
Ai
Scale
Minimum Value
Scale
Peak Value
21
22
23
24
28
29
30
31
25
26
27
25%
100%
Progression
Participation degree
August 2012 7
PORTFOLIO SHOW
SET 2
1
2
3
4
5
8
9
10
11
12
6
14
China
U.S
9%
14%
9%
England
Korea
England
Korea
7%
5%
7%
5%
France
Italy
France
Italy
S.
Engl an d
PORTFOLIO SHOW
SET 2
France rea Ko
Series 1 Series 2 Series 3 Series 4 Series 5 Series 6
Engl an d
Composite pie chart example & Color scheme Data sources: London 2012 Medal Tally. 8/7/2012 The single charts are the details of each section of the pie chart in the top right corner, also provides links to the relevant news.
Series 7 Series 8 Series 9 Series10 Series 11 Series 12
S.
14%
U.
U.S
C
a hin
China
Ital y
U.
France rea Ko
24%
ka za kh sta n
Hungar y
26%
24%
y an rm
a hin
Ital y
26%
Ge
C
sia Rus
y an rm
Hungar y
Ge
sia Rus
ka za kh sta n
Series 1 Series 2 Series 3 Series 4 Series 5 Series 6
Series 7 Series 8 Series 9 Series10 Series 11 Series 12
15
Type 1
Data
70
60
60
50
50
40
40
30
Series3
20
Series2
10
Series1
韩国
法国
意大利
哈萨克斯坦
德国
俄罗斯
匈牙利
7
英国
6
美国
意大利 6
5
Series1
0
中国
法国 8
4
Series2
10
匈牙利 4
韩国 10
3
Series3
20
俄罗斯 4
英国 16
2
30
德国 5
美国 28
1
哈萨克斯坦 6
中国 30
0
Category
Type 2
70
8
9
10
1
2
3
4
5
6
7
8
9
10
Data1 Data2
30
16
Category 1 Category 2
1中国
3英国
28
10
2美国
4韩国
Data1 Data2 Category 1 Category 2
Axis title
Axis title
line chart example & Color scheme Data sources: London 2012 Medal Tally. 8/7/2012 The single charts in the righr part are the details of each line of the chart in the top, also provides links to the relevant news.
PORTFOLIO SHOW
SET 2
Series 1 Series 2 Series 3 Series 4 Series 5 Series 6
Series 7
Series 1
Series 8
Series 2
Series 9
Series 3 Series 4 Series 5 Series 6
Series 10 Series 11 Series 12
Series 7 Series 8 Series 9 Series 10 Series 11 Series 12
16
Type 1 Gold Sliver Bronze
Type 2 Gold Sliver Bronze
Axis title
Data Data
Data
Data
Data
Data Data
匈牙利
俄罗斯
德国
哈萨 克斯坦
意大利
法国
韩国
英国
美国
中国
Data
Data
中国
Data 美国
Data
英国 韩国 法国 意大利 德国 俄罗斯 匈牙利 Sliver
英国
16
韩国
10
法国
8
意大利
6
哈萨克斯坦
6
德国
5
俄罗斯
4
Sliver
Data
Data Data
中国
Data Data
Data Data
17
美国
14
英国
11
韩国
4
法国
8
意大利
5
哈萨克斯坦
0
德国
10
俄罗斯
16
Gold Sliver Bronze
美国
Data scale
英国
匈牙利
1
Bronze
Data scale Data scale
法国
4
Data
Data scale
韩国
匈牙利
Data
Property (Unit)
中国
美国
28
Series Name Series Name
Data
萨 克斯坦
Gold
30
Data
Axis title
Property (Unit)
Gold
Data Data
中国
Type 3
Data scale
Data scale
意大利 哈萨克斯坦
Data scale
德国
Data scale
Data scale
中国
俄罗斯 匈牙利
Gold
Sliver
Bronze
Histogram example & Color scheme Data sources: London 2012 Medal Tally. 8/7/2012
Data scale
Data scale
Data scale
Series 1
Series 5
Series 2
Series 8 Series 9
Series 3
14
美国
18
英国
10
韩国
6
法国
9
意大利
3
哈萨克斯坦
0
德国
7
俄罗斯
15
匈牙利
3
Series 4
PORTFOLIO SHOW
SET 2
17
Timeline chart 1 This chart could be used to organize and compare the information generated by one subject in a long timeframe.
PORTFOLIO SHOW
SET 2
18
Timeline chart 2 This chart could be used to organize and compare the information generated by multiple subjects in a long timeframe.
PORTFOLIO SHOW
SET 2
19
Illustration
Corel
Painter SAI
PORTFOLIO SHOW
SET 3
Ps
03
01
02
Guardian Deity of Tibet March 2012
Reimu Hakurei (Danmaku game, TOUHOU series) January 2009
PORTFOLIO SHOW
SET 3
20
03
Rage of Bahamut. October 2012
PORTFOLIO SHOW
SET 3
21
04
05
Rabit girl on the moonlight sea March 2011
Menma (The Flower We Saw That Day. Ano Hi Mita Hana no Namae o Bokutachi wa Mada Shiranai) November 2011
PORTFOLIO SHOW
SET 3
22
kazami yuuka (Danmaku game. TOUHOU Series) February 2011 12 06
Reed & Buffalo. January 2012
PORTFOLIO SHOW
SET 3
23
Character Design
SAI
PORTFOLIO SHOW
SET 4
Ps
Ai
Animal series The heroine and her master. She is a tiger, and her master is a monkey. She is growing up a little more in the left picture.
PORTFOLIO SHOW
SET 4
24
Animal series The heroine's father and the folks of her hometown.
PORTFOLIO SHOW
SET 4
25
Animal series The buffalo sibling and little dragon.
PORTFOLIO SHOW
SET 4
26
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.
PORTFOLIO SHOW
SET 4
27
Gramophone boy
PORTFOLIO SHOW
SET 4
28
Trumpet village
PORTFOLIO SHOW
SET 4
29
Anthropomorphic logos for Graduate union of Tsinghua University From left to right: Public relation/serving Department. OfďŹ ce Support Department. Academic Forum. Culture-Music Department.
PORTFOLIO SHOW
SET 4
30
Storyboard & Manga
ComicStudio
PORTFOLIO SHOW
SET 5
The heroine lived in the mountain with her dragon pets. They has to moving again because of the human development activities.
PORTFOLIO SHOW
SET 5
31
Mail carrierďźšAn little angel lived in earth helps people send their wish lists to god.
PORTFOLIO SHOW
SET 5
32
DOUBLE WORLD A girl live in a closed world try to go outside and has some adventures.
PORTFOLIO SHOW
SET 5
33
BOYS Two boys want to ямВed away from the war.
PORTFOLIO SHOW
SET 5
34
GROWN SLEEPING BEAUTY Witch's birthday party. Adapted from sleeping beauty.
PORTFOLIO SHOW
SET 5
35
Sketches & Others
Ps
PORTFOLIO SHOW
ENCORE
PORTFOLIO SHOW
ENCORE
36
PORTFOLIO SHOW
ENCORE
37
PORTFOLIO SHOW
ENCORE
38
PORTFOLIO SHOW
ENCORE
39
PORTFOLIO SHOW
ENCORE
40
Tree Hotel
PORTFOLIO SHOW
ENCORE
41
Copy works: 田中 達之. Cannabis Works. P01, 02
PORTFOLIO SHOW
ENCORE
42
Copy works: Anatomy for artists. Sarah Simblet
PORTFOLIO SHOW
ENCORE
43
100% Participation degree
100% Progression June 2009 M
T
W
T
F
30
S
1
2
3
4
5
S 6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Relevant Info Business Administration Major
LOGO
T-Shirt
Ps
The logo is the transformation of the ďŹ rst two Chinese characters which means Business administration, it is an uplifted bird by a hand.
PORTFOLIO SHOW
ENCORE
44