CONTENTS 01/Website UI Ultrabook Website Design Responsive Design Yesky Vision HP Music Laptop Samsung MV800 Campaign “Taking Pictures in Beijing�-Samsung Camera Campaign Dell Laptop Internet Community Website for Visual Designers
19/Illustration Illustration Book Calendar Illustration Cartoon Illustration for Ultrabook Cartoon Illustration for Intel
29/GUI Yesky iPhone APP
31/Infographic Infographic Design for Presentation
33/Advertizing Ambient Advertizing for Lastminute.com
35/Logo Logo Design for a New School
37/Animation Animation Video (5 pieces)
Website UI
Ultrabook Website Design This bran-new website was designed
Client: Yesky.com; Intel
when Intel launched the Ultrabook
Tools: Photoshop; Illustrator
campaign, and this website publishes
Date: 09/2011-03/2012
the latest news and information about
Logo Design
new ultrabooks. A series designs including the logo, business card and the interface of the website were accomplished with uniform visual element.
Business Card
X. HUANG
portfolio 2012
Website UI
Web UI 01/02
Website UI
Protype Sketches
X. HUANG
portfolio 2012
Website UI
Responsive Design This beta version of Ultrabook Website
the data analysis, I designed different
Client: Yesky.com; Intel
is designed as a responsive website
versions of user interface, each of
Tools: Photoshop
based on HTML5 technique, which
which highlights distinctive element
Date: 12/2011-05/2012
means the web pages can recognize
people more concerned by situation.
the digital devices used by different
This could bring better experience to
users and adapt to a suitable resolu-
users.
tion. People will browse the most proper version of this website by using different digital products. According to
Responsive Design
03/04
Website UI
Yesky Vision This website provides a platform to present our company’s successful projects visually. All illustration elements are designed with creative meanings. The image on the entry webpage shapes like an eye, which stands for “Yesky Vision”. The animation on this website is also created by html5 codes.
Html5 Website UI
Client: Yesky.com Tools: Photoshop; Illustrator Date: 02-04/2012 URL: www.yesky.com/focus/ (html5 and browse by chrome only)
X. HUANG
portfolio 2012
Website UI
05/06
Website UI
X. HUANG
portfolio 2012
Website UI
HP Music Laptop This flash minisite shows the features of HP Music Laptop from 6 aspects through the interaction by users’ rotation of the magic cube in the center of the page, stating the music idea of this series of products. Client: HP Tools: Photoshop; Flash Date: 10/2011
07/08
Website UI
Layouts
Samsung MV800 Campaign For Samsung MV800 Campaign, a
Client: Samsung
flash minisite was created to help peo-
Tools: Photoshop; Flash
ple understand the special feature of
Date: 10/2011-01/2012
this product specifically. It contains a
URL: http://digital.yesky.com/digikp/samsung_mv800/
part of interaction flash, through which users could experience taking various pictures from different angle when rotating the frame on the camera.
X. HUANG
portfolio 2012
Website UI
09/10
Website UI
“Taking Pictures in Beijing” Samsung Camera Campaign For the purpose to present the pictures taken in the “photo shooting activity”, this website is designed, showing a Beijing map divided into 8 districts, in which 8 groups of participants take their pictures respectively. The name of 8 districts are rendered to 3-D Chinese fonts, and the landmark in each district is simplified to graphics which are easier to be identified, such as Beijing 2008 Olympic Stadium – Bird’s Nest, as well as the Water Cube; Tian An Men Square; and Beijing World Park, etc.. People could enjoy pictures shot in each district by clicking any one of these 8 areas on the map or any one of the wooden signs besides. Client: Samsung Tools: Photoshop; Flash Date: 10/2011-01/2012
X. HUANG
portfolio 2012
Website UI
11/12
Website UI
X. HUANG
portfolio 2012
Website UI
Dell Laptop 5 types of Dell Laptops with different traits are showed through 5 groups of people in a school class: music man; indoorsy man; handsome man; professor man; and muscle man. This is an interaction flash site, and people could browse the whole broad page through moving mouse from side to side, creating an extent space feeling. Also the specific content will be displayed when clicking these 5 persons. Client: Dell Tools: Photoshop; Flash Date: 02-04/2012 URL: http://notebook.yesky.com/dell_14r_al/ Layouts 13/14
Website UI
Internet Community Website for Visual Designers Final Project in MA Course Introduction
video, books, and other design resources by clicking different decorations in others’ studio. Besides, there are some functional
Web design means to create effective interface between tech-
common rooms, providing various services and communication
nology and people which allows them to present their informa-
place, such as reading room, providing latest design articles and
tion and use it for meaningful purposes. Internet and websites
design exhibition information; exchanging box, people can post
become an indispensable part for all the people in the world. In
their objects information and contact details there wanted to be
the meantime, the explosive growth of social media is proof that
exchanged to other objects; database, instruction on blackboard,
people want to connect and share things they are passionate
containing some design websites collection and design news.
about. During the final major project, some key layouts of this websites The aim of this Final Major Project is to create one distinctive
are created, and a demo animation is finished to show the main
form of social media website. The target audience is creative de-
process of using this website. Among this period, the most impor-
signers. This means this website needs more creative ideas and
tant impact to me is that tutor let me realize the significance of
innovative style. Since designers are more sensitive to the graph-
the connection of the whole internet as a social media. It will cre-
ic things, this community is kept visual. There are more interest-
ate more users and this will be one of the most important things
ing interactive actions in this website, some of which simulate the
for an online community. In addition, the ease of use is a crucial
real life. The name of this online community is “studio”, which is
element in the field of web layout design. People would like it if
a common word for all the target audience and also connected
it is easy and funny. In contemporary website market, there are
the presenting layouts of the web pages. The style of the whole
so many social media websites. This is to create a different one,
layouts is chosen to be presented by pixel arts and kept simple,
which may give people more inspiration to the new era of virtual
which stands that this is a digital world. Another purpose is to
digital world.
make it like a game, which can let people feel interesting and relax. Design is a global thing, so there are plenty of studio centers
Evaluation
in large cities around the whole world. Users can create their own studio in their city and scan other studios in another city. Each
After the research on the development of contemporary websites
user can create their own characters by choosing body parts with
in different countries, it is found the graphic and animation ele-
different features. Then, people can build their own studio, which
ments appear more often. This is because of the development
is a block, and customize them by various wallpapers, floors, fur-
of technology and also graphic element on websites is an easy
niture, appliances and other decorations. These decorations have
way to browse and use. In the era of web2.0, more interactive
their own different functions. For instance, one user chooses a
websites appear. Most of websites can be customized by dif-
bookshelf set up in his studio. He can link this to Amazon.com to
ferent users, even information websites like BBC. It is urgent to
present his recommend books. If he hangs up a photo frame on
make an integrated social community website to let people share
the wall, he can upload his photos, or design work pieces here.
their lives. This project makes me look and think more about
This also can connect to Flikr.com. This is another significant
the development of the internet, especially human relations on
thing to be created. This social community can connect to some
websites. Also, I learned the coherence is a vital element in web
other famous online communities which are often used. This
design. And also I know the correct sequence of research and
forms a network, and may be more convenient. After having own
design. I would think the idea as soon as I received the project
studio, people can drag his own character to other studio cre-
brief before. The insufficient research and survey would lead
ated by other designers to browse other people’s works, photos,
an inadequate design or even a wrong way. There will be more
X. HUANG
portfolio 2012
Website UI
inspiration among the research period, widening the mind to kinds of solving methods. At the beginning, the characters are just created to some figures by imagination. After the feedback of classmates, I found it is quite essential to design things people are familiar with. This will attract them more. So when I changed the characters to the figures of our tutors and mates, it aroused people’s more interest. This is an interesting phenomenon. For design world, different to fine art, especially for communication design, it is so crucial to design acquaint things for users. Besides, for a complicated website, clear website map is fairly important. It will make people confused if it is not organized well enough. When people feel it is too complex, they will give it up. To make things funny and different is another important element in design works. These things are important for me to be a designer especially to
Layouts
be a website designer.
Category: School Work Tools: Photoshop; Illustrator; Flash Date: 03-08/2010
MA Show
15/16
Website UI
X. HUANG
portfolio 2012
Website UI
Layouts
17/18
Illustration
X. HUANG
portfolio 2012
Illustration
Illustrations
19/20
Illustration
X. HUANG
portfolio 2012
Illustration
Illustration Book These illustrations depict a children fairy tale in the form of a book. Tools: Photoshop; Hand drawing Date: 02-08/2011
21/22
Illustration
新年快乐
极 极 龙 给 大 家 拜 年 了
跟 我 一 起 进 入 2 0 1 2 吧
我们一起吃元宵、吃春卷去吧！
爱生活爱工作， 我们一起去旅行吧！
和你的他（她） 共度佳节吧！
闪闪红星照我心 X. HUANG
portfolio 2012
Illustration
劳 动 最光 荣 回家帮 妈妈洗洗碗、捶捶背吧
Calendar Illustration To create Yesky official calendar for the new year of 2012, a series of Yesky mascot, an octopus, are illustrated, with various topics in each month according to the festival days. Client: Yesky Administration Department Tools: Illustrator; Flash Date: 11/2011-01/2012
23/24
Illustration
X. HUANG
portfolio 2012
1
2
3
4
5
6
Illustration
Cartoon Illustration for Ultrabook A series cartoon illustrations are created in Intel advertising campaign about Ultrabook. There are two examples here. On the left page, it is a story about creation of Ultrabook. The god wants an Ultrabook, so he calls some genius together to do this project. Watt’s steam engine ultrabook makes the god feel too hot, and it would consume a great deal of energy if using Newton’s physical power Ultrabook. While the god appreciates the Uranium-235 Ultrabook designed by Einstein, it causes an explosion eventually. So the god publishes an announcement that he needs some intelligent Geeks to accomplish this Ultrabook creation task. On the right page, it tells a story about the wakening time of the Ultrabook. Client: Intel Tools: Photoshop; Hand drawing; Flash Date: 11/2011-03/2012
Wake in 2 seconds.. . .
Hu!! Hu!!
25/26
Illustration
1
2
5
6
Cartoon Illustration for Intel A set of stories come out to advertise
Client: Intel
for the performance of Intel CPU. A
Tools: Hand drawing; Flash
rabbit character is created to represent
Date: 08-12/2011
Intel Company, with intelligence and power. He can deal with any problems and overcome the difficulty.
X. HUANG
portfolio 2012
Illustration
3
4
7
8
27/28
GUI
Yesky iPhone APP The content of Yesky APP is news and information about digital products. Digital icons are designed to be used not only on APP UI but also on web pages. Client: Yesky Tools: Photoship Date: 09-12/2011
APP UI
Icon Design
X. HUANG
portfolio 2012
GUI
29/30
Infographic
Infographic Design for Presentation An interaction flash is created for the presentation of our Vice President in an important conference. It uses the form of infographic, which makes it shown vividly. The content is some demonstration of outstanding projects and the achievement we have got in 2011. Client: Yesky Tools: Flash Date: 11-12/2011
X. HUANG
portfolio 2012
Infographic
Layouts
31/32
Advertizing
Ambient Advertizing for Lastminute.com The idea behind the approach is to create a fun, visually interac-
The graphics will be produced as a one colour adhesive vinyl
tive and memorable visual campaign aimed at introducing the
allowing easy of application to a variety of public surface eg
idea of the services from lastminute.com with the tag line of ‘do
windows, lifts, escalators, bus stops etc.
more good stuff’. The campaign would utilise key public places, transport hubs/vehicles to which the graphic images and text for
Category: School works and attended D&AD Competition
the campaign can be easily applied. The idea is to create memo-
Client: Lastminute.com
rable juxtapositions between the public, the message and the
Tools: Photograph; sketch; Photoshop
viewers to communicate the message with humour to ‘do more
Date: 10/2009-02/2010
good stuff’ at lastminute.com. The idea that the message comes alive by accidental interaction will make the campaign memorably funny and give the idea that the website and brand is relaxed, youthful and fun and that the website gives some immediate change in their life quickly!
X. HUANG
portfolio 2012
Advertizing
33/34
Logo
Logo Design for a New School This is a competition of Logo Design in the college when I stud-
Client: University of Sputhampton
ied in UK, and I won the first prize with the logo adopted as the
Tools: Illustrator
logo of the new school established by a Chinese school and our
Date: 12/2009
UK University. This logo stands for a young plant fostered by two hands. The red one stands for Suzhou Art&Design Technology Institute and the blue one stands for University of Southampton.
X. HUANG
portfolio 2012
Logo
35/36
Animation
天极网
手机阅读器
Video 1
Video 2
X. HUANG
portfolio 2012
Video 3
Animation
Animation Video Video1-A propaganda video is created to look forward the new
atmosphere, presenting the achievement our company got in the
orientation in the next year of our company. Contrast is used to
past one year.
comparing the major difference in the past and the future, concluding the coming of the brightness. The orange “e� is taken out
Video5-This video is designed for Canon, mainly introducing
from the logo of the company, which makes our company more
the WIFI function on the Canon DV by telling a story between a
intimate and personalized.
mother and her son.
Video2-This short video is created to show the function and the position of Yesky Company, which is a digital news web media.
Client: Yesky; Canon Tools: Flash
Video3-It is an animation version of the new plan of Design De-
Date: 05/2010-06/2012
partment in 2012. Humor could be more attractive. Video4-This video is played before a digital communication conference held each year, creating a relaxed and humorous
Video 4
Video 5
37/38