Post on 12-Mar-2016
description
transcript
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