2024년 디자인 트렌드 5가지 Hero layouts
히어로 레이아웃 디자인 트렌드
개인적으로 디자인 트렌드에 크게 관심이 없습니다. 제 생각에, 사용자가 제품에 적극적으로 관심을 가지고, 신체적, 심리적, 정서적으로 깊이 몰입할 수 있도록 하는 것이 중요합니다. 그렇지 않으면 그것은 별다른 의미가 없다고 봅니다.
하지만, UX 원칙에 따르면 사용자는 종종 미적으로 만족스러운 디자인을 더 사용하기 좋은 것으로 여깁니다. 이러한 이유로, 디자인 심미적 트렌드에 대한 이해는 유익할 수 있으며, 그래서 관련된 글을 공유하려고 합니다.
1. Isolated Component Hero Layout
출처: Feedly앱이나 소프트웨어의 중요한 UI 컴포넌트들만 선택하여 강조하는 것으로, 전체를 보여주지 않고도 핵심 부분을 부각할 수 있습니다. 선택된 부분들을 창의적으로 배열하여 마치 그림처럼 보이게 함으로써, 사용자의 주의를 끌 수 있습니다.
출처: 토스 페이먼츠2. Bento Hero Layout
Microsoft Windows 8 | Apple iPhone도시락 디자인 스타일은 새로운 것이 아니며, 2021년에 Microsoft에서 Windows 8을 출시할 때나 Apple에서 수년 동안 웹 사이트와 프레젠테이션을 통해 본 적이 있습니다.
벤토라는 이름 자체가 일본식 도시락에서 유래한 것으로, 칸막이로 나뉜 귀여운 도시락을 말합니다. 이러한 스타일들이 최근 디자이너들이 많이 사용하고 있습니다.
출처: Slidddo
출처: https://osmic-portfolio.webflow.io/도시락 그리드는 한 줄로 이어지는 이야기 대신에, 각각의 카드나 상자를 통해 방문객들이 스스로 탐험하며 다양한 경험을 선택할 수 있게 해 줍니다.
3.Lava Hero Layout
출처: Dribble대부분의 물체는 가로나 세로축을 따라 다른 물체의 가장자리와 직각으로 정렬되는데, 이 요소들이 주변 물체의 윤곽을 따라 배치되면서 텍스트 주변에 공간을 남겨 두어, 마치 용암 램프처럼 흐르는 듯하고 독특한 형태를 만들어냅니다.
출처: Dribble
출처: Dribble4. Callout Hero Layout
출처: Dribble벤토 레이아웃의 특정 부분을 선택하고 독특한 구성 요소와 결합하여 콜아웃 기능이 포함된 흥미로운 히어로 디자인을 제작하는 데 초점을 맞추고 있습니다. 하지만 단점은 히어로에서 시선이 분산되기에 정확한 집중을 시키기 어렵습니다.
출처: Dribble5. Tied To Scroll
https://stocketa.com/'스크롤 타이'는 스크롤할 때 요소나 카드가 중점을 이루며 회전하거나 움직이는 디자인 스타일입니다. 사용자가 스크롤하면, 화면의 요소들이 애니메이션처럼 변화하는 것을 볼 수 있습니다.
Stocketa 모바일 앱의 랜딩 페이지에서는, 왼쪽 부분이 스크롤되는 반면 오른쪽 부분은 고정되어 있습니다. 왼쪽에서 기능을 마우스로 가리키거나 스크롤하면, 해당 이미지가 오른쪽에 나타나게 되는 좋은 예시입니다.
https://www.cosmos.so/Cosmos는 스크롤할 때마다 물체를 빨아들이고 회전시키는 등의 다채로운 애니메이션이 나타나며, 이 애니메이션이 역방향으로도 작동하여 멋진 3D 효과를 보여줍니다.
레이아웃 스타일 조합하기
https://sparktemplate.framer.website/Framer 템플릿 중에 위에 소개한 디자인 스타일들을 믹스 앤 매치할 수도 있습니다. 아래의 예시는 위에 소개한 부분들이 혼합되어 있습니다.
출처: https://medium.com/p/c7b83ac7a3e3
데이터, 생성형 AI, 디자인 관련 다양한 인사이트를 구독해 주세요 :)
