강력한 포트폴리오 웹 사이트 홈페이지 영웅 맵 생성 : 6 개의 주요 요소
웹 사이트 방문자의 첫 인상은 종종 순간적으로 형성됩니다. 홈페이지 영웅지도가 대부분의 방문객들이 가장 먼저 접촉하는 것임을 고려하면, 영웅지도를 볼 때 어떤 인상을 남기고 싶습니까?
이러한 초기 만남을 최대한 활용하려면 영웅지도를 신중하게 설계하고 실행해야합니다. 그것은 당신이 어떤 유형의 창조주를 전달하고, 당신의 재능의 미리보기를 제공하며, 방문객들에게 더 많은 것을 탐구 할 이유를 제공해야합니다.
포트폴리오 웹 사이트를위한 완벽한 영웅지도를 만들려면 6 가지 요소가 있습니다. 이 기사에서는 이러한 요소가 무엇인지 탐구하고 Betheme (264,000 개가 넘는 판매 및 4.83 스타 등급을 가진 세계에서 가장 인기 있고 가장 많이 평가 된 WordPress 테마 중 하나) 및 기타 브랜드의 다양한 방법을 보여줄 것입니다. .
디자인 포트폴리오 웹 사이트를위한 완벽한 영웅 사진
일반적으로, 어떤 유형의 웹 사이트를 구축하든 각 영웅 부분을 형성하는 6 가지 요소가 있습니다. 이 주요 구성 요소를 사용하여 영웅 차트를 만들 때 다음을 고려하십시오.
1
영웅 이미지에서 선택한 이미지는 작업 유형과 직접 관련이 있어야합니다.
예를 들어, Lauren Waldorf Interiors는 부티크 인테리어 디자인 스튜디오입니다. 따라서 Heroes Section에는 완성 된 프로젝트의 슬라이드 갤러리가 포함되어 있습니다.
사진 작가, 비디오 작가, 웹 디자이너 및 기타 비주얼 아티스트의 경우 영웅 사진에 보여줄 그래픽이 많이있을 수 있습니다. 다른 유형의 미디어에서 일하는 아티스트의 경우 직관적으로 작품을 묘사하기가 어려울 수 있습니다.
이 경우 Bedj 2 조립식 웹 사이트 영웅 이미지에서 볼 수 있듯이 얼굴을 영웅 부분의 주요 이미지로 사용하기로 결정할 수 있습니다.
DJ의 얼굴은 방문자에게 다양한 색상 및 음악 관련 그래픽보다 더 흥미로운 시각적 콘텐츠를 제공합니다. 또한 작품과 아티스트 사이의 직접적인 연결을 만듭니다.
영웅 사진을 디자인 할 때 다음 사항을 고려하십시오.
이 섹션의 주요 주제는 무엇입니까?
이미지가 전경에 속한 적이 있습니까? 아니면 배경에 통합되어 있습니까?
이미지는 그대로 유지됩니까, 아니면 더 예술적으로 보이게하는 방법이 있습니까?
또한 이미지가 필요하지 않습니까? 예를 들어, 글꼴 디자이너 또는 카피라이터 인 경우 이미지를 건너 뛰고 텍스트를 말하기로 결정할 수 있습니다.
2를 사용하여 작업에 대한 자세한 내용을 제공하십시오 영웅 부분의 배경을 다루는 방법에는 여러 가지가 있습니다.
경우에 따라 작업이 배경을 차지할 수 있습니다. 예를 들어, 비디오 작가는 비디오의 슬라이드 쇼를 백그라운드에 배치 할 수 있습니다. 이를 통해 웹 사이트가 활기차게 느껴질뿐만 아니라 방문자가 작업을 신속하게 미리 볼 수 있습니다.
다른 경우에는 Beinterior 6 조립식 웹 사이트 의이 예와 같이 영웅 섹션에서 작품을 조금 공개 할 수 있습니다.
이미지 갤러리는이 섹션의 너비의 약 1/4을 차지합니다. 디자이너는 화려한 배경으로 작품을 구성 할 수 있었지만 질감 사진을 추가하기로 결정했습니다. 이 그림은 배경에 편안한 색상을 제공 할뿐만 아니라 인테리어 디자이너의 작업에 창의적인 방식으로 배경을 추가합니다.
당신을위한 또 다른 옵션 중 하나는 Mindgrub과 마찬가지로 백그라운드에서 단단하거나 그라디언트 색상 (및 일러스트레이션)을 사용하는 것입니다.
이것은 디지털 크리에이티브에 가장 적합한 선택 일 수 있습니다. 고객이나 개발 한 UI 스위트를 위해 구축 한 웹 사이트의 스크린 샷을 보여줄 수 있지만이 공간을 사용하여 자신만의 디지털 걸작을 만들 수 있습니다. 고객을 위해 생성 된 작품을 다른 섹션이나 페이지로 저장할 수 있습니다.
3.
영웅 섹션에 나타나는 텍스트를 쓰지 않더라도 미학적 선택은 텍스트 자체만큼 잠재적 인 고객에게 많은 정보를 전달할 수 있습니다.
영웅 메시지에 사운드를 추가하는 여러 가지 방법이 있습니다. 첫 번째는 사용중인 글꼴의 유형입니다. 예를 들어, Bedetailing 4 조립식 웹 사이트는 Italiana라는 Google 글꼴을 사용합니다.
이 자동차 뷰티 컴퍼니는 클래식과 복고풍 자동차에 대한 사랑을 직접 표현합니다. 문구, 자동차 이미지 및 우아한 서예 스타일 글꼴은 모두 이것을 우리에게 전달합니다.
고려해야 할 또 다른 것은 문장 스타일이 독자의 마음에 메시지를 듣는 방식을 어떻게 바꾸는 지입니다. 예를 들어, Get Em Tiger는 영웅 이미지 텍스트가 독자의 마음 속에서 듣는 방식을 바꾸기 위해 많은 일을합니다.
먼저, 메인 제목은 모두 대문자입니다. 이 스타일의 텍스트는 종종 시끄럽고 대담한 것으로 해석됩니다.
둘째, "돋보이는"이라는 단어는 주황색으로 강조 표시됩니다. 이것은 일반 텍스트로 강조하는 데 일반적으로 사용되는 이탤릭체 또는 굵게 대체하기위한 것입니다.
또한 자막은 문장 형식으로 작성됩니다. 방문객들이 이것을 읽을 때, 그것은 마음에 더 친근하고 편안한 분위기를 느낄 것입니다.
4 포트폴리오 웹 사이트의 영웅 이미지를 만들 준비가되면 브랜드 색상을 결정했을 수 있습니다.
일반적으로 브랜드 팔레트를 사용하여 버튼을 스타일링하고 웹 사이트의 주요 영역에 강조 할 수 있습니다. 그러나 G Sharp Design과 같은 영웅 부품을 만들기 위해 많은 것을 추출하기로 결정할 수 있습니다.
이 영웅 섹션의 팔레트는 비교적 간단합니다. 그러나 디자인을 지배하는 밝은 빨간색과 노란색은 디자인을 멀리하는 것을 불가능하게 만듭니다.
이 컬러 스펙터클은이 기관에 완벽하지만 다른 유형의 창조적 인 사람들에게는 적합하지 않을 수 있습니다. 예를 들어, Bephoto 2와 같은 사진 조립식 웹 사이트는 어두운 테마를 사용합니다.
영웅 사진 중앙에 사진 슬라이더가 있으며 각 후속 사진에는 밝은 색상이 표시됩니다. 사이트의 나머지 부분은 부드러운 짙은 회색과 아이보리 흰색 텍스트로 스타일링되므로 사진은 즉시 사람들의 관심을 끌 것입니다.
그래서 자신의 색상 팔레트를 결정할 때 다음 질문을 스스로에게 물어보십시오.
몇 가지 색상이 필요합니까?
브랜드 팔레트에서 어떤 색상을 사용 하시겠습니까?
다른 색상을 소개 하시겠습니까?
감정, 자극 행동 등에 각각의 컬러가 어떤 역할을할까요?
색상이 효과적이기 위해 포괄적 일 필요는 없습니다. 그것은 모두이 섹션에서 당신을 위해 무엇을 해야하는지에 달려 있습니다.
5
애니메이션이 없으면 영웅 사진은 정적 광고판에 지나지 않습니다.
이제 정적 광고판 광고에는 아무런 문제가 없습니다. 200 평방 피트를 초과하고 지상에서 10 피트 이상이면됩니다. 그러나 광고판이 현실 세계에서 가지고있는 웅장한 존재가 없다면 웹 사이트의 정적 디자인은 생명이없고 영감을받지 않은 것처럼 보일 수 있습니다.
오늘날 우리가 본 다른 요소들과 마찬가지로, 당신의 영웅 차트 디자인에 움직임과 상호 작용을 추가하는 여러 가지 방법이 있습니다.
예를 들어 Awesome Inc는 애니메이션 및 디자인 스튜디오입니다. 사이트에 들어간 후 강력한 애니메이션을 볼 수 없다면 이상 할 것입니다.
-
반면에, 당신이 애니메이션 작업을하지 않는 창조적 인 사람이라면,이 수준까지 할 이유가 없습니다. 그러나 그렇다고 영웅 차트에 움직임이 없어야한다는 의미는 아닙니다.
예를 들어 Bemodel 3 조립식 웹 사이트에는 동적 영웅 다이어그램 디자인이 있습니다.
-
애니메이션이있는 것은 사진 슬라이더만이 아닙니다. 사진이 변경됨에 따라 슬라이더의 팔레트가 동시에 변경됩니다. - 이것이 당신에게 많은 행동이있는 것처럼 보이더라도. 그렇다면 애니메이션을 사용하여 영웅 그래프를 더 매력적으로 느끼게하는 더 미묘한 방법이 있습니다. 버튼에 호버 변환을 추가하거나 섹션에 전환 애니메이션을 추가하는 것과 같은 더 미묘합니다.
6
마지막으로 방문자의 다음 논리적 조치가 무엇인지 파악해야합니다.
한 가지 옵션은 페이지 아래로 계속 스크롤하도록하는 것입니다. 그렇다면 Call to Action 버튼을 포함시키지 않을 수도 있습니다. 대부분의 방문객은 자연스럽게 필요한 모든 것을 본 후 스크롤을 시작합니다.
또 다른 옵션은 웹 사이트의 다른 페이지를 방문하도록 초대하는 것입니다. 그렇다면 어떤 페이지가되어야합니까? 포트폴리오 웹 사이트에서 방문자가 포트폴리오 또는 서비스 페이지를 방문하기를 원할 수 있습니다.
예를 들어, Bephotography 2 조립식 웹 사이트는 잠재 고객을 포트폴리오 페이지로 안내합니다.
또 다른 옵션은 방문객들이 다른 곳으로 갈 수있는 옵션을 제공하기 전에 영웅지도와 상호 작용하도록 장려하는 것입니다. 이는 Hero Map이 사용자와 상호 작용할 수있는 작품의 슬라이드 쇼를 제공하는 경우 매우 유용합니다. 이것이 거친 형제가하는 일입니다 :
방문자의 커서는 슬라이더의 어느 부분을 가져 가면 외관을 변경합니다. 화면의 왼쪽 또는 오른쪽에서 파란색 화살표가 탐색 할 작업이 더 많다는 것을 알리는 것처럼 보입니다. 화면 중앙에는 "보기 항목"이라는 단어가 나타납니다. 클릭하면 방문자가 프로젝트의 사례 연구 페이지로 이동합니다.
창조적 인 작품을 반영하는 영웅적인 그림을 디자인하십시오
영웅 차트의 디자인은 포트폴리오 웹 사이트에서 특히 중요합니다. 방문자가 귀하의 웹 사이트에서 찾을 수있는 것뿐만 아니라 창의적인 사람으로서의 재능도 반영해야하기 때문입니다. 따라서, 당신은 당신이 만든 영웅지도가 당신을위한 기초를 올바르게 놓을 수 있는지 확인해야합니다.
Betheme과 같은 WordPress 테마를 사용하는 장점은 101 개의 사전 제작 된 포트폴리오 사이트와 함께 제공된다는 것입니다. 각 사이트에는 수제 영웅 다이어그램 디자인이 제공되므로 위에서 논의한 6 가지 주요 구성 요소를 쉽게 업데이트 할 수 있습니다.
(FAQ 섹션은 여기에 추가 할 수 있고, 내용은 원래 FAQ 섹션과 일치하지만 언어 표현은 중국어 습관에 따라 더 세련되거나 더 많은 것일 수 있습니다.)
.
위의 6 가지 요소에 초점을 맞추고 이미지, 배경, 글꼴, 색상, 상호 작용 및 콜 유도 액션을 사용하여 유능하게 사용하여 완벽한 영웅 이미지를 만들어 포트폴리오 웹 사이트에서 더 많은 잠재 고객을 끌어 들이고 더 많은 잠재 고객을 유치 할 수 있습니다.
위 내용은 포트폴리오 사이트에 완벽한 영웅 이미지를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!