Page 1


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


Portfolio2013  
Advertisement
Read more
Read more
Similar to
Popular now
Just for you