Web design trend: small graphical elements on hero section
웹 디자인 트렌드: 히어로 섹션의 작은 그래픽 요소
There are many ways to design the hero sections of a website homepage in order to communicate, to captivate and to impress the visitors…
방문자들의 마음을 사로잡고 감동을 주기 위해 웹사이트의 영웅 섹션을 디자인하는 많은 방법들이 있습니다…
요약 :)
방문자와 소통하고, 마음을 사로잡고, 감동을 주기 위해 웹사이트 홈페이지의 주요 섹션을 디자인하는 방법에는 여러 가지가 있습니다. 디자이너는 타이포그래피, 이미지, 애니메이션, 일러스트레이션 등과 다양한 조합을 사용할 수 있습니다. 최근 홈페이지의 히어로 섹션에서 작은 그래픽 요소를 사용하는 디자인 트렌드를 우연히 발견했습니다.
이러한 작은 그래픽 요소는 웹 사이트의 주요 메시지를 칭찬하는 데 자주 사용되며, 제대로 수행되면 분위기를 설정하는 데 도움이 되고 웹 사이트의 모양과 느낌을 더욱 증폭시킬 수 있습니다. 여기에서는 그것이 어떻게 적용되는지에 대한 10가지 훌륭한 사례를 수집했습니다.
방문자와 소통하고, 마음을 사로잡고, 감동을 주기 위해 웹사이트 홈페이지의 주요 섹션을 디자인하는 방법에는 여러 가지가 있습니다. 디자이너는 타이포그래피, 이미지, 애니메이션, 일러스트레이션 등과 다양한 조합을 사용할 수 있습니다. 최근 홈페이지의 히어로 섹션에서 작은 그래픽 요소를 사용하는 디자인 트렌드를 우연히 발견했습니다.
이러한 작은 그래픽 요소는 웹 사이트의 주요 메시지를 칭찬하는 데 자주 사용되며, 제대로 수행되면 분위기를 설정하는 데 도움이 되고 웹 사이트의 모양과 느낌을 더욱 증폭시킬 수 있습니다. 여기에서는 그것이 어떻게 적용되는지에 대한 10가지 훌륭한 사례를 수집했습니다.
가족
Family 는 디자인 세부 사항에 많은 관심을 기울인 사용자 친화적인 암호화폐 지갑입니다. 홈페이지에서 평면 색상으로 애니메이션된 그래픽 모양을 볼 수 있습니다. 다양한 모양은 지갑의 다양한 기능을 나타내며 영웅 섹션을 재미있고 환영받는 분위기로 만들었습니다.
가족의 영웅 섹션
가족
기빙리
Givingli 는 자신이 큐레이팅한 브랜드의 디지털 상품권과 실제 선물을 보낼 수 있는 디지털 선물 서비스입니다. 홈페이지에 접속하면 영웅 섹션에 재미 있고 스티커 같은 그래픽이 그려져 있습니다. 이는 축하의 느낌을 풍부하게 하고 방문객들에게 다양한 축하 행사를 위한 다양한 선물 아이디어를 제공할 수 있다는 점을 전달합니다.
Givingli의 영웅 섹션
기빙리
10x디자이너
10xDesigners는 디자이너가 배우고, 같은 생각을 가진 다른 디자이너와 연결하여 전문 디자이너로 함께 성장할 수 있는 디자이너 전용 온라인 커뮤니티입니다. 신선하고 높은 품질과 유망한 커뮤니티라는 좋은 첫인상을 주기 위해 영웅 섹션은 디자인 분야의 다학제적 특성을 보여주는 3D 금속 기본 모양(작은 부활절 달걀: 끌 수 있음)으로 채워졌습니다.
10xDesigners의 영웅 섹션
10x디자이너
그래픽
Graphy 는 사람들이 아름다운 차트와 시각화를 빠르게 만들 수 있도록 도와주는 서비스입니다. 웹사이트의 히어로 섹션은 어두운 배경과 대조되는 차트로 채워져 있습니다. 그것은 확실히 강한 인상을 주었고 방문객들에게 그들이 하는 일에 대한 빠른 연상을 주었습니다.
Graphy의 영웅 섹션
그래픽
실제
Actual은 최근에 발견된 것입니다. 그들은 기업이 암호화폐로 청구서 결제를 가능하게 하는 핀테크 회사입니다. 그들의 홈페이지 영웅 섹션은 종이처럼 보이도록 만들어진 사용자 인터페이스의 그래픽 요소와 실제와 같은 그림자로 매우 흥미로웠습니다. 왠지 사무실에서 일어나는 업무용 책상을 대표하는 것 같은 느낌이 듭니다.
Actual의 영웅 섹션
실제
프리즘
Prismic 은 사람들이 페이지를 빠르게 구축하는 데 사용할 수 있는 페이지 빌더 도구입니다. 히어로 섹션의 그래픽 요소는 이 웹사이트가 제공하는 다양한 특징과 기능을 나타냅니다.
프리즘의 영웅 섹션
프리즘
뇌관
Primer는 쉽게 맞춤화가 가능한 다양한 서비스를 연결하여 기업이 원활한 결제 및 상거래 경험을 할 수 있도록 도와줍니다. 히어로 섹션은 이 플랫폼이 지원하는 브랜드와 서비스의 다양한 로고로 가득 차 있었습니다. 이는 방문자가 여러분 모두에게 친숙한 모든 브랜드를 지원한다는 점을 방문자에게 전달하는 매우 간단한 방법입니다.
Primer의 영웅 섹션
뇌관
열정의 뿌리
Passionfroot 도 최근에 발견되었는데 웹사이트가 정말 귀여운 것 같아요. 이는 제작자가 브랜드와의 작업을 더 잘 추적하고 구성하는 데 도움이 됩니다. 영웅 섹션의 그래픽 요소는 방문자에게 영웅 섹션으로 무엇을 할 수 있는지에 대한 빠른 아이디어를 제공합니다.
Passionfroot의 영웅 섹션
열정의 뿌리
노션캘린더
마지막으로 새롭게 출시된 노션캘린더입니다 . 웹사이트는 앱에서 발생할 다양한 유형의 예약 및 활동 블록을 나타내는 히어로 섹션의 작은 그래픽 요소와 함께 Notion의 일반적인 브랜드 DNA를 전달했습니다. 반복적이지만 유쾌한 요소는 웹사이트의 차분한 톤과 잘 어울립니다.
Notion Calendar의 영웅 섹션
노션캘린더
비탈길
Ramp는 영웅 공간을 교묘하게 활용하여 헤드라인 주위에 시각적 요소를 배치함으로써 카드 기능을 소개하고 사용자에게 카드가 무엇을 할 수 있는지에 대한 빠른 아이디어를 제공합니다. 다른 것과 달리 요소가 조금 더 커서 약간 압도적일 수 있습니다. 하지만 깨끗하고 견고한 배경을 사용하면 여전히 작동한다고 생각합니다.
램프의 영웅 섹션
https://ramp.com/
디자인 특성
위에는 홈페이지 히어로 섹션에서 작은 그래픽 요소가 어떻게 사용되는지 보여주는 10가지 좋은 예가 있습니다. 위의 예에서 제가 파악한 몇 가지 디자인 특성은 다음과 같습니다.
히어로 섹션의 텍스트 콘텐츠는 간결하고 최소한이며 좁으므로 그래픽 요소를 배치할 수 있는 빈 공간이 더 많습니다.
요소는 일반적으로 유사한 디자인 스타일로 반복되어 사용자에게 장식적이고 일반적으로 대화형이 아니라는 것을 전달하기 쉽게 스캔합니다.
요소는 일반적으로 너무 복잡하지 않으며 영웅 메시지를 칭찬하고 더욱 인상적인 시청 경험을 위해 애니메이션을 적용할 수 있습니다.
결말 생각
보시다시피, 웹사이트마다 작은 그래픽 요소를 다르게 사용합니다. 일부는 웹사이트를 더욱 재미있고 친근하게 만들기 위한 장식적인 목적이고, 일부는 제공하는 메시지를 전달하기 위한 것입니다. 그러나 합리적으로 사용해야 하며 배치를 신중하게 고려해야 합니다. 그렇지 않으면 영웅 섹션이 너무 바빠질 위험이 있습니다.
더 많은 웹 디자인 트렌드에 대해 제가 쓴 다른 기사는 다음과 같습니다.