웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
2017 Card UI Design Trend
Posted by kimdirector | 2018.03.07 | Hit : 979
2017 카드 디자인 Trend UI
목록보기이전보기
모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI패턴입니다.
 
수 많은 컨텐츠를 사용자에게 제공하는 서비스(대표적으로 핀터레스트)가 인기를 끌면서 카드UI에 대한 관심이 지속적으로 높아지고 있으며, 뉴스나 커머스까지도 카드형 디자인이 다양하게 적용되고 있습니다.
 
그럼 이제부터 2017년에는 카드 디자인이 어떻게 변화하게 될지 알아보겠습니다.
 
 
01. 시각적인 즐거움을 주는 비주얼 디자인
 
카드형 디자인은 매력적인 이미지나 컬러를 사용하여 지루하게 보일 수 있는 모듈UI 디자인의 단점을 보완하고 사용자에게 시각적인 즐거움과 직관적인 정보를 전달할 수 있게 합니다.
 
 

출처: behance (https://www.behance.net/gallery/44570213/OC-Browse-Looks-Concept)

 
투톤 그라데이션을 활용한 카드 디자인


출처: dribbble(https://dribbble.com/shots/2631867-Starting-new-dating-app)

 
일러스트 이미지를 활용한 카드 디자인


출처: UXPIN(https://www.uxpin.com/studio/ebooks/)

 
이미지컷을 활용한 카드 디자인


출처: dribbble (https://dribbble.com/shots/2537470-Article-Cards)
 

 
02. 컨텐츠를 강조한 간결한 디자인
 
앞으로는 아이콘을 단순화하고 불필요한 선과 면을 최소화하여 컨텐츠와 기능에 집중한 카드 디자인이 많아질 것으로 예상됩니다. 최근 핀터레스트와 인스타그램에서도 선과 색을 과감히 거둬내고 깨끗하고 모던한 디자인으로 개편된 모습을 확인할 수 있습니다.




컬러사용을 자제하고 이미지를 돋보이게 한 Urbanstreet 앱



여백과 레이아웃으로 변화를 준 카드 디자인


출처:behance( https://www.behance.net/gallery/30325437/Rover)
 

 
03. 가독성을 높인 타이포그래피
 
얇고 세련된 서체 대신 볼드한 헤드카피로 가독성을 최대한으로 높이는 디자인 구성으로 변하고 있습니다. 애플의 ‘ios10’에서도 그 변화를 확인할 수 있습니다.
 

 
텍스트에 시차를 적용한 인터렉션이 돋보이는 29cm 앱


출처: 29CM (https://www.behance.net/gallery/45513785/29CM-Brand-eXperience-Design-Renewal)

 
헤드카피에 쓰인 고딕체가 돋보이는 ‘ode Goods’웹사이트의 카드디자인


출처: https://www.odegoods.com/
 

 
04. 애니메이션
 
콘텐츠가 로딩되는 동안이나, 호버, 버튼 등에 간단한 애니메이션 효과를 사용하여 즐거운 경험을 만들어내는데 도움을 줄 것입니다. 최근 페이스북에서는 뉴스피드에 ‘좋아요’뿐만 아니라 다양한 감정의 아이콘 애니메이션이 등장하여 재미를 주고 있습니다.
 


출처:https://medium.com/facebook-design/reactions-not-everything-in-life-is-likable-5c403de72a3f#.tz9whxcu2

 
줌인 애니메이션 (프리뷰화면과 세부화면 사이의 전환)


출처:https://dribbble.com/shots/2125325-Playlist-Animation-Exploration?1435517289

 
호버를 이용하여 옵션을 보여주는 애니메이션


출처:https://dribbble.com/shots/2941299-Course-Card-Concept

 
'드래그 제스쳐'를 이용한 애니메이션


출처:https://www.behance.net/gallery/42133479/LVMH-Insights
 
지금까지 카드 디자인이 어떻게 변화해나갈지 간단하게 정리해보았는데요.
앞으로 점차 다양한 컨텐츠 유형이 파생되며 사용성의 이슈가 점점 커지고 있는 만큼 카드 UI 패턴은 심미성을 유지하면서도 기능적으로 다양한 요구사항을 해결할 수 있는 방향으로 점차 진화해 나갈 것입니다.

 
참고
UX 개선을 위한 카드형 디자인 사용법
http://babich.biz/using-card-based-design-to-enhance-ux/ (번역:https://brunch.co.kr/@byeon/11)
 
컴플렉션 리덕션
(번역:https://brunch.co.kr/@ebprux/57)
 
카드디자인 베스트사례
https://brunch.co.kr/@ebprux/273
 
2017 UX Design Trend
https://inkoniq.com/blog/7-ux-design-trends-to-watch-out-for-in-2017/
(번역:https://brunch.co.kr/@ebprux/236 )
 
Posted by kimdirector | 2018.03.07 | Hit : 979
Origin https://blog.naver.com/vinylx/220960425966
Tags 2017 카드 디자인 Trend UI
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=493

COMMENT
Commented by kimdirector
2018.03.07 10:13:20 X
본 내용은 바이널엑스 블로그의 내용입니다. 포스트 내용이 1년 전의 것이지만 카드 디자인의 트랜드는 크게 변화되어 보이지는 않습니다. 지금도 카드 디자인은 앱디자인에서 가장 중요한 역할을 하고 있는 것 만큼은 부인하지 못할 것 같습니다.
원문 : https://blog.naver.com/vinylx/220960425966
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
기획자 프로젝트 홈페이지 디자인 캘리그라피 프로그래머 매킨토시 고퀄리티 API 오픈 스토어 웹사이트 스큐어모피즘 이벤트 접근성 글꼴 GNB 홈페이지 트렌드 CIP 페이스북 메타태그 Draft iOS UX 플랫 디자인 생각 모바일 현대카드 조직 플랫폼 Scrolling 배경이미지 디자인 게티이미지코리아 psd 한국IDG 라이센스 e-Business 이미지 원격 데스크톱 스티브잡스