영웅 이미지는 웹 제작자가 웹사이트 방문자를 매력적인 형식으로 인사하기 위해 자주 사용하는 것입니다.
"라고 생각해본 적이 있다면 영웅 이미지는 무엇입니까? ", 당신은 올바른 위치에 있습니다. 이 기사에서는 주제와 강력한 시각 효과로 아름다운 영웅 이미지를 만드는 방법을 살펴보겠습니다.
히어로 이미지는 웹 제작자가 웹 페이지 상단의 대형 콘텐츠를 설명하는 데 사용하는 용어입니다.
영웅 이미지의 역할은 방문자가 회사를 만나거나 조직. 웹 저작 툴킷의 풍부한 영웅 이미지 유형은 웹 사이트에 영웅 이미지를 포함해야 하는 많은 이유를 제공합니다.
이 작업의 주요 이점과 그 이유를 알아보겠습니다.
히어로 이미지란?
"좋은 첫인상"의 미덕을 수용하는 영웅 이미지는 일반적으로 다음 특성 중 하나 이상을 가집니다.
- 고품질 이미지
- 매혹적인 비디오
- 이미지 슬라이더 또는 멀티미디어 회전 목마
- 애니메이션 또는 정적 일러스트레이션
- 시각적 콘텐츠 옆 또는 앞의 헤더 및 설명
스타일링 측면에서 영웅 이미지에 적용되는 일반적인 디자인 세부 정보는 다음과 같습니다.
- 배경 이미지 또는 배경 오버레이가 있는 동영상
- 고정 또는 고정 위치
- 포인팅은 투명도 또는 오버레이의 변경에 영향을 줍니다.
- 이미지를 위의 헤더 또는 후속 콘텐츠와 구별하는 대비 요소
웹 디자인에서 영웅 이미지의 참신함은 한편으로는 웹 페이지에서 매우 구체적이고 정의된 공간으로 작업한다는 것입니다. 반면에 페이지 콘텐츠의 이 부분을 디자인할 때 사용할 스타일, 효과 및 기술의 선택은 절대적으로 무궁무진합니다.
왜 영웅 이미지를 사용해야 합니까?
영웅 이미지의 디자인과 기능이 높은 수준이면 자동으로 사용자 신뢰와 신뢰를 얻을 수 있습니다. 귀하의 영웅 이미지와 주변 영웅 콘텐츠는 종종 귀하의 고유한 판매 포인트를 전달할 수 있는 첫 번째 기회를 나타냅니다. 조직 전환을 위한 주요 사용자 연락 지점입니다.
특정 사용자 행동을 유발하려는 경우 방문자에게 강한 첫인상을 주는 최고 수준의 강력한 영웅 이미지가 가장 좋은 시작 방법입니다.
강렬한 첫인상을 남길 수 있습니다
첫인상은 삶의 많은 영역에서 중요하지만 특히 사용자가 웹사이트 미학과 관련되는 방식과 관련하여 중요합니다.
HCI(Human-Machine Interaction) 및 시각화 전문가의 결과 Google 연구 웹사이트의 성공에 대한 영웅 이미지의 영향을 증명합니다.
이 연구, " 웹사이트 첫인상에서 시각적 복잡성과 원형의 역할 : 미적 판단을 이해하는 작업 ”, 시각적 복잡성과 원형이 웹사이트 디자인과 사용자의 첫인상에 어떤 영향을 미치는지 연구합니다.
저자는 웹사이트의 실제 스크린샷 119개를 연구 참가자에게 보여주었고 시각적 복잡성과 원형이 전시회의 처음 50개 이미지에서 사용자의 미적 인식에 영향을 미치고 때로는 17ms 이내에도 영향을 미친다는 것을 발견했습니다.
웹 제작자로서 우리의 결론은 매우 간단합니다. 우리가 선택하는 영웅 이미지와 페이지에 표시하는 방식은 사용자의 감정과 행동에 큰 영향을 미칩니다.
스크롤 없이 볼 수 있는 부분에서 콘텐츠를 최대한 활용할 수 있습니다.
웹 페이지의 "스크롤 없이 볼 수 있는 부분" 섹션은 다음과 같이 간단한 용어로 정의할 수 있습니다. 화면을 채우는 콘텐츠 / 페이지가 로드된 후 웹 브라우저 창의 하단 테두리 위에 표시됨. 콘텐츠를 보기 위해 스크롤해야 하는 경우 콘텐츠가 "스크롤 없이 볼 수 있는 부분"에 있음을 의미합니다.
"Above the fold"의 개념은 디지털 미디어 시대보다 훨씬 이전에 인쇄 디자인과 출판에서 시작되었습니다. 우리는 모두 첫 페이지의 상단 절반에 있는 무언가를 즉시 알아차리는 것이 어떤 것인지 알고 있으며, 첫 페이지의 내용이 종종 우리가 구매 여부를 결정하는 요인이라고 말하는 것이 안전합니다. 가판대에서.
이것이 바로 스크롤 없이 볼 수 있는 부분의 콘텐츠가 웹사이트의 성공을 가로막는 주요 요인이 될 수 있는 이유입니다.
우리는 무엇을 의미합니까?
웹사이트 방문자가 스크롤 없이 볼 수 있는 부분에 있는 귀하의 콘텐츠와 이미지에 혼란을 느끼면 빠르게 귀하의 웹사이트를 떠날 것입니다. 당신의 영웅 이미지와 그의 주변 환경이 명확하고 매력적이며 당신의 가치 제안을 잘 대표한다면 그는 계속 남아 있을 가능성이 더 큽니다.
궁극적으로 영웅 섹션의 이미지와 콘텐츠에 더 많이 투자할수록 사용자가 빠르게 이탈할 가능성이 낮아집니다.
반응형 디자인을 잊지 마세요
화면이 구부러지는 위치는 장치의 화면 크기에 따라 달라질 수 있습니다. 이는 반응형 디자인에서 중요한 고려 사항입니다. 위에서 접는 콘텐츠는 여러 장치 크기에 적용할 수 있는 방식으로 사용자 지정 및 구성되어야 하기 때문입니다.
웹 디자이너와 개발자가 자주 사용하는 장치별 중단점 이 응답성을 보장합니다. 이를 통해 관련 화면 크기에 대한 웹사이트 디자인의 적응성을 완벽하게 제어할 수 있고 손상된 모양이나 영웅 이미지의 영향을 피할 수 있습니다.
정보 과부하 없이 가치 제안을 진술하십시오.
"라는 개념에 대해 잘 알고 계실 것입니다.정보 과부하웹사이트 디자인과 사용자 경험 : 우리의 브랜드와 비즈니스 가치를 표현할 때 너무 많은 콘텐츠, 특히 서면 콘텐츠를 사용하는 것을 피하고 싶습니다.
그런 의미에서 이미지, 일러스트레이션, 영상의 사용은 1단어의 가치가 있습니다. 효과적인 브랜딩 이미지를 미세 조정하면 전체 스토리를 하나의 시각 매체로 캡처할 수 있습니다. 스토리와 브랜딩 제안을 말로 표현하는 대신 간단하고 사용자 친화적인 방식으로 사용자의 인지 부하를 줄일 수 있습니다.
위의 스크린샷은 밀브룩 건설, 퍼스에 기반을 둔 "고급 마감재와 세심한 주의를 갖춘 주거용 건축"을 전문으로 하는 건설 회사입니다. Elementor 웹 사이트의 경우 홈페이지의 영웅 이미지는 "볼 수 있는 부분" 인터페이스를 완벽하게 사용합니다. 행복하고 현대적인 가정과 야외 수영장의 시선을 사로잡는 선명한 사진은 긍정적이고 편안한 분위기를 자아냅니다.
한 단계 더 나아가 전체 높이 배경 이미지의 스타일 선택과 '담요' 크기는 고급 주거용 부동산을 만드는 회사의 견고한 재주를 나타냅니다. 가치 제안은 수영장 물처럼 명확하며 사용자는 필요한 모든 정보를 편안하게 흡수합니다.
영웅 이미지는 리드를 전환하는 데 도움이 될 수 있습니다.
매력적이고 눈에 띄는 터치포인트는 전환 재생산 사용자 흐름의 기본 요소입니다. 이것이 바로 영웅 섹션의 클릭 유도 문안과 영웅 이미지 자체 간의 관계가 웹 사이트 구축 목표를 달성하거나 깨뜨릴 수 있는 이유입니다.
CTA 텍스트에 " 지금 등록 "," 자세히보기 "," 연락처 » 등, 영웅 이미지는 가시성, 메시지, 색 구성표, 모양 등 모든 면에서 투명하게 조정되어야 합니다.
잠재 고객과의 신뢰할 수 있고 효과적인 대화는 편안하고 자연스러운 분위기를 기반으로 합니다. 시각적으로 즐거운 이미지는 이를 달성하는 가장 좋은 방법입니다.
이것은 우리가 만든 Elementor 웹 사이트에서 본 것과 정확히 같습니다. STL 캐리커처, 이벤트 엔터테인먼트 서비스를 제공하는 만화 같은 아티스트 팀. 애니메이션 제목(영웅 텍스트)은 행복한 고객을 영웅 이미지로 묘사하여 만화가가 각 사람에게 제공하는 것을 보여줍니다.
그래서 소매를 걷어붙이고 실용화를 시작했다면, 어떤 유형의 영웅 이미지를 사용할지 결정하는 과정은 무엇입니까?
네 가지 유형의 영웅 이미지와 웹사이트에 가장 적합한 이미지를 평가하는 방법을 살펴보겠습니다.
# 1 제품 영웅 이미지
상품 히어로 이미지는 큰 하이 이미지입니다 정의 브랜드 제품의. 이러한 이미지는 제품의 가치 제안을 시각화할 수 있는 한 정적 또는 동작/동작으로 표시될 수 있습니다.
웹 디자이너가 제품 영웅 이미지를 선보이고 개인화하는 일반적인 방법은 다음과 같습니다.
- 위 회사 웹사이트에서 볼 수 있는 개별 제품의 상세/스냅샷 예 호주 Avo 연인 구독.
- 대시보드와 같은 디지털 제품 인터페이스의 스크린샷.
제품 영웅 이미지는 일반적으로 다음 웹 사이트에서 찾을 수 있습니다.e-커머스 (그러나 독점적이지는 않음). 잠재적인 쇼핑객은 실제 제품의 예를 보고 자신의 쇼핑 요구에 대한 매장의 적합성에 대한 정보에 입각한 의사 결정을 지원하기를 기대합니다.
Avo 애호가는 Elementor를 사용하여 전자 상거래 웹 사이트를 만들었습니다. 고객은 이 웹 사이트를 사용하여 집 앞까지 배달되는 신선한 아보카도를 매주 구독할 수 있습니다.
Avo lover의 고객 기반은 협소하게 정의된 관심 영역의 틈새 시장이므로 제품 영웅 이미지를 선택하는 것이 완벽합니다. 잠재적인 구독자는 아보카도 애호가입니다. 제품의 복잡한 사진을 가까이서 보는 것이 바로 그들이 보고자 하는 것입니다.
모범 사례:
- 배경 이미지의 품질에 투자
배경 이미지가 사진, 비디오, 일러스트레이션 등 무엇이든 이미지 파일은 가능한 한 밝고 선명한 해상도를 유지해야 합니다.
- 대비 수준에 주의
영웅 섹션 이미지(또는 모든 종류의 구성 요소) 앞에 텍스트를 추가하는 경우 웹 사이트 요소 간의 대비가 강하고 쉽게 보이는지 확인하십시오. 여기에서 배경 오버레이와 필터 효과가 매우 유용할 수 있습니다.
# 2 클라이언트 영웅의 이미지
온라인 비즈니스에서 사용하는 다음 유형의 영웅 이미지는 고객이 제품을 사용하는 모습을 보여줌으로써 부가 가치를 보여주는 대안적인 접근 방식을 취합니다. 이 관점은 방문자와 공감하는 전략적 방법이며, 방문자의 문제점을 이해하고 필요를 충족할 수 있음을 간결하게 보여줍니다.
위 영상은 Elementor 사이트에서 가져온 것입니다. 알렉산더 피셔, 다양한 건강 및 피트니스 관련 서비스를 제공하는 Stuggart 기반 개인 트레이너.
Alexander의 고객 영웅 이미지는 건강하고 건강한 라이프 스타일을 즐기는 만족스러운 고객 이상의 것을 보여줍니다. 영웅 이미지는 고객의 유대감과 사랑하는 사람과의 연결을 보여주는 비디오를 제공하여 한 단계 더 나아갑니다.
모범 사례:
- 사용 사례 및 고객 경험 공유
가장 지배적인 사용 사례를 보여줌으로써 제품을 차별화하십시오. 귀하의 비즈니스 목표와 가치를 전달하는 이미지는 방문자가 귀하의 고유한 서비스로부터 어떤 혜택을 얻을 수 있는지 보여줍니다.
- 타겟 고객과 관련성
이미지에 등장할 인물의 유형을 선택할 때 대상 고객을 고려해야 합니다. 해당 분야에 대한 이해와 고객을 기쁘게 할 수 있는 능력을 나타내는 이미지를 선택하십시오.
# 3 창립 영웅의 이미지
창립 영웅 이미지는 웹 사이트 방문자를 맞이하기 위해 영웅 섹션에 배치된 비즈니스 소유자의 설립자의 큰 이미지입니다.
창립 영웅 이미지는 프리랜서, 심리학자와 같은 비즈니스 소유자, 메이크업 아티스트 또는 음악가를 위한 포트폴리오 웹사이트에서 자주 사용됩니다. 엘리멘터 웹사이트 위의 재스민 케인.
건국 영웅 이미지의 가장 큰 미덕은 이름에 얼굴을 얹는 것입니다. 웹사이트 방문자를 서비스 제공자와 연결하여 두 사람 사이에 즐거운 역학 관계를 만듭니다.
창립 영웅 이미지의 이미지 선택은 신중하게 처리해야 합니다. 선택할 수 있는 다양한 옵션이 있어 다음과 같이 요약됩니다.
브랜드의 메시지를 가장 강력하게 전달할 수 있는 것은 무엇입니까?
카메라를 똑바로 바라보며 웃고 있는 창업자의 사진인가, 아니면 다른 방향을 바라보고 있는 것인가?
아니면 열심히 일하는 사장님의 솔직한 사진이 더 어울릴까요?
모범 사례:
- 크기와 치수에주의하십시오
방문자에게 필요한 정확한 세부 정보를 보여주는 명확하고 크기가 적절한 이미지(또는 비디오)를 사용하십시오. 필요한 경우 이미지를 자르고 덜 중요한 콘텐츠를 제거하여 이미지의 더 큰 영역에 집중할 수 있습니다.
- 이미지가 전달해야 할 내용에 집중
배경의 역할은 그 반대가 아니라 앞에 있는 사람에게 초점을 맞추는 것이어야 합니다. 가장 임팩트 있는 창업주 이미지는 미소 짓는 사장님의 모습으로 고객을 행복하게 하기 위한 열정을 함축하고 있습니다.
# 4 문맥이 아닌 영웅 이미지
비맥락적 영웅 이미지는 이름에서 알 수 있듯이 제품 또는 비즈니스 소유자와 '관련이 없는' 것처럼 보이는 것을 표시하는 시퀀스입니다. 비맥락적 영웅 이미지의 목적은 시각적 연상 또는 잠재 의식 메시지를 통해 방문자에게 인상을 주는 것입니다. 비문맥적 이미지를 보는 것은 사용자에게 제품이나 브랜드가 무엇인지를 간접적으로 보여줍니다.
이 기술은 예를 들어 디지털 마케팅 회사에서 구축한 Elementor 웹사이트의 위 예에서 사용됩니다. AP기술, 오클라호마에 기반을 두고 있습니다. 이 회사의 웹사이트는 오클라호마 시티의 고층 빌딩의 독특한 각도를 보여주는 넓고 선명한 배경 이미지를 사용합니다.
이 사진은 웹사이트의 주요 텍스트에 명시된 바와 같이 회사의 가치 제안을 나타냅니다. 비즈니스를 구축하고 도시에서 가장 높은 사무실 타워만큼 높이 성장하는 것을 지켜보십시오.
인간의 눈은 하늘을 지배하는 물리적 구조를 보자마자 이러한 마케팅 전문가가 비즈니스를 정상으로 끌어올리기 위해 노력하고 있음을 이해합니다.
모범 사례:
- 방문자가 이미지가 왜 관련이 있는지 이해하도록 하세요.
제품 자체를 직접 시각적으로 표시하지는 않지만 제품의 가치를 비맥락적 영웅 이미지와 연결하는 것이 여전히 식별하기 쉬운지 확인하세요. 사용자는 관련성에 대해 생각하는 데 시간을 할애할 필요가 없습니다.
- 영웅 이미지와 영웅 텍스트를 명확하게 연결하십시오.
이미지와 함께 배치하는 영웅 텍스트는 시각적 콘텐츠와 직접 관련되어야 합니다. 텍스트를 여러 번 반복하고 문구를 선택해야 하는 경우에도 필수입니다.
- 응집력 있는 디자인 계획 만들기
버튼 텍스트 및 배경, 헤더 또는 설명에 대해 선택한 색상은 영웅 이미지 또는 아트워크와 조화를 이루어야 합니다. 이는 웹사이트에서 클릭 가능한 악센트에도 적용됩니다.
탐색 메뉴의 요소, 로고 등 ...
일관된 시각적 언어가 웹사이트의 명성, 브랜드 인지도 및 전문적 신뢰성에 얼마나 중요한지 우리는 모두 알고 있습니다. 이것은 특히 영웅 이미지가 웹사이트 디자인과 일치하는지 확인하는 데 디자인 스타일 가이드가 정말 도움이 될 수 있는 곳입니다.
영웅 이미지를 테스트하는 방법: 우리가 좋아하는 방법
영웅 이미지에 대한 여러 옵션을 실험하기 시작하면 어떤 옵션이 가장 참여도가 높은지 즉시 평가하고 가장 효과적인 디자인에 대한 통찰력을 얻을 수 있으며 궁극적으로 그 옵션을 고수할 수 있습니다.
다음은 설정하기 쉽고 최고의 영웅 이미지를 사용하고 있는지 확인하기 위해 풍부한 지식을 제공하는 몇 가지 필수 테스트 방법입니다.
A / B 영웅 이미지 테스트
A/B 테스트는 디자이너가 영웅 섹션에 대해 두 개 이상의 옵션을 생성하도록 요구합니다(두 가지 버전의 제목과 복사본, 영웅 이미지 자체, 레이아웃 섹션, 글꼴 크기 또는 기타 생각할 수 있는 모든 것) - 그것은 전적으로 당신에게 달려 있습니다.
사용자가 영웅 이미지 위로 마우스를 가져갈 때 혼합 모드를 사용하기로 결정했지만 어떤 모드가 사용자 경험을 가장 향상시킬지 모릅니다.
수행 A/B 테스트 두 가지 모드 옵션(결국 13가지 혼합 모드 옵션이 있음) 사이에서 두 가지 이상의 모드를 시도하여 가장 많은 호버, 클릭 및 궁극적으로 더 많은 참여를 얻는 모드를 확인할 수 있습니다.
영웅 섹션을 테스트하는 A/B에서 가장 일반적이고 중요한 단계 중 하나는 최소 두 개의 CTA 버튼 옵션도 테스트하여 가장 많은 전환을 얻는 버튼을 식별하는 것입니다.
특히 CTA 버튼의 색상을 테스트하는 것은 어떤 버튼 색상이 사용자를 가장 많이 끌어들이고 참여를 유도하는지 이해할 수 있는 유용한 경험입니다. 버튼 색상 A/B 테스트는 빠르고 쉽게 수행할 수 있으며 추가 디자인 리소스가 거의 필요하지 않기 때문에 웹 디자이너들 사이에서 매우 인기가 있습니다.
히트맵 도구를 사용하여 사용자 행동 발견
히트맵 도구는 사용자가 웹 페이지를 클릭하는 위치를 식별하고 분석합니다. 이러한 도구를 사용하면 웹사이트 및 방문 페이지 소유자가 사용자가 콘텐츠를 적극적으로 탐색하는 방법을 정확히 볼 수 있습니다. 이것은 도구가 사용자가 링크, 버튼, 옵션 및 CTA와 같은 주요 요소(및 방법)와 상호 작용하는지 여부를 식별하면 수행됩니다.
다음은 웹사이트 소유자가 히트맵 도구를 사용하여 얻을 수 있는 몇 가지 정보입니다.
- 클릭할 수 없는 항목은 사용자의 주의를 산만하게 합니다.
- 버튼 크기가 너무 크거나 너무 작습니다.
- 버튼의 색상이 보이지 않습니다.
웹사이트의 주인공이 되세요
웹사이트 트렌드는 웹 디자인 가능성에 새로운 기능을 추가하면서 끊임없이 진화하고 있습니다. 영웅 섹션을 디자인 고려 사항의 최전선에 두는 것이 항상 중요합니다. 즉, 웹 사이트를 군중에게 보여줄 때 항상 잠재력을 발휘할 수 있도록 하십시오.
지금 Elementor Pro를 받으세요!
결론
여기 ! 영웅 이미지를 만드는 방법을 보여주는 이 기사는 여기까지입니다. 가는 방법이 걱정되시면 f에서 알려주십시오. commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
