Glue

Follow the Google material design process and define design principles based on one closed material. 

Material Design_inside.png

----------------------------------------------------------------------------------------------

"The way that you accomplish tasks with a product - what you do and how it responds - that's the interface." - Jef Raskin

----------------------------------------------------------------------------------------------

poster.png

Project background

Since the introduction of the graphic user interface, metaphors have been the primary lens through which we view interactions within digital spaces. From the desktop metaphor of the early Macintosh to Google’s ‘Material’ design, metaphors allow us to understand abstract concepts in a concrete way. I challenged myself to create a new visual language that is abstract from liquid-like material and synthesizes different properties of the selected material, which can be utilized as a new design principle. Project last for 3 weeks. 

Material - Glue

  • Liquid material is flexible, which has a lot of potentials.

  • People have different perceptions of its physical property

  • Sticky and unstable which adds a more organic and life feeling.

Material Design_ouside 1.png

Exploration

Material Design_ouside 2.png

Material top attributes

poster-07.png
poster-10.png
poster-08.png
poster-11.png
poster-09.png
poster-21.png
poster-15.png
poster-14.png
poster-17.png
poster-16.png
poster-02.png
poster-06.png
poster-05.png
poster-04.png
poster-03.png
poster-12.png
poster-13.png
poster-18.png

Defined ten principles

Untitled-1-01.png

1. Material has varying x & y & z dimensions (measured in dp).

2. Material has color but will change color based on time. 

Untitled-1-02.png
Untitled-1-03.png

3. Material has weight and flow because of gravity.

4. Material can expand to a large surface while being touched or pushed.

Untitled-1-04.png
Untitled-1-10.png

5. Material can combine or absorb with similar material and become a larger surface but can not be totally separate. The formed surface has thickness but never bends or folds.

6. Content is displayed on the material, in any shape and color.

Untitled-1-09.png
Untitled-1-05.png

7. Material transforms from liquid to solid after a small amount of time.

8. Material can be spontaneously generated or destroyed anywhere in the environment.

Untitled-1-06.png
Untitled-1-07.png

9. Material can pass through similar material.

10. Material can draw dots, lines, and surfaces.

Untitled-1-08.png

Animation exploration

2.gif

Information drop down

1.gif

Add event & Add schedule

4.gif

Combine activities

3.gif

Open and close setting 

6.gif
7.gif
8.gif
5.gif

Animation exploration

2.gif

Information drop down

1.gif

Add event & Add schedule

4.gif

Combine activities

3.gif

Open and close setting 

6.gif

Loading bar

8.gif

Block event

7.gif

Scroll up

5.gif

Change layer

Interface exploration-Alue calender

11.png
33.png
44.png
22.png