패턴랭귀지 사례 #2 material design
- 2. deisgn
- 4. 2.
- 5. 4.
- 6. Thur.
- 7. 석사과정 최주은 2016-Winter Vacation Lab-meeting
- 8. Agenda 1
- 9. 2
- 10. Material Design 소개 Material Design 원칙 + Material Properites
- 11. Material
- 12. Design
- 13. 소개 1
- 14. Material
- 15. Design
- 16. 배경 원래 도구의 형태를 그대로 반영한 Skeuomorphism
- 18. design으로 변화하였고, 공간적 움직임을 더한 Material
- 19. design이 등장함 • 기능적으로 불필요할지라도 실제 물건을 모방하여 디자인 • 아날로그 요소를 디지털 환경에서 모방하 여 화면 구성 Skeuomorphism Flat Material • 스큐어모피즘이 갖고 있는 사물의 입 체적인 요소를 배제한 디자인 • 단순한 아이콘, 색 등을 활용해 미니 멀리즘한 화면 구성 • 플랫디자인과 유사하지만 스큐어모 피즘적 특성을 일부 적용한 디자인 • 그림자와 모션을 활용하여 화면 내 층 위 형성하여 화면 구성
- 20. 디바이스의 제약 없이 일관되고, 통합된 경험을 제공하기 위한 비주얼 랭귀지(Visual Language) What
- 21. is
- 22. material
- 23. Deisgn? • Material은 가상의 “종이 뭉치”를 의미 • Material design의 원칙(principle)에 따라 Material의 배치, 높이, 변형, 움직임이 결정됨
- 24. What
- 25. is
- 26. material
- 27. Deisgn?
- 28. Material
- 29. Design
- 30. 원칙 2
- 31. 2가지
- 32. 환경
- 33. 요인
- 34. 3가지
- 35. 원칙 2
- 36. 2
- 38. ‘3D
- 39. 공간에
- 40. 빛이
- 41. 존재한다’는
- 42. 환경을
- 43. 가짐
- 44. 따라서, 빛의 움직임에 따라 그림자가 형성되고, 그림지는 ‘깊이’를 만들어낼 수 있음 Light and shadow3D space: all objects have x, y, and z dimensions
- 45. 3
- 46. Principles 1. Material is the metaphor 2. Bold, graphic, intentional 3. Motion provides meaning
- 47. 3
- 48. Principles A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink. Surfaces and edges of the material provide visual cues that are grounded in reality. The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts. 1.
- 49. Material
- 50. is
- 51. the
- 52. metaphor 종이와 잉크의 메타포를 바탕으로 ‘종이 위에 떨어지는 빛*’이 어떻게 상호작용하고 움직이는지에 중점 * 빛은 종이 표면과 만나 이음새를 드러내고, 공간을 나누며(깊이 형성) 움직임을 보여주는 핵심적인 요소
- 53. 3
- 54. Principles 1.
- 55. Material
- 56. is
- 57. the
- 58. metaphor 요소의 기능에 따라 깊이를 제한, 동작의 우선순위를 정해주고, do / do not의 구분을 명확히 함
- 59. 2.
- 60. Bold,
- 61. graphic,
- 62. intentional 3
- 63. Principles The foundational elements of print-based design They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user. 섬세한 색의 사용, 맞닿아 있는 이미지, 큰 스케일의 타이포, 의도적인 여백은 몰입감있는 인터페이스를 형성함 따라서, 강조와 중요도에 따라 위와 같은 디자인 요소를 사용
- 64. 2.
- 65. Bold,
- 66. graphic,
- 67. intentional 3
- 68. Principles Design 원리 tentional meaning 의 m도 지요소A 디자인 가이드에 따라 색, 아이콘, 이미지, 타이포, 설명까지 스타일 정의를 갖춤
- 69. 3.
- 70. Motion
- 71. provides
- 72. meaning 3
- 73. Principles Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize. 화면의 전환은 끊기듯 갑작스럽게 이루어지지 않으며 특정 움직임을 삽입해 화면이 바뀌는 과정을 보여줌 잉크의 퍼짐을 기본적인 속성으로, 그림자와 광원을 이용해 생동감, 입체감, 공감감 부여
- 74. 3.
- 75. Motion
- 76. provides
- 77. meaning 3
- 78. Principles
- 79. Material
- 80. Properties
- 82. 3가지 대원칙 속에 3소원칙들이 있음 Material
- 83. Properties Physical properties Transforming material Movement of material
- 84. 3가지 대원칙 속에 3소원칙들이 있음 Material
- 85. Properties Physical properties • (1) Has varying x y dimensions and a uniform thickness (1dp) • (2) Cast shadow • (3) Content is displayed on material and behave independently of the material • (4) Input events cannot pass through material • (5) Multiple material elements cannot occupy the same point in space simultaneously • (6) Material cannot pass through other material.
- 86. 3가지 대원칙 속에 3소원칙들이 있음 Material
- 87. Properties Transforming material • (1) Material can change shape • (2) Material grows and shrinks only along its plane • (3) Material nerver bend or folds • (4) Sheets of material can join together to become a single sheet of material • (5) When split, the sheet of material will become a whole sheet again
- 88. 3가지 대원칙 속에 3소원칙들이 있음 Material
- 89. Properties Movement of material • (1) Material can be spontaneously generated or destroyed anywhere in the environment • (2) Material can move along any axis • (3) Z-axis motion is typically a result of user interaction with material
- 91. film
- 92. End
- 93. of
- 94. document !