'Flat design'에 해당되는 글 3건
[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
눈보라소년 2013.07.03 11:18 신고 URL EDIT REPLY
feedly는 rss 구독 앱입니다. 구글이 구글리더를 접는다고 한 이후로 엄청 주목받았죠 ㅎㅎ 아니나다를까 7월1일(구글리더 닫은날) feedly 서버가 다운되었다고 하더군요
Basix 2014.07.31 22:51 신고 URL EDIT REPLY
http://lab.rayps.com/lsg/
이런 포토샵 플러그인도 있네요 :)
Name
Password
Homepage
Secret
[Flat Design series ②] 플랫 디자인 앱 - Android 안드로이드 기반
Design portfolio/Design interest



앞의 포스팅에서 플랫디자인에 대해 알아보았다.




포스팅 시리즈 보기


[Flat Design series ①] 플랫 디자인이란?

[Flat Design series ②] 플랫 디자인 앱 - Android 안드로이드 기반

[Flat Design series ③] 플랫 디자인 앱 - iOS 아이폰 기반 



그럼 안드로이드 앱 중에서 플랫디자인은

어떤 것들이 있는지 알아보자




요즘 멋진 디자인의 앱들을 제공하는 구글 앱




Google +






구글 컬러들을 이용하여 별다른 효과없이 디자인 된 구글 플러스이다.


자칫 잘못하면 없어보일수도 있는걸 컬러를 이용하여 포인트를 준것이

적절하게 사용된 앱이다.

세번째 이미지의 캐릭터들은 ...아, 귀여워 죽겠다 ㅋㅋㅋ




http://bit.ly/10ZSROq


위 링크를 가보면 새롭게 디자인 된 Google visual assets guidelines 을 볼 수 있다.

구글 디자인의 가이드라인으로 스타일과 컬러 등 자세하게 나와있다.








Google keep





구글 킵은 입력을 하면 컬러별로 메모지가 붙는데 

심플하면서도 깔끔하고 예쁘게 페이지들이 완성된다.







Runkeeper







운동앱인데 전체적으로 그레이와 포인트 컬러 블루를 이용하여 

심플한 디자인이다.


중간중간 벡터 그래픽들을 삽입하여 

지루하지 않게 해주고 있다.


물론 두번째 이미지에서 사람모양 그래픽이

머리사이즈가 조금씩 바껴서 아래쪽은 대두가 되버려

좀 통일감이 부족하기도 하지만

그래도 뭐..깔끔한 디자인이다.







Expense manager






가계부 앱인데 컬러로 포인트를 주고

카테고리별로 정보를 잘 파악할 수 있다.






Xero





써보진 않고 디자인때문에 받아보기만 한 앱이라 무슨앱인지 잘 모르겠지만..

네비게이션 탭 상태라던가, 현재 페이지의 글 하이어라키등이

잘 짜여져 있는 앱이다.








안드로이드 앱들을 보면 위와 같은 플랫 디자인이 많은 편이고, 

저 상태에서 그라데이션 혹은 스트로크가 들어가는 정도도 있다.



iOS의 경우, 고정 해상도이기 때문에

화면구성과 요소등에 많은 효과들을 넣어도

디자이너가 원하는 대로 모바일에서 구현이 된다.



그러나,

안드로이드의 경우 기기마다 해상도가 달라지는 경우가 많아

개발쪽에서 해결할 수 있는 플랫 디자인이 더 유용하다고도 볼 수 있다.


iOS앱들처럼 Gradient, bevel 등 

정해진 해상도에서 효과가 들어간 디자인은

기기가 변경되면 초기 디자이너가 원하던 디자인이

제대로 구현되지 않는 경우가 생기기 때문이다. 


세로로 길어지거나 가로로 늘어나거나

앱이 깨진다거나 그런 현상이 생길 수도 있다.





그럼 다음 포스팅엔 아이폰 앱들 중에 플랫 디자인을 살펴봐야겠다.







저작자 표시 비영리 변경 금지
신고
Creative Commons License
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 앱들을 살펴보자.





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

티스토리 툴바