24 웹사이트 헤더 예시, 트렌드 및 전환 팁

웹사이트는 스타일, 형식 및 품질이 다양합니다. 하지만 이들 모두의 공통점이 있다면? 헤더 - 쉽게 탐색할 수 있도록 하는 상단의 스트립입니다.

최소한의 공간을 차지함에도 불구하고 헤더는 웹사이트에서 가장 많이 참여하는 요소입니다. 인상을 남기려는 기업은 쉽고 직관적이면서도 독특하고 자극적인 경험을 제공하는 완벽한 균형을 유지하기 위해 노력할 것입니다.

이 게시물에서 우리는 24개의 웹사이트 헤더 예시를 나누어서 공유할 것입니다:

• 웹사이트 헤더가 정확히 무엇인지
• 웹사이트 헤더에 포함할 내용
• 전환 최적화를 위한 권장사항

이렇게 하면 마케팅 목표를 지원하는 동시에 견고한 사용자 경험을 제공할 수 있습니다.

웹사이트 헤더란 무엇입니까?

웹 사이트 헤더는 일반적으로 웹 사이트 상단에서 실행되는 시각적 인쇄상의 스트립 또는 메뉴입니다. 로고, 탐색 태그, 로그인 버튼 등과 같이 클릭 가능한 여러 구성 요소가 포함되어 있습니다. 거의 모든 웹사이트(가장 기본적인 웹사이트 포함)는 홈페이지에 헤더가 있으며 많은 웹사이트에는 페이지의 나머지 부분에 다양한 헤더가 있습니다.

다음은 즉시 인식할 수 있는 매우 기본적인 웹사이트 헤더입니다.

위에서 언급했듯이 웹사이트 헤더에는 이중 책임이 있습니다.

• 항해. 무엇보다도 사이트 방문자를 웹사이트의 다른 페이지로 효과적으로 안내할 수 있어야 합니다.
• 마케팅. 올바르게 설계된 헤더는 비즈니스를 위한 마케팅 자산 및 판촉 수단이 될 수 있습니다.

웹사이트 헤더에는 무엇이 포함되어야 합니까?

아래에서 웹사이트 헤더에 나타날 수 있는 여러 요소를 찾을 수 있습니다. 그러나 모든 헤더에 이러한 기능이 모두 포함되는 것은 아닙니다. 그것은 모두 귀하의 산업, 비즈니스 유형 및 웹 사이트 형식에 따라 다릅니다. 또한 동일한 사이트 내에서 어떤 페이지에 있는지에 따라 헤더가 변경될 수 있습니다. 예를 들어 홈페이지 헤더에는 5-6개의 클릭 가능한 요소가 포함될 수 있지만 리소스 페이지의 헤더에는 클릭 가능한 아이콘이 더 적을 수 있습니다.

심벌 마크

극히 일부의 예외를 제외하고, 웹사이트 헤더의 모든 변형은 클릭 시 사용자를 홈페이지로 다시 안내하는 회사 로고를 눈에 띄게 표시합니다. 길을 잃으면 항상 익숙한 영역으로 다시 안내할 수 있습니다.

탐색 링크

이것은 또한 모든 웹사이트 헤더의 핵심입니다. 일반적으로 기본 탐색 옵션을 5-7개 요소로 유지하고 싶지만 연결하는 페이지는 틈새 시장에 따라 다릅니다. 일부 기업의 경우 탐색 메뉴는 회사 소개 페이지, 제품 또는 서비스 페이지, 가격 책정 페이지, 리소스 페이지 및 문의 페이지로 연결됩니다. 다른 사람들의 경우 경력 페이지 또는 첫 번째 환자 페이지입니다. 그것은 모두 산업에 달려 있습니다.

대부분의 SaaS 및 기술 웹 사이트 헤더는 다음과 같습니다.

• 제품 은 방문자에게 다양한 기능 또는 제품 유형에 대한 심층적인 보기를 제공합니다.
• 솔루션 은 방문자를 페이지/허브로 안내하여 회사의 플랫폼이 다양한 시나리오에서 어떻게 활용될 수 있는지 또는 다양한 패키지를 볼 수 있도록 합니다.
• 리소스 에는 종종 블로그, 사례 연구 또는 평가, 지식 기반 및/또는 백서가 포함됩니다.
• 가격 은 방문자를 플랫폼의 다양한 구독 패키지가 표시되는 포괄적인 페이지로 안내합니다. 일부 SaaS 플랫폼은 가격 패키지를 공개하는 것을 꺼립니다. 이는 맞춤화되고 균일한 가격 구조가 없는 엔터프라이즈 솔루션과 관련하여 특히 그렇습니다.

검색 창

인터넷의 초창기에는 검색창이 오늘날보다 훨씬 더 널리 보급되었고 많이 사용되었습니다. 검색창을 보면 알 수 있을 것입니다. 대부분의 사이트에서는 요소의 기능을 나타내기 위해 돋보기 아이콘을 사용합니다.

홈페이지 헤더보다 블로그 메뉴 헤더에서 검색창을 찾을 가능성이 더 큽니다. 그러나 일부 사이트는 홈페이지 헤더에 이 기능을 제공합니다. 최고의 비디오 호스팅 플랫폼인 Brightcove는 흥미롭게도 검색 표시줄을 충분히 갖추고 있지만 보다 일반적인 가격 요소는 제공하지 않습니다.

쇼핑 카트

전자 상거래 웹 사이트의 필수 요소인 이 CTA는 오른쪽 상단에 있어야 하며 장바구니 또는 쇼핑백 아이콘이어야 합니다.

소셜 미디어 버튼

이것들은 웹사이트 바닥글에 더 일반적으로 표시되지만 일부 웹사이트 머리글에는 소셜 채널에 대한 링크가 포함되어 있습니다. 다음은 예입니다.

로그인 필드

로그인 옵션이 있는 모든 웹사이트는 헤더에 로그인 필드도 포함해야 합니다. 활성 고객인 경우 액세스 권한을 얻기 위해 입력할 수 있는 사용자 및 암호가 있습니다. 대부분의 주요 플랫폼은 Google 계정을 통해 액세스할 수 있는 옵션도 제공합니다.

CTA

이 게시물의 거의 모든 예제에서 알 수 있는 한 가지는 헤더에 클릭 유도문안이 포함되어 있다는 것입니다. 이것은 웹사이트에서 가장 많이 사용되는 요소이므로 이를 활용하여 비즈니스 목표를 지원하는 것이 좋습니다. 이것은 무료 도구를 사용하고, 등록하고, 비즈니스에 연락하고, 무료 평가판을 시작하는 등의 작업이 될 수 있습니다.

웹사이트 헤더 예시 및 트렌드

몇 가지 구성 요소가 있지만 웹 사이트 헤더를 구성하는 방법에는 여러 가지가 있습니다. 아이디어와 영감을 주기 위해 더 많은 웹사이트 예를 살펴보겠습니다.

왼쪽 정렬 로고가 있는 한 줄 머리글

기본적이지만 효과적인 Zoho에는 4개의 클릭 가능한 탐색 요소와 검색 표시줄만 있습니다. Zoho가 어떻게 올바른 정렬을 선택했는지 주목하십시오. 이것은 로고를 강조하여 방문자의 관심을 끌 수 있는 더 많은 공간을 제공합니다.

알림 표시줄이 있는 한 줄 헤더

헤더 자체는 매우 평범하지만 상단의 배너는 새롭고 중요하며 흥미진진한 것에 대한 주의를 끌기 위한 것입니다. Elementor는 최근 이를 사용하여 이제 WordPress용 클라우드 호스팅을 제공한다고 발표했습니다.

SE Ranking은 현재 알림 표시줄을 사용하여 우크라이나에 대한 지원을 홍보하고 있습니다.

물론 이러한 배너에는 CTA가 포함됩니다. 클릭하면 방문자는 배너에서 제안을 자세히 설명하는 지정된 방문 페이지로 이동합니다.

2계층 헤더

2계층 헤더를 사용하면 한 줄의 아이콘으로 방문자를 압도하지 않고도 더 많은 탐색 옵션을 제공할 수 있습니다.

알림 표시줄이 있는 2계층 hHeader

Amplitude는 다가오는 회의를 홍보하기 위해 이중 계층 헤더 위에 알림 표시줄을 추가했습니다. 알림 표시줄은 헤더와 길이가 같으므로 덜 복잡하고 사이트의 별도 섹션처럼 느껴집니다.

유틸리티 표시줄이 있는 헤더(고정 표시줄)

일부 사이트는 방문자가 페이지를 아래로 스크롤할 때 헤더가 고정되도록 헤더를 부착합니다. 그들의 근거는 간단합니다. 방문자에게 언제든지 웹사이트의 어느 부분으로든 이동할 수 있는 옵션을 제공하십시오.

이 헤더는 사이트 맨 아래까지 계속 붙어 있습니다.

플로팅 헤더

Mixpanel의 홈페이지에서 볼 수 있듯이 플로팅 헤더는 고정 막대와 비슷하지만 아래로 스크롤하면 헤더 위와 아래에 웹페이지가 표시되어 플로팅 효과가 생성된다는 차이점이 있습니다.

메가 메뉴가 있는 헤더

일부 웹사이트는 헤더에서 공유하는 정보가 부족할 수 없습니다. 이러한 경우 메가 메뉴를 사용하는 것이 매우 유용할 수 있습니다.

다중 사이트 탐색이 포함된 헤더

일반적으로 소매 및 전자 상거래 웹 사이트에서 볼 수 있는 다중 탐색 헤더를 사용하면 사용자가 자매 회사 사이트에서 다른 사이트로 쉽게 이동할 수 있습니다.

왼쪽 정렬 세로 헤더

비전통적인 헤더 예제 중 첫 번째인 동일한 탐색 메뉴 항목이 왼쪽에 수직으로 매달려 있는 것을 볼 수 있습니다.

오른쪽 정렬 세로 헤더

같은 개념이지만 이번에는 오른쪽에 세로로 정렬되었습니다. 이 사람들은 각 메뉴 항목도 세로로 걸어두어 한 단계 더 나아갔습니다.

햄버거 슬라이드 인

덜 일반적이지만 그럼에도 불구하고 매력적인 햄버거 메뉴는 세련된 웹 디자인을 잘 보여줍니다. 메뉴가 슬라이드되면서 배경이 어두워지므로 방문자가 클릭 가능한 옵션에 주의를 집중할 수 있습니다.

다른 쪽에도 같은 내용이 있습니다.

전체 인수 슬라이드 인

Vimeo와 같이 과감하게 메뉴를 전체 화면으로 확장할 수 있습니다.

웹사이트 헤더 모범 사례

• 색상 대비를 사용합니다. 최소한 헤더의 배경색과 선택한 글꼴 사이의 비율은 4.5:1이어야 합니다. 이것은 헤더 주변에 포함된 모든 2차 정보와 함께 헤더에 적용됩니다. 헤더 메뉴가 표시되면 페이지의 배경을 어둡게 하여 더 집중할 수 있도록 할 수도 있습니다.
• CTA를 포함합니다. 위에서 언급했지만 다시 언급할 가치가 있습니다. 비즈니스에 연락하거나, 무료 도구를 사용해 보고, 평가판을 시작하거나,
• 끈적하게 만드세요. 일부 웹사이트는 디자인과 역동적인 스크롤 방식으로 쉽게 감탄을 자아내지만, 궁극적으로 대부분의 웹사이트에는 하나의 분명한 목표가 있습니다. 바로 전환입니다. 방문자가 이탈하기 전에 방문자에게 가치를 제공할 수 있는 시간은 약 15초이므로 방문자가 항상 중요한 페이지로 쉽게 이동할 수 있도록 해야 합니다. 가장 중요한 CTA를 항상 확인하는 것은 말할 것도 없습니다.
• 직관적으로 만드십시오. 자신의 웹사이트용으로 하나를 선택하기 전에 경쟁업체와 틈새 시장의 다른 사이트를 조사하여 가장 일반적인 것이 무엇인지 확인하십시오. 웹사이트 탐색은 독특하거나 "파괴적"이도록 노력해야 하는 영역이 아닙니다.
• 모바일에 최적화합니다. 현미경으로만 볼 수 있는 글꼴 크기를 사용하지 않는 한 가로 헤더는 모바일에서 옵션이 아닙니다. 가장 일반적인 접근 방식은 모바일 브라우징을 위해 햄버거 메뉴를 구성하는 것입니다.

필요한 경우 모바일에 최적화할 때 검색 창이나 CTA 버튼을 잃을 필요가 없다는 점은 주목할 가치가 있습니다. Hubspot이 수행하는 방법은 다음과 같습니다.

• 단순한 글꼴을 고수하십시오. 가독성은 UX와 관련하여 모든 것이며(결과적으로 카피라이팅 심리학도 마찬가지임), 사이트의 가장 기본적인 클릭 가능한 요소에 관해서는 두 배로 중요합니다. Sans Serif 글꼴은 가독성이 높기 때문에 웹사이트 헤더 텍스트에 일반적입니다.

좋은 점은 레모네이드가 헤더 글꼴에 로고 글꼴을 사용하지 않았기 때문입니다.

웹사이트 헤더: 섬세한 아트폼

다양한 모양과 크기로 제공되는 웹사이트 헤더는 사이트의 성공에 매우 중요합니다. 보다 전통적인 디자인을 선택하든 좀 더 실험적인 디자인을 선택하든 보편적인 모범 사례를 준수하는 것이 중요합니다. 웹사이트가 헤더 요소를 에이스했을 때 그것은 아주 무시합니다. 귀하의 사이트 방문자는 간결하지만 자극적인 탐색 경험을 제공받아 멀리 떠날 것입니다. 매우 자주 이것은 궁극적인 비즈니스 목표를 달성하도록 이끄는 데 중요한 역할을 합니다. 특정 페이지에 방문하거나 실제로 유료 고객으로 전환하는 것입니다.

저자 소개

Yoni Yampolsky는 Elementor의 마케팅 관리자입니다. 천만 명 이상의 활성 사용자가 있는 Elementor는 누구나 코드 없이 멋진 WordPress 웹사이트를 만들 수 있도록 지원합니다.