Bridge

Bridge – An Experience with Material Design

click to view detailed project. pdf

Explorations on visual system in Material Design

April, 2015

Course: Visual Interaction Design

Role: Individual work

Untitled-4-01
 THE CHALLENGE

-Thread as the Material-

Untitled-4-01

The purpose of this project is to explore the possibilities in material design, the challenge is trying to create a visual language which is abstracted from classic principles from a selected material, thread. The thread could be considered as a line graphically, line is the connection between dots, surfaces, and planes. In reality, bridge works the same way, bridge is a structure built to connect place to place. Through the exploration of different materials and different properties of the selected material, this project considers the rationality, consistency, intuition and visual graphics in user experience.
Untitled-4-01
Explored Materials

Untitled-4-01

material map-01
Untitled-4-01
Why Bridge?

Untitled-4-01

material design research-13
                     A “raw” material has more potential than an already- made artificial material/ product.  
Untitled-4-01

material design research-14

Lifeless material is more stabilized than an organic material,
which will make more sense to create an interface with.
Untitled-4-01
               material design research-15
Thread can be considered as a line, which can form a plane, and also can be broke into a dash-line.
Untitled-4-01Untitled-4-01
material design research-16
Thread can be interpreted as information which is a chaos.
Interface will be the rule and guideline that helps the user to understand the information clearly.
Untitled-4-01
THE PRINCIPLES

– Abstract Properties to Interface Principles –

Untitled-4-01

 

material map-01

 

 

material map-12

 Untitled-4-01
Material has a uniform thickness(2 dp) in x-axis or y-axis. Material never has a thickness in z-axis. Material has a color, never will be transparent.

 

 

 Untitled-4-01
material map-19
Untitled-4-01
Material can break into points/ dots/ dash-lines.

 

 

Untitled-4-01Untitled-4-01material map-13
Untitled-4-01
Material can expand to rectangular surface and frame, but never grows in 3d space.

 

 

 

Untitled-4-01

material map-16Untitled-4-01
4   Material can rotate into circular surface and frame when it has a fixed point, but never transforms to triangle and polygon.

 

 

 

 

Untitled-4-01
material map-14
Untitled-4-01
Surface and frame cannot pass through other material, frame can be seen through.

 

 

   Untitled-4-01
material map-17
Untitled-4-01
Formed surface and frame has no thickness, never casts shadows, never bends or folds.

 

 

 

 
material map-20Untitled-4-01
Material can change shape in x-axis and y-axis, but the perimeter cannot increase.

 

 

 

 
Untitled-4-01
                                                                     
 Material (line) can be spontaneously generated or destroyed anywhere in the  environment. Surface and frame can only generate from material(line), and degenerate to material(line).

Untitled-4-01Untitled-4-01material map-15

Untitled-4-01
Sheets of material can join together to become a single sheet of material.

 

 

Untitled-4-01

material map-18
Untitled-4-01
10 Material has elasticity.

 

 

 

 Untitled-4-01
SWIPE TO CHANGE, ZOOM FOR DETAIL, CLICK TO CONFIRM

-Bridge Calendar –

Untitled-4-01

date

 

Untitled-4-01
                                        Change Date
“Bridge Calendar” uses a single line as the interface. When user swipe horizontally on the screen, the month will change; when zoom in on the line then swipe, the day will change. Solid line for month, dashline for day.

 

 

 

 

 

 

 

add event

 

 

 

                                     Add Event
When user clicks on the date, the line extends to a content box; when clicks on confirm, the content box goes back to line then forms a summary content box. Everything generates from line, degenerates back to line.

 

 

 

 

 

edit event

 

 

 

                                        Edit Event
When user zooms into the summary content box, the box degenerates to dashline then forms content box with dash outline, which means it can be edited in details.

 

 

 

Untitled-4-01
Untitled-4-01
DEMO
click demo below for  full screen replay

date

Untitled-4-01

THE PROCESS

 

Untitled-4-01

Work presented in 5 weeks | April. 2015
Individual Project, Illustrator, Photoshop, AfterEffect
Project completed under “Visual Interaction Design”