공식 홈페이지 : https://material.io/design

Material Design

구글이 2014년에 도입하였다.

• 플랫 디자인에 그림자로 깊이감 추가 (요소별 높낮이 표현)
• 역동적인 애니메이션 활용

Material design 도입이유

• 일관성 있는 UX
  - 어떤 기기나 앱을 사용하든 익숙한 사용자 경험
  • 어떤 컨텐츠든 담을 수 있는 디자인
• 의도 명확화
  - 어떤 요소든 용도와 작동 방법을 알기 쉽도록한다.
  - 뚜렷한 반응성 : 행위에 의한 결과를 쉽게 인지한다.
  

가이드

1. flat한 요소를 입체적으로 사용

• block / inline-block 요소들과 배경색을 활용한다.
• shadow로 깊이감 표현

2. 사용자 행동에 대한 반응 보여주기

• :hover 등 활용 (과하지 않도록)

3. 메인 색을 지정하여 활용하기

• 공식 홈페이지에서 추천하는 색상 : https://material.io/design/color/the-color-system.html#tools-for-picking-colors

4. 구글 사이트, 안드로이드 공식 앱 참고

• Gmail, youtube, firebase
• material UI themes : https://mui.com/store/

5. 라이브러리 활용하기

• https://getmdl.io/