[WEB DESIGN] FLAT DESIGN

 

플랫 디자인 : 웹 요소에서 입체감을 주는 효과들을 제고하고 단순하게 표현하는 기법

- '평평'하고 '납작'한 디자인

- 납작하다 : 깊이를 제거해 입체감을 없앴다는 의미

#깊이 : 그림자와 경사, 그라데이션 등 웹 요소를 입체적으로 보이기 위해 사용하는 여러가지 효과

 

 

장점

- 사용자의 시선을 분산시킬 수 있는 복잡한 요소들을 빼고, 중요한 것만 남기기 때문에 콘텐츠에 집중할 수 있음

 

 

직관성

- 디자인적인 부연 설명을 하지 않아도 사용자가 직관적으로 이해해서 클릭하거나 탭할 수 있도록 유도

- 화려하게 보이기 위한 그림자나 입체적으로 보이기 위한 깊이, 반사 효과 등의 추가적은 효과들은 배제

- 단순히 사각 형태로 삽입하거나 텍스트와 이미지를 같이 겹쳐놓는 오버레이 형태로 배치에 시각적인 효과를 줌

- 주목성을 높이는데 초점을 맞춤

 

 

색상 활용

- 너무 많은 색상을 사용할 경우, 복잡해 보이고 혼란을 줄 수 있기 때문에 색상 사용은 최소화

- 단순 도영을 사용하는 대신 색상은 밝고 화려하게

- 일반적으로 플랫 디자인의 웹 사이트는 6 ~ 8 가지 색상을 메인 색상으로 사용

#색상 참고 사이트 https://flatuicolors.com/

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

 

타이포그래피

- 간결하면서 인상적이게

- 글자를 통해 의미를 전달

- 화려한 특수 글꼴이 많거나 효과를 많이 넣을 경우, 직관성에 방해가 될 수 있음

- 글자의 색깔을 정할 때, 짙은 바탕에는 흰색 글자를, 환한 배경에는 검은색 글자를 많이 사용함

- 글자 끝에 장식이 없는 산세리프체(sans-serif)를 많이 사용

 

 

동적인 느낌

- 트랜지션(장면 전환)효과나 패럴랙스 스크롤링(parallax scrolling) 같은 효과를 넣음

 

 

고스트 버튼

- 테두리나 배경이 투명하고 희미해서 문서의 배경이 그대로 드러나는 버튼

- 장점 : 배경 이미지가 투명하게 드러나 깨끗하고 깔끔해 보임

- 단점 : 배경 이미지를 잘못 선정할 경우, 버튼이 제대로 보이지 않을 경우가 있음

 

 

---

 

 

머티리얼(material) 디자인

- 웹가 앱을 통틀어 모든 개발 플랫폼에서 사용자가 경험을 하나로 묶기 위해 구글에서 제시한 디자인 방법

- 사용하는 색상이나 타이포그래피, 아이콘, 이미지 등의 스타일을 보면 플랫 디자인과 크게 차이가 없음

- 가상의 빛을 이용한 입체 효과를 추가해 공간감과 입체감을 부여함

- 버튼이나 요소의 가장자리에 그림자 효과를 추가해, 마치 입체적인 사물을 만지는 듯한 효과를 줌

#더 자세한 설명은 https://material.io/design/