interaction design-sun qinsi-150228763

25
Portfolio Qinsi Sun(Gloria) Intended Program: Design - Master INF for Interaction Design (Full-time) / Fall 2015 | The Hong Kong Polytechnic University

Upload: tsinsi

Post on 07-Apr-2016

220 views

Category:

Documents


0 download

DESCRIPTION

ID:150228763 Intended Program: Design - Master INF for Interaction Design (Full-time) | Fall 2015 | The Hong Kong Polytechnic University

TRANSCRIPT

Page 1: interaction design-Sun Qinsi-150228763

PortfolioQinsi Sun(Gloria)

Intended Program: Design - Master INF for Interaction Design (Full-time) / Fall 2015 | The Hong Kong Polytechnic University

Page 2: interaction design-Sun Qinsi-150228763

SUNQINSI孙沁思

lv 21 MP HP

EDUCATION

EXPERIENCE

2011 2012 2013 2014

Communication University of ChinaSchool of Animation and Digital Arts

Canadian CDMin summer term as a change student Somatosensory interactionmusic game<free!>

GameWave Group Webpage makingAssisted to do revision

bcy. net entrepreneurs about cosplay websiteinternational design/graphic designfinished social promotion

BRTN Beijing TV Station Cooperation projectE-BOOL app:theme about WORLD CUP<GOALLLLL>

IXDCChina InteractionDesign ConferenceVolunteer

[email protected]: 152100336931

Page 3: interaction design-Sun Qinsi-150228763

CONTENTInteraction Design

Otherscharacter design-shadow‘s world | traditional pattern | 3D

Unity 3D game-FREE!|

iOS App-IDEA.COLOR | Digital Reading Book-LoveBall

AS App-Please Don’t Tell Me |

Page 4: interaction design-Sun Qinsi-150228763

Please Don’t Tell Me

“I feel like an artist.”

Page 5: interaction design-Sun Qinsi-150228763

Category: Interaction Design Duration: Apr. 2013 - Jun. 2013 Other Team Members:ZihaoXia, Kai Yang, zicheng Wang

Please Don’tTell Me

It is a game app for users to make spoof-comments.PDTM uses the looking to ‘judge’ one’s inner.

* I came up with this idea.I participated in every parts of the project, including: stragetic planning, wireframe creation, and writng the judgment words.

Introduction

‘Liu Jishou’ used to be a blue-eyed boy on Chinese Twitter. He makes spoof-comments on some selfie everyday. However this behavior never causes antipathy. Some users even post their selfie to get such words for fun. So we desided to make an App which could give users the fun they want more conveniently.

background

basic functionsTake photos and make spoof-comments automatically.

target-audiences

age:16+we focus on those people who enjoy in surfing online,especially on weibo and are familiar with the pop words that is used on current internet world .

Page 6: interaction design-Sun Qinsi-150228763

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:

InterviewAfter deciding to design a mobile app to help people to put their hair down or release the pressure,there are still a few questions that we need to learn first.

1 - Do you have a definite way to release the pressure?2 - What do you think about the form That’ Liujishou’ hold?3 - Can you accept this kind of game that could produce totally bad judgment?

Person A is a university student who is living on campus.

AGE

PHONE

JOB

onLine Time

weibo

HOBBYPROBLEM

21

Studentiphone 4s

8+ hours

not very often

deadline of homeworkEating/Colleting APP

When I face the troubles I would like to eat some good food (giving up diet) or hung out with my friends. While if lots of people use this APP, I would liketo install it. I know about LiuJiShou ,still, I don’t want to receive this kind of view of me. It’s so hurt that I could not bear.

AGE

PHONE

JOB

onLine Time

weibo

HOBBYPROBLEM

30

Reporteriphone 5

5 hours

on work time

Money&Familybe relaxing at home

That sounds interesting! I would like to play it with my friend. You knowthat I almost have no time for fun. However I don’t want my actual colleague or relatives know the judgment. Because, they may think it is true.

Person B is an officer who worried about lots of things.

Solution1-The function is divided into two parts: Man&Woman The women’s words are milder than man’s. 2-All the view only can be shared to the weibo. We think most friends in wechat are realistic friends.So we delete it.

Page 7: interaction design-Sun Qinsi-150228763

Wireframe Interface designHere are some of the wireframes.It mainly divideded into two parts:intake and expenditure.

LOGO CHOSE PICTURE

SCORE&JUDGMENT HISTORY SHARESome interesting Sentences. Don’t be serious, just for fun : )crazy expression-maker颜艺惊人, DSLR-player who only knows the power button and the shutter maybe.只知道开机键与快门的单反用户, the most diligent lad among the student who study art艺术生学霸

Page 8: interaction design-Sun Qinsi-150228763

SHOW MOVIE

actor/actress

To introduce our project, we made a movie to show it!a funny tragedy

girl-Qinsi Sunboy-Zicheng Wang

The wise-Zihao Xiaphotographer

Kai Yang

https://www.youtube.com/watch?v=K3hszvCMF3M

Page 9: interaction design-Sun Qinsi-150228763

FREE!“How to make a game more fun”

Page 10: interaction design-Sun Qinsi-150228763

What is”FREE!”?FREE! is a 3D somatic game that using kinect for motion capture.This game was made when I involved in a project of CDM in Canada.

Category: unity Game Duration: Jul.2013Other Team Members:Zihao Xia, Jiaying Liang, Jingge Liu.Wang ke

* As the team leader, I organized and participatedin the entire processes of this project,including concept development,interface visual design, and GUI coding.

Why ?“FREE!” was one of the hottest animation which all our team members were crazy about,in that summer

It is a animation talking about young swimming athletes and holding dream and efforts as the theme.

So we decided to made an ACG fan work game to memorize those days. “JUST BECAUSE WE LOVE IT”

Video dairyhttps://www.youtube.com/watch?v=YgdYXqqNcJg

Page 11: interaction design-Sun Qinsi-150228763

How ?Phase I -overcoming problem

Before we went to CDM, no one know what was the kinect, which code should we use.

For me ,I had no experience as a PM to be responsible fora whole project and to write GUI.

So,we sent emails to ask the upperclassmen for help, and borrowed digital materials from library. What we pay most efforts onwas to test coding or graphic design, and to recompose them.

You can see all the progress in our video dairy.

Phase II - Concept During the making process, “three circles” appears one of the most important regular to arrange the key points(the most important element would be placed in the center, the rest may be deduced by analogy). We have given up some of our most favorite ideas during the process(such as instant capture, the catch action of the ITEM), instead, we achieved our main target more precisely.

Writing down the logic map and sticking the planning, countdown and unfinished works on the white wall. I managed all the daily workevery morning and sent emails to others, staring at the wall as if I was mad. But, under the pressure of finishing work in time, we took the time to every part at that time

Phase III - VisualizationPrototyPe

Visual diesign

Page 12: interaction design-Sun Qinsi-150228763

SHOW VEDIO:https://www.youtube.com/watch?v=AFI5HhtqWsQ

The most impressive thing is the idea of

“how to make a game more funny”. It’s easy to finish a project, however, to make it perfect takes time.

It needs rich details.In this case we redesigned the positions which every points of the rhythm appears

in the five direction pad(felt like being a choreographer). These positions help making players’ actions smoother, and make the game funny.

I learned from”FREE!”

HERE IS THE FINAL WORK

Page 13: interaction design-Sun Qinsi-150228763

IDEA.C

“LET ME BE YOU EYES.”

Page 14: interaction design-Sun Qinsi-150228763

IDEA.CAt the present, the App is used for turning the real color into RGB code.

Category: IOS app Duration: Nov.2013- Dec.2013 Team Members: Zihao Xia , Kai Yang

* I participated in every parts of the project, including: problem analysis, wireframe creation, and visual design.

Autumn in Beijing is a time of high saturation.There are too many assortment applying to our creative work, however the color always troubles. So we came up with the idea of this App. All of us want to keep the beauty in our mind from fading away.

WHY WE DID IT

IDEA.c is the first App for IOS which we designed all by ourselves,the full name is IDEA.COLOUR.

REGRETThere are still many shortcomings in the mindmanage as this is the first App we did all by ourselves. We kept improving the mindmanage until the code writing has been finished. This is also our first time trying to make a prototype which helped us to get to know what a “prototype”is as well as the division from graphic design.

INTRODACTIONBasing on the priceples, we listed all the functionsincluded: photo,share,gallery,and get the color code.We also we drew the sketches and the wireframes

LOGIC MAP:

Page 15: interaction design-Sun Qinsi-150228763

The final color will get from the red circle.Just focus on which color you want andclick the camera bottom.

Click the color to see more detailsand find color palettes

Opening the gallery you can see all historical colors in there.and you can note them with any word you want

The welcome page and click the red bottom to start

the whole page background

the menu :we use the slidebar,which takes less room

UI design:

redde3c4e

gray3e3a39

blue2b6eb6

Colors:Less color makes the users more concentrate on the content.

INTERFACE AND THE FINAL WORK“Clear display” is the most important rule for the UI design.

Page 16: interaction design-Sun Qinsi-150228763

LOVE BALL

“GOALLLLLLLLLL!!”

Page 17: interaction design-Sun Qinsi-150228763

LOVE BALL

Category: Interaction Design Duration: Apr,-Mar. 2014Other Team Members:Yuxian Tian, Kai Yang, ZiCheng Wang

* As the team leader, I organized and participatedin the entire processes of this project, including concept development,data collection and analysis, visual design.

LOVE BALLis a magazine of introduction based on The 2014 World Cup.

DescriptionLOVE BALL is a magazine of introduction based on The 2014 World Cup.

The magazine helps the amateurs to become an expert of football through the animations and interactive reading.

During The 2014 World Cup, many girls broke up with their football-fun-boyfriends because oftheir ignorant of the game. Taking this phenomenon as a chance, we decided to make such an App to help the lovers to enjoy the game together.

The name of the App in Chinese “懂球帝” is a sarcastic call for those people who knows little about the game but pretend to be an expert..We use this word to appeal to the catch consumers’ attention.

The difficulties<How to explain the rule?>

The making of this App was completed with Adobe Animate instead of code writing, which has given me more time to focus onthe design and drawings, especially the rules of interaction. It took time to explain the rules as it is simplex(the trigger is pulling to the position).

In this game we changed the introduction order from “one by one” to sequence based on the pitch. For example, take country as standard, the order is Brazil, Holland(which I am in favor of ), Argentina.

Page 18: interaction design-Sun Qinsi-150228763

About Rules

About FIFA World Cup

We used flashes and gestures to move all the items. The interactive action can help people study soccer rules

more easy. We test gestures and time (changing flash )to ensure all parts of rules can be introduced clearly.

These are divided into three parts:The Calendar:people can also get the TV programs’ time. group situation:we will renew the situation every morning.Host country-Brazil: custom, history, especially soccer culture.

Page 19: interaction design-Sun Qinsi-150228763

ABOUT EVERY TEAMWe focus on every national team’s feacture and stars.All the audiences can get the information in a moment and have fun. You could not remember van Persie as a Italian team member.

Page 20: interaction design-Sun Qinsi-150228763

GRAPHIC DESIGN

OTHERS

Page 21: interaction design-Sun Qinsi-150228763

Traditional constellationfor Pisces

once I use the light color,I could not give up them anymore.Chinese style has feacture of itself,whichis really in using red and green together.

The fishes are swimming as a cricle,represents like‘ying&yang’-traditional factor-Taiji.And the pome was written by myself,whichmeans the younger’s love will contain until die.

Page 22: interaction design-Sun Qinsi-150228763

——The hand shadow font

The idea came from the sign language- every language can be expressed by a gesture which looks like a shadow cast on the wall. We can understand the meaning of the gesture but never know the story behind it.

The world is in your hand

Show Video: https://www.youtube.com/watch?v=915iOwbXSfo

Page 23: interaction design-Sun Qinsi-150228763

3D

OTHERS

Page 24: interaction design-Sun Qinsi-150228763

3D Modling

I finished this 3D modeling a movie project with in a few weeks by myself. Honestly, it was my first time using 3DMAX, soI followed some online instructions on how to make it the first time. However,I found out that I could complete it by myself after I became familiar with some basic methods of 3D modeling.

This experience not only taught me new skills,but also enhanced my understanding of volume, lighting, and texture.

video:https://www.youtube.com/watch?v=J4K1Sl7vk3s

Page 25: interaction design-Sun Qinsi-150228763