Date post: | 04-Apr-2018 |
Category: |
Documents |
Upload: | tianxiaoyang |
View: | 222 times |
Download: | 0 times |
of 44
7/30/2019 Tianxiao Yang's Portfolio
1/44
Portfolioof Tianxiao Yang (David)
CERTIFICATION:
I certify that the work included in thisportfolio is my own original work.
Work included which was conductedas part of a team or other group is
indicated and attributed as such theother team members are named and
a true description of my role in theproject is included. Signature:
.
7/30/2019 Tianxiao Yang's Portfolio
2/44
HELLO!Welcome to Tianxiao Yang (David)s portfolio.Email:[email protected] Phone:+86 13810737158
7/30/2019 Tianxiao Yang's Portfolio
3/44
CONTENTSInteractive Design
E-recycling | Fonts Selector | Health Balance
Integrated Design Strategy| Meta U |
OthersGraphic Design | Advertising Creativity | 3D & Game
7/30/2019 Tianxiao Yang's Portfolio
4/44
Interactive Design
E-recycling
7/30/2019 Tianxiao Yang's Portfolio
5/44
An interactive website helps people be aware of E-recycling.
7/30/2019 Tianxiao Yang's Portfolio
6/44
KnowMore
AboutElectronicRecycling
Category: Interactive DesignDuration: Jun 2011Other Team Members:Tianyu Ye, Tongyan Tang, Yuyang Liu.
* As the team leader, Iorganized and participatedin the entire processes of thisproject, including conceptdevelopment, data collection
and analysis, visual design, andcomputer coding.
Description
This is an interactive website that helps
people to learn more about electronic
recycling. It was the nal project I made
for the course:interactivetechnictomultimedia.
The intent of this nal project was to
apply the interaction design principles
and ActionScript 3.0 to build an
interactive website for a chosen subject.
As all group members are big fans ofelectronic devices, we initially focused on
some new gadgets, such as the emerging
IPHONE 4 in particular at that time.
However, when we did more research on
the product life cycle of these electronic
devices, a new topic came to our mind.
We became curious about where the
old devices eventually go when a new
generation comes out. After some quick
research, we realized that this became
a more meaningful topic and have a
great sense of urgency as part of todays
environmental crisis.
Background
Fast upgrading of technology, falling
prices, and shortened product lifecycle
have led to fast growing of electronic
waste around the world: about 50 milliontons of E-waste produced each year.
Many developed countries export these
E-wastes to developing countries, which
become a huge threat to environment
and human lives there.
Yet, most of those abandoned electricaldevices contain some valuable parts and
materials. Hence, the correct approach
to solve the electronic waste problem is
to recycle them in appropriate manner.
It becomes urgent to teach people
knowledge and skills about recycling.
7/30/2019 Tianxiao Yang's Portfolio
7/44
How we do it?
Phase I - Infomation organization
After collecting some information, we rst classied and
organized them in order to convey the idea accurately.
Our goal was to let people be aware of two things: the hazard
of the electronic waste and the measure to deal with it. So we
divided all the information into two categories: the situation
and the measure. The information structure is given below:
Phase II - Visualization
PrototyPe
In order to make theinformation be more focused,
we arranged the two parts
of information vertically: the
entire contents are organized
on a long sheet and divided
into portions, and people can
view one port at a time as they
navigate through the website.
Hg
Pb
Cr
Hazardous materials Damage to human
Measures
Index
The situation
The measure
Damage to earthWe try to use the image to convey the information and try to
use interaction language, such as an interactive game.
Visualdiesign
It didnt take us long time in creating a green design that
contains a strong sense of ecology. In addition, we designed
elements in simple styles, which helped us to meet the tight
timeline and saved us plenty of time in coding in production.
Wood texture
FONT: HELVETICA
Content -
Regular 8pt
TOPIC -BOLD 10pt
Typographic rule Green gradient# b5bc27# 9ba61d
Yellow# f3efb6
Yellow(with texture)
7/30/2019 Tianxiao Yang's Portfolio
8/44
Interactive page
The damagefromthe electronic wastetonature.
Information page
The disease thatthe electronic wastemay causetopeople.
Information page
The ratioofthe recycledelectronic wastein last 5 years.
Information page
The measurecan be adopted
bydifferent roles.
Game page
A small gamecultivatesthe habbitofelectronic recycling.
Index page
HERE
IS
THEFINAL
WORK:
7/30/2019 Tianxiao Yang's Portfolio
9/44
Sept 1: Click
Drag the scroll button to interactive
Image makes it easier to understand
Sept 2: Drag
Misson complete !
7/30/2019 Tianxiao Yang's Portfolio
10/44
Interactive Design
Font selector
7/30/2019 Tianxiao Yang's Portfolio
11/44
A tool that helps designers to nd the right font.
7/30/2019 Tianxiao Yang's Portfolio
12/44
Font selectorA tool that helps designers to nd the right font.
Category: Interactive DesignDuration: Jul 2012 - Sept 2012Other Team Members: Tianyu Ye
* I participated in every parts ofthe project, including: problemanalysis, wireframe creation,and visual design.
Uninstalled - You may not
have the set of suitable fonts
installed in your own font list.
Unorganized - The font
lists are poorly organized (in
alphabetical order) so that the
only way to nd your desirable
font is to know its name.
Unreadable - The fonts in
the font list are too small toexamine. Even if you can, in
most softwares, the font is not
going to be displayed at your
desired letters, but only at the
default word SAMPLE.
CloUddatabaseCreate a centralized database that contains thousands of fonts
for users to choose from. The problem of a certain font type not
installed on a local computer will never happen.
organizedCategory
Introduce different categories: style, year, company, and viewing
history, to facilitate the search of fonts.
Cleardisplay
Provide a clear view of fonts in shape and color. Enable exible
choice of letters for displaying the font.
easiertoUse
Implement dynamic control (e.g. voice, touch, gesture) for a more
interactive experience.
noinstalled
disordered & indistinCt
The problem:The process of selecting a desirable font is a painful experience:
The solution:To achieve the goal - create a tool that can help designers to nd
the desirable font more easily and quickly, the previous problems
we mentioned should be resolved, and some new forms of
interaction should be create to simply the font selection process.
T
CLEARDISPALY
sans serifserif
7/30/2019 Tianxiao Yang's Portfolio
13/44
Wireframes:Basing on the priceples, we drew the sketches and the wireframes.
The structure is divided into two parts: selection& comParison.
selection-Help users to nd the right font easily and quickly.
comParison -Help users to compare their selected fonts clearly.
selectionPart
Main catagory hierarchy Second catagory hierarchy Fonts hierarchy Details hierarchy
This page lists all properties of
fonts. Users can rst select one
main category based on their
targets into the next level.
Items in the category are listed
vertically so that the user may
jump to a different category at
any hierarchical level whenever
they want.
When the user chooses one
category in the previous
hierarchical level, that category
will be expanded, while others
will be sent to the backgroundwith minimum display.
In this hierarchy level, users
can choose one sub-category
under main category.
After the user chooses
one sub-category from the
previous hierarchical level, it
will be further expanded to
display all of the fonts withinthat sub-category.
In this step, user can change
the letters for displaying the
font.
After the user selects one
font from the previous
hierarchy, details of that font
will be shown.
It will provide a link for the
user to buy or to share the
font. And the user can also
add the font to their favorite
list.
7/30/2019 Tianxiao Yang's Portfolio
14/44
comParisonPart interaction
Comparison list Details of comparison list
After adding the fonts into
the comparison list, the users
can compare the fonts as it is
shown above.
In this view, nothing but
only the selected fonts are
displayed, because the users
focus in this step is to compare
rather than to search.
When the user selects a
font, the tool will expands
information of that particular
font with more details. This issame as in selection part.
slide
pinch
Slide to change background color
Since the tool is designed for smartphone and tablet, touch
and gesture are good ways to add interaction. The tool offers
the way to switch between three commonly-used colors by
gestures for displaying fonts, which helps users to gain more
comprehensive understanding of the fonts.
Pinch to change tracking
The tracking space is a frequently changed property for fonts
display. Using the pinch gesture implemented by the tool, the
user can easily and intuitively adjust the tracking space to the
right level.
7/30/2019 Tianxiao Yang's Portfolio
15/44
UI design:
Orange# df483d
Gray# ebebeb
Dark gray# 464646
Black# 000000
colors:
Less color makes the users concentrate on the content.
sPacing:
0.9cm The optimal and minimun width for click. Save more room for
the content.
1.5cm A height that can be t for the font dispalyed clearly.
Clear display is the most
important rule for
the UI design.
7/30/2019 Tianxiao Yang's Portfolio
16/44
Interactive Design
Health Balance
7/30/2019 Tianxiao Yang's Portfolio
17/44
A moblie application helps people to keep a balanced diet.
7/30/2019 Tianxiao Yang's Portfolio
18/44
Health
BalanceCategory: Interaction Design
Duration: Jun 2011 - Jul 2011Other Team Members:Lei Zhao, TianYu Ye, Yingjie Chen, Yiyi Yin.
* In this project, I try to provide guidance onthe idea of maintaining a balanced diet - atraditional concept inherited from Chinesemedicine. After establishing this core concept,I participated in conducting the user researchand sketching the frameworks.
A moblie application helps people tokeep a balanced diet.
Research
After deciding to design a mobile app to help people to keep
healthy diet, we rst created an online survey to nd out what
kind of health problems are the primary concern to our target
population (Chinese with age between 20 and 40).
Q: Do you care about yourhealth situation?
Q: Do you care about yourdiet?
Q: Do you have an exerciseplan and stick to it?
Q: What do you think is themost important factor tomaintain healthy life?
Q: Why some people do notcare about their diets?
Q: Why some people donthave an exercise plan or fail tostick to the plan?
Yes
Yes
Yes
Keep balance
Too complicate
No need
Diet
Dont have to
Lack of urgence
No
No
No
Sport
Only care aboutteast
Too boring
Sleep
7/30/2019 Tianxiao Yang's Portfolio
19/44
Interview
We selected dozens of people for our interview. We asked them
questions by telephone or by email. Here are two people from
our interview that represent two typical situations:
thequsetion
1 - Why do you think keep balanced diet, sport and sleep is the
most important factor to maintain healthy?
2 - What is your plan to keep your body healthy?
3 - Do you need someone to motivate you to stay on top of your
plan?
Personais a university student who is living on campus. He
thinks that controlling his diet is the most important thing for him
to keep healthy, because as a student he has sport class every
week and he spends at least 40 minutes walking to school from
his dorm. So he is not worried about lacking exercises. He is a
little bit overweight, so he really cares about his intake. I always
spend a lot of time deciding which kind of food is healthy for
me. I really hope someone can give me some suggestions about
that. He said in the interview.
PersonBis an ofce lady. She cares a lot about her health,
and she thinks keeping balance between intake and calorie
consumption is important. However, the work pressure always
prevents her from staying on her exercise plan. I need to be
urged. She mentioned in the interview.
Features
After analyzing the data collected from the online survey
and interview, we conclude that the most important factor of
keeping healthy is keeping balance between energy intake and
consumption; and this process should be routinely monitored.So we decide to design an app to have two functions:
FocusonBalance routinemonitoring
Competitive
1, Contain evaluation and advices
2, Clear information record3, Both input and outlay
1, Lack of food information
2, Bad use experience
3, Can not share
1, Contain the feature of foods
2, Elaborate information3, Able to share
1, Not fulled to individual
2, No consumption information.
Healthy Calorie Royal Cookbook
7/30/2019 Tianxiao Yang's Portfolio
20/44
Persona
Person1 - missWang
Person2 - mr. qiu
Scenarios
Age
Phone
Job
Transportation
Sport time
Problem
Weakness
Goals
Age
Phone
Job
Transportation
Sport time
Problem
Weakness
Goals
22
iPhone4
Student
On foot
2 hours / week
Gain weight
Lack of persistence
Lose weight
27
HTC G6
Programmer
By bike
0 hours / week
Declining health
Reluctant to do exercise
Keep a good sport habit
1
1
2
2
3
3
4
Miss Wang is having lunch at school.
Mr Qiu commutes on bike every day.
The app will automatically search the
database to nd out the information of
the food.
The energy consumed will be recorded to
energy balance bar in the app.
The energy will be added to the energy
balance bar in the app.
Take a pic or scan the information chart
of the food before eating.
The app will automatically detect the
distance and time he commuted by LSB.
7/30/2019 Tianxiao Yang's Portfolio
21/44
Wireframe
Here are some of the wireframes.
It mainly divideded into two
parts: intake and expenditure.
Interface design
intakePart
intakePart
exPenditurePartmenu- Balance
menu- Balance
exPenditurePart
7/30/2019 Tianxiao Yang's Portfolio
22/44
Integrated Strategy Design
Meta U
7/30/2019 Tianxiao Yang's Portfolio
23/44
An integrated design for MetaDesign Inc. campus recruitment event.
7/30/2019 Tianxiao Yang's Portfolio
24/44
MetaDesignRecruitment
Event.Category: Integrated Strategy DesignDuration: Mar 2012 - May 2012Other Team Members:Lei Zhao, Mian Wang, Wanjun Chu, Yingjie Chen.
* Led a team in conducting research, strategicplanning and design for Recruitment Event.Presented the nal solution to the seniormanagement at MetaDesign Inc.
thescenario:MetaDesign was launching a series of campus
recruitment events at different universities in China. The
recruitment aimed to nd talented junior designers and offered
them internship and trainings.
thetaskathand:Create advertisements in either print or
digital format to promote the campus recruitment event. The
entire project included the design of colors, shapes, typography,
images, and testimony and the production of real materials with
headline and body contents.
Background
thecomPany:MetaDesign is a worlds leading agency in brand
design. It helps companies to promote their public perceptions
by designing their brands and communicating the identity of
companies and their products to customers in print or digital
format.
theoFFice:MetaDesign at Beijing offers professional
environment, exciting opportunities, cross-disciplinary teamwork,
renowned clients, and an incentive corporate culture that
recognizes the importance of work-life balance.
7/30/2019 Tianxiao Yang's Portfolio
25/44
Strategythegoal:We spent a lot of time in clarifying the ultimate goal for the campus recruitment events in campus. Recruitment
is just a method, but the goal, according to our communication with MetaDesign, is
To discover talented students at targeted campus.
thequsetions:If the answer to any one of the questions below is negative or unsure, it will be impossible for us to
establish a good strategy for MetaDesign to achieve its recruitment goal.
To discover:
- Is the company well-known?
- Have Chinese people been familiar
with the concept of brand consulting ?
- Can the hiring information be
conveyed efciency?
Targeted campuses:
- Should the company launch its
recruitment events at all universities in
China or just at some targeted schools?
- What is the difference between campus
recruitment and professional job fair?
Talentedstudents:
- Who are the people that the company
is looking for?
- What is the effective way to evaluate
their capability, GPA, interview or other
methods?
- How does the company know whether
he/she is suitable for the job or not?
7/30/2019 Tianxiao Yang's Portfolio
26/44
theresearch:
40 - The whole students
7 - Heard of it before
2 - Knowing about
what Metadesign doing
15 - Lecture or workshop
7 - Interview
3 - GPA
Metadeisgn
Relevant campus
To discover:In this section, we took 40
students as our sampling group and design
a series of the questionnaires.
Q: Do you familiar with Metadesign?
Talented student:We found 17
teachers as our sampling group and
designed a series of the questionnaires.
Q: Best way to select the good students.
Targeted campus:We searched on
the internet and found the all the campus
which have relevant major.
Q: The relevant campus in Beijing.
Map of Beijing
ENHANCE AWARENESS GIVE WORKSHOP
GIVE WORKSHOP IN UNVIERSITIES AREA
TAKE ADVANTAGEOF GEGEOGRAPHY
theBrand:
We need to establish a clear brand for the campus recruitment event! There are so many similar recruitment eventsin the university. The question is on how to attract more students to attend the one given by MetaDesign. Because
MetaDesign itself is a brand consulting & design company, the project should take advantage of this. We decided to
give the recruitment event a new name MetaU, which means MetaDesign + You or University. Besides a new
name, we also realized that some marketing efforts were necessary to promote this new name into a well-known brand
that is linked to MetaDesign Company.
7/30/2019 Tianxiao Yang's Portfolio
27/44
DesignWhen our team began to design marketing materials, each member is
responsible for a particular task. However, one of our principles is to design the
entire strategy as a whole, therefore before the design process actually started,
I established a VI guideline, which provided the standards for the shape of the
logo, color, and some other basic elements.
target-Focus
Finger-Independent
target-Letter U
Logo:
Logo
VI design
Poster design
Flypaper
Environment media
Social network
App
7/30/2019 Tianxiao Yang's Portfolio
28/44
1
4
6
2
5
7
3
8
Visual identity:
1. size: Details are adjustable in
different sizes for different usages.
2. ProtectiVezone:Emphasize the
value of the logo.
3. suBBrand:It should appear
with the same look and color at all
recruitment activities, and on all related
subjects or products.
4. enVeloP
5. idcard:For students who attend
the training. The QR number on its back
links their online information with ofine
identity (o2o).
6. coPyright
7. texture
8. attendance
7/30/2019 Tianxiao Yang's Portfolio
29/44
Poster design
As a major media type at campus, poster plays a vital role in all kinds
of event promotion. Considering that MetaDesign is not very famous
in many universities, our main task is to attract as many students major
in the eld of strategy, design or communication as possible, and to
let them join our presentation to gain more information regarding
MetaDesign and its integrated design works.
7/30/2019 Tianxiao Yang's Portfolio
30/44
Flyer
As yers distributed on the street are often ignored or threw away, our
strategy is to incorporate some unique design into our yer to capture
students attention and to make them keep it.
BeVisuallyattractiVe: According to some studies of psychology,human face is the most attractive picture among all kinds of images. So
we decided to use a portrait on our yer.
BeuseFul:To add one more reason for our potential clients to keep the
yer, we made a calendar on back of it. This also increased the possibility
that they would keep our yers for a longer period of time and hence to
develop a deeper impression to the MetaDesign company.
Environment Media
stickeroneleVatorButton:When the recruitment began in
universities, the specially designed sticker on elevated button will
give directions to the employees. At the same time, it will help to
enhance the recruitment inuence in the university.
choPstickscoVer:Cafeteria is the place where students are
gathered most of the time and the chopsticks are what every
student uses each day. So we intentionally used chopsticks as one
of the environment media for our marketing effort.
7/30/2019 Tianxiao Yang's Portfolio
31/44
Social network
We planned to establish our social network to
broadcast our recruitment news and to enhance
the events inuence. We chose the local SNS,
Weibo, and Renren (the Chinese twitter and
Facebook), because each platform has millions of
active students users.
recruitmentPages lecturePages
App
It contains two parts: recruitment& lecture
recruitment:In this part, students can obtain
recruitment information. They can also share or mark
the information using the button on the top.
lecture:It is designed to make students more easily
to acquire the lecture information.
By clicking the button, the system will
automatically add a reminder, which will send anotice to the user one day before the lecture.
7/30/2019 Tianxiao Yang's Portfolio
32/44
Others
Graphic design
7/30/2019 Tianxiao Yang's Portfolio
33/44
Product brochure & christmas card design for Audi.
7/30/2019 Tianxiao Yang's Portfolio
34/44
Graphic DesignProduct Brochure
&Christmas Card
for
Category: Graphic designDuration: Nov 2011 - Dec 2011
* I had been working at theinformation technology center of
Audi China as an intern, where I hadparticipated in the HCI project for
designing the Audi product brochures.Besides that, I had also worked on a couple of
graphic design projects. Below are some of theworks I design individually during my internship.
7/30/2019 Tianxiao Yang's Portfolio
35/44
A brochure that demonstratesfeatures of Audis new generationvehicle entertaining system.
Three different kinds of Christmas card.
7/30/2019 Tianxiao Yang's Portfolio
36/44
Others
Ad. creativity
7/30/2019 Tianxiao Yang's Portfolio
37/44
Some interesting ideas. Dont be serious, just for fun : )
7/30/2019 Tianxiao Yang's Portfolio
38/44
Advertising
Creativity& Design. How to work
yourself off?
The intent of thisadvertisement
is to encouragepeople to enjoy the
sports rather thanto stay in ofce or
classroom...
7/30/2019 Tianxiao Yang's Portfolio
39/44
I dont care
The complicate theory and explanationare on the wrinkle paper and the sealon it means it is been ignored by theNIKE spirit: - JUST DO IT
The spirited guy
This is a simple advertising for Nescafe that I completed for ahomework project at the Photoshop workshop.
7/30/2019 Tianxiao Yang's Portfolio
40/44
Others
3D & Games
7/30/2019 Tianxiao Yang's Portfolio
41/44
A 3D modeling car and a game scene design.
7/30/2019 Tianxiao Yang's Portfolio
42/44
3D Modling
I nished this 3D carmodeling project withina few weeks by myself.Honestly, this was my rsttime using 3DMAX, soI followed some onlineinstruction on how to makeit the rst time. However,I found out that I couldcomplete it by myself afterI became familiar withsome basic methods of 3Dmodeling.
This experience not onlytaught me new skills,but also enhanced myunderstanding of volume,lighting, and texture.
7/30/2019 Tianxiao Yang's Portfolio
43/44
Game Design
This was a simple 3D gamedesign built by the gameengine - Unity. The user
can control an object (Itried to use the 3D carbefore, however the effectwas not very good.) topass through the movingobstacles.
This was my rstexperience of designinga game. It deepened myunderstanding of time,velocity, and sensitivity ofinteraction.
7/30/2019 Tianxiao Yang's Portfolio
44/44
The End.