Weekly Writing

2021 UI 디자인 트렌드 가이드

하슈슈 2021. 1. 24. 17:22

 

 

원문 : https://uxdesign.cc/a-guide-of-ui-design-trends-for-2021-637ac038cb99

 

A guide of UI design trends for 2021

More 3D, more color, glassmorphism and great tools! 🤩

uxdesign.cc

아래는 위 원문의 번역본입니다.


 

왼쪽으로부터 오른쪽까지 : Cuberto, Superlist, afshint2y (instagram), Essentials, Minh Pham

1. 3D 일러스트레이션 

UI 디자이너들이 3D로 무엇인가를 만들어내는 것이 점점 더 쉬워지면서 3D 이미지는 여전히 중요하게 여겨지고 있습니다! (Spline이라고 하는 3D 도구를 사용해보세요! 아직 베타로 운영되고 있지만 아주 놀랍고 사용하기 쉬운 툴입니다.)

 

3D는 주된 시각적 요소로서 풀 스크린 애니메이션들에 넓게 사용되고 있습니다. 웹사이트를 위해 어떻게 훌륭한 3D 배경을 만들어내는지에 대해 Superlist 나 Minh Pham의 an amazing 3D tutorial 을 확인해보세요.

 

 

 

 

왼쪽으로부터 오른쪽 : mandariuiux (instagram), Victor Cardero, Hype4.com, day___dreamer06 (instagram), Blacklead Studio

2. 글래스모피즘

 

가장 최근 유행하고 있는 글래스모피즘에 대해 들어본 적이 있나요? (그렇습니다. 뉴모피즘은 더이상 멋지지않습니다.) 배경을 블러로 처리하는 효과를 기반으로하고 "유리를 들여다보는 듯한" 모습과 느낌을 가진 요소들을 만든 가장 최근 UI 트렌드입니다.

 

이는 Window Vista(윈도우 비스타), 후에는 iOS7에 도입되었다가 새로운 형태로 조금씩 자리잡아가고 있는 것으로 보입니다. 글래스모피즘을 조금 더 가까이 들여보고싶다면, Glassmorphism Generator 온라인 툴을 사용해보거나 Mike의 기사를 확인해보세요! 

 

 

Glassmorphism in user interfaces

Another year, another UI trend is becoming increasingly popular among designers. Do you know it yet?

uxdesign.cc

 

 

 

 

왼쪽에서 오른쪽 : logancee (instagram), Tran Mau Tri Tam, Dmitry Lauretsky, ekokubki.pl

3. 실제 사진들

 

저는 모두가 곧 제품 디자인 속 일러스트레이션이나 3D 그래픽스에 싫증을 낼 것이며, 실제 사진들이 큰 반향을 일으킬 것이라고 예상합니다.

 

이전에 쓴 제가 쓴 글들 중 하나에서 저는 일러스트레이션이 모두를 위한 것은 아니라고 적어두었습니다. 그리고 사용자들에게 실제 사람들과 실제 상품들이 사용자들에게 더 큰 충격을 줄 수 있다고 했습니다. Ekokubki의 웹사이트는 실제 사진을 기반으로 하고 있는 정말 멋진 사이트입니다.

 

 

 

 

Diana Medviedieva, Green Illumination, Designcode.io, Sleepiest, Digital Design Talks

4. 비비드한 컬러

 

제가 보는 모든 곳에서 웹사이틀과 모바일 디자인들의 컬러풀한 스플래시들을 볼 수 있습니다.  Designcode.io, SleepiestDesign Talks 와 같은 사이트들을 확인해보세요! 저는 색상들로 그 마법 같은 천상의 분위기를 만들어 내는 것을 사랑합니다! 그리고 우리가 비비드한 색상을 사용할 때, 우리가 우리의 제품을 차별화하고 기억하도록 하는 것이 쉬워집니다. 인스타그램은 이를 아주 오래전에 알고 있었습니다. (이것이 바로 새로 대체된 잊을 수 없는 아이콘으로 변화된 이유입니다.)

 

 

 

 

Tran Mau Tri Tam, Stripe, Tran Mau Tri Tam, Nadya Lazurenko, MyMind.com

5. 흐릿하고 컬러풀한 배경

 

위와 같으나 글래스모피즘과 조금 섞여있습니다. 이 섬세한 효과 덕분에 UI가 보는 것 만으로도 기쁨을 주고 있습니다.  흐릿하게 블러처리된 배경을 사용하는 이 디자인은 놀랍도록 유기적이고, 따뜻하고, 안락해보입니다.

 

Stripe과 거기에 있는 글래스 모피즘,  My Mind와 놀랍도록 간단한 자기조직화를 위한 도구를 확인해보세요!

 

 

 

Alexey Savitskiy, Revolut, Qoals, Sketch, Hype4.com

6. 미학적 미니멀리즘

 

이것은 개인적으로 제가 가장 좋아하는 트렌드입니다. 단순하고 미니멀하며 읽기 쉬운 UI보다 더 미학적으로 즐거운 것은 없습니다.

 Revolut (간단한 3D), Sketch and Qoals (블러처리된 배경)과 같은 웹사이트들은 당신의 제품이 놀라워보이도록 하는 것에 당신이 복잡한 UI나 보는 순간 탄성을 지르게 하는 "와우 이펙트"가 필요하지는 않다는 것을 보여주는 완벽한 예시들입니다. (슬프게도, 많은 클라이언트들이 이것을 이해하지 못합니다.)

 

 

 

 

Mateusz Madura, Offriginal (instagram), staromlynski.design (instagram), AndikaWP

 

7. 기하학적인 구조

 

저는 깔끔하고 보수적인 시각적 구조를 가진 디자인들이 점점 더 많아지고 있습니다. 이 것은 정보들이 아주 잘 정리될 수 있도록 합니다.

인터페이스의 기하학적 구조를 보여주는 가장 아름다운 예는 Rituals 웹사이트입니다. 사용하고 보는 것을 아주 즐겁게 하고 있습니다. (아주 심플하고 즐거운 애니매이션들 또한 좋습니다).

 

 

 

 

Stan Yakusevich, Vadim Drut, Whirly Birdie, Dovetail+Afterpay, Synchronized Digital Creative Studio

 

8. 거대하고 정교한 타이포그래피

 

제품 디자인에 있어서 거대하고 정교한 타이포그래피들이 메인의 역할을 하는 많은 예시들이 있습니다. 어떤 것들은 완전히 타이포그래피를 기반으로 하고 있기도 하며 그 결과는 흥미롭습니다. 타이페이스의 선택은 꽤 화려합니다.

 

Whirly Birdie, Dovetail+Afterpay (비비드한 컬러) 와 Synchronized (브루탈리즘)을 확인해보세요.

 

 

 

 

Adam Roller, Laetitia Meunier, Ilya Kulikov, Michał Rome

9. 브루탈리즘

 

이 트렌드는 제가 가장 문제를 가지고 있는 트렌드입니다 (솔직하게 말해서, 뉴모피즘보다는 아니지만). 이는 브루탈리즘으로 불리며 이름 그대로 강한 대비와 즐겁지 않은 타이포그래피, 접근성과 가독성에 많은 문제가 있는 이름 그대로인 것처럼 보입니다.

그러나 뒤에 숨어있는 메인 아이디어는 기본적으로 우리가 아름답고 사용하기 쉽다고 인지하는 것들을 해체하는 것에 있습니다.

 

놀랍게도, 이 트렌드를 좇는 여러 웹사이트들과 어플들을 보았습니다. (Newonce 라고 불리는 폴리쉬 라이오 스테이션 중의 하나)

 

저는 실제로 이를 시도해보았으나 UI에 관해서는 이 트렌드를 그다지 좋아하지는 않습니다. 포스터나 매거진을 다룰 때는 이 방식을 좋아하게 될지도 모르겠습니다.

 

 

 

10. UX / UI 프로세스의 단순화

이 산업군의  많은 사람들이 점점 프로덕트 디자인의 많은 프로세스들이 지나치게 복잡하다는 것을 깨닫고 있습니다. 이는 프로덕트 디자이너들에게도, 클라이언트들에게도, 디지털 상품 그 자체에도 좋지 않습니다.

 

변화가 필요한 시점입니다. 저는 천천히 변화가 시작되고 있다고 믿습니다. 저는 뒤로 몇 걸음을 가서 새로운 눈으로 전체 산업을 보아야 할 시점이라고 생각합니다. 이제 혼란스러운 컨셉들과 명칭들을 다시 생각하고, 어렵고 시간을 많이 소모하는 프로세스들을 재건하여  프로덕트 디자인을 배우기를 열망하는 디자이너들이 쉽게 배울 수 있도록 해야하는 시점입니다.

 

 

<2021 UI 디자인 트렌드 가이드>

 

1. 3D 일러스트레이션

2. 글래스모피즘

3. 실제 사진들

4. 비비드한 컬러

5. 흐릿하고 컬러풀한 배경

6. 미학적 미니멀리즘

7. 기하학적인 구조

8. 거대하고 정교한 타이포그래피

9. 브루탈리즘

10. UX/UI 프로세스의 단순화

 

 

delicacy : 1. 여림, 연약함  2. 섬세함  3. 사려깊음 (=tact) 

extravagant : 1. 낭비하는, 낭비벽이 있는  2. 사치스러운  3.화려한, 과장된 (=exaggerated)