'Design trend'에 해당되는 글 2건
[Flat design] Long shadow design 롱 쉐도우 디자인이란?
Design portfolio/Design interest




Long shadow icon

롱 쉐도우 디자인


글을 준비해놓고 두달정도 묵혀둔 뒤에 올리는지라 조금 늦어진 감이 있지만…

최근 디자인 트렌드를 보다보면 많이 보이는 디자인 스타일이 있다.
바로 롱 쉐도우 아이콘 디자인(Long shadow icon design)이다.




Long shadow가 무엇인가?

드리블 사이트에서 Long shadow라고 검색을 해보자.
아래와 같은 검색결과가 나오며 특징을 쉽게 알 수 있다.

주로 UI디자인에서 인터페이스 요소 및 아이콘에 큰 영향을 미치고 있으며,

웹 사이트 디자인에 많이 쓰여지고 있다.





http://dribbble.com/search?page=1&q=long+shadow










Long shadow design 의 특징?


롱 쉐도우는 해가지는 오후 또는 새벽에 물체를 보는 듯이 

긴 그림자 현상을 통해 드라마틱한 효과와 느낌을 선사하며, 

45도 기울기로 2.5배 이상의 길이를 유지하는 것이 특징이다.
(일부는 120도 기울기로 하기도 하지만 대부분 45도 각도로 

오브젝트의 오른쪽 하단 모서리 방향으로 그림자를 디자인한다.)


주로 이용되는 디자인의 형식이 플랫하며, 크게 2가지 스타일로 나눌 수 있다.
첫번째는 같은 톤의 그림자가 끝까지 선명하게 유지되는것.
두번째는 그림자가 끝으로 갈수록 차차 흐려지는 형식.


그러나 그림자가 점차 흐려진다 하더라도 기존의 디자인 형식에서의 

그림자보다 훨씬 길며, 확연하게 그림자 영역이 구분된다.





Long shadow design 의 역할?


롱 쉐도우는 플랫 디자인의 심플함과 단조로움을 보완해주는 역할을 한다.
플랫 디자인이 깔끔하고 명쾌하다는 장점이 있지만 낮은 완성도와

자칫 단조로울수 있는 단점 역시 존재한다. 

롱 쉐도우는 플랫 디자인의 이러한 부분을 보완해 줄 수 있는 하나의 방법으로 볼 수 있다.





Long shadow 디자인 보기





by David Hakkert





by Christoph Gromer





Long shadow experiment

by Giuseppe Pessia





Savory

by Christoph Gromer





Long Shadow Icons

by Georgi Davitaya





Long Shadow Flat Icons

by Hakan Ertan






Paris before sunset.

by Diana Gosi







Long snake

by fabio cuba







Long shadow Mail Icon

by Andrew -



MongolMusic logo with long shadow

by Chris






Flat long shadow Oreo

by Nick Bruun






Long shadow 디자인하는 법



http://www.awwwards.com/flat-long-shadows-step-by-step-tutorial-resources-and-examples.html


친절하게도 awwwards 사이트에 롱쉐도우 디자인 제작방법을 알려주는 방법을 올려준 분이 계시다. 감사한 페이지 :D






동영상으로도 볼 수 있다




더 참고하기 +

구글의 Straight hard shadows

롱 쉐도우는 아니지만 이와 비슷한 디자인 스타일을 지닌 구글의 Straight hard shadows 디자인이 있다.


http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 


위 링크는 behance에 올라와있는 구글 Visual assets guidelines이다. 
구글 아이덴티티를 총 정리하여 제공된 가이드라인북으로
구글의 대표 아이콘들의 형태와 컬러, 섀도우 등 모두 정의가 되어있다. 
그 중 design principles 의 shadow부분을 살펴보면 straight hard shadows라고 명시되어있다. 
이는 long shadow와도 비슷하기도 하지만 미묘하게 다르다.

Long shadow가 일반적으로 길게 빠지는 그림자의 모든 것을 지칭한다면 
구글에서 정한 Straight hard shadows는
블러나 그라데이션이 들어가지 않은 직선 형태의 그림자여야 한다. 

사용불가 예시를 보면 알 수 있듯이, 블러나 그라데이션 등 자연스러움을 강조한 효과는 사용해선 안된다.










트렌드라고 막 따라하는 것이 아니라 
롱 쉐도우 디자인에 대해 정확하게 파악하고 이용하면 더 좋은 디자인을 하도록 하자!






참고 페이지


http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/

http://www.entyce-creative.com/the-latest-trend-in-web-design-long-shadow/

http://je.roon.io/long-shadow-design

http://designmodo.com/long-shadows-design/



저작자 표시 비영리 변경 금지
신고
Name
Password
Homepage
Secret
[Flat Design series ①] 플랫 디자인이란?
Design portfolio/Design interest


포스팅 시리즈 보기






Flat Design 이란?




얼마 전 iOS7 이 공개되면서 화제를 일으키고 있다.


기존 애플의 아이덴티티와도 같았던 디자인 스타일을 버리고

더 심플해진 디자인으로 나타났다.





<apple.com>






리얼메타포 스타일을 지양하고 플랫 디자인 스타일을 지향하는 iOS7 이 발표되었다.


이 디자인 스타일이 대체 뭐길래

애플이 대 변신을 하였을까?





Flat 의 사전적 정의 

 평평한, 편평한



Flat design이란 쉽게 말하자면 

여성들의 바닥이 평평한 신발을 플랫슈즈를 일컫듯이

디자인에서도 입체감을 주는 디자인이 아니라

평평한 느낌을 주는 것들이 Flat design 이라고 보면 된다.





구글에 flat design 이라고 검색해보자




<flat design 구글 검색 캡쳐 이미지>



검색결과를 보다보면 전체적으로 기존 모바일 디자인에 비해 심플한 것을 알 수 있다.

플랫 디자인은 디자인의 입체적인 기능을 빼고 drop shadow, bevel, gradient 등 

여러가지 효과들을 빼고 기본적인 요소들을 레이아웃, 대비 등을 이용하여 디자인한 것이다.



대표적인 flat design으로 윈도우8을 떠올리면 쉽게 알 수 있다.


윈도우 8의 UI디자인을 Metro UI 라고 하는데 

위키피디아에서 설명하는 걸 보면

Metro는 MS사가 타이포그래피 기반 디자인 언어의 내부 코드명이라고 한다.



Modern ui, Metro ui, simple ui,  Flat ui 등 다양한 이름이 있지만

늘 그렇듯 분류가 체계화 되지않은 상황에서

명칭에 대해 따지기 보단 디자인을 공부하는 입장으로서

다 비슷한 것을 지칭하므로 그래픽 스타일을 파악하는데 중점을 두는게 좋을 것 같다.





windows 8 Metro ui 이다.





<windows8 구글링 이미지>





아래 사진들은 윈도우폰이다.





<윈도우 폰 구글링 이미지>



이처럼 MS사에서 컬러, 타이포, 크기 등 조형요소들을 이용하여 디자인을 제공했었다.


그러나 국내에선 윈도폰이 출시가 되지 않아, 사용하는 사람들이 적었고,

스마트폰이 도입되면서부터는 비교적 아이폰 유저들이 늘어나면서 

플랫 디자인 보다는 실제 모습을 연상할 수 있는 스큐어모피즘에 더 익숙해졌다.




(* 스큐어모피즘이란?

리얼메타포라고도 불리우는데 실제 모습 또는 재질감 등을

 다른 매체에 그대로 구현하는 방식을 말한다.

ex) iOS app 디자인)




아이폰으로 인해 다양한 앱들이 쏟아지면서

디자이너들 또한 실제 사진과 흡사하거나 

또는 3D 모델링 한 것과 같은 앱 디자인을 계속 만들어냈다.


(behance 또는 dribbble 참조)




그러나 구글이 안드로이드 os를 계속 업데이트하면서

구글 서비스와 앱을 통해 디자인 트렌드를 바꿔가고 있다.




안드로이드의 구글플레이를 가보면

구글에서 제공하는 앱들의 멋진 디자인들을 볼 수 있다.


한마디로 디자인 포텐 터졌달까?





<구글 플레이 앱 캡쳐화면 제공이미지>



구글 서치 앱의 화면이다.

보면 알겠지만 기존의 아이폰 앱과는 달리

그라데이션 효과를 찾아볼 수 없고, 타이포와 컬러 등을 이용하여

딱딱 맞아떨어지는 듯한 느낌을 볼 수 있다.



처음엔 뭔가 허전해보이는 느낌이지만

필요한 요소들만 이용하여 정보를 전달하는 면에서

많은 정보들이 오가는 소셜 서비스 등에서 채택하면 좋은 디자인스타일이다.



다양한 효과들이 없어져서 스큐어모피즘보다 디자인이 쉬워보이지만 

오히려 디자이너들의 기본적인 타이포와 컬러, 레이아웃 등의

능력을 요구하는 비교적 어려운 디자인이라고 볼 수 있다.



한마디로 감각이 없으면 진짜 없어보일 수 있다는거? 



앱스토어에도 플랫 디자인 앱이 많이 등장하고 있지만,

비교적 안드로이드 마켓에서 플랫 디자인 앱 더 많이 찾아볼 수 있다.




플랫 디자인 중에서도 다양한 디자인 스타일들을 볼 수 있다.


오로지 컬러와 형태, 레이아웃, 타입만을 이용한 real flat 케이스도 있고,

컬러, 형태, 레이아웃, 타입을 이용하지만 외곽라인이나 약간의 텍스쳐 혹은 그림자 효과를 준 almost flat 케이스도 존재한다.




플랫 디자인의 문제점으로 시각적 어포던스가 제기되기도 한다.

물론 사람마다 색깔, 사이즈, 타이포로 표현이 가능하다는 사람도 있고,

버튼에 한해서는 버튼같이 제공해야된다는 등 

다양한 의견들이 존재한다.



이러한 점은 다양한 플랫 디자인이 시도되면서 해결될 수 있으리라고 본다.






다음 포스팅에서는 Flat design 이 적용된 iOS앱과 Android 앱들을 살펴보자.





저작자 표시 비영리 동일 조건 변경 허락
신고
Name
Password
Homepage
Secret