[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/



저작자 표시 비영리 변경 금지
신고
Creative Commons License
Trackback Address :: http://segrami.tistory.com/trackback/16 관련글 쓰기
Name
Password
Homepage
Secret
What time is it now...?
Design portfolio/Daily illust


What time is it now....??






도대체 지금 시간이 몇시당가...?


낮인가 새벽인가...


내가 작업하다 몇시에 잔거지....






저작자 표시 비영리 변경 금지
신고
Creative Commons License

'Design portfolio > Daily illust' 카테고리의 다른 글

What time is it now...?  (0) 2013.06.20
What the hell HTML!!  (0) 2013.06.10
I'm hungry :(  (0) 2013.03.20
Story start  (0) 2013.03.20
Trackback Address :: http://segrami.tistory.com/trackback/15 관련글 쓰기
Name
Password
Homepage
Secret
[Flat design series ③] 플랫 디자인 앱 - iOS 아이폰 기반
Design portfolio/Design interest
이전 포스팅들에서 플랫디자인에 대해 알아보고
안드로이드 앱 중에서는 플랫 디자인이 어떤 것들이 있는지 알아보았다.




포스팅 시리즈 보기





이번에는 아이폰 앱중에서 플랫디자인으로 된 것들을 알아보자.

대부분의 아이폰앱들은 스큐어모피즘 스타일로 디자인 된것들이 많다.







<Dribbble app icon 검색 화면 캡쳐>


드리블에서 app icon을 검색하고 이전페이지로 몇장 돌아가면
스큐어모피즘 스타일의 디자인을 볼 수 있다.


그러나 이런 디자인들 사이에서도
최근 플랫 디자인 형식의 앱이 늘어나고 있다.




City guides National geographic







내가 좋아하는 내셔널 지오그래픽
시티가이드 앱으로 기본적으로 제공하는 정보 이외
자세한 정보를 위해서는 유료 결제를 해야한다.

물론 런던, 파리, 뉴욕, 로마 네 도시밖에 없어서
내가 아직 쓸일은 없지만.

언젠가 쓸일이 생길거라 본다.....

얼른 서울도 생겼으면 좋겠다

이 앱에서 재미있는건 8, 9째 화면 페이지에서 나타나는 인터랙션이다.

음...동영상은 없기에 다운받아서 실행해보면 알 수 있다.





Feedly








음...이건...뭔가 명확하게 어떤 앱인지 모르겠다....

디자인 때문에 다운받은 앱이고,
영어앱이라...활용도도 낮고....

디자인만 참고하자..

앱 디자인에 비해 로고는 좀..개인적으로는 별로긴하지만
상단바 디자인이 마음에 드는 앱이다 ㅋㅋ




Flava








플라바는 오래전에 다운받았지만,
에버노트 프리미엄계정을 이용하게 된 후로
거의 이용을 하지 않았다.

물론 에버노트와 플라바는 조금 다른 목적이긴 하지만
에버노트는 다 가능하니깐....

처음 받았을때는 이런 디자인이 아니었는데
어느 순간 업데이트되면서 플랫디자인으로 바뀌었다.
아이콘들도 많이 추가 되기도했다

써보려고 노력은 하지만...
요새는 하도 이런 앱들이 많아...여러개 쓰기가 힘들다...







Jetsetter







부킹이나 아고다처럼 숙소를 예약할 수 있는 앱이다

전체적으로 화이트 톤과 그레이, 블랙 그리고 타입만을 이용하여
제공하는 정보에 시선이 잘 갈 수 있도록 구성된 것이
좋은 디자인인 것 같다.

개인적으로 나는 요런것이 참 마음에 드는 편이다.

이 앱을 아직 쓰지는 않지만...
숙소사진 구경하는 재미도 쏠쏠하다





Krop circle










요건 플랫 디자인의 진수를 보여주는 앱...?

카메라 앱이다 
정말 심플하다

동그라미 외에도 별모양 등 다양한 모양으로 카메라를 촬영할 수 있는 앱

궁금한 사람은 다운받아보긔





Mavansay







이 앱 참 이쁘다

메인 컬러는 유지하되, 포인트 컬러를 이용해서
카테고리별 정보를 쉽게 알 수 있도록 했다.

비디오기반인 앱인데
많이 써보진않았다.




Timehop







완전 내스타일 

이 앱에서 포인트는 저 공룡이다 공룡!!!

너무 완소 캐릭터다

전체적으로 심플한 디자인에서 화면을 아래로 잡아당겨
새로고침할때마다 나타나는 공룡을 보다보면...

나도 모르게 계속 화면을 잡아당기게 된다 

이건 뭐 앱 켜놓고 다른 페이지는 후다닥 살펴만 보고 각 페이지마다
화면 당겨보면서 공룡 나타나는지 살펴보고
저 공룡만 수십번 쳐다본거 같다





Vine








이것도 비디오 기반앱이다.


음.....








Yahoo weather






예전에는 오늘어때 날씨앱만 썼었는데
앱스토어에 올라와있길래 다운받아본 야후 날씨앱!

이게 웬걸 
길걷다 돈주은 기분 ??? 

도시를 등록하면 각 도시 대표사진들과 현재 시간과 날씨 상태에 맞는 사진들을 보여준다.

새벽에 켜보니깐 안개낀 사진이 뜨더라

세번째 화면에서 아래로 스크롤을 내리면 바로 정보들을 확인할 수 있다.

정보들도 백그라운드가 블러처리되면서 눈에 잘 들어올 수 있게 되어있고,
해와 달 정보도 알려준다


날씨 앱들이 예쁜 디자인이 많이 나오는 편인데
야후 날씨앱은 플리커 서비스의 사진들을 이용하여
잘 만든 것 같다.
서비스 콘텐츠를 잘 활용한 사례랄까.


그리고 내 폰은 아이폰 4라 화면이 좀 작은 편인데
앱을 키면 전체화면이 되면서
맨 상단의 핸드폰 정보도 사라져서 그게 제일 좋다!





iOS기반의 플랫디자인 앱을 몇가지 찾아봤다.
 
앞의 안드로이드 기반 앱에서 소개했듯이
아이폰에서도 구글 앱들은 대부분 플랫디자인들이다.

그러나 구글앱 말고도 다른 플랫디자인앱들을 찾았기에 그것들을 소개해봤고,

다음 포스팅에서 안드로이드 기반과 아이폰 기반의 구글앱 비교를 해볼 생각이다.





<위 앱 사진들은 모두 본인 폰에서 캡쳐한 화면들이다>





저작자 표시 비영리 변경 금지
신고
Creative Commons License
Trackback Address :: http://segrami.tistory.com/trackback/14 관련글 쓰기
Tracked from SEGRAMI HOUSE 106 | 2013.06.19 11:42 | DEL
&#65279;이전 포스팅들에서 플랫디자인에 대해 알아보고안드로이드 앱 중에서는 플랫 디자인이 어떤 것들이 있는지 알아보았다.이전 포스팅 보러가기[Flat Design series ①] 플랫 디자인이란?[Flat De..
Tracked from How to make an iPhone application | 2014.12.11 16:28 | DEL
SEGRAMI HOUSE 106 - [Flat design series ③] 플랫 디자인 앱 - iOS 아이폰 기반
눈보라소년 2013.07.03 11:18 신고 URL EDIT REPLY
feedly는 rss 구독 앱입니다. 구글이 구글리더를 접는다고 한 이후로 엄청 주목받았죠 ㅎㅎ 아니나다를까 7월1일(구글리더 닫은날) feedly 서버가 다운되었다고 하더군요
베이직스터더 2014.07.31 22:51 신고 URL EDIT REPLY
http://lab.rayps.com/lsg/
이런 포토샵 플러그인도 있네요 :)
Name
Password
Homepage
Secret

티스토리 툴바