2020년 UI Design Trends
Digital Creative Group. Design Team
"디자인이란 움직이는 과녁을 맞히는 일이다. 미래의 트렌드를 읽어야 한다."
-김영세
펼치며
인공지능, 가상현실처럼 새롭고 혁신적인 기술의 발전과 함께 UI/UX분야 또한 진화하고 있습니다. 본격적인 트렌드 소개에 앞서 우리가 주목해야 할 키워드를 그룹핑하고 개인화와 사용자 상호작용이라는 핵심 키워드를 도출했습니다. 이 핵심 키워드를 바탕으로 2020 디자인 트렌드를 정리 및 분석했습니다.
01. 대담한 표현
화려한 그라디언트는 수년간 디자인 트렌드로서 지속됐습니다. 디자이너들은 기존보다 강력한 색상 조합 및 높은 채도의 컬러를 과감하게 사용할 것입니다. 이런 대담한 표현은 컬러에 국한되지 않습니다.
미니멀한 디자인을 위해 여백은 넓어지고 타이틀과 서브타이틀 또한 커지고 있는 추세입니다. 비교적 작은 디바이스인 모바일에서 리터러시를 확보하는 디자인이 더욱 중요해지고 있습니다.
https://elje-group.com
http://adova-group.com/fr
https://wondr.io/our-work/new-music-dublin-website/
Boosty Labs - Website Design by Stas Aristov02. 커스텀 콘텐츠
커스텀 메이드 콘텐츠는 지난 몇 년간 웹 디자인 분야에서 지속적으로 성장했습니다. 브랜드 아이덴티티와 일치하는 개성 있는 일러스트는 기술 발전과 대조적으로 사용자의 감성을 자극하여 공감을 이끌어낼 수 있습니다.
플랫디자인보다 더욱 깊이감 있는 아이소매트릭 디자인과 3D CG는 다양한 디자인 분야에 재미있고 독특한 분위기를 만들어 줍니다. 특히 3D CG는 온라인 VR과 새로운 차원의 온라인 시대를 예고하고 있습니다.
Hero Animation Explorationby Hoang Nguyen in Personal Work
A B A J Oby Zak Steele-Eklund for Studio VØR
Document Verification Animation Headerby Permadi Satria Dewanto
Christmas Collisions by BestServedBold for green chameleon03. 마이크로 인터랙션
마이크로 인터렉션의 목적은 사용자와 상호작용을 통하여 흥미를 끌고 생동감 있는 사용자 경험을 하도록 만드는 데에 있습니다. 사용자가 무엇을 해야 하는지, UI와 상호 작용 후 즉각적으로 피드백을 줌으로써 사용자 경험을 향상하고 심미적으로도 좋은 효과를 줄 수 있습니다.
앞으로 미세 상호 작용에 대한 사용자들의 욕구가 증가함에 따라 애니메이션의 적용 또한 증가할 것입니다. 웹사이트, 앱 디자인, 광고 등 모든 미디어에서 애니메이션을 사용하면 방문객들과의 상호작용을 통한 효과적인 홍보가 가능합니다. 부드러운 전환이나 호버 효과와 같은 애니메이션을 적용함으로써 타 사이트들과 차별성을 보여 줄 수 있습니다.
Animated Tab Bar Icons — Interface concept by Andrew McKay
Architecture - Motion & Visual explorationby Nick Taylor
Tabbar Animation by Khrystyna K
Daily UI challenge #002 — Credit Card Checkoutby leehongjuu04. 하단 영역의 확장
스마트폰의 성장으로 세로 비율이 높은 화면에서 엄지손가락의 사용범위는 감소되었습니다. 이 문제를 해결하기 위해 구글, 페이스북과 같은 기업들은 하단 내비게이션을 도입하기 시작했고 이는 곧 업계 표준이 됐습니다.
사용자가 앱의 주요 기능에 접근할 수 있게 하는 것에 그치지 않고 다양한 기능을 작동할 수 있게 됐습니다. 현재 화면을 벗어나지 않고 결제 프로세스, 수직 스크롤 콘텐츠 등의 자연스러운 하위 플로우를 이어 갈 수 있습니다. 즉 하단 영역의 확장으로 사용자행위의 연속성을 확보할 수 있게 됩니다.
kakaopay
A tourist attraction by WangJin for NBSP05. 다크 모드
다크 모드란 사용자 인터페이스를 전체적으로 어둡게 변경시키는 모드로서 현재 구글, 페이스북 등 다수의 앱과 사이트에서 다크모드 옵션을 제공하는 추세입니다.
어두운 환경에서 가독성을 향상하고 눈의 피로를 줄여주는 효과뿐만 아니라 배터리 절약 효과도 있습니다. 때문에 다크 모드는 모든 앱에서 필수적인 옵션이 될 것이며 이를 선호하는 사용자들이 많아질 것으로 보입니다.
UI/UX Design - iOS Dark Mode by Tim Choy
MATERIAL DESIGN - Dark 06. 음성 사용자 인터페이스 (VUI)
이제는 손을 쓰지 않는 영역, 즉 보이스 유저 인터페이스의 영역으로 다가가고 있습니다. 또한 AI의 발전으로 데이터 중심의 개인화 인터페이스가 증가하고 있습니다.
화면 이동을 위한 내비게이션과 버튼, 메뉴가 없는 인터페이스는 사용자에게 직관적인 경험을 제공할 것입니다. 많은 요소들이 음성인식으로 대체되어 기존 UI보다 상대적으로 활용할 수 있는 공간이 늘어납니다. 이러한 변화로 시각적으로 새롭고 의미 있는 UI의 적용이 기대됩니다.
NAVER Clova
NAVER blog 네이버 설계(디자인) - 네이버에 들려주세요 - 1. 음성인식맺으며
인공지능, IoT 등의 혁신적인 기술의 발달과 함께 UI/UX도 진화하고 있습니다. 이로 인해 기존과는 다른 새로운 사용자 인터페이스가 생겨나고 있으며 디자이너들은 이러한 최신 기술의 트렌드에 민감하게 반응하며 지속적으로 학습해야 합니다. 단순히 시각적으로 아름다운 결과물을 만드는 데 그치지 않고 새로운 기술과 디바이스들에 따른 적합한 UI/UX에 대한 심도 깊은 고민과 노력이 더욱 중요해질 것으로 보입니다.
참여
Design Team : 김신혜, 김준범
참고자료
https://www.wedesignx.com/knowledge/uxui-design-trends-2019
https://medium.com/by-digiti/the-future-is-dark-8c3bdadf9fdc
https://brunch.co.kr/@thinkaboutlove/230https://medium.muz.li/ux-design-trends-2019-6f5a75fb528f
https://merehead.com/blog/ui-design-trends-in-2020/
https://medium.muz.li/ux-design-trends-2019-6f5a75fb528f
