티스토리 뷰
아티클 정보
2024년 디자인 트렌드 5가지 Hero layouts
이승철/2024년 1월 15일
2024년 디자인 트렌드 5가지 Hero layouts
히어로 레이아웃 디자인 트렌드 | 개인적으로 디자인 트렌드에 크게 관심이 없습니다. 제 생각에, 사용자가 제품에 적극적으로 관심을 가지고, 신체적, 심리적, 정서적으로 깊이 몰입할 수 있도
brunch.co.kr
아티클 내용
UXUI 심리학 법칙 중 심미적 사용성 효과에 따라 심미적으로 아름다운 디자인은 더 사용하기 좋은 것으로 여기므로, 디자인 심미적 트렌드에 대한 이해는 유의미하다.
1. Isolated Component Hero Layout
- 앱이나 소프트웨어의 중요한 UI 컴포넌트만을 선택 강조하는 것
- 전체를 보여주지 않고도 핵심 부분을 부각할 수 있다.
- 선택 부분을 창의적으로 배열해 그림과 같은 효과를 내면서, 사용자의 주의를 끌 수 있게 된다.
Twenty 사이트 가보기
Twenty - The #1 Open-Source CRM
Experience the forefront of open-source CRM. Packed with advanced features, customizable workflows, and community support. Transform customer relationship management seamlessly and efficiently.
www.twenty.com
Ozone 가보기
Ozone - Create Videos Faster with AI.
Meet Ozone, your video creation co-pilot.
www.ozone.pro
2. Bento Hero Layout
- 2021년 Microsoft에서 Windows 8을 출시할 때나 Apple의 디자인에서 많이 찾아볼 수 있었던 새롭지 않은 형태
- 그러나 최근 이러한 스타일을 디자이너들이 많이 사용하고 있다.
- 벤토(弁当)라는 용어는 일본식 도시락을 뜻한다.
- 도시락 그리드는 한 줄로 이어지는 대신, 각각의 카드나 상자를 통해 방문객들이 스스로 웹사이트를 탐험하고, 다양한 선택을 할 수 있게 해준다.
네이버 기업 가보기
NAVER Corporation
모두를 위한 기술 플랫폼, A Technology Platform for All
www.navercorp.com
slidddo 가보기
457 Slides Pitch Deck Template. Try for free
Get Pitch Deck template that works! Create a unique deck in no time without stress and effort. Easy to customize, clean design, bonus assets.
www.slidddo.com
3. Lava Hero Layout
- 대부분의 물체는 가로나 세로축을 따라 다른 물체의 가장자리와 직각으로 연결되나, 이 요소들이 주변 물체의 윤곽에 따라 배치되며 텍스트 주변에 공간을 남겨 두어, 마치 용암 램프처럼 흐르는 듯한 독특한 형태의 레이아웃
카카오 가보기
Kakao
기술과 사람으로 더 나은 세상을 만듭니다
www.kakaocorp.com
CoLabs 가보기
Making space for transformative innovation.
We design, build and run collaborative spaces where bio-led science, technology and people can thrive.
colabs.com.au
4. Callout Hero Layout
- 벤토 레이아웃의 특정 부분을 선택하고, 독특한 구성 요소를 결합해 'Callout'적인 기능이 포함된 흥미로운 히어로 디자인
- 단점: 히어로에서 시선이 분산되어 정확한 집중을 시키기 어렵다.
5. Tied To Scroll
- '스크롤 타이'는 스크롤할 때 요소나 카드가 중점을 이루어 회전하거나 움직이는 스타일을 말한다.
- 사용자가 스크롤함에 따라 화면의 요소들이 애니메이션과 같이 변화함을 볼 수 있다.
Stocketa 가보기
- 페이지 좌측은 고정되어 있고, 우측은 스크롤함에 따라서 애니메이션이 연출된다.
Stocketa
Why did you build Stocketa? When the pandemic began, I found myself quarantining inside with more time on my hands and a desire to learn a new skill. I had decided that skill would be picking up iOS app development. I learn best by having my own project an
stocketa.com
코스모스 가보기
- 코스모스는 사용자가 스크롤함에 따라 물체를 빨아들이거나 회전시키는 애니메이션을 나타낸다.
- 위 애니메이션은 역방향으로도 작동된다.
Welcome to Cosmos
A Pinterest alternative for creatives.
www.cosmos.so
6. 스타일 조합하기
- 아래 Frame 템플릿은 위 디자인 스타일들을 믹스 앤 매치한 것
- 아래와 같이 조합하여 사용할 수도 있다.
Spark Template
Looking for a Modern and Sleek one-page template for your SAAS Business, Startup, or Design Portfolio? Look no further than Spark!
sparktemplate.framer.website
인사이트
- 디자인 트렌드에 대한 이해를 UXUI 심리학 원칙 중 심미적사용성효과와 연관지어 생각할 수 있게 되었다.
→ 트렌드를 이해하면, 사용자에게 더 좋은 UXUI를 제작할 수 있다. - 히어로 페이지에 사용되는 레이아웃의 구조에 대한 이름을 정확히 알 수 있게 되었다.
→ 기존에는 눈으로만 이해하는 구조를 입으로 정의할 수 있게 되었다. - 디자인 트렌드 또한 다른 트렌드와 같이 돌고 도는 측면이 있다는 것을 확인할 수 있었다.
→ 벤토 레이아웃 또한 없던 것이 나타나지 않은 만큼, 트렌드는 있는 것을 발전시키는 방향이다. - 트렌드 레이아웃에 따른 예시사례를 최대한 직접 찾아보면서 다양한 웹사이트를 방문해보는 것, 많은 형태를 보는 것을 중요성을 깨달았다.
→ 많이 보고, 인터렉션을 작동해보는 것은 실습의 한 형태라고 느꼈다.
'아티클 > 디자인 아티클' 카테고리의 다른 글
| 오늘의 UXUI 아티클 스터디: UX디자이너로 성장하기 위해 알아야할 3가지 (0) | 2024.01.30 |
|---|---|
| 머티리얼 디자인가이드 분석: Cards (0) | 2024.01.29 |
| 오늘의 UXUI 아티클 스터디: 매력적인 히어로 페이지를 위한 7가지 방법(3) (0) | 2024.01.12 |
| 오늘의 UXUI 아티클 스터디: 서울 명동 버스 대란: 실패한 UX 디자인 (0) | 2024.01.12 |
| 오늘의 UXUI 아티클 스터디: AI·조용한 퇴사·블레저… 2023년 직장인이 주목한 뉴스 TOP 5 (0) | 2024.01.12 |