X XIN SONG
2017-2018
JUNIOR PORTFOLIO
4
5
JUNIOR PORTFOLIO
2017-2018
Xin Song
6
7
INTRO
My name is Xin Song. This portfolio is compilation of my works of this term. I have always been full of passion and excitement during the term that I enjoyed every opportunity to face all the challenges and obstacles. Many of the topics of the projects were decided because of my own interests and preferences, so the process of completing them was fulfilling. The past year has been a wonderful one, and I believe this year will be evident in my future career.
8
FUTURISM POSTER
NEW YORK TIMES BOOK REVIEW
TYPE
MY FIRST PICTURE DICTIONARY
CRAZY SEXY COOL
9
DESIGN
10
POSTER DESIGN
FUTURISM
INSTRUCTOR: CARIN GOLDBER
11
Futurist Manifesto
1909—1944
FUTURISM POSTER We was assigned a genre/movement in design history. Centered on the term “Futurism”, I designed a poster for an exhibition at MoMA for their genre. The foundation of the designing of the poster was the utilization of futurism’s first edition, newspaper le Figaro. The characters of the portfolio were composed through the random composing in futurism. “I as red” was laid in the middle of the page, increasing the information of newspaper in the background. For example, the logo and address of MoMA.
Reconstructing the universe
12
POSTER DESIGN
FUTURISM
INSTRUCTOR: CARIN GOLDBER
13
T H E M US E U M O F M O D E R N A RT
ITALIAN
21th Sep 2012
16th Jan 2012
Cubism
FIRST DRAFT
Fauvism
Futurist Manifesto
Art Deco Surrealism
1909—1944
11 West 53th Street NYC 10019
Reconstructing t he uni ve r s e
14
NEWSPAPER DESIGN
NEW YORK TIMES BOOK REVIEW We was assigned a series of New York Times Book Reviews about cover, logotype and interior pages. The Review publishes long-form reviews and essays, often by well-known writers, original poetry, and included letters and personals advertising sections that had attracted critical comment. In each case, within the existing New York Times design grid, we engaged in an appealing and original art direction. We designed and art directed distinctive cover art for the sections and also produced illustrations going along with the articles. We faced different challenges in each section, depending on the criteria. Within the same system, black-and-white motion picture and colored picture were used. By applying the illustration and the characters alone, the system worked out.
NEW YORK TIMES BOOK REVIEW
15
16
FIRST DRAFT
NEWSPAPER DESIGN
NEW YORK TIMES BOOK REVIEW
INSTRUCTOR: CARIN GOLDBER
17
18
NEWSPAPER DESIGN
NEW YORK TIMES BOOK REVIEW
INSTRUCTOR: CARIN GOLDBER
19
20
BOOK DESIGN
MY FIRST PICTURE DICTIONARY We was assigned a book called “My First Picture Dictionary”. By using the elements from a classic children’s picture dictionary (images, alphabet, short definitions), I graphically rethink about the form and include at least A-E. My first picture dictionary is a picture dictionary that deviates from traditional ones that targets children as main audience. Considering my own preferences, the topic I decide on is plastic bag. The concept here is to pack everything into a plastic bag, so the typesetting of typeface was on the basis of nutrition fact.
MY FIRST PICTURE DICTIONARY
INSTRUCTOR: CARIN GOLDBER
21
22
FIRST DRAFT
BOOK DESIGN
MY FIRST PICTURE DICTIONARY
INSTRUCTOR: CARIN GOLDBER
23
24
BOOK DESIGN
MY FIRST PICTURE DICTIONARY
INSTRUCTOR: CARIN GOLDBER
25
26
BOOK DESIGN
MY FIRST PICTURE DICTIONARY
INSTRUCTOR: CARIN GOLDBER
27
28
BOOK DESIGN
MY FIRST PICTURE DICTIONARY
INSTRUCTOR: CARIN GOLDBER
29
30
BOOK DESIGN
MY FIRST PICTURE DICTIONARY
INSTRUCTOR: CARIN GOLDBER
31
32
BOOK DESIGN
MY FIRST PICTURE DICTIONARY
INSTRUCTOR: CARIN GOLDBER
33
34
BOOK DESIGN
MY FIRST PICTURE DICTIONARY
INSTRUCTOR: CARIN GOLDBER
35
36
BOOK DESIGN
ON OW
N CRAZY SEXY COOL N WOOD TYPE R Crazy Sexy Cool is a collection of photographs of pop culture designed by Rolling Stone Press and US Magazine. Using the iconic language of wood type, the version was designed based on the concept of fulfilling the blank with characters that the concept used was the concept of wood type itself. The tabloid version was based on the layout of Enquirer magazine. The Swiss version was based on the grid system of kari gerstner.
TTE
MS
YFUS
CRAZY SEXY COOL WOOD TYPE
37
38
FIRST DRAFT
BOOK DESIGN
CRAZY SEXY COOL WOOD TYPE
INSTRUCTOR: CARIN GOLDBER
39
40
BOOK DESIGN
CRAZY SEXY COOL WOOD TYPE
INSTRUCTOR: CARIN GOLDBER
41
42
BOOK DESIGN
CRAZY SEXY COOL WOOD TYPE
INSTRUCTOR: CARIN GOLDBER
43
44
BOOK DESIGN
CRAZY SEXY COOL WOOD TYPE
INSTRUCTOR: CARIN GOLDBER
45
46
BOOK DESIGN
CRAZY SEXY COOL WOOD TYPE
INSTRUCTOR: CARIN GOLDBER
47
48
BOOK DESIGN
CRAZY SEXY COOL WOOD TYPE
INSTRUCTOR: CARIN GOLDBER
49
CRAZY SEXY COOL SWISS Crazy Sexy Cool is a collection of photographs of pop culture designed by Rolling Stone Press and US Magazine. Using the iconic language of wood type, the version was designed based on the concept of fulfilling the blank with characters that the concept used was the concept of wood type itself. The tabloid version was based on the layout of Enquirer magazine. The Swiss version was based on the grid system of kari gerstner.
CRAZY SEXY COOL SWISS
x
51
of
zy
BOOK DESIGN
by the editors
ra
50
se
Magazine
US
52
BOOK DESIGN
CRAZY SEXY COOL SWISS
FIRST DRAFT
SEX
OOL
CRAZY
INSTRUCTOR: CARIN GOLDBER
53
54
BOOK DESIGN
CRAZY SEXY COOL SWISS
INSTRUCTOR: CARIN GOLDBER
55
56
BOOK DESIGN
CRAZY SEXY COOL SWISS
INSTRUCTOR: CARIN GOLDBER
57
58
BOOK DESIGN
CRAZY SEXY COOL SWISS
INSTRUCTOR: CARIN GOLDBER
59
60
BOOK DESIGN
CRAZY SEXY COOL SWISS
INSTRUCTOR: CARIN GOLDBER
61
62
BOOK DESIGN
CRAZY SEXY COOL SWISS
INSTRUCTOR: CARIN GOLDBER
63
64
BOOK DESIGN
CRAZY SEXY COOL SWISS
INSTRUCTOR: CARIN GOLDBER
65
66
BOOK DESIGN
CRAZY SEXY COOL TABLOID Crazy Sexy Cool is a collection of photographs of pop culture designed by Rolling Stone Press and US Magazine. Using the iconic language of wood type, the version was designed based on the concept of fulfilling the blank with characters that the concept used was the concept of wood type itself. The tabloid version was based on the layout of Enquirer magazine. The Swiss version was based on the grid system of kari gerstner.
CRAZY SEXY COOL TABLOID
67
CRAZY! SEXY! COOL!
68
BOOK DESIGN
FIRST DRAFT
CRAZY SEXY COOL
OF US MAGAZINE THE EDITOR OF THE ROLLING STONE PRESS
CRAZY SEXY COOL TABLOID
INSTRUCTOR: CARIN GOLDBER
69
70
BOOK DESIGN
CRAZY SEXY COOL TABLOID
INSTRUCTOR: CARIN GOLDBER
71
72
BOOK DESIGN
CRAZY SEXY COOL TABLOID
INSTRUCTOR: CARIN GOLDBER
73
74
BOOK DESIGN
CRAZY SEXY COOL TABLOID
INSTRUCTOR: CARIN GOLDBER
75
76
BOOK DESIGN
CRAZY SEXY COOL TABLOID
INSTRUCTOR: CARIN GOLDBER
77
78
BOOK DESIGN
CRAZY SEXY COOL TABLOID
INSTRUCTOR: CARIN GOLDBER
79
80
BOOK DESIGN
CRAZY SEXY COOL TABLOID
INSTRUCTOR: CARIN GOLDBER
81
82
BOOK DESIGN
CRAZY SEXY COOL
INSTRUCTOR: CARIN GOLDBER
83
84
TRANS COFFEE
PIGGY PENNY
IXD
85
DESIGN
86
INTERACTION DESIGN
TRANS COFFEE The concept of Trans Coffee is to use simple symbol to present people who are straight (=) and non-straight (≈). Therefore, we decide to use these symbols and create a pop-up coffee store to remind people. It will be a place for people to meet and know each other better. Everyone has different sexuality. In Trans Coffee, everyone can make their own coffee. The “Trans” indicates the being in a transparent environment, talking to each other, exchange your experiences, express yourself. No matter you are straight or LGBT, feel free to walk in and make your own cup of coffee.
TRANS COFFEE
87
BRAND IDENTITY 88
INTERACTION DESIGN
TRANS COFFEE
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
LOGO
LOGO
TRANS COFFEE
TRANS COFFEE
TRANS COFFEE
TRANS COFFEE
COLOR
COLOR
#DD435E
#969696
#DD435E
#969696
TYPOGRAPHY
89
90
INTERACTION DESIGN
TRANS COFFEE
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
TYPOGRAPHY Avenir is the typography picked for TRANS COFFEE.
OPEN SANS
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Aa
Aa
Aa
Light
Medium
Oblique
Aa Black
TYPE SIZE
TEXT SIZE
HEADING LARGE
64pt
BODY DEFAULT
36pt
BODY SMALL
23pt
HEADING MEDIUM
ICON
47pt
91
BODY SMALL 92
23pt INTERACTION DESIGN
Aa
Aa
Aa
Light
Medium
Oblique
TRANS COFFEE
ICON
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO BODY SMALL 23pt 23pt
OPEN SANS
BODY BODY SMALL SMALL
HEADING MEDIUM BODY DEFAULT
Aa Light
BODY SMALL
64pt
47pt Aa Aa 36pt
Medium
Oblique
Aa
ICON ICON
ICON ICON
Black
23pt
HEADING LARGE
Ice
100*100px 100*100px
ICON
HEADING MEDIUM BODY DEFAULT
Ice
60*60px 60*60px
Order
No Ice
64pt
User Less Ice
36pt
Ice
100*100px
Persentage
User Less Ice 60*60px
Ice
Whole Milk
Milk
100*100px
Persentage No100*100px IcePersentage
WIREFREAMS WIREFREAMS Half and
100*100px
ICON
Persentage
60*60px Low Fat Persentage
23pt
Base
Persentage
TEXT SIZE
47pt
BODY SMALL
60*60px
36pt 36pt
23pt 93 23pt
BODY SMALL
USER FLOW USER FLOW ICON
TYPE SIZE
100*100px
47pt
TEXT SIZE A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
HEADING LARGE
100*100px
BODY DEFAULT 36pt 36pt BODY DEFAULT
BODY BODYDEFAULT DEFAULT
Black
TYPE SIZE
ICON
HEADING HEADINGMEDIUM MEDIUM HEADING 47pt 47pt MEDIUM
Aa
Sugar
Half
Persentage Persentage Persentage WIREFREAMS WIREFREAMS
Low FatPersentage Persentage
White Sugar
60*60px
Order
60*60px
Base
60*60px WIREFREAMS
60*60px
WIREFREAMS
Persentage Whole Milk Persentage
Water
100*100px
WIREFREAMS
Brown Sugar
Milk
Sugar
WIREFREAMS WIREFREAMS
Water
Half and Half
Persentage
White Sugar
Persentage
Persentage
Brown Sugar
Persentage
Persentage
94
INTERACTION DESIGN
TRANS COFFEE
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
95
96
INTERACTION DESIGN
TRANS COFFEE
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
97
98
INTERACTION DESIGN
TRANS COFFEE
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
99
100
INTERACTION DESIGN
TRANS COFFEE
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
101
102
103
104
INTERACTION DESIGN
PIGGY PENNY The insight of the Piggy Bank is that today money is invisible and for most people, money is only a number shown on their bank account. So people always give up their saving plans. Piggy bank can help people to feel the real weight of money and gave them the sense of satisfaction every time they saved money. The concept is to think your money as piggy’s food and every time when you saved money to your account, your piggy will be feed. If you forget to save money today, the piggy will be unhealthy and if you forget it for one week, your piggy will die. If you achieve a new saving goal, your piggy will provide you a baby piggy, which is a new saving plan to help you keep saving.
PIGGY PENNY
105
106
INTERACTION DESIGN
PIGGY PENNY
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
LOGO
COLOR PALETTE
FFFFFF
7A7A7A
DABDAE
2D2D2D
2F7C23
000000
107
TYPOGRAPHY 108
DIN Alternate Bold
INTERACTION DESIGN
PIGGY PENNY
A DIN B C DAlternate E F G H I JBold KLMNOPQRSTUVWXYZ TYPOGRAPHY TYPOGRAPHY abcdefghijklmnopqrstuvwxyz 1 2A3B4C5D6E7F8G9H0I+J -K/L=M* N! ?O^P&Q $R ”S T U V W X Y Z
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
USER FLOW
abcdefghijklmnopqrstuvwxyz 1234567890+-/=*!?^&$”
DIN Alternate Bold
DINCond-Light Alternate Bold DIN
ABCDEFGHIJKLMNOPQRSTUVWXYZ a b cDIN defghijklmnopqrstuvwxyz A B CCond-Light DEFGHIJKLMNOPQRSTUVWXYZ 1 A2B3C4D5E6F7G8H9I 0J + / =N*O! P? Q^ R&S$T”U V W X Y Z K L- M
abcdefghijklmnopqrstuvwxyz a1b2AcB3dC4eDf5EgF6hG7i Hj 8kI J9l Km0LnM+oN-pO/qP= r Qs*Rt !uS?vT ^ wU Vx&Wy z$X Y” Z 1 2a3b 4c 5d 6e f7g8h9i 0j k+l -m/ n=o*p!q?r ^s t&u $v w” x y z DIN Cond-Light 1234567890+-/=*!?^&$”
Home
A BDIN C D Cond-Light EFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1 TYPE 2 3 4 5 6 SIZE 7890+-/=*!?^&$”
TYPE SIZE
A BTYPE C D E FSIZE GHIJKLMNOPQRSTUVWXYZ
TYPE SIZE
abcdefghijklmnopqrstuvwxyz
35pt 35pt
HEADING 1 2HEADING 3 4 5 6 7 8 9 0 + - / = LARGE *LARGE !?^&$”
TYPE SIZE 24pt
TYPE SIZE HEADING
HEADINGMEDUIM MEDUIM
24pt
Profile
Piggy
Setting
Log out
User
Edit
Bank account
Log in
Chase
18pt 18pt
BODY SMALL BODY SMALL
HEADING LARGE
35pt
HEADING MEDUIM
24pt
BODY SMALL
18pt
TYPE SIZE
HEADING LARGE
TYPE SIZE
24pt
BODY SMALL
18pt
ICONS
Money manager
35pt
HEADING MEDUIM
Add new Plan View
ICONS ICONS
Check Calender 36*36px
Flow
36*36px
ICONS MENU
Album
36*36px
MENU MENU
OTHER
OTHER
OTHER
36*36px
MENU
WIREFRAMES
Paypal
Date
109
Album 110
WIREFRAMES
Date
INTERACTION DESIGN
PIGGY PENNY
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
111
112
INTERACTION DESIGN
PIGGY PENNY
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
113
114
INTERACTION DESIGN
PIGGY PENNY
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
115
116
INTERACTION DESIGN
PIGGY PENNY
INSTRUCTOR: ALDO PADILLA, LEAH C ALFONSO
117
118
119
120
SELF PORTRAIT
BAD GENIUS INTRO
LOVE VOICE OVER
121
MOTION
DESIGN
122
eft
MOTION GRAPHIC DESIGN
right
SELF PORTRAIT This motion project is done in my Junior Motion Graphic class with Ori Kleiner. I designed and created this motion based on the film, pinball. Using pinball to represent my habits, my favorite foods, and my life. My body was like a pinball game, inserting coins to start, and as the pinball goes through my brain, my stomach, many aspects of my life were revealed. What’s going on in my brain is the homework I was assigned to, and the things in my stomach is the food I like the most. My life was presented through the deepest memory in my mind.
SELF PORTRAIT
123
124
MOTION GRAPHIC DESIGN
SELF PORTRAIT
INSTRUCTOR: ORI KLENIER
125
126
MOTION GRAPHIC DESIGN
SELF PORTRAIT
127
INSTRUCTOR: ORI KLENIER
STYLEFRAME TO DO LIST
LOST
INSERT COINS TO KNOW XIN SONG left
right
LOST
INSERT COINS TO KNOW XIN SONG left
100%
left
LOST
INSERT COINS TO KNOW XIN SONG left
right
right
right
128
129
130
MOTION GRAPHIC DESIGN
BAD GENIUS INTRO
131
PAT : Teeradon Supapunpinyo
ERM T S SY
ER RES VE
I made a title sequence for the film “Bad Genius”. I used the hand of the “bad genius” as the entry point and the powerful connection that works as a driving agency between the plots. The first scene of a hand playing piano, the display of the music score revealed the cheating method used by the main character, a straight A student who gets paid for helping others to cheat. The music score changes to a scantron, then a world map, implying that the exams-cheating scheme eventually rises to international levels, a SAT exam. On the one hundred bill, the picture of two hands holding together addressed that there is a trade existing. The pictures shown on the phone illustrated the course of their plan. Finally, the bar code on the pencil changed to the character “bad genius”, which described the protagonist and demonstrated the tone of the film.
AILAND H T FEDERAL
BAD GENIUS INTRO
100 100
132
STYLEFRAME
MOTION GRAPHIC DESIGN
BAD GENIUS INTRO
INSTRUCTOR: ORI KLENIER
133
134
MOTION GRAPHIC DESIGN
BAD GENIUS INTRO
INSTRUCTOR: ORI KLENIER
135
136
137
138
MOTION GRAPHIC DESIGN
A BETTER WAY TO TALK ABOUT LOVE I did a voice over on Mandy Len Catron’s Ted Talk: A better way to talk about love. I followed the content and context of the speech closely and portrayed the love process a couple experienced. I used a model of human body to the present the strange chemistry that causes two people to fall in love as Catron addressed in her Ted Talk and illustrated the complicated process a couple went through when they broke up. While giving the off-stage commentary, I showed application for the word order C atron used and framed the story entirely.
A BETTER WAY TO TALK ABOUT LOVE
139
140
STYLEFRAME
MOTION GRAPHIC DESIGN
A BETTER WAY TO TALK ABOUT LOVE
INSTRUCTOR: ORI KLENIER
141
142
MOTION GRAPHIC DESIGN
A BETTER WAY TO TALK ABOUT LOVE
INSTRUCTOR: ORI KLENIER
143
144
145
146
147
RICHARD WILDE
MOTION: ORI KLENIER
SPECIAL THANKS
TYPE: CARIN GOLDBERG
IXD: ALDO PADILLA, LEAH C ALFONSO
Thanks to all my professors who are always resourceful. Also special thanks to all my fellow classmates who are extremely talented individuals, cooperating with them during the term was a pleasure. Being a part of the class itself is precious enough for me, and learning from my professors and my classmates both inside and outside classes is a honor. Thank you for giving your ideas whenever we had critique in classes. Thank you for pushing me to do hard works.
S