본문 바로가기
디자인 자료

2020 년의 8 가지 UI 디자인 트렌드

by 오후의 소설 2020. 6. 24.

그는 기술의 빠른 성장이 매년 디자인 트렌드에 영향을 미칩니다. 설계자로서 우리는 기존 및 향후의 설계 추세를 알고 있어야 하며 현재 시장에서 최신 상태를 유지하기 위해 설계 툴킷을 지속적으로 학습, 개선 및 확장해야 합니다.나의 연구, 경험 및 관찰에 기초하여 2020 년에 지켜봐야 할 8 가지 UI / UX 디자인 트렌드를 신중하게 선택했습니다. 시작하겠습니다! :)


 

일러스트레이션은 오랫동안 디지털 제품 디자인에 있었습니다.지난 몇 년 동안의 진화는 매우 인상적입니다. 매우 인기 있는 디자인 요소 인 일러스트레이션은 제품의 전체 UX에 자연스러운 느낌과 "인간의 터치"를 더합니다. 일러스트레이션은 또한 매우 주목을 끄는 그래버입니다. 맨 위에는 이러한 일러스트레이션에 모션을 적용하여 제품에 생명을 불어넣고 눈에 띄게 만들어 세부 사항과 개성을 추가할 수 있습니다.

 

 

 

Saptarshi Prakash의 Swiggy에 오신 것을 환영합니다

 

Saptarshi Prakash

Manager @SwiggyDesign | Ex @Zeta-Design , @Housing | I judge a book by its cover

dribbble.com

 

온보드 애니메이션 — Virgil Pana

 

Virgil Pana

Freelance designer specialized in UI and interaction design.

dribbble.com

모션 적용의 또 다른 이점은 사용자의 관심을 끌고 사용자가 제품에 참여하도록 하는 것입니다. 애니메이션은 브랜드, 제품 또는 서비스에 대한 이야기 를 전달하는 가장 효과적인 방법 중 하나입니다.


 

마이크로 인터랙션은 모든 단일 앱 또는 웹 사이트에 존재합니다. 좋아하는 앱을 열 때마다 Facebook을 볼 수 있습니다. 예를 들어 Facebook에는 다양한 마이크로 상호 작용이 있으며 “좋아요”기능은 완벽한 예라고 가정합니다. 때로는 우리는 존재를 알지 못합니다. 사용자 인터페이스에 너무 명백하고 자연스럽고 “혼합되어 있기”때문입니다. 당신이 당신의 제품에서 그들을 제거하면, 당신은 정말 중요한 무언가가 빠졌음을 매우 빨리 알 수 있습니다.

 

메뉴 전환 애니메이션 닫기 — Aaron Iker

탭 막대 활성 애니메이션 — Aaron Iker

일반적으로 UI / UX 디자인에서 때로는 아주 작고 미묘한 변화가 큰 영향을 줄 수 있습니다. 마이크로 인터랙션은 디테일과 관심이 디지털 제품의 전반적인 사용자 경험을 크게 향상하고 다음 / 높은 수준에 배치할 수 있다는 완벽한 증거입니다. 매년 새로운 모든 장치는 새롭고 혁신적인 미세 상호 작용을 만들기 위한 새로운 기회를 제공합니다. 2020도 예외는 아닙니다.

 


 

 

3D 그래픽은 영화, 비디오 게임, 거리 광고 등 거의 모든 곳에 존재합니다. 3D 그래픽은 수십 년 전에 소개되었으며 그 이후로 크게 발전하고 발전했습니다. 모바일 및 웹 기술도 빠르게 성장하고 있습니다. 새로운 웹 브라우저 기능은 3D 그래픽의 문을 열어 디자이너로서 현대적인 웹 및 모바일 인터페이스에 놀라운 3D 그래픽을 만들고 구현할 수 있게 해 줍니다.

 

Minh Pham의 3D 플립 메뉴

 

Minh Pham ✪

Design Lead at FΛNTΛSY -- MINHimalism

dribbble.com

 

Gleb Kuznetsov의 자동차 건강 보고서 UI

 

Gleb Kuznetsov✈

A designer transforms ideas into reality. As technology gets smarter, reality is exploding. Today, it takes an artist to make human and product interaction awe-inspiring. Connection is key. Gleb Kuznetsov is crafting the future of digital experiences throu

dribbble.com

 

웹 및 모바일 인터페이스에 3D 그래픽을 생성 한 다음 통합하려면 몇 가지 특정 기술과 많은 작업이 필요하지만 결과는 매우 보람이 있습니다.

Apple AirPods Pro 랜딩 페이지

 

AirPods Pro

Introducing AirPods Pro. Active Noise Cancellation, Transparency mode, and a customizable fit — all in an incredibly light in-ear headphone.

www.apple.com

3D 그래픽 렌더를 사용하면 제품 또는 서비스를 훨씬 대화식으로 표현할 수 있습니다. 예를 들어 3D 그래픽 렌더를 360도 프레젠테이션으로 볼 수 있어 제품의 전체 UX를 향상할 수 있습니다.

2020 년에는 실제 매장 내 쇼핑 경험을 모방하기 위해 더 많은 브랜드가 3D 렌더 모델을 사용하여 제품이나 서비스를 제공할 것입니다.


2019 년은 VR에게 큰 해였습니다. 지난 몇 년 동안 우리는 VR 헤드셋 (대부분 게임 산업)에서 많은 진보와 흥분을 보았습니다. 우리는 게임 산업이 종종 혁신과 새로운 기술을 디지털 제품 디자인에 도입한다는 것을 명심해야 합니다.2019 년 Oculus Quest 출시 이후 다른 산업을 위한 많은 기회가 열렸을 때 연구 결과에 따르면 VR도 예외는 아닙니다. Facebook CEO Mark Zuckerberg는 이미 흥미로운 손 상호 작용 기능을 테스트했으며 2020 년 초에 Quest에 대한 손 추적 업데이트를 공식적으로 발표했습니다!

 

오큘 러스 퀘스트 — 손 상호 작용 기능

 

 

Kazi Mohammed Erfan의 PlayStation 가상현실 웹 사이트 디자인

 

Kazi Mohammed Erfan

Sr. UX & UI Designer Multi-Platform Experiences Featured in Behance Interaction Design 🏆 Available For Hire 👉 kazimohammederfan@gmail.com 👈

dribbble.com

소니와 마이크로 소프트는 2020 년 휴가철에 차세대 콘솔을 출시할 예정이다. 이는 VR 기술을 위한 많은 기회와 성장의 여지를 가져올 것입니다.


지난 몇 년 동안 우리는 AR의 많은 진보, 흥분 및 개선을 보았습니다. 세계 유수의 기술 회사가 AR 개발에 수백만 달러를 투자하고 있으므로 2020 년에 이 기술을 확장하고 성장시킬 것으로 예상됩니다. Apple조차도 디자이너와 개발자가 AR 기반 제품을 구축할 수 있도록 ARKIT 3이라는 자체 AR 툴킷을 도입했습니다.

 

ARKit - Augmented Reality - Apple Developer

Take advantage of the latest advances in ARKit to create incredible augmented reality experiences for Apple platforms.

developer.apple.com

애플에 의해 3 ARKit 애플

 

ARKit - Augmented Reality - Apple Developer

Take advantage of the latest advances in ARKit to create incredible augmented reality experiences for Apple platforms.

developer.apple.com

 

Yi Li의 대중 교통

 

Yi Li

Sr. Product Designer @ CGI

dribbble.com

Nathan Riley의 House of Plants AR Concept

 

Nathan Riley

Design Director & Co-Founder at Green Chameleon. Jury member on the FWA. Say hey – hey@nrly.co

dribbble.com

AR 공간에서 새롭고 흥미로운 경험을 혁신하고 창출할 수 있는 끝없는 기회가 있습니다. AR을위한 UI 디자인은 2020 년 주요 트렌드 중 하나이므로 디자이너로서 AR 경험을 만들 때 새로운 도구, 원리를 배우고 자 노력해야 합니다.


일반적으로 말하는 Skeuomorphic 디자인은 실제 객체와 일치하도록 현실적인 스타일 / 방법으로 만들어진 디자인 요소를 말합니다. VR / AR 기술의 성장과 가장 인기 있는 디자인 플랫폼 (Dribbble, Behance 등)에서 보이는 최신 디자인 트렌드는 2020 년에 skeuomorphic 디자인을 다시 만들 수 있습니다. 그러나 이번에는 많은 현대적인 패션과 약간 수정된 이름으로 “New skeuomorphism” ( 신경 이라고도  ).

 

Skeuomorph 모바일 뱅킹 | 다크 모드로알렉산더 Plyuto

 

Skeuomorph Mobile Banking | Dark Mode 🌘

Guys, thank you for all the positive feedback and rebounds of my previous skeu-shots. It really motivates me to continue digging in this direction. I had no doubt to continue the theme, now in tot...

dribbble.com

 

Filip Legierski의 간단한 음악 플레이어

 

Filip Legierski

UI/UX Designer ∙ Awwwards Young Jury ∙ design@riotters.com

dribbble.com

수면주기 앱 -에 의해 Neumorphism 재 설계 Devanta Ebison

 

Devanta Ebison

I'm thinking of doing an in-depth course on UI/UX design. Learn more here: https://devanta.typeform.com/to/pLguT3 Partner with me on your project: devanta@yahoo.com

dribbble.com

눈치채 셨을 것입니다 : 신경 형성은 매우 상세하고 정확한 디자인 스타일을 나타냅니다. 하이라이트, 그림자, 광선-디테일에 대한 주의가 매우 인상적이고 제자리에 있습니다. Neumorphism은 이미 전 세계의 많은 디자이너들에게 영감을 주었으며 2020 년에 Neumorphism이 가장 큰 UI 디자인 트렌드가 될 가능성이 큽니다.


 

지난 몇 년 동안 우리는 디지털 제품 디자인에서 비대칭 레이아웃이 엄청나게 성장한 것을 발견했습니다. 전통적인 / "템플릿"기반 레이아웃은 확실히 사라집니다. 이 추세는 계속될 것이므로 2020도 다르지 않을 것입니다. 비대칭 레이아웃을 올바르게 사용하면 디자인에 많은 특성, 역 동성 및 개성이 추가되므로 더 이상 템플릿 기반이 아닙니다.

 

리니아 파인 주얼리 그리드 — Zhenya Rynzhuk

카린 패션 스토어 — 선택 화면 콘셉트  Dawid Tomczyk

 

Carine fashion store - selection screen concept

Hi Friends! Hope you’re doing great! Here is a another update of my fashion project I'm currently working on.  In order to explain the user journey, interactions and transitions between the s...

dribbble.com

비대칭 레이아웃을 만들 때의 옵션과 기회의 수는 무한하므로 창의성을 위한 여지가 많이 있습니다. 성공적인 비대칭 레이아웃을 만들려면 약간의 연습과 시간이 필요합니다. 그리드에 요소를 무작위로 배치하는 것은 효과가 없습니다. :) 또한 주의해서 사용하고 구현해야 합니다. 항상 사용자의 요구를 염두에 두어야 합니다. 우리의 디지털 제품을 사용하는가?:)


스토리는 디지털 제품 디자인에서 전체 UX에서 매우 중요한 역할을 합니다.방문 페이지에서 브랜드, 제품 또는 새로운 서비스에 대한 소개로 자주 볼 수 있습니다. 스토리 텔링은 가장 유익하고 창의적인 방법으로 사용자에게 데이터를 전송하는 것입니다. 이는 강력하고 균형 잡힌 시각적 계층 구조 (서체, 일러스트레이션, 고품질 사진, 굵은 색, 애니메이션 및 대화 형 요소)와 혼합하여 저작권을 부여함으로써 달성할 수 있습니다.

 

Zhenya Rynzhuk의 A + WQ / Young Lab Page of the Week 애니메이션

무료 스케치 템플릿 :: Tran Mau Tri Tam의 미니

 

Tran Mau Tri Tam ✪

UX/UI Web Designer Website: https://cesis.co Email: hello@tranmautritam.com

dribbble.com

스토리 텔링은 브랜드와 사용자 간에 긍정적인 감정과 관계를 만드는 데 실제로 도움이 됩니다.스토리 텔링은 브랜드를 훨씬 더 기억에 남게 만들며 사용자가 Google 제품이나 서비스의 일부인 것처럼 느끼게 하여 관련성을 갖도록 합니다.그러나 스토리 텔링은 제품 / 서비스 판매를 크게 늘릴 수 있는 훌륭하고 효율적인 마케팅 도구이기도 합니다.성공적인 도구로서의 스토리 텔링은 2020 년에도 계속되고 확장될 것입니다.


요약 : 2020 년의 8 가지 UI / UX 디자인 트렌드

1. 애니메이션 일러스트

일러스트에 모션을 적용하면 디자인을 더욱 돋보이게 하고 생생한 디자인으로 세부 사항과 개성을 더할 수 있습니다.

 

2. 미세 상호 작용

마이크로 인터랙션은 디테일과 관심이 디지털 제품의 전반적인 사용자 경험을 크게 향상하고 다음 / 높은 수준에 배치할 수 있다는 완벽한 증거입니다.

 

3. 3D 그래픽

새로운 웹 브라우저 기능은 3D 그래픽의 문을 열어 디자이너로서 현대적인 웹 및 모바일 인터페이스에 놀라운 3D 그래픽을 만들고 구현할 수 있게 해 줍니다.

 

4. 가상현실

게임 산업은 종종 혁신과 새로운 기술을 디지털 제품 디자인에 도입합니다.

 

5. 증강 현실

AR 공간에서 새롭고 흥미로운 경험을 혁신하고 창출할 수 있는 끝없는 기회가 있습니다. AR을위한 UI 디자인은 2020 년 주요 트렌드 중 하나이므로 디자이너로서 AR 경험을 만들 때 새로운 도구, 원리를 배우고 자 노력해야 합니다.

 

6. 신경성

VR / AR 기술의 성장과 가장 인기 있는 디자인 플랫폼에서 보이는 최신 디자인 트렌드는 2020 년에 스쿨 어모 픽 디자인을 다시 만들지 만 이번에는 많은 현대적인 방식으로 돌아올 것입니다.

 

7. 비대칭 레이아웃

비대칭 레이아웃을 만들 때의 옵션과 기회의 수는 무한하므로 창의성을 위한 여지가 많이 있습니다. 성공적인 비대칭 레이아웃을 만들려면 약간의 연습과 시간이 필요합니다.

 

8. 스토리 텔링

스토리 텔링은 가장 유익하고 창의적인 방법으로 사용자에게 데이터를 전송하는 것입니다. 스토리 텔링은 또한 귀사의 제품 / 서비스 판매를 크게 늘릴 수 있는 훌륭하고 효율적인 마케팅 도구입니다.


출처 : https://uxdesign.cc/8-ui-ux-design-trends-for-2020-68e37b0278f6

 

8 UI design trends for 2020

The rapid growth of technology influences design trends every year. As designers we need be aware of the existing and upcoming design…

uxdesign.cc