DANLI HUPORTFOLIO

·MARAJA·YOHOME·XIQUE·MIRROR MIRROR·MATRIX·FISH·FINE ART·2D DESIGN·3D DESIGN·PHOTOGRAPHY·INTERNSHIP

PROJECT 1MARAJA INTRODUCTION

MARAJA - Experimental submarine spatial experienceInteraction Design/ Function Design/ Graphic Design

Maraja is a prototype for experimental submarine spatial experience. Facing the overexploitation of resources, global warming and population explosion, maybe one day human would face the crisis that they cannot lived on land. We focus our attention on submarine space, seeking for the possibility of a new way of human survival.

The project is divided into two parts, submarine driving device and surviving experience and recreational zone.

The driving device is designed in the shape of bubble with motion-sensing driving mode, holographic projection, and multiple interactive modes based on augmented reality, which enables visitors to be familiar with marine animals and submarine conditions in different periods through the transparent screens around them during their driving.

Five areas are designed in the surviving experience area, in order to help visitors to learn driving operations and improve their consciousness of marine rational exploitation and protection.

The project was designed in the Multidisciplinary courses “Digital x Space”, which was aimed at combining students from two different backgrounds, digital media and space design, in order to advocate multi-disciplinary learning, design thinking & process and team collaboration.

I was assigned as the leader of my team and was responsible for "hiring" members. For team building, I designed a series of desktop backgrounds for each member, based on the ocean element of our project.

PROJECT 1MARAJA BACKGROUND

DIGITAL x SPACE

Maraja is assumed to be bui lt in Dubai 's submarine space. The design details are abided by the religion of Islam.

The name of the project, “MARAJA”, comes from a sentence in the Koran, which means the confluence of sea water. The building is designed in the shape of Noah's Ark (Nuha in Arabic) from Arabic myth, the bow of the Ark points to Mecca, and the wharf is in the shape of moon and star.

Five areas are designed in the surviving experience area:

Bubble transfer stationJellyfish paradiseShipwrecks navigating practice areaClam-catching ruinsSubmarine surviving experience zone

Mecca

Surviving experience area

1. Bubble transfer stationThe building links land and ocean, it has three functional zones: the reception hall, driving study area, and the dock.

2. Jellyfish paradiseIn this area, the bubble-shaped driving device, Bubble, can stimulate biological light to attract jellyfish, as our best welcome to all the visitors.

3. Shipwrecks navigating practice areaIn the shipwreck, visitors are encouraged to practice driving Bubble themselves. Operating instructions and the reconstruction of the shipwreck are shown on the screen by augmented reality.

4. Clam-catching ruinsIn this part, a virtual man will tell a story about the prosperousness and desolation of the old clam catching industry in Saudi Arabia to arouse awareness of marine protection and sustainable development.

5. Submarine surviving experience zoneThe building can satisfy most of the survival demands, including the needs of social communication and religion. The internal space of the building is divided into many functional areas, including moon-and-star-shaped wharf, ark-shaped social communication area, submarine garden, and religious worship room.

(video)

PROJECT 1MARAJA PROCESS 1

2

4

3

5

PROJECT 1MARAJA OPERATION

Sensor

Drive device - The BubbleThe bubble-shaped driving device is designed to adopt the technology of seawater

electrolysis to provide power and oxygen. The gyroscope structure ensures the device to keep balance during driving. The internal interactive devices are composed of enhanced

display screens, holographically projected map and motion-sensing driving mode.

Go forward Go backward Turn

Cover&

Interactive screen

HolographicProjection

Power & Oxygen Equipment(electrolyzing seawater)

Zoom in Zoom out

A real-time map of submarine environment can be shown in Bubble by holographic projection, which can be zoomed in by gestures to control the inside setting of the device

and zoomed out to observe the terrain around and switch to automatic driving mode.

PROJECT 1MARAJA

TECHNICALSUPPPORTS

Motion-sensingThe development of motion-sensing equipments, such as Leap Motion and Kinect. Use IR and RGB cameras as sensor. Provide technical supports for gesture operation in the project

Augmented reality （HUD）HUD is any transparent display that presents data without requiring users to look away from their usual viewpoints. With the help of advanced AR technology, the introduction of surrounding fish or the virtual restoration of ocean palaeobios could be shown on the screen and combine with the real world.

Holographic projectionHolography is a technique which enables three-dimensional images to be made. In the project, the real-time seabed map and a virtual man can be shown by holographic projection and interact with user, enhancing the immersed feeling and sense of reality.

PROJECT 2YOHOME INTRODUCTION

YOHOME - Campus life APPInteraction Design/ UI Design

Yohome is a campus life APP with a variety of functions to provide convenient and comfortable service to support university students' study and life.

Through the investigation in earlier stage, with the growing abundance of university life, students have to face the problems on information transfer, classroom interaction and personal planning. Through information integration, information transfer chain optimization and combination of teacher client and student client, Yohome aims to enhance classroom teaching efficiency, make up for the disadvantage of information transfer in traditional teaching method and provide convenience for teachers and students.

The name, Yohome, comes from a famous Chinese saying by Confucius: Isn't it a pleasure to learn and practice?

How long does it usually take to finish an elective course?

How do you record course schedule?

How do you get to know the curriculum content, faculty information, teaching method and other related information?

What are your solutions if you are not able to follow or see the courseware clearly?

How do you contact teacher if you have questions about the course?

What problems had you met while exam reviewing?

How do you know the exam information? (Time, location, subject, etc)

How do you know your scores and ranking?

Where do you get the information about competition or school club activities?

Had you ever annoyed by missing important information, such as public lecture, payment or competition?

PROJECT 2YOHOME RESEARCH

Survey of 50 students in Beijing University of Technology.

PROJECT 2YOHOME

PROBLEMSSOLUTIONS

According to the result of the survey above, there are several problems that student are possibly facing, such as lack of efficiency in information transfer, miscellaneous information received, time-wasted roll call and passive classroom interaction, etc.

Integrating all sources of information, shorten the long process of information transmission.

SOLUTION 1

The traditional way of university information disseminationThe long process of dissemination has caused the lack of efficiency and miscellany of information received by students.

YOHOME's information integration

Through the combination of teacher cl ient and student client and the utilization of satellite positioning technology, Yohome can generate real-time seating plan. Questions asked by students can be shown on the seating plan to promote classroom interaction and efficiency.

SOLUTION 2

PROJECT 2YOHOME UI

Student Client

COURSE ME CAMPUS

PERSONALIZE

"COURSE" aims to improve classroom interaction and promote the class effectiveness. The main functions include:

Automatic roll callGeneration of a current seat table and attendance list on teacher clientSynchronous curriculum schedule and coursewareClass questioning and homework assignmentCourse selecting system

·

·

·

·

"ME" collects information that students need during their life on campus, including:

Personal scheduleStudent association activities (push notifications)Transcript and teacher feedbackElectronic purse

··

·

·

"CAMPUS" integrates the school news and social networks. Homepages for student association and group can be created here. It can also be extended by linking with library and canteen.

"PERSONALIZE" interface here.

·

Teacher Client

PROJECT 2YOHOME

TECHNICALSUPPORTS

Mobile terminalThe popularization of mobile terminal prompts the transformation of information dissemination mode from verbal communication to digitalization. Carrying mobile phone everyday becomes a habit.

AGPSThe developing accuracy of GPS positioning provides a technical basis for generating real-time seat map by mobile phone positioning.

NFCNFC communication technology is compatible with the equipment identification and data exchange in short distance, through the function with NFC, mobile phone can further support the recognition of student identification.

Waked up by YOHOME based on today's scheduleOrder breakfast on YOHOMESearch location of classroom on YOHOMEAuto roll call by mobile positioningView coursewares on YOHOMEAsk questions on YOHOMEContact teacher by YOHOME after classCheck available seat in library on YOHOMEPay lunch bills by electronic purse on YOHOMEView campus news on YOHOMEGet into the elective system on YOHOMECheck tuition payment on YOHOMEReceive message of today's club activity on YOHOMELink social network account with YOHOMEView today's dinner menu on YOHOME......

7:308:008:258:35

8:35~10:0010:1011:3012:0012:1013:4515:0015:3017:1017:20

One day with YOHOME

Waked up by YOHOME based on today's scheduleOrder breakfast on YOHOMESearch location of classroom on YOHOMEAuto roll call by mobile positioningView coursewares on YOHOMEAsk questions on YOHOMEContact teacher by YOHOME after classCheck available seat in library on YOHOMEPay lunch bills by electronic purse on YOHOMEView campus news on YOHOMEGet into the elective system on YOHOMECheck tuition payment on YOHOMEReceive message of today's club activity on YOHOMELink social network account with YOHOMEView today's dinner menu on YOHOME......

One day with YOHOME

www.xique.com

XIQUE - Independent fashion brand 2013Photography /Graphic Design /Web

XIQUE is a new-born independent fashion brand. I took a series of photos for their spring & winter collection. And I also designed the brand website.

LOADING

PROJECT 3XIQUEWEB1 2 3

4 5 67 8 9

101112

1 2 3

HOMEPAGE4 5 6

NEW COLLECTION ABOUT7 8 9

PRODUCT DETAIL10 1112

PROJECT 3XIQUEWEB

MIRROR MIRROR- Intelligent dresser 2014Interaction Design

"Mirror, mirror, tell me who is the most beautiful girl in the world."Mirror Mirror is an intelligent dresser, which can monitor skin condition and give appropriate make-up advice.

The product is composed of three parts, the display screen on the mirror surface, the lighting dressing case and the skin condition monitor. The use-pattern is that the sensor monitors real-time skin condition, while proper cosmetics will be highlighted correspondently. The built-in camera and face detection function provide accurate make-up guidance. Users can also share their photos online, and join the selection of "the most beautiful girl today".

PROJECT 4MIRRORINTRODUCTION

PROJECT 4MIRROR RESEARCH

Skin condition monitor

Light-up appropriate cosmetics

I found it is really hard to figure out what kind of skin I have, sometimes I feel dry, sometimes it becomes oily, ...

I am confused about different cosmetics products on the market, ...

I had tried to follow the make-up tutorial videos, but it was less easy than what it seems. Everyone has different face shape, ...

Use the sensor to detect the pH, moisture & oil content and melanin content of skin. Results are shown on the screen. Real-time monitoring of skin condition.

Based on the skin condition, appropriate cosmetics are light up by built-in LED light.

Ideal make-up sample import

Make-up guidance

Share your photoAfter finding the make-up sample in database, the computer will match the sample with user's face by facial recognition technology, and generate corresponding guidance.

Share photos online and join "the most beautiful girl today" competition.

Visual guidance is shown on the mirror with accurate place to put make-up on, while monitoring user's real-time make-up progress.

PROJECT 4MIRROR

TECHNICALSUPPORTS

Facial recognition

Motion capture

This technique uses 3D sensors to capture information about the shape of a face. This information is then used to identify distinctive features on the surface of a face, such as the contour of the eye sockets, nose, and chin.

Based on motion capture, the virtual make-up guidance could completely fit user's face in any movement.

MATRIX- Public Art 2014Interaction Design

Matrix is a public interactive installation, and it is designed based on the structure and mode of operation of the neuron. When people stepped on the dendritic sensors around buildings, light signal will go to spread, like electric current transmission to the sculpture in the center, and light it up in varying degrees. In this design, participants arrive in a microscopic world, as a small part of the nervous system, nurture the matrix's operation.

PROJECT 5MATRIXINTRODUCTION

PROJECT 5MATRIX ELEMENTS

NeuronA neuron is an electrically excitable cell that processes and transmits information th rough e lect r ica l and

chemical signals.

PROJECT 5MATRIX

TECHNICALSUPPORTS

Sculpture

LED light

LED light

Projector

Sensor

Touch switch

Projection mappingProjection mapping, is a projection technology used to turn objects, often irregularly shaped, into a display surface for video projection.

PROJECT 5MATRIX PROTOTYPE

I used stretchable material experimented the shape and internal structure of the sculpture. After stretching, the tension of material generated a changeable form, which is similar with an organism.

Dopamine and epinephrine are the main neurohormones that cause different human emotions. In this installation, when people step on the sensors arranged according to the node arrangement of chemical structure, the neuron-shaped sculpture will be stimulated and the relevant pattern will be projected on the sculpture. Through audience participation, the project aims to construct a micro world of nerve and connect audience behaviors together through its interactive facility to create a resonance in the subconsciousness of audiences.

DOPAMINE(excitement happiness)

ADRENALINE EPINEPHRINE(fear nervousness)

PROJECT 5MATRIXINTERACTION

Dopamine and epinephrine are the main neurohormones that cause different human emotions. In this installation, when people step on the sensors arranged according to the node arrangement of chemical structure, the neuron-shaped sculpture will be stimulated and the relevant pattern will be projected on the sculpture. Through audience participation, the project aims to construct a micro world of nerve and connect audience behaviors together through its interactive facility to create a resonance in the subconsciousness of audiences.

excitement happiness

fear nervousness

FISH- Interactive installation 2014Interaction Design/ Photography/ Post production

Fish is an interactive installation. The design purpose is to provide audiences a conflict experience between virtual and reality through their interaction with the entity and the projection via operational gestures. The image of swimming fish is projected on ceiling through an empty fish tank. When people touch the tank, the visual image of fish will react in a relevant way.

PROJECT 6FISH INTRODUCTION

knock

frightened

Different manners of projection and exhibition create a strong spatial sense and a Japanese-style aesthetic perception. The interactive experience based on the real life but also different from it provides an interest for the installation.

lean release remove

frightened struggling more fish fading

PROJECT 6FISHINTERACTION

FINE ARTPLANECONSTITUDE

POINT.LINE.PLANE- Paint 2011

GRADIENT.RADIATE.REPETITION.- Paint 2011

FINE ARTCOLORCONSTITUDE

THE ORDER OF COLOR- Paint 2011

THE TONE OF COLOR- Paint 2011

The art work can be separated into nine single pieces, each of which represents a different color tone. Going in sequence the whole picture expresses each time of the town in one day.

2DGRAPHICDESIGN

BUDDHISM.TAOISM.CONFUCIANISMCharacter Design 2012

"Buddhism as heart , Taoism as bones, Confucianism as skin" is the standard of behavior of Chinese people. This graphic combines the three Chinese characters above, represents the division of Chinese philosophy.

PERSONAL LOGOCharacter Design 2012

The personal logo was designed on the structure of the Chinese characters of my name 胡丹力 combined with the rock gesture, to reveal my personality.

2DINTERFACE

DESIGN

RED STARMusic player/Mobile interface 2012

The basic configuration of music player interface looks like a star badge, which can be placed at the corner of desktop and uses with basic functions. It will become a music festival stage with additional functions like lyrics and light effects after unfolded it.

The interface is in the style of Steampunk. A user could unlock the phone in the fashion of an old lock, by spinning the lock to correct number.

2D LAYOUT

RESUME- Layout 2012

2D ILLUSTRATION

KITTY TOWN- Illustration 2012

2DMOTION

GRAPHIC

LITTLE BARMV/Motion graphic 2013

(video)

3D MOCK-UP

BUDDHA MOUNTAINIllustration&Mock up 2014

I drew the conceptual scene as a video game and created the 1m high mock-up. The carved Buddha and the underground depository of Buddhist texts displays both sacredness and mysteriousness of Buddhism.

BUDDHA MOUNTAINIllustration&Mock up 2014

I drew the conceptual scene as a video game and created the 1m high mock-up. The carved Buddha and the underground depository of Buddhist texts displays both sacredness and mysteriousness of Buddhism.

The mock-up was made by news paper, plaster, clay, simulation water glue and other material.

3D MODELING

FOLK HOUSE3Ds Max based modeling 2014

3DANIMATION

WONDERLAND3Ds Max based animation 2014

(video)

I have volunteered in the school folk art museum and created series of photographic work for their publication.

PHOTOGRAPHYFOLK ARTMUSEUM

I have volunteered in the school folk art museum and created series of photographic work for their publication.

INTERNSHIP DOCUMENTARY

DONGYE SONG'S CONCERTDocumentray/ DVD of the concert 2014

Photography/ Post-production

I jo ined the Dongye Song's concert as a back stage photographer and also be responsible for post-production during my internship in DATESE studio.

(video)

INTERNSHIPINTERVIEW

MODERN SKY FESTIVAL NYCInterviewer/ Photography/ Post-production 2014

During this event , I was responsible for interviewing musicians and crew as the journalist from PPTV. (a world's leading Chinese video media web)

(video)