T I M O
WA N G
Origin 2 014 -2 016
M A
P O RTFO LIO
SELECTED WORKS
T I M O
WA N G
Origin 2 014 -2 016
M A
P O RTFO LIO
SELECTED WORKS
All content for Origin was collected, conceived, written and designed by Timo Wang. www.timowang.com timowangcn@gmail.com
DESIGN CONSULTATION Jeremy Stout Academy of Art University COPYRIGHT @2016 TIMO WANG The images in this book are used in accordance with the Creative Common License. This book is a nonÂ- commercial work produced as a student project for educational purposes, and as such is considered a derivative work under the Fair Use Clause of U.S. Copyright Law.
Design is about developing and combining ideas. Where do ideas come from? Nothing is new, it comes from the past. Let the origin of our concepts lead designers to new insights. Then designers may find these ideas that they were looking for.
Selected Works 2014 -2016
Projects
THE STRAW BUILDING
10
THE EVOLUTION OF THE T YPEWRITER
26
SAN FRANCISCO TRAVEL CENTER
44
HOOKY
56
MOTION GRAPHIC
72
1
ED U C ATI O N
/
BR A N D IN G
The Straw Building
P R O JEC T
1
T HE
S T R AW
BUIL D IN G
O B JEC TIV E
The objective of this project is to create a well researched case study on a topic of my interest. Our goal is to find a problem within this area of interest and design a case study book as well as other deliverables to help solve the problem. The Straw Building is a fun and interactive solution; its intent is to help kids learn Chinese while having fun.
A P P R OAC H
The Straw Building’s concept emphasizes the playful aspect of writing Chinese characters, but it is more than an educational program. The strategies, imagination and skills learned while using the Straw Building are tools students will be able to retain throughout their learning careers.
Project Name The Straw Building
For this project, I chose red, blue and yellow colors to be our primary color series. Since this book is made for children, the design must be colorful and simple. We wanted to show the evolution of Chinese heritage, so we broke down images, like fish, continuing to simplify the image until we arrived at the Chinese characters we use today.
Instructor Name Sandra Isla
We want to solve the problem that Chinese writing is too difficult for non-Chinese people to learn. Students should have the confidence and the ingenuity it takes to truly understand the roots of their heritage and language. What they build in their imagination, connection and understanding can be applied to their everyday lives.
12
Year of Completion 2015
Type of Project Branding Class Name Visual Thinking
P R O JEC T
14
1
T HE
S T R AW
BUIL D IN G
T I M O
WA N G
|
S E L EC T E D
W O RK S
P R O JEC T
16
1
T HE
S T R AW
BUIL D IN G
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
17
P R O JEC T
18
1
T HE
S T R AW
BUIL D IN G
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
19
P R O JEC T
20
1
T HE
S T R AW
BUIL D IN G
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
21
P R O JEC T
24
1
T HE
S T R AW
BUIL D IN G
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
25
2
B O O K
D E SI G N
/
T Y P O G R A P H Y
The Evolution of The Typewriter
P R O JEC T
2
T HE
E VO LU TI O N
O F
T HE
T Y P E W RIT ER
O B JEC TIV E
Create a book based on your interest, through type and image. Create a type system by breaking the rules with typography. My project was to design a book about the evolution of the typewriter.
A P P R OAC H
There are three parts of the book: typewriter history, famous brands and famous people who still use typewriters. I wanted to include some well known names who have used typewriters for their work, such as Woody Allen, Tom Hanks and Ernest Hemingway in the book. This is to show people in my generation that the typewriter is still being used, especially by good writers. The typeface I used is called Remington, because it is a historical and classical font. It’s elegant and memorable. At the beginning of each chapter, I created different patterns by using interesting type symbols taken from the Remington typeface. I tried to explore and expand on the basic principles of typography, exploring innovative ways to communicate with text and image, and understanding how a grid system could help a designer find a solution in design.
28
Project name The Evolution of The Typewriter Year of completion 2015 Instructor name Zack Shubkagel Type of project Book Design Class name Type Systems
T I M O
WA N G
|
S E L EC T E D
W O RK S
P R O JEC T
30
2
T HE
E VO LU TI O N
O F
T HE
T Y P E W RIT ER
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
31
P R O JEC T
32
2
T HE
E VO LU TI O N
O F
T HE
T Y P E W RIT ER
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
33
P R O JEC T
34
2
T HE
E VO LU TI O N
O F
T HE
T Y P E W RIT ER
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
35
P R O JEC T
36
2
T HE
E VO LU TI O N
O F
T HE
T Y P E W RIT ER
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
37
P R O JEC T
38
2
T HE
E VO LU TI O N
O F
T HE
T Y P E W RIT ER
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
39
P R O JEC T
40
2
T HE
E VO LU TI O N
O F
T HE
T Y P E W RIT ER
P R O JEC T
42
2
T HE
E VO LU TI O N
O F
T HE
T Y P E W RIT ER
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
43
3
T R AV EL
/
EN T ER TA IN MEN T
San Francisco Travel Center
P R O JEC T
3
SA N
F R A N CIS C O
T R AV EL
C EN T ER
O B JEC TIV E
The objective is to find a poorly designed sign, understand its target audience and create a new design involving elements, like typography and color. My sign is a hand written poster for the San Francisco Travel Center.
A P P R OAC H
The primary intention is to promote San Francisco entertainment events through the San Francisco Travel Center. I chose the location names to be the title of each poster, because it clearly communicates the location and connects travelers in the city to community events. The secondary intention is to give travelers valuable information about events, such as times and locations. The other purpose of the posters is to inform the public about more in-depth details to these events (such as history and contacts). The project is to attract and encourage people to attend events who are looking for something to do.
Project name San Francisco Travel Center Year of completion 2014 Instructor name Hunter Wimmer Type of project Design System Class name Visual Literacy
46
P R O JEC T
48
3
SA N
F R A N CIS C O
T R AV EL
C EN T ER
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 014
FA L L
53
P R O JEC T
54
3
SA N
F R A N CIS C O
T R AV EL
C EN T ER
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 014
FA L L
Explore Plan Search
Home
About
Location
Category
San Francisco What’s happening in
San Francisco Visitor Information Center
55
4
A P P
/
UI&U X
Hooky
P R O JEC T
4
H O O K Y
O B JEC TIV E
This assignment is about creating an application, based on an area of interest, and applying a UI/UX design to enhance user experience principles and methodologies.
A P P R OAC H
I used Viking rune symbols to design the logo, because of their close relativity to pirate symbols. Many users, when they were young, would pretend to be pirates or learn about them from movies and books. I tweaked the font Panton by combining it with the Viking runes. The color green represents the education and learning that we all experienced through as children. The color orange represents the passion of studying and retaining knowledge. There are many educational and sharing programs, such as TED talks, Pinterest, and Lynda. Unfortunately, there is not a program that tackles the interactive part well. Hooky focuses on sharing your experiences and learning new things along with an interactive face time in order to build a connection in the learning process.
58
Project name Hooky Year of completion 2015 Instructor name Bob Slote
Type of project UX/UI Class name Digital Studio
P R O JEC T
4
The logo concept comes from the Viking rune symbols because of the similarity to pirate symbols.
60
H O O K Y
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
Combining the Viking rune with the Panton Font creates the logo.
Final icon
61
P R O JEC T
UI
62
GUID E
4
H O O K Y
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
63
P R O JEC T
64
4
H O O K Y
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
69
5
M O TI O N
G R A P HI C
/
TIT LE
SEQ UEN C E
Motion Graphic
P R O JEC T
5
M O TI O N
G R A P HI C
O B JEC TIV E
There are two parts of this motion graphic design project. One being an organic way to create a type of emotion to display. I made two stop-motion graphics titled “Disappear” and “Life.” The second is a commercial project with GridNet.
A P P R OAC H
This project is composited with organic real life materials, bringing an earthy feel to everything. The other part of motion graphic design is made for company GridNet. The company wanted to use a simple way to explain an optimized energy system. We decided to use a simple graphic to combine music notes in order to showcase the concept.
Project name Type Animation & GridNet
For the motion type project, I chose to use tobacco and melted wax to display “Disappear.” To display “Life,” I used light shadow and rubber bands. I made all the preprocesses by hand.” Enjoying the process of creating everything without the use of a computer.
Instructor name Kathrin Blatter
For the motion graphic that was sent to GridNet, we went through the process of using sketches and story boards, and then used a computer to create the animation. In this project, the computer is just a tool to display our ideas, the most challenging part of designing this project is maintaining simplicity. You must solve the problem for your client in the most effective way possible.
Class name Type Experimental
74
Year of completion 2015
Type of project Motion Graphic
P R O JEC T
P R O C E S S
78
5
M O TI O N
G R A P HI C
I chose to use tobacco and melted wax to display “Disappear.” To display “life,” I used light shadow and rubber bands. I made all the preprocess by hand.
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
79
P R O JEC T
P R O C E S S
80
5
M O TI O N
G R A P HI C
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
81
P R O JEC T
P R O C E S S
82
5
M O TI O N
G R A P HI C
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
83
P R O JEC T
P R O C E S S
84
5
M O TI O N
G R A P HI C
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
85
P R O JEC T
5
G RID NE T
P R O C E S S
The color system is inspired by Mother Nature, which comes from the colorful life cycle of leaves. This cycle of nature also represents our GridNet system. Reference Artist: Josef Albers
86
M O TI O N
G R A P HI C
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
87
P R O JEC T
S T O RY
88
5
B OA RD
M O TI O N
G R A P HI C
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
89
P R O JEC T
90
5
M O TI O N
G R A P HI C
T I M O
WA N G
|
S E L EC T E D
W O RK S
2 015
FA L L
91
First and foremost, thanks to my family for all the incredible support, understanding and encouragement. I couldn’t have finished this Master degree without you. To all of my instructors, thank you for all the lessons, support, critiques and advice given. You have helped me understand the true meaning of failure. I could never have grown on a professional and personal level without realizing my failures. To all my friends who have walked with me, which will change my life path in the future. You guys have made me stronger and helped me understand what is a meaningful of friendship. Thank you, San Francisco. Timo Wang 2016 Academy of Art, San Francisco
SCHOOL Academy of Art University
STUDENT Xiaoran Wang (Timo)
INSTRUCTOR Jeremy Stout
PHOTOGRAPHY Jiavona Marques
BOOK BINDERY Blurb
TEXT STOCK Trade Gothic
FONT Bodoni
www.timowang.com +1 415.513.8295 wbeaner@gmail.com
All works in the book were hypothetical projects and made for educational purposes. @2016 Timo Wang. All rights reserved. No part of this publication can be reproduced without expressed permission from Timo Wang.
SELECTED WORKS