'플랫디자인'에 해당되는 글 1건

  1. 2014.02.04 [본문스크랩] 플랫디자인의 5가지 특징

플랫디자인,

요즘 디자인 커뮤니티에서 끊이지 않는 화두입니다. 많은 디자이너가 플랫디자인에 대해 굉장히 싫어하거나 부정적이기 때문입니다. 좋은 디자인은 편의성에 중점을 두고 만들어집니다. 플랫디자인은 특히, 이 편의성에 중점을 둔 덕분에 유행되었다고 보지만 모든 프로젝트에서 적용되지 않기 때문에 꼭 적용할 필요는 없습니다. 이런 플랫디자인에는 차별화된 5가지 특징들이 있습니다. 그럼 차별화된 5가지 특징을 어떻게 적용하는지 요소별로 살펴보겠습니다.

1. 적은 효과

flat-design-02
flat-design-03

플랫디자인은 이름처럼 간단하고 편평한 모습의 2D 디자인입니다. 이는 화려한 효과를 뺀 콘셉트입니다. 그래서 이미지 프레임이나 아이콘 등 모든 요소에 그림자와 엠보싱, 그라데이션을 통한 깊이감 등의 효과를 크게 쓰지 않았습니다.
현실감 있어 보이게 하는 요소나 3D처럼 보이는 스큐모픽디자인(Skeuomorphicdesign 역주: 그동안 애플의 디자인 철학과도 같이 사용된 디자인)도 추가되지 않습니다.

플랫디자인은 뚜렷한 특징의 외관을 가지고 있으므로 별다른 효과를 주지 않습니다. 그래야 사용자의 쉬운 이해와 상호작용이 따르는 게 되며, 직관적인 설계 및 사이트 구조의 명확한 감각에 중점을 둠으로써 성공적인 플랫디자인 프로젝트를 이끌게 됩니다. 많은 웹사이트에서 플랫디자인의 스타일을 사용하고 있지만, 웹사이트보다 에플리케이션이나 모바일 디자인에서 더 인기가 있습니다. 작은 화면에서 작은 버튼이나 옵션을 쉽고 직관적으로 사용할 수 있게 만들어주기 때문입니다.

2. 심플한 요소

flat-design-04

flat-design-05

flat-design-06

flat-design-07

플랫디자인은 버튼 및 아이콘과 같은 간단한 UI에 많이 사용됩니다. 디자이너는 원이나 사각형과 같은 간단한 모양을 활용하고 도형의 모서리는 각이 지거나, 일정한 곡률의 라운드를 주기도 합니다.

각 UI 요소는 이용하기 쉽게 할 수 있어야 합니다. 디자인의 설명이 적고 사용자에게 직관적이어야 상호작용이 잘 될 수 있기 때문입니다. 콘텐츠는 심플한 스타일링뿐만 아니라, 이용 촉진을 위해 클릭하고 싶어지도록 버튼의 색상을 대담하게 씁니다. 하지만 간단한 요소와 심플한 디자인을 혼동하지 마십시오. 플랫디자인의 디자인 자체가 심플해 보일 뿐이지 다른 유형과 마찬가지로 디자인 개념과 기획이 간단하지는 않습니다.

3. 타이포그래피

 flat-design-08
 
flat-design-09
 flat-design-10

심플한 특성을 가진 플랫디자인에서 타이포그라피는 매우 중요합니다. 글씨체는 심플한 디자인과 일치해야 합니다. 화려한 폰트는 매우 심플한 디자인에서는 이상하게 보일 수 있습니다. 하나의 디자인 콘셉트는 비주얼과 폰트의 일정한 스타일을 가지고 있기 때문에, 최종 결과물에는 대담하고 간단하게 효과적인 폰트가 표현될 수 있어야 합니다.

플랫디자인을 사용할 때에 사이트의 기본 타이포그래피를 위해 변화와 굵기가 다양한 산세리프형 폰트군(역주: 자획 끝 부분에 돌출 선이 없는 글자나 숫자)을 참고하면 좋습니다. 예술적 요소로 참신한 글꼴로 특수서체의 사용은 무게 중심이 치우칠 수 있으므로 주의해야 합니다.

4. 컬러

flat-design-11

  flat-design-12
flat-design-13

색상은 플랫디자인에서 가장 큰 비중을 차지합니다. 다른 디자인 보다 색을 과감하게 사용해서 더 밝고 화려하기 때문입니다. 게다가 대부분 두 세가지 색을 사용해서 단순함을 주는 반면 플랫디자인은 6~8가지 색까지 사용하고 있는데 채도가 높은 색상은 활기차 보이기 때문에 기본 및 보조 색으로도 많이 활용합니다. 특히 예전에 유행했던 색상들, 자몽색을 포함해 보라색, 녹색 및 파랑색의 인기가 높습니다.

5. 미니멀한 접근

 flat-design-14
  
flat-design-15
flat-design-16
플랫디자인은 본질적으로 간단하고 심플할 때 더 잘 표현 됩니다.

디자인에 전체에 많은 이야기를 담는 것 보다는 간단한 색상 및 텍스트로 하는 것이 좋고 시각적인 면을 강조하고 싶으면 사진을 이용하는 편이 더 낫습니다.

플랫디자인을 이용한 svpply와 같은 일부 사이트에서는 간단한 배경에 콘텐츠를 배치하여 표현했습니다.

마치며…

flat-design-17
flat-design-18
flat-design-19
flat-design-20 flat-design-21

플랫디자인은 편평한 스타일의 기본 테마가 사용되지만 일부 효과를 넣기도 합니다. 예를 들어 아이콘에 그라데이션을 넣거나 그림자를 넣기도 합니다. 이렇게 디자인 할 때 한 효과를 해당 콘텐츠에 적용할 수 있기 때문에 더 다양하게 작업할 수 있습니다. 디자이너들은 이렇게 추가된 부분이 깊이가 있고 짜임새가 있기 때문에 호의적이고, 사용자 또한 이런 스타일이 덜 날카로워 보이고, 적절한 상호작용을 유도하는데 도움이 되어 호의적인 반응을 보인다고 생각합니다.

 출처: Principles of Flat Design


저작자 표시
신고
Posted by suny imoo
블로그 이미지
UX Designer facebook.com/jsy.1005

카테고리

imoo (190)
숨통 (0)
In Lens (56)
Design (124)
레시피스크랩 (8)

Back to top