2023년은 기술 혁신이 풍부한 해였습니다. Apple의 가상 안경 도입, 인공 지능이 주도하는 제너레이티브 디자인의 급증, 삼성의 폴더블 스마트폰을 목격했습니다. 이제 웹에는 점점 더 밝고 대조적인 텍스트가 통합되고 있습니다. 마이크로 애니메이션은 저항하기가 더욱 어려워졌습니다. 현대 프로젝트는 생명체와 마찬가지로 사용자의 모든 움직임에 반응합니다.

2024년에는 어떤 일이 일어날지 살펴보겠습니다. 편안하게 지내세요. 저는 dev.family 팀 의 디자이너 Polina Korotkaya 입니다 . 앞으로 유행할 스타일, 기술, 효과와 그 이유에 대해 알려드리겠습니다.

일반 랜딩 페이지와 단순한 이미지 웹사이트뿐만 아니라 온라인 상점, 뱅킹 서비스, 복잡한 인프라나 모바일 애플리케이션을 갖춘 기타 플랫폼과 같이 더 많은 기능을 갖춘 온라인 리소스에 적용할 수 있는 트렌드를 살펴보겠습니다.

3D 그래픽

3D 일러스트레이션은 계속해서 추세를 유지하고 있습니다. 이는 컴퓨터 성능이 향상되고 이러한 종류의 그래픽을 개발하는 데 드는 비용이 절감되었기 때문입니다.

대기업이 프로젝트에 3D를 사용하는 또 다른 이유는 이미지가 특정 그래픽 디자이너의 개별 기술을 반영하지 않기 때문입니다. 따라서 거의 누구나 3D 일러스트레이션을 그릴 수 있습니다.

3D 요소는 웹사이트와 애플리케이션의 아이콘, 버튼, 일러스트레이션에 자주 사용됩니다. 이러한 요소는 비표준적인 외관으로 인해 주목을 받습니다.

하지만 과거에는 볼륨감 있는 형태만으로도 '스타일리쉬'하기 충분했지만, 오늘날에는 와우 효과를 위해서는 애니메이션과 같은 추가 기능이 필요합니다.

3차원 그래픽은 핀테크나 Web3 전용 프로젝트와 디지털 기업의 웹사이트에서 가장 자주 볼 수 있습니다. 첫째, 필요한 정보를 다른 것보다 더 잘 설명하고, 둘째, 프로젝트의 기술적 성격을 나타내며, 셋째, 프로젝트를 나머지 항목과 차별화합니다.

3D 추상화 및 실제 재료의 모방

추상적인 3D 형태가 인기를 얻고 있습니다. 이러한 추세에는 뾰족한 구와 수많은 입자로 구성된 매끄러운 표면과 같은 복잡한 애니메이션 모양이 포함됩니다.

대개 이러한 시각적 자료는 광고 소재나 이벤트 대행사의 웹사이트에서 찾을 수 있습니다. 더 우아하거나 반대로 생동감이 있을수록 더 매력적입니다. 결혼식, 마케팅, 광고, 인플루언서 사이트 등 모두 최신 트렌드를 따라야 합니다. 이는 다양한 임무와 목표에 뛰어들지 않고도 창의적인 요소를 선보일 수 있는 훌륭한 방법입니다. "아, 정말 귀엽다"부터 "와, 정말 놀랍다"까지 다양한 감정을 불러일으킵니다. 비슷한 생각과 가치관을 가진 사람들을 모아서 호환되지 않는 타겟 청중을 걸러내는 데 도움이 됩니다.

그러나 이러한 그래픽을 추가하면 웹 사이트의 로딩 속도가 빨라질 수 있다는 점을 고려해 볼 가치가 있습니다. 그리고 모바일 애플리케이션에서는 이러한 인터페이스와 상호 작용하는 것이 불편할 수 있습니다.

실제 3D 개체

청중과 소통하는 방법 중 하나는 제품의 3D 버전을 만드는 것입니다. 이러한 웹사이트는 상호작용성이 뛰어나 사용자에게 새로운 경험과 브랜드에 대한 첫인상을 제공합니다.

복잡한 그라데이션

복잡한 그라데이션은 3D 추상화와 함께 2024년에도 계속 관련될 것입니다. 이 두 가지 트렌드는 서로를 잘 보완하면서 함께 갈 것이라고 할 수 있습니다. 함께 사용하면 인터페이스에 더욱 현실감을 더할 수 있습니다.

이 기술은 프로젝트가 Web3 또는 디지털 제품 전용인 경우에 적합합니다. 이를 통해 밝고 미래 지향적인 제품을 얻을 수 있으며, 현대적이고 고도로 기술적인 제품과 강한 연관성을 갖게 됩니다. 사용자가 미래를 만지고 그 일부를 느낄 수 있도록 하세요.

유리형성 및 신경형성

Glassmorphism과 neumorphism은 2020년에 나타난 두 가지 트렌드입니다(glassmorphism은 2013년 iOS 7부터 시작되었습니다). 그들은 반짝였다가 사라졌다가 2024년에 다시 돌아왔습니다. 왜?

뉴모피즘(neumorphism)과 글래스모피즘(glassmorphism) 요소가 포함된 시각적 요소는 인터페이스에 현실감을 더해줍니다. 이 접근 방식은 제품을 선보이는 것이 주요 목표인 디지털 회사들 사이에서 인기가 있습니다. 사용자는 물체를 가까이서 관찰하고, 그 질감을 보고, 눈으로 물체를 사실상 "만지는" 느낌을 받아야 합니다. 이는 다음과 같은 강력한 연관성을 형성합니다. "이것을 내 손에 쥐고 있으므로 존재하며 거의 내 것이 됩니다."

약간의 설명:

Glassmorphism은 인터페이스에서 유리와 같은 요소를 모방한 것입니다.
뉴모피즘(Neumorphism)은 스큐어모피즘(skeuomorphism)에서 파생된 현대 미학에 맞춰 변형된 트렌드입니다. 개체, 볼륨 및 그라데이션에 대한 고품질 그림자 렌더링을 강조합니다.

낮은 폴리 일러스트레이션

로우 폴리곤 그래픽을 향한 추세가 다시 돌아오고 있다는 점은 언급할 가치가 있습니다. 이러한 일러스트레이션은 간결하고 단순한 모양을 통해 정보를 효과적으로 전달합니다. 스케치를 하고, 장면을 설정하고, 사람을 특정 조건에 배치하는 것은 게임과 마찬가지로 향수와 즐거운 추억, 가벼움과 평온함을 불러일으킬 수 있습니다.

일부 회사는 더 나아가 사용자가 미니 게임을 플레이하거나 온라인 실제 퀘스트에 참여할 수 있는 매력적인 플랫폼을 만듭니다. 이는 성취와 다양한 보상에 대한 사람들의 사랑과 관련이 있습니다. 가상 세계에 있더라도 누구나 이기고 싶어합니다. 반면, 브랜드는 할인, 보너스 또는 쿠폰으로 보상을 제공함으로써 구매 의향이 있는 참여도가 높고 의욕이 있는 사용자를 확보합니다.

2D 일러스트레이션

2024년에도 선형적이고 손으로 그린 ​​일러스트는 계속해서 존재합니다. 오늘날 주요 기업에서는 고유한 스타일을 만들고 유지하기 위해 이를 선택합니다. 살펴볼 예로는 Google, Yandex, Dropbox, Mailchimp 및 Wetransfer가 있습니다.

실제로 손으로 그린 ​​일러스트레이션은 스토리텔링을 위한 가장 일반적인 도구로, 브랜드가 사용자에게 자신의 스토리를 전달하고 보여줄 수 있도록 해줍니다. 이것은 동화책, 즐거운 저녁, 개인적인 이야기에 대한 참고서입니다. 따라서 브랜드는 사용자에게 더 가까워지며 대화가 동일한 언어로 이루어질 것임을 보여줍니다.

미니멀리즘과 «단순함»

애니메이션 인터페이스와 대조되는 미니멀리즘은 2024년에도 계속해서 진화하고 있습니다. 인테리어 디자인 서비스, 법률 서비스, 전자상거래를 제공하는 프로젝트에 널리 사용됩니다. 특히 전자상거래에서는 화려한 디테일에 탐닉하지 않는 것을 선호한다. 왜냐하면 사용자는 풍부한 장식적 요소에 산만해지기보다는 본질적인 것에 집중해야 하기 때문이다.

이번에는 블록 시스템, 넓은 네거티브 스페이스, 대조되는 글꼴이 있는 웹사이트에 주목해야 합니다.

복잡한 인터페이스의 깔끔한 디자인

특히 많은 양의 데이터가 포함된 복잡한 인터페이스에서는 최소한의 디자인이 요구됩니다. 예를 들어 이러한 프로젝트에는 대시보드, 개인 계정, 때로는 온라인 상점이 포함될 수 있습니다.

이러한 접근 방식은 사용자가 제품을 빠르게 이해하고 사용을 시작하는 데 도움이 되는 반면, 풍부한 그래픽과 색상은 주요 목표에서 방해가 될 뿐입니다.

복잡한 인터페이스는 우리의 전문 기술이므로 더 많은 것을 공유하고 시연하고 싶지만, 수천 단어 대신 동유럽 최대 폴리머 생산업체의 사례 연구를 살펴보시기 바랍니다.

관리자의 업무량을 줄이기 위해 개인 계정이 필요했습니다. 이 솔루션 덕분에 이제 중소기업(고객의 80%를 구성하지만 수익의 20%만 창출)이 독립적으로 주문하고, 필요한 서류를 받고, 배송 일정을 모니터링할 수 있습니다. 한편 영업사원은 고객의 20%를 차지하지만 무려 80%의 이익을 기여하는 대기업에 집중할 수 있습니다.

단색화

단색 디자인은 계속 존재합니다. 다양한 색상이 있을 수 있지만 일반적으로 항상 불필요한 세부 사항이 없습니다.

주의를 산만하게 하는 눈에 띄는 요소가 없는 이 디자인은 '질서'를 만들어냅니다. "와, 정말 깔끔하다!"라고 생각할 수도 있습니다. 그리고 그것을 신뢰하기 시작하고, 아마도 제품에 대한 자신감을 느낄 수도 있습니다.

어두운 미래 지향적 인터페이스

다크 인터페이스는 단순히 '라이트 모드'와 '다크 모드' 사이를 선택하는 것 이상으로 진화했습니다. 흰색 배경에 일반 콘텐츠와는 차별화된 프리미엄 느낌으로 사용자의 시선을 사로잡는다.

이러한 스타일은 특별한 우주적 분위기를 조성하고 고급스러운 느낌을 더해줍니다. 따라서 프리미엄 금융 상품, 정보 비즈니스의 폐쇄형 커뮤니티, VIP 서비스, 상품 등에서 다크 테마가 자주 발견됩니다. 이는 사용된 기술의 높은 지위와 진보적인 성격을 효과적으로 강조합니다.

애니메이션

그들은 여기에 있었습니다. 그들은 여기 있습니다. 그들은 여기에 있을 것이다! 그러나 어느 것이 추세로 간주됩니까?

마이크로 애니메이션

대화형 인터페이스는 아마도 디자인 세계에서 가장 좋은 아이디어일 것입니다. 마이크로 애니메이션은 사용자가 목표를 달성하도록 안내하고 웹 사이트 탐색을 촉진하며 작업 수행 속도를 높이는 데 도움이 됩니다. 애니메이션 요소는 행동 방향을 나타내고, 어디로 가야 할지, 무엇을 해야 할지에 대한 명확한 지침을 제공합니다. 결과적으로 사용자는 추측할 필요가 없으며 카르마에 플러스를 얻습니다.

텍스트

좀 더 구체적으로 말하자면 키네틱 타이포그래피(Kinetic typography)입니다. 움직임과 텍스트를 결합한 애니메이션 기법입니다. 이는 특이한 생각이나 감정을 전달하거나 불러일으키는 흥미롭고 역동적인 인터페이스를 생성할 수 있게 해줍니다. 키네틱 타이포그래피는 비디오, 오디오, 애니메이션, 그래픽, 게임 등 다양한 스타일과 기술, 효과를 활용합니다. 헤드라인, 타이틀, 광고, 뮤직비디오, 교육자료, 기타 콘텐츠 유형에 적용됩니다.

인터페이스의 문자는 여러 가지 용도로 사용됩니다.

• 캐릭터는 가이드 역할을 하여 사용자에게 도움, 힌트, 격려를 제공합니다. 이는 사용자가 인터페이스를 탐색하고 제품의 기능을 이해하는 데 도움이 됩니다.
• 캐릭터는 관객과의 정서적 연결을 구축하는 데 기여합니다. 제품의 가치를 전달하고 개인적인 손길을 더해 상호 작용을 더욱 매력적으로 만듭니다.
• 사용자는 캐릭터를 통해 보너스, 할인 또는 기타 보상을 받을 수 있습니다. 이는 사용자가 작업을 완료하여 성과를 얻을 수 있는 광범위한 게임화 추세와 관련이 있습니다.

어떤 경우에는 캐릭터가 너무 독특하고 사랑스러워서 밈으로 변하기도 합니다. 이는 언어 학습 플랫폼과 관련하여 널리 인식되고 유머러스한 요소가 된 듀오링고 올빼미가 그 예입니다.

좋은 옛 추억

레트로와 빈티지 디자인의 요소는 사용자들에게 향수를 불러일으키는 탁월한 유발 요인입니다. 이는 사용자가 제품과 감정적으로 상호작용하도록 유도하여 몰입형 경험을 제공합니다. 무의식적으로는 “우리는 공통의 과거, 공유된 추억을 공유합니다. 우리는 함께 자랐습니다.”

대상 청중이 이를 올바르게 인식하고 해석한다는 것을 알고 있다면 프로젝트에 복고풍 요소를 사용하십시오.

어떻게 하나요? 특징적인 요소 추가: 서예 및 골동품 글꼴, 오래된 사진, 팝아트. 글꼴은 손으로 직접 쓸 수도 있고 레터링 스타일로 쓸 수도 있습니다. 기술은 혼합될 수 있습니다.

픽셀 아트

초기 비디오 게임을 연상시키는 기술과 8비트 스타일 그래픽은 푸드테크, 이벤트 조직, 크리에이티브 에이전시 또는 개인 포트폴리오와 관련된 프로젝트에서 다른 스타일과 능숙하게 통합되고 혼합됩니다.

그러나 그러한 시각적 자료가 청중과 관련이 있고 참조 내용을 이해할 것이라고 확신한다면 주의해서 사용하는 것이 좋습니다.

대담한 실험적 디자인

포화된 타이포그래피, 산성 색상, GIF 애니메이션, 스크롤되는 텍스트, 밝지만 평면적인 콜라주, Mac OS 9, Windows 2000 및 Windows ME의 요소 — 이 모든 것은 진정한 "야생적"이고 기억에 남는 작품을 만들고 싶을 때 사용됩니다. 시각적.

이벤트나 프로젝트에 대한 관심을 빠르게 끌고 싶다면 이는 탁월한 접근 방식입니다. 하지만 주방용품을 판매하거나 동물병원 웹사이트를 만드는 경우에는 좋은 솔루션이 아닐 수 있습니다.

주요 목표는 사용자에게 깊은 인상을 주는 것입니다. 그 밖의 모든 것은 부차적인 것입니다. 따라서 프로젝트가 비공식 조직 및 이벤트에 전념하는 경우 이러한 대담한 기술을 모두 사용할 가치가 있습니다.

유비쿼터스 AI

보너스로 간단한 웹사이트와 복잡한 웹사이트 모두에 사용할 수 있는 제가 가장 좋아하는 도구에 대해 말씀드리겠습니다. 인공지능에 대해 이야기하고 있습니다. 우리는 이 기술에 상당히 몰두하여 이를 워크플로에 통합하고 고객에게 제공하고 있습니다. 가장 중요한 것은 트렌드를 주시하고 그것이 '일상생활'에서 어떻게 사용될 수 있고, 어떻게 활용되어야 하는지를 보여주는 것입니다. AI가 요식업과 HoReCa에 어떻게 도움이 되는지 에 대해 글을 썼고 , 여기서는 AI와 전자상거래 에 대해 이야기했습니다 .

디자이너의 경우, 인공 지능 구현의 강력한 이점을 확실히 느꼈습니다. 예전에는 작업 시간으로 측정되던 비주얼 작업이 이제는 몇 시간 정도 걸립니다. AI는 또 어떻게 사용될 수 있나요?

콘텐츠

새로 시작하는 프로젝트의 문제점 중 하나는 콘텐츠가 부족하다는 것입니다. 텍스트 및 이미지 신경 생성기(chatGPT, Midjourney 및 이와 유사한 회사를 지칭함)는 짧은 시간 내에 웹 사이트에서 계획되지 않은 공백을 메워 사용자에게 더 매력적으로 만드는 데 도움이 됩니다.

대화형 배경 및 이미지

인터랙티브 배경과 이미지는 2023년 중반부터 활발히 발전해 왔으며, 애니메이션 콘텐츠 제작 서비스가 크게 성장했습니다.

캐릭터

위에서 언급한 캐릭터는 프로세스의 각 단계에서 상당한 시간과 조정이 필요한 손으로 그린 ​​수도 있고, 특정 항목을 생각해내기 위한 노력을 덜 들이고 대량으로 빠르게 생성할 수도 있습니다.

웹사이트 제작을 결정했거나 개편을 고려하고 있다면

추세를 따르면서 측정과 편의성을 잊지 마십시오. 사용자가 모든 중요한 정보를 신속하게 얻고 목표 작업을 수행하도록 돕는 것이 가장 중요합니다. 그러므로 항상 "내가 왜 이것을 그리는가? "라는 질문을 스스로에게 물어보십시오.

온라인 상점, 개인 계정과 다양한 액세스 수준을 갖춘 복잡한 플랫폼, 일부 비즈니스 프로세스를 자동화하는 프로젝트를 만들 계획을 세울 때 다음을 기억하세요. 첫째, 기능적 작업을 해결하고, 둘째, 아름다움을 추가하세요.

관련 경험이 있는 사람들과 상담하십시오. 랜딩 페이지를 만든 디자이너는 매장을 만들 때 모든 뉘앙스를 고려하지 않을 것입니다. 그리고 확실히 누군가가 당신을 위해 명함을 디자인했다면 좋은 개인 계정을 개발할 가능성은 거의 없습니다. 해당 업계(푸드테크, 핀테크, 패션 등)에서 직접 전문가를 찾으면 모든 것을 스스로 생각할 필요가 없습니다. 

저자 - dev.family