고정 헤더 영역
상세 컨텐츠
본문
많은 사람들이 자사 또는 자신의 웹 사이트를 더욱 흥미롭게 만들 수 있는 방법을 궁금해 합니다. 그 해법으로 최근 웹 트렌드가 되고 있고 현대적인 분위기를 자아내 사이트를 멋지게 보이게 하는데 효과를 발휘하는 히어로 슬라이더(Hero Slider)를 추가해 볼 것을 추천합니다.
웹 사이트는 방문자를 즉시 유입시키기 때문에 방문자가 이탈하지 않도록 해야 합니다. 바운싱은 방문자가 사이트에 도착하여 사이트 내 다른 곳으로 가지 않고 나가는 것을 말합니다. 방문자가 몇 초 안에 웹 사이트 목적과 제공하는 것이 무엇인지 알아야 합니다. 사이트는 설득력이 있어야 유지되고 탐색할 수 있습니다. 히어로 슬라이더로 그것을 쉽게 할 수 있습니다.
이것이 바로 히어로 이미지가 워드프레스(WordPress) 및 웹 디자인에서 주요 트렌드가 된 이유입니다. 화면을 차지하는 큰 이미지를 지칭합니다. 이런 대형 이미지를 웹 페이지 상단에 배치하면 '히어로 헤더'라고 합니다. 그러나 이 글을 통해 이야기 하려고 하는 것은 히어로 슬라이더입니다.
Slider Revolution팀이 만든 이 글에서는 히어로 슬라이더가 무엇인지, 그리고 얼마나 멋지게 보이게 만드는지에 대한 설명입니다.
웹 디자인과 관련하여 '히어로 이미지'는 무엇입니까?
웹 사이트 디자인 측면에서 히어로 이미지는 대형 웹 배너 이미지에 부여된 명칭입니다. 일반적으로 페이지 상단의 주요 위치에 배치되므로 사이트 방문자가 가장 먼저 보게 됩니다. 해당 사이트에서 가장 중요한 콘텐츠에 대한 요약이 포함되어야 합니다. 텍스트가 있는 정적 이미지이거나 움직이는 동적 이미지일 수도 있습니다.
홈페이지의 이 중요한 섹션은 사이트의 목표를 보여 주어야 합니다. 제품 판매, 사람들이 이벤트에 참여하도록 유도하거나 비전 선언문이 될 수 있습니다.
사이트의 목적에 따라 히어로 이미지에 들어 가는 콘텐츠가 결정됩니다. 베스트셀러 제품, 사이트 링크 또는 사이트에 대한 업데이트일 수 있습니다.
히어로 레이아웃은 고객(방문자)을 고객이 원하는 작업으로 직접 안내합니다. 그들이 취할 것으로 예상되는 조치는 분명해야 합니다. 단순함은 메시지를 완벽하고 명확하게 만드는 열쇠입니다. 따라서 이미지는 일반적으로 최소한의 텍스트로 고정되어 있습니다. 또한, 어떤 것이든 클릭 유도 문안(CTA) 버튼이 있어야 합니다.
히어로 헤더(Hero Header)와 히어로 이미지(Hero Images)가 한동안 인터넷을 통해 배포되며 일부 사이트에 절실히 필요한 면모를 부여했습니다. 최신 트렌드는 이를 더 효과적으로 만들기 위해 슬라이더로 바꾸는 것입니다. 잘 설정되어 있으면 컨텍스트와 명확성을 제공하고 방문자가 사이트의 목적과 수행해야 할 작업을 이해하는 데 도움이 됩니다.
히어로 슬라이더(Hero Slider)는 무엇입니까?
슬라이더는 웹 사이트에 표시되는 모든 슬라이드 쇼를 의미합니다. 한 가지 예는 종종 사이트 상단에 있는 회전하는 이미지가 있는 히어로 캐러셀입니다. 슬라이더는 다양한 방법으로 여러 유형의 사이트에 추가할 수 있습니다. 그러나 포트폴리오를 보여주는 비즈니스는 일반적으로 건축가, 메이크업 아티스트, 그래픽 디자이너 및 유사 회사와 같이 포트폴리오가 가장 유용하다고 생각합니다. 슬라이더는 방문자에게 다양한 옵션과 이를 넘길 수 있는 방법을 제공하는 완벽한 도구입니다.
이 설명을 통해 슬라이더를 인식할 수 있으며 이전에 경험한 적이 있을 것입니다. 여러분은 그것이 무엇인지 몰랐을 수도 있지만 제시된 이미지 배열을 즐겼을 것입니다.
메인 페이지에 눈길을 끄는 슬라이더를 추가하면 방문자의 관심을 빠르게 끌 수 있습니다. 이로 인해 사이트의 전환율이 크게 향상 될 수 있습니다. 그러나 이것이 슬라이더가 제공해야 하는 유일한 이점은 아닙니다.
히어로 슬라이더의 의도는 사이트 방문자를 환영하는 것입니다. 여러분이 원하는 것을 하도록 설득하는 이야기를 해야 합니다. 여기에 히어로 슬라이더의 중요성이 있습니다. 관점이 있어야 하고 의도적이어야 합니다.
많은 사람들이 사진만으로 히어로 슬라이더를 제작하는데, 괜찮지만 더 창의적인 선택이 있습니다. 예를 들어 GIF, 비디오, 아트 워크 또는 원하는 것을 추가할 수 있습니다. 창의적인 면을 빛나게 하세요.
히어로 슬라이더(Hero Slider)를 사용해야 하는 이유는 무엇입니까?
사이트의 첫인상은 몇 초 안에 만들어 집니다. 사람들은 여러분이 누구인지, 무엇인지, 그들이 좋아하는지 여부를 결정할 것입니다. 히어로 슬라이더는 여러분의 목적을 이해하고 그에 따라 행동하도록 올바른 방향으로 그들을 안내할 수 있습니다.
방문자가 여러분의 웹 사이트에 대해 의견을 제시하는 데 걸리는 시간은 0.05초 또는 50밀리 초입니다. 그들의 관심을 끌고 유지해야 하는 모든 시간입니다.
이것이 바로 웹 사이트가 홈 페이지에서 주인공 슬라이더를 사용하여 중요한 메시지를 전달하고 게스트를 흥미롭게 하는 이유입니다.
다음은 사람들이 '히어로 슬라이더(Hero Slieder)'를 더 자주 사용하는 여러 이유 중 일부입니다.
이미지 (Images)
매혹적인 사진은 사용자가 여러분이 제공해야 하는 것을 오래 머무르고 보도록 유도할 수 있으며 슬라이더는 여러 이미지를 표시할 수 있습니다. 사람들은 소셜 미디어에 익숙하기 때문에 이미지에 끌리는 경향이 있습니다. 사이트 방문자는 텍스트 벽보다 이미지를 멈추고 쳐다볼 가능성이 더 높습니다. 슬라이더를 사용하면 이미지를 사용하면서 하나 이상의 메시지를 전달할 수 있습니다.
손님을 사로 잡기 (Get Guest Hooked)
슬라이더는 사람들을 메시지와 사이트로 유인할 수 있습니다. 볼 이미지가 두 개 이상이고 사람들이 사이트에 더 오래 머무를 수 있기 때문입니다. 실수로 페이지를 방문한 경우에도 슬라이드를 보기 위해 그곳에 머물 수 있습니다.
행동을 요구하다 (Call to Action)
슬라이더는 게스트에게 하나 이상의 CTA(클릭 유도 문안)를 제공할 수 있으며 이는 하나 이상의 서비스 또는 제품을 제공하는 경우에 적합합니다. 스크롤없이 볼 수 있는 부분에 CTA를 두는 것이 사람들이 볼 수 있도록 하는 가장 좋은 방법입니다.
이해하기 쉬움 (Easy to Comprehend)
좋은 의사 소통은 사람들이 당신이 말하는 것을 알고 여러분의 메시지를 쉽게 해석할 수 있다는 것을 의미합니다. 때로는 단어가 메시지를 혼란스럽게 하는 반면, 히어로 슬라이더의 이미지는 이해하기 쉽습니다.
히어로 슬라이더(Hero Slider) 모범 사례
히어로 슬라이더를 올바르게 설정하는 방법을 아는 것이 중요합니다. 다음 모범 사례는 가능한 최선의 방법으로 메시지를 전달하는 데 도움이 됩니다.
창의력 발휘 (Get Creative)
사진을 사용하여 청중에게 이야기를 전하십시오. 그것이 회사 이야기이든, 제품 이야기이든, 다른 것이든 여러분에게 달려 있습니다. 캡션을 사용하여 요약할 수 있지만 핵심은 놀라운 사진입니다. 시청자의 관심을 끌 수 있는 특이한 것을 찾으세요.
단순함 (Simplicty)
지나치게 복잡한 형식이 메시지를 방해하지 않도록 하십시오. 탐색하기 어렵더라도 정말 좋아 보인다 해도 잘하지 못할 것입니다. 첫 번째 목표는 청중의 관심을 끄는 것입니다. 그것없다면 그들은 여러분의 사이트를 종료합니다.
인터렉티브 (Interactive)
슬라이더에 콘텐츠가 있으면 슬라이더가 작동하고 반응하는지 확인하십시오. 이미지는 선명하고 흐릿하지 않아야 하므로 고화질이어야 합니다. 모바일, 태블릿 및 데스크톱에서 어떤 형식으로든 잘 보이는지 확인하는 것이 좋습니다.
대담한 유형 (Bold Type)
히어로 슬라이더는 사람들의 관심을 끌 것이므로 메시지를 명확하게 하려면 이미지에 텍스트를 추가하십시오. 이렇게 하려면 방문자가 읽을 수 있도록 눈에 잘 띄는 색상과 굵은 서체를 사용해야 합니다.
배치 (Placement)
슬라이더를 배치한 후 버튼, 추가 텍스트 또는 기타 요소와 같은 다른 기능 요소를 배치할 위치를 결정하고 이러한 요소가 선택한 이미지의 중요한 부분을 덮지 않도록 해야 합니다.
최고의 히어로 슬라이더 템플릿
일러스트레이션이 포함된 슬라이더는 사이트에 큰 자산이 될 수 있으므로 확인해야 할 몇 가지 놀라운 예를 찾았습니다.
Slider Revolution WordPress Builder는 웹 사이트 또는 비즈니스의 판도를 바꿀 수 있습니다. 사용할 시각적 콘텐츠의 전체 툴킷이 있습니다.
동영상, 시차, 이미지 및 입자가 포함된 워드프레스 히어로 헤더가 포함되어 있습니다. 이들은 모두 개별 파일 또는 완전한 슬라이더로 다운로드할 수 있습니다. 아래 페이지에서 히어로 슬라이더 영감을 찾으십시오.
기본 히어로 컬렉션
건설 회사 웹 사이트 템플릿
스타크 에이전시
클래식 자동차 이전과 이후
마운틴 패럴랙스
히어로 슬라이더가 있는 웹 사이트 예제
아래 웹 사이트는 정말 멋진 슬라이더 디자인 영감을 보여줍니다.
Surfrider Foundation
Surfrider Foundation의 히어로 슬라이더는 홈페이지의 전면과 중앙에서 이점을 최대한 활용하는 데 사용됩니다. 이 사이트는 세계 최고의 자산 중 하나인 바다를 보호하는 데 열정적이라는 것이 분명합니다.
홈페이지로 이동하면 이미지와 텍스트가 캐러셀에서 회전합니다. 이것은 뉴스, 활동 및 재단의 사명 선언문에 대해 알려줍니다.
람보르기니의 히어로 슬라이더
다음은 제품 판매에 사용되는 히어로 슬라이더의 좋은 예입니다. Lamborghini 사이트는 고급 스포츠카의 이미지를 보여 주며, 이는 그들이 제공해야 하는 것을 시각적으로 보여 주고 방문자가 자신의 차에 대해 더 많이 알도록 유도합니다.
론리 플래닛 홈페이지 갤러리
사이트에서 사용하고 싶은 멋진 사진이 너무 많은 문제가 있을 수 있습니다. 이것이 바로 Lonely Planet이 히어로 슬라이더를 추가하기로 결정할 때 직면했을 가능성이 있는 문제입니다.
그들의 히어로 회전 목마는 분출하는 폭포, 눈 덮인 산, 푸른 바닷물을 보여 주어 새로운 목적지 옵션으로 여행자를 유혹합니다. 또한 더 많은 정보를 제공하기 위해 텍스트 미리보기가 포함됩니다.
히어로 슬라이더에 대한 생각 끝내기
웹 사이트에 사용하고 싶은 놀라운 이미지가 너무 많으면 히어로 슬라이더가 정답입니다. 히어로 헤더는 훌륭하지만 하나의 이미지만 포함할 수 있습니다.
히어로 이미지는 히어로 슬라이더에서 강화되고 향상됩니다. 원하는 만큼 이미지를 표시하고 원하는 경우 전환, 캡션 및 애니메이션을 추가 할 수 있습니다.
잘하면 방문자가 사이트를 더 많이 탐색하도록 유도할 수 있습니다.
웹 디자인의 히어로 슬라이더에 대한 이 글이 웹 마스터, 웹 디자이너에게 많은 도움이 되기를 바랍니다.
원문 링크. The hero slider in web design and how it can look amazing
※ 본 기사는 '디자인로그(designlog.org)' 독자와 페이스북 '디자인로그' 페이지 팬들이 디자인 정보 공유 및 인사이트를 넓히는 데 도움을 드리기 위해 해외 디자인 트렌드 매거진과 블로그 기사를 선별, 한국어로 번역하여 제공됩니다.
콘텐츠의 모든 저작권은 원문 링크의 해당 매거진 및 블로그에 있습니다.
댓글 영역