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.
no.1 Vocaliod Family
DESIGN OF Andriod Theme 1
2
3
Vocaloid Family FANS Recognition
Main color?
The color sheme of HATSUNE MIKU
Emotion
One?
Features?
Or more?
Or facial expressionďź&#x;
MIUI Theme Design: Vocaloid Family 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.
no.2
DESIGN OF VI Management Administration
1
2
3
Students Youth Future Hope
Fly Up
Business Administration
工 商 Industry & Commerce
商 工
管 理
Business Administration
商 工
Fire
Flower
no.3 WIN 8 APP MetroEyes
MetroEyes
3.4. LOGO
100$
25%
30%
100$ Peak Value
3.3. Dashboard sort4
sort5
KPI + TILE
Chart title
Chart title
100$ Peak Value
3.2. Charts Chart title
3.1. Mainpage View Layout
LAYOUT
Redesign
no.3.1 ViewLayout MetroEyes
1
NEWS
2
Information Recommendation
DASHBOARD Customization
Plan 1
Subpages Toolbar KPI
Industry
Agriculture
xxx
xxx
xxx
XXxxxxxxxxxx XXxxxxxxx
KPI
Business
Technology
Industry
Agriculture
Agriculture
News Recommendation Plan 2
Settings
KPI Industry
Customization: we can never knows what do users want. Users could customize their personalized content presentation.
Agriculture xxx xxx xxx
News Recommendation At ďŹ rst, my idea focused on news layout and quick links, therefore I designed two mainpage layouts both have news recommendation.
They could use the tab we offered, such as business, technology, automobile, or sort out the tile to their liking.
no.3.2 Pie Chart Redesign MetroEyes
3
2
sia
y an m er
Hungary
R us
G
C
a hin
tan
France
rea Ko
U.
S.
Engl an d
me1 na
32%
me4
Common pie chart don't suit for presenting information in win 8 tiles.
26%
24%
China
U.S
14%
9%
England
Korea
Chart Title
na
me na
me na
t Title ar
Ch
Ch
France
Engl an d
Series 7
Italy
U.
Series 6
ka za kh s
t Title ar
rea Ko
Series 5
The sigle pie chart could be used as tiles in the mainpage as part of dashborad.
or
C
tan
Italy
a hin
Series 4
ka za kh s
Hungary
Series 3
30%
y an m er G
Series 2
sia Rus
Series 1
S.
1
26%
24%
China
U.S
14%
9%
England
Korea
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
no.3.2 Line Chart Redesign MetroEyes
1
3
2
Peak Value
Axis title
70 60 50 40 30
Series3
20
Series2
10
Data
Series Name Series Name
Series name
1. Changing the common line chart to those just display the peak value and minimum value.
Data 1 Data 2
Series name 1 Series name 2
Chart Title
Peak Value
Minimum Value
2. Display the key data in the tiles, when there 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.
德国
28
6
2美国
7哈萨克斯坦
Data
Data
Country
Country
Data
Data
Country
Country
Data
Data
Country
匈牙利
Chart title
俄罗斯
Series1
哈 萨克斯坦
Series &Data
法国
Series &Data
意大利
Series &Data
韩国
Series &Data
英国
Series &Data
美国
0
中国
Axis title
Country
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 blindness or color weakness. (Data sources: London 2012 Medal Tally. 8/7/2012).
no.3.2 Bar Chart Redesign MetroEyes
Axis title
Data Data Data
Scale
Scale Data Scale Data
Scale
Scale
Minimum Value
Data
Scale
MidValue
Data
Peak Value
Data
Data
Data scale Data Data Data Data Data scale scale scale scale scale
Data
Data
Data
Axis title
Data Data Data
Data Data Data
Data Data Data
Axis title
1
MidValue Minimum Value
Data scaleData scaleData scale Data scale Data scale
Data scale
Data
Data scale Data scale
Data Data scale Data scale
Axis title
Peak Value
2
Change the bar chart in the same way as line chart.
Data Data
emaN
Axis title
Peak Value
Chart title
Data
Data
Data Data Data
Data Data Data
Axis title
Data Data Data
Data scaleData scaleData scale Data scale Data scaleData scale Data Datascale scale Data scale
Data Datascale scale
Data scale
no.3.3 KPI + TILE MetroEyes
1
30%
3
2
30%
Subeject Name 1 . Subeject Name 2 . Subeject Name 3
Subeject Name
text
text
text
text
Time Time
Time
text
text
text
text
text
text
Time
Key word
Key word
60%
60%
Time
Key word
100%
100%
text
text
Time
Time
text
text
text
Time
text
text
text
text
text
Time
text
text
text
text Time
Time
Time
text
text
text
Time Time
Time
Key word
Time
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.
text
Time
text
Key word
Time
text Time
Time
Key word
text
text
text
text
Time
text
text
Time
Time Time
One subject - different sections in the middle line represent certain time. Grey tile contain the details, and the white tile has no content.
Multiple subjects - the middle time lines each represent a subject, they could be used to organize and diaplay the content at the same time.
no.3.4 LOGO MetroEyes
1
2
3
Eye & Pie Chart
E
+
yes Metro Eyes is developed for providing the data and news of some industries, therefore we ďŹ nally chose the charts as logo rather than eyes.
METRO EYES MetroEyes
Technology Technology
101,257 101,257 sort1 sort1
Microsoft
User Info User Info Industry Industry
+72.6 +72.6
1/9 1/9
sort6 sort6
sort7 sort7
100$ 100$
25% 25%
61% 61%
sort4 sort4
sort5 sort5
sort2 sort2
Agriculture Agriculture
100$ 100$
100$ 100$
sort10 sort10
sort11 sort11
100$ 100$
100$ 100$
sort12 sort12
sort13 sort13
101,257 101,257
1600 1600
+8% +8%
100$ 100$
100$ 100$
sort3 sort3
sort8 sort8
sort9 sort9
sort14 sort14
sort15 sort15
R
Research
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.
no.4 Appliacation Friday Night
Friday is a LBS social APP, developed to help people ďŹ nd the ofine activities or organize activities.
FR
T H I D AY NI G
no.4 SITEMAP Fridaty Night
1.0
1
Mainpage
2.0
2
Basic Info
2.0.2
Avatar
2.0.3
Activities record
2.0.4
Publish entry
Sign in & Login
3.0
Personal page
2.0.1
3
1.0.1
Activities list / Participate entry
2.0.5
Friends & message
4.0
5.0 Settings
5.0.1
5.0.2 Account Security
Publish / Manage activity
Version Info
3.0.1 Chronological & distance order
3.0.2 Quicklinks portlet: Friends, Interest list, Organizer, number of participants.
5.0.3 Logout
no.4 WIREFRAME
Mainpage & Activities
Personla information Submenu Modify Info Avatar setting Friends & message Publish entry
Apply to participate Disclaimer & State
Menu
Activities detail Map Distance to users location
ConďŹ rmďź&#x;
Participate NOW
Host
Activities page Basic Info: time, site, type, etc.
Mainpage
1
User Avatar Submenu
Or search activities by entering key words
Send application
List and brief intro of activities
Discussion Participants Including necessary personal account info, the application message that system provided, and optional add info.
Menu Q & A ( follow the discussion in which there may have a question)
Q&A Discussion Show both
User could choose the display mode
Map-Show the activities according to distance
Arrange in distance from the user
no.4 WIREFRAME User’s Personal Page
1 Past activities
Avatar
Personla information Submenu Modify Info
Pictorial record
Avatar setting
Host Event information time, site, etc.
Friends & message
Activities record
Discussion Number of Participants Acitivity duration
Avatar Settings (it is also a little game, user could create their avatar as they like, could also use the avatar parts we offered)
Publish entry
Menu
Avatar gallery
Participants (avatars and quicklinks to personla page) Time point
no.5 WEB UI DESIGN OF
5.1. Miku & Mirai: INFO & Vedio Sharing Site
5.2. NET Insight
5.3. Sharepoint
Analysis Studio
no.5.1
MIKU&MIRAI WEB UI
The web aims to provide details information about Hatsune Miku's projection live concerts, introduce some projection technology, also share relevant videos.
no.5.2 1
NET Insight-Topology Visualization The different shape and size represent different host cluster amount.
2
3
4
Amount of Host Cluster NET Insight is developed for providing real-time infomation of Microsoft’s servers around the world.
The quantity level of host become clear at a glance.
Microsoft
R
Research
NET Insight
no.5.3
Sharepoint Analysis Studio
1
2
Main page ANALYSIS Analysing
Details
Details 1
Details 2 General Report
Procesing
Details 3 MAINPAGE ITEM LIST
RESULT DISPLAY (GENERAL REPORT) Sharepoint Analysis Studio - developed for providing the data analysis result in a time point.
no.5.3
Sharepoint Analysis Studio 1
2
3
ANALYSIS
MAINPAGE ITEM LIST
RESULTDISPLAY (GENERAL REPORT)
Improve color consistency
Redesign the button
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.
Microsoft
R
Research
LOGO
ANALYSIS STUDIO
1
2
3
no.6 Illustration
Corel
Painter SAI
Ps
Guardian Deity of Tibet March 2012
Menma (The Flower We Saw That Day. Ano Hi Mita Hana no Namae o Bokutachi wa Mada Shiranai) November 2011
kazami yuuka (Danmaku game. TOUHOU Series) February 2011 12
Reed & Buffalo. January 2012
Rage of Bahamut. October 2012
no.7
Storyboard & Manga
ComicStudio
move house The heroine lived in the mountain with her dragon pets. They has to moving again because of the human development activities.
mail carrier An little angel lived in earth helps people send their wish lists to god.
happy time Several children live in a small town ďŹ nd a broken pipe in a hot summer day.
boys Two boys want to ed away from the war.
double world A girl live in a closed world try to go outside and has some adventures.
no.8
Characters & Sketch
SAI
Ps
Ai
Dragen Banality
Tiger Cattiness & Rich Monkey Couple Shrewd & Millwright
Biddy Hen Chatter & Fight
Animal series The heroine's father and the folks of her hometown.
Animal series The heroine and her master. She is a tiger, her master is a monkey. She is growing up a little more in the left picture.
Animal series The 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 University From left to right: Culture-Music Department. Academic Forum. Public relation/serving Department. OfďŹ ce Support Department.
Trumpet 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
T R POFOLIO 9 0 2 0 2~ 01IO 2OL
Thank You For Your Time!
LE W EN
LE EN
W
F PORT
E MAIL
MOBILE
W.LOTUS@QQ.COM
(86)151 1698 8269
LE WEN
Graduate. Tsinghua University