Material Design(IOS, Android, Web)

https://material.io/

Material Design

Material Design

스큐어모피즘 > Flat Design >  머티리얼 디자인으로 이어지는 UI트렌드에서

주류로 군림하고 있는 스타일로써 디자이너 초보자의 경우 이 Material Design만 잘 따라가도

최소 기본은 되는 디자인을 구성할 수 있다.

*Skeuomorphism(스큐어모피즘): 사실적인 질감, 형태 등으로 구현하는 것에 중점을 두는 디자인기법

Skeuomorphism(좌) vs Flat(우)

*Flat Design : 복잡한 효과를 배제하고 단순한 형태에 중점을 두는 디자인기법

*Meterial Design : flat Design의 장점을 살리며 입체감을 표현하는 디자인 기법

Flat(좌) vs Material(우)

 

 

UI icon

https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes

24x24px의 1 Grid를 활용하여 아이콘을 작업하는 예시를 제시해준다.

그 외 Good / Bad의 아이콘 예시를 보여주는 페이지이므로 영어의 경우 번역기능의 도움을 받아

꼼꼼하게 확인해보는 것이 좋다.

 

---

UI Text Field

올바른 텍스트필드의 예와 규칙은 무엇인지 알려주는 Meterial Design

https://material.io/components/text-fields#theming

 

 

 

 

---

 

 

UI Components

컴포넌트 : 프로그래밍 및 디자인에 있어서 특정 동작을 가지는 요소

https://material.io/components

Android, IOS, web 등 필요에 따른 컴포넌트를 확인할 수 있으며 각 크기와 여백의 기본 제시가 되어있어

특히 앱 디자인을 할 경우 매우 기준이 될 수 있다.

각 설명 페이지 하단에 크기와 여백을 보여주는 템플릿이 포함되어있다.

 

 

 

 

Typography system

https://material.io/design/typography/the-type-system.html#type-scale

Material Design