UX/UI Design Trends Going Into 2024
매년 새로운 디자인 경향이 나타나는데, 이는 단순히 멋져 보이는 것뿐만 아니라 다른 디자이너들에게 영감을 주어 해당 경향을 “따르도록” 만듭니다.
이러한 디자인 경향 중에는 실제로 현명하고 기능적인 것들도 있습니다. 이러한 기능은 공간을 더 효율적으로 활용하여 더 많은 정보를 포함하는 것에서부터 사용자와의 상호 작용을 증가시키는 데까지 다양합니다.
이제 인터넷을 점령하고 있는 몇 가지 오래 남을 디자인 경향을 살펴보겠습니다!
Bento Box
벤토 박스는 일본의 도시락 문화에서 핵심적인 위치를 차지하고 있습니다. 이 박스는 음식을 꽤 조직적인 형식으로 보관하고 물건을 깨끗하게 유지하는 데 잘 알려져 있습니다.
누가 이것을 고안했는지 알 수 없지만, 벤토박스 형태는 음식이 차곡차곡 채워진 모양이 디지털 화면의 적용에도 뛰어나다고 할 수 있습니다.
벤토는 Dribbble과 Behance와 같은 플랫폼에서 만반의 준비로 여러 디자이너들에게 전해졌지만 "모듈식" 디자인의 개념은 웹사이트 대시보드를 위해 시작되었습니다.
이에 해당하는 예시로는 PayPal과 같은 판매 및 재무 대시보드, Google Ads와 같은 분석 대시보드 등이 포함된다 할 수 있습니다.
윈도우 폰과 루미아를 기억하시나요? 그들이 사용한 UI는 본질적으로 벤토 디자인의 초기 버전이었습니다.
나중에 Microsoft는 Windows 8과 함께 이 개념을 Windows 데스크톱 시작 메뉴에도 도입했습니다.
전 세계 산업에서 사용되던 중, 벤토 디자인은 Apple이 처음으로 벤토 그리드를 사용하기로 결정하면서 완전히 폭발적으로 성장했습니다. 이들은 처음에 iPhone 랜딩 페이지에서 사용했지만 곧 Apple 이벤트 슬라이드와 프레젠테이션으로 확장되었습니다.
애플은 거대한 트렌드를 시작하는 것으로 널리 알려져 있으며, 벤토는 이 중 하나에 불과하다고 할 수 있습니다.
과거의 벤토와 유사한 디자인과 새로운 트렌드 간의 가장 큰 차이점은 그리드의 각 섹션이 그룹의 일부가 아닌 고유한 공간을 나타낸다는 것입니다.
다른 많은 UI 디자인 트렌드와 달리 벤토는 실제로 멋진 레이아웃 스타일 이상으로 진화하고 있습니다.
이제 제품 데모를 포함하고 일부 다른 독특한 레이아웃과 함께 혼합되며 새로운 시각적 디자인 컨셉으로 스타일이 적용되고 있습니다.
하단은 예시이미지입니다
위의 예시는 diagram.com에서 가져온 것으로, 이 사이트는 상호 작용하는 경험을 통해 도구가 실제로 무엇을 할 수 있는지 실제 예시를 보여주기 위해 벤토 그리드를 사용합니다.
이로써 도구가 훨씬 더 매력적으로 보이고 사용자에게 어떤 기대를 가져야 하는지 알려줍니다.
저와 같은 디자이너들을 돕기 위해 웹 전체에서 벤토 디자인 영감을 전하는 몇 가지 웹사이트가 있습니다.
bentogrids.com은 그 중 하나로, UI 및 그래픽 디자인을 위한 다양한 벤토 그리드를 제공하는 대형 컬렉션을 보유하고 있습니다.
Spatial Design Trends & Leaps in Technology
디자인 트렌드 외에도 다양한 AR/VR 스타트업이 선두에 나오며 AR 및 VR기술에 대해 실질적으로 이야기가 나왔는데요
스마트워치부터 폴딩 폰까지, 여러 방면에서 적용된 제품을 넘어 공간 디자인도 예외가 아니었습니다.
이것은 "Bezi"라는 인기 디자이너 중심 도구의 출시와 함께 이루어졌습니다.
이는 Figma나 Spline과 같은 디자인 도구에 매우 가깝지만 3차원이라는 점이 여타 프로그램과 차이를 가진다고 할 수 있습니다.
해당제품을 통해 디자이너들은 공간 디자인에 참여하고 작동하는 AR/VR 헤드셋을 연결하여 대화형 공간 경험을 만들 수 있습니다.
하단의 이미지를 통해 Bezi로 만들 수 있는 작은 예시를 간략히 살펴보겠습니다.
해당 제품에서 할 수 있는 작업은 실제 VR 헤드셋을 사용 하여 현실 환경에서 체험하며 기술을 깊이 이해하는 것이라고 할 수 있습니다.
또한 최근 Google의 프로젝트 "Google Glasses"가 실제 대규모 생산에는 이르지 못했지만, 선글라스 회사인 RayBan은 새로운 Meta Wayfarer로 스마트 웨어러블 경쟁에 참여했습니다.
내장 카메라와 스마트 기능을 통해 비디오/이미지를 저장하고 소셜 미디어에 라이브 스트리밍이 가능해졌으며, 이는 사용자 경험과 고객 경험에 새로운 차원을 제공합니다.
이는 어쩌면 2025년의 트렌드가 될지 모릅니다.
Everyone Can Animate!
새로운 기술이 더 많은 사람들에게 접근 가능해지면 종종 새로운 트렌드가 탄생합니다.
간단한 애니메이션을 어떤 도구에서든 어떤 UI에든 추가할 수 있을때쯤 회사에 브랜드 대사로 합류하게 되었고, Lottie 애니메이션에 대한 수요를 고려하여 Figma 플러그인을 출시하여 Figma 애니메이션을 내보내기 가능한 Lottie JSON 파일로 변환할 수 있도록 하는 작업을 진행했습니다.
해당 작업을 통해 After Effects 더 많은 디자이너들이 빠르게 자체적으로 애니메이션을 만들 수 있게 되었고, 현재는 각 회사의 랜딩 페이지에서 매력적인 상호 작용을 더 자주 볼 수 있게 되었습니다.
이러한 상호작용의 증가는 웹사이트 방문자에 대한 차별화된 경험에 대한 계속해서 증가하는 필요성과 제품/서비스를 판매하기 위한 도구로서 스토리텔링에 대한 더 큰 수요의 증가 때문이라고 생각합니다.
하단은 이에 따른 랜딩 페이지 상호 작용의 예시입니다.
스크롤 애니메이션을 사용하면 방문시 사용자들이 방문 페이지 내용에 몰입하게 될 가능성이 높아집니다.
Webflow 및 Framer와 같은 노코드 도구는 디자이너가 긴 코드 줄을 작성하지 않고도 이러한 애니메이션 기능을 가져올 수 있도록 제품을 개발하고 있는 상황입니다.
현재의 단계가 애니메이션은 절정에 달한 것으로 기대할 만한 것은 더 이상 없을 것입니다.
그러나 다행히도 우리에게 있어 기술 분야의 사람들은 항상 이보다 더 나은 아이디어를 모색하고 있습니다.
또한 끝없는 능력 있는 도구 덕분에 상상할 수 있는 모든 것을 현실화 시키는 것도 가능합니다.
이러한 가능성 중 하나는 새로운 "애니메이션 버튼 트렌드"입니다.
간단한 버튼을 확장하기 위해 애니메이션 기술을 도입한 새로운 UI 스타일입니다.
이러한 변경 사항은 버튼 주위의 간단한 스트로크 애니메이션에서 마우스 호버 시 버튼 안에 실제 별이 움직이는 것까지 다양합니다.
이러한 트렌드는 종종 도미노 효과에 의해 만들어집니다. 먼저 한 디자이너의 소셜 게시물이 인기를 얻고, 그런 다음 다른 유명한 디자이너들이 따릅니다.
The End of Flat Design?
최근에 많은 디자이너들이 디자인 세계가 평면 디자인(여기 Medium에서 볼 수 있는 것과 같은)에서 리얼리스틱한 시각적 스타일로 전환되고 있다고 얘기하고 있습니다. 이것에는 3D 그래픽, 깊이 효과, 뉴에모피즘, 스키오모피즘 등이 포함됩니다.
최근에는 많은 회사에서 3D를 핵심 스타일로 채택하는 것을 볼 수 있었습니다.
웹 및 앱 디자인에서는 지금 바로 나타나지 않을 수 있지만 로고는 이 새로운 트렌드로 업데이트되고 있습니다
다른 디자인 트렌드와 마찬가지로 이러한 스타일을 구현하는 큰 이유 중 하나는 Spline 및 Vectary와 같은 "쉽게 사용할 수 있는" 웹 기반 3D 도구의 등장입니다. 이 도구들은 웹 및 앱에 3D 에셋을 포함시키는 것을 매우 간단하게 만들 뿐만 아니라 몇 안 되는 학습 곡선 중 하나로 애니메이션을 사용하여 3D 에셋을 생동감 있게 만들기도 합니다.
It’s crazy to me as to how a basic linear gradient and some shadows, can add depth and a 3rd dimension to your designs and assets.
디자인과 트렌드를 항상 선도해온 또 다른 회사는 Airbnb입니다. 그들은 간단하면서도 효과적인 앱 디자인과 상호 작용으로 광범위하게 알려져 있습니다. 2023년에 그들은 새로운 중요한 기능을 가져올 앱 업데이트를 발표했습니다.
그들은 무엇을 했나요? 그들은 다소 3D적인 시각적 요소를 12개 이상 통합했고, 그들의 발표 동영상은 거의 모두 3D에 관한 것입니다.
등장한 등고선 시각화, 3D 캐릭터 및 애니메이션, 그리고 다양한 앱 상호 작용은 반복해서 시청하고 싶게 만듭니다.
평면에서 3D로의 전환은 정말로 천천히 진행되고 있으며, 그래서 저는 이 트렌드가 오래갈 것이라고 믿습니다.
현실적이고 관련성 있는 디자인에 대한 수요는 사용자를 위해 혁신하도록 우리를 격려하고, 물론 우리 자신의 이기적인 창의적 동기에도 기인합니다.
The Flood of A.I. Design Tools — Friends or Foe?
인공 지능은 지난 10년 동안 기술 분야에서 가장 많이 사용되고 인식된 단어입니다. 일부 디자이너들은 이것을 자신의 직업 미래에 대한 위협으로 여기지만 대부분의 우리는 이 기술을 활용하여 더 빠르게 최고의 디자인을 만들고 있습니다.
"AI로 구동되는" 디자인 도구 세트는 여러 수준에서 Open AI API를 구현하려고 노력하고 자체 AI 모델을 개발하기도 합니다.
그러나 대부분의 이러한 AI 기능은 단순한 꼼수에 불과합니다. UI를 무작위로 디자인하거나 에셋을 섞거나 어려운 문제에 대한 기본적인 해결책을 제공하는 것과 같은 것들입니다. 이는 많은 커뮤니티 구성원들의 지지를 받는 몇 가지 비판 중 일부라고 할 수 있습니다,
이러한 꼼수들의 혼란 가운데 구출해 주는 영웅들이 몇 있습니다. 그 중 하나가 확실한 팬들을 가진 Relume입니다. 이 Webflow 중심의 회사는 Relume A.I.라는 강력한 와이어프레임 및 사이트 매핑 도구를 출시했습니다.
당신은 프롬프트, 본질적으로 프로젝트 설명인 것을 입력하면 완벽하고 자세한 사이트 맵과 와이어프레임이 생성됩니다. 이 와이어프레임에는 Figma와 Webflow로 빠르게 복사할 수 있는 관련 데이터와 레이아웃이 가득합니다.
More Careful & Empathetic UX
시각적인 부분과 UI 디자인에 대한 이야기는 여기까지 하겠습니다. 최소한이라고 말할 수 있는 것은 UX가 진화했으며, 이는 UX 연구원과 디자이너가 중점을 두는 내용으로 정당화될 수 있습니다. 이는 디자인을 접근 가능하고 포괄적으로 만들기 위한 프로세스를 향한 움직임을 의미합니다.
다수의 디자이너들이 시각 디자인보다 사용성의 영역으로 발을 담그고 있습니다. 이로써 간소하고 실행 가능한 디자인이 중심으로 부상했습니다. 디자이너들은 지난 몇 년 동안 산업의 변화에도 불구하고 작동하는 것을 유지하는데 주력하고 있습니다.
위의 Google 트렌드 그래프는 얼마나 접근성 있는 디자인이 실제로 산업 요건이 되어가고 있는지를 보여줍니다.
이러한 접근성 기술은 색 대비, 가독성 있는 폰트, 인식 가능한 작업 요소부터 장애인에 대한 그림자 투영까지 다양합니다. 이러한 기술들은 접근성 중심의 기능을 도입하기 위한 노력으로 이어지고 있습니다.
Why is Accessibility In Demand?
접근성은 현재 모든 연령 및 심지어 신체적 제약이 있는 사람들을 대상으로 디자인해야 하는 필요성으로 인해 강력히 강조되고 있습니다. 기업들은 모든 다양한 연령층에서 수익을 창출하고 모든 측면에서 포용성을 촉구하려고 합니다. 더 많은 사람들이 디지털로 이동함에 따라 디자이너가 접근성 있는 디자인에 중점을 두는 것은 거의 필수적입니다.
강의와 부트캠프는 수요를 감지하고 학생들을 접근성 있는 디자인에 대한 좋은 지식으로 디자인에 진입할 수 있도록 준비하고 있습니다.
개인화
접근성 외에도 개인화가 앱이나 웹사이트에 사람들을 고착시키고 있는 실질적인 이유입니다. YouTube에서 이 작은 메시지를 본 적이 있을 것입니다 —
여러 앱이 새로운 기능을 몇 일 동안 실험하고 사용자가 그것을 좋아하지 않아서 다시 철회하는 것을 관찰할 수도 있습니다. 이는 제품과 서비스의 미래에 대해 어떻게 UX 디자이너가 주도하는지를 직접적으로 나타냅니다.
해당 콘텐츠는 블로그 주인이 번역 및 내용을 덧붙여 제작한 자료로
사전 동의 없이 2차 가공 및 영리적인 이용을 금하고 있으며 2차 가공을 불허합니다.
출처: https://medium.com/prototypr/ux-ui-design-trends-going-into-2024-ca43a839b541
'🖥️Design Study > Medium Article' 카테고리의 다른 글
| UI 디자인의 핵심 원칙 (0) | 2024.01.13 |
|---|---|
| UX 디자이너를 위한 Lean Prioritization: 효율적인 디자인 의사결정 전략 (0) | 2024.01.05 |
| VR을 위한 디자인 (2) | 2023.12.30 |
| 사용자 인터페이스 디자인(UI)의 아이콘학 기초 [Fundamentals of iconography in user interface design (UI)] (2) | 2023.12.29 |
| 언제 애자일 방식을 사용하고 언제 린방식을 사용해야 할까? (2) | 2023.12.22 |