시각적 컨텐츠 방향 당신이 알아야 할 것

그만큼 콘텐츠의 시각적 방향 덜 널리 논의하지만, 높은 - 변환 웹 디자인의 중요한 측면입니다. 모든 방문자는 첫 페이지로드시 새로운 사이트를 "흡수"합니다. 의식적으로하든 그렇지 않든간에.

미학은 중요한 역할을하지만, 전반적인 디자인 느낌. 이 느낌은 공백, 타이포그래피, 대칭에 의해 영향을받을 수 있지만, 대부분은 관계 페이지 요소 간.

디자이너가 방문자를 원한다. 페이지에 머물러 라. 과 스크롤을 계속하다 그들의 관심을 끌고 사이트에 관심을 가지기. 디자인 원칙은 항상 집중해야합니다. 양식 앞에 기능을. 이는 디자인이 내용을 보완하다, 뒷모습으로 밀어 넣지 마라..

이 글에서는 어떻게 할 수 있는지에 대한 몇 가지 팁을 보여 드리고자합니다. 레이아웃 및 시각적 콘텐츠 흐름 개선 귀하의 사이트에.

작곡 중심

웹 사이트의 모든 부분이 빌드 됨 전체 레이아웃에. 이 전반적인 레이아웃은 Gestalt 이론의 규칙을 따르는 구성을 만듭니다. 전체가 항상 부품의 합보다 큽니다..

한 페이지의 개별 영역이 전체를 형성하다. 디자인 요소는 중력 끌기 내용에; 페이지의 모든 내용은 방문자가 자연스럽게 페이지 아래쪽에 도달 할 때까지 방문자를 안내합니다..

이것이 콘텐츠의 여러 부분 (시각적 요소, 텍스트, 버튼 등) 간의 관계가 설계에 중요한 요소가되는 이유입니다.

목표는 있어야합니다. 격려하는 사람들 자신의 성향에서 사이트를 탐색합니다. 말한 것보다 쉽지만, 많은 것을 배울 수 있습니다. 실제 사례를 연구하다..

Monkop의 홈 페이지는 다음과 같은 시각적 계층 구조의 훌륭한 예입니다. 텍스트와 영상 모두. 요소 사이에는 많은 공간이 사용되고 타이포그래피는 브랜드화 된 벡터 일러스트레이션을 보완합니다..

스크롤을하면 알 수 있습니다. 직선형 수평 페이지 블록 색상, 테두리 및 그래픽으로 구분됩니다. 이들은으로 건축된다 디자인 패턴 마음에 일관성을 유지하다 페이지 전체에 걸쳐.

아래쪽으로 가면 2 열 분할 한쪽은 이미지, 다른 한쪽은 텍스트. 이미지 스왑 측면 오른쪽 - 왼쪽 - 오른쪽 - 왼쪽의 패턴으로. 이것은 주목을 끌고, 단조 로움을 없애다 일반적인 페이지의 자연의 흐름 유지 내용에.

에이 비슷한 디자인 심미 Photoshop 및 Sketch 사용자를위한 사진 추가 기능의 방문 페이지 인 Picjumbo의 웹 사이트에서 찾을 수 있습니다..

홈 페이지는 로고와 미리보기 비디오에 초점을 둡니다. 스크롤 할 때 페이지 전체로 이동하는 사용자 지정 애니메이션이 있음을 알 수 있습니다. 이 애니메이션은 실제로 주의를 끌다, 시청자 확보 관심을 스크롤 유지.

전체적으로이 페이지는 열다 과 찾아보기 쉽다.. 내용은 다음과 같습니다. 수평 블록으로 분할 선명한 타이포그래피와 깨끗한 아이콘.

다른 페이지 요소를 고려하십시오. 함께 균형을 이루다, 요소 들간의 공간, 색상들 사이의 대조, 그리고 다른 모양들. 이 모든 것들이 전반적인 구성에서 중요한 역할을합니다. 모든 사이트는 자연스럽게 콘텐츠에 특정 가중치를 적용합니다..

모든 사이트마다 다르기 때문에 절대적인 대답은 없습니다. 예를 들어, 일부 탐색 링크는 크고 대형 일 때 더 잘 보입니다.. 그들이 다른 사람보다 더 잘 어울립니다. 대문자로 된 작은 문자.

나는 당신이 당신의 벽감에있는 다른 웹 사이트를 공부할 것을 제안한다. 그들이 어떻게 조립되었는지 실제로 분석하십시오. 심지어 레이아웃을 재구성하여 어느 요소가 마침내 디자인을 "함께"만들 수 있는지보십시오..

유형 디자인 문제

타이포그래피를 디자인하는 방법은 콘텐츠 방향에 영향을 미침 귀하의 사이트에. 이것은 유형 계층 구조 및 다른 페이지 요소의 스타일 디자인 단락, 머리글, 글 머리 기호 목록, 따옴표 및 열이나 표와 같은 특수 레이아웃 요소.

비주얼 레이아웃에도 영향을 줄 수 있으므로 콘텐츠를 디자인하는 것이 좋습니다. 자연스러운 진행과 함께. 콘텐츠를 다음과 같은 방식으로 작성하십시오. 페이지 아래로 흐른다., 과 사람들은 독서를 유지한다. 각 단락을 통해.

귀하가 처분 할 수있는 최고의 도구는 다음과 같습니다. 디자인에 대한 당신의 눈. 타이포그래피 요소의 차이점과 다른 페이지 요소와의 관계를 알아 봅니다. 페이지 영역 간의 관계를 만들어 콘텐츠 영역 구분.

고려해야 할 몇 가지 사항 :

• 텍스트 크기
• 글꼴 모음
• 색 대비
• 페이지 섹션 관계
• 선 높이 및 단락 여백
• 글자 간격 및 대 / 소문자

예를 들어 Campaign Monitor의 홈페이지를 살펴보십시오. 상단 탐색 링크는 작은 글자로 모든 대문자를 사용합니다. 페이지의 다른 헤더 이 모든 모자 디자인을 따르십시오. 어느 통일감을 준다.

사이트의 다른 큰 헤더는 다음과 같습니다. 훨씬 더 두드러진, 그리고 그들은 페이지에서 정말로 뛰어 내린다. 일반적인 헤더 디자인을 보면서 쉽게 이해할 수 있습니다. 차이를 말해라. 머리글과 쌍을 이룬 본문 복사본.

캠페인 모니터의 활판 인쇄 디자인 스타일은 절묘합니다. 자연스럽게 레이아웃에 혼합. 이 같은 결과를 얻으려면 실습이 필요하지만 시도가 많을수록 쉽습니다..

좀 더 배우려면 다음 링크를 사용하는 것이 좋습니다.

• 디자인 원리 : 시각적 무게와 방향
• 디자인에서 비주얼 웨이트로 작업하기
• 구성 잔액에 영향을 미치는 19 가지 요인

가이던스 콘텐츠

이해 했어 다른 유형의 웹 사이트 있다 다른 방법들 사이트를 통해 방문자를 안내합니다. 예를 들어 방문 페이지는 정보의 가벼운 음식, 작은 아이콘, 스크린 샷, 과 회원 평가.

블로그와 같은 다른 사이트는 일반적으로 사람들을 한 번에 홈 페이지로 가져 오지 않습니다. 대부분의 사람들 기사 페이지에 착륙시키다, 블로그 게시물 레이아웃은 표제를 강조하다, 사람들을 그려라. 콘텐츠에 추가. 이것은 당신이 각 낱말 떨어져 걸는 독자를 원하기 때문에 질 copywriting 놀이에 오는 곳에이다.

소셜 네트워크 및 웹 앱 필요 우수한 사용자 경험, 그래서 이것은 약간 다른 주제이지만 Facebook 피드가 스크롤 및 사용자 상호 작용 유도.

사람들이 사이트를 탐색하는 데 사용하는 디자인 방법은 시간이지 나면서 바뀌다. 하지만 일반적으로 목표는 안내 방문자 시각적 콘텐츠 방향으로.

다음을 살펴 보겠습니다. 방문 페이지 및 블로그 디자인 차이점을 찾아 내기.

Cactus는 OS X 용 정적 사이트 생성기입니다. 그들의 홈페이지 밀접하게 애플의 디자인 스타일을 따른다. - 많은 공백과 얇은 산 세리프 글꼴.

콘텐츠는 간단한 그래픽으로 텍스트의 열, 블록 및 청크로 구성됩니다. 이 같은 미학은 애플 제품과 공통점, Mac 사용자는이 디자인 스타일을 즐길 수 있습니다..

기능 및 설정을 포함하여 제품에 대한 정보는 홈페이지에서 바로 확인할 수 있습니다. 페이지 자체 스크롤을 장려한다. 고유 콘텐츠, 기본 아이콘 및 왼쪽 / 오른쪽 콘텐츠 블록의 교대 칼럼 패턴을 통해.

목표는 다음에 정보를 제공하는 것입니다. 기존 사용자, 팔다 신규 사용자 선인장의 생각.

이제이 디자인을 The Next Web의 홈 페이지와 비교하십시오. 내용은 다음과 같습니다. 훨씬 더 산발적 인 블로그 홈 페이지에 많은 다른 게시물 주제.

사각형은 캡슐화 된 그리드 시스템을 만듭니다. 여러 개의 게시물을 단일 레이아웃으로. 목표는 다음과 같습니다. 사용자가 콘텐츠를 읽도록 유도 그 자리에서. 방문자가 아무 것도 다운로드하지 않아도 상관 없습니다. 뭔가를 읽기 위해 주변에 붙어있어 라..

읽는 사람들을 얻는 방법은 멋진 사진들 과 인기있는 헤드 라인. TNW는이 작업을 훌륭하게 수행하며 레이아웃은 사람들이 탐색 할 수 있도록 구축 사이드 바에 관련 게시물 미리보기 이미지가 있고 내용이있는 영역.

특정 활동에 방문자를 안내하는 것은 모든 사이트마다 다릅니다. 그러나 다른 성공적인 사이트가 무엇을하는지 연구하고 복사하는 방법을 배우면 많은 것을 배울 수 있습니다..

당신의 눈을 신뢰하십시오

개별 디자인 속성은 분석적으로 설명 할 수 있지만 구현은 각 사이트마다 변경됩니다. "추가 스크롤"링크가있는 영웅 이미지 같은 것을 수행하지 않는다. 모든 웹 사이트에서.

디자인 학습은 대단히 시각적 과정. 디자인에 대한 당신의 눈은 가장 중요한 부분입니다. 너는 ~해야 해. 사물을 제대로 본다. 이것을 확인하기 위해 시각적 계층 구조. 다른 웹 사이트에서 볼 수 있다면 자신의 사이트에서 복제 할 수 있습니다..

내가 가진 최고의 충고는 너의 눈을 믿어 라.. 즐겨 찾는 웹 사이트의 목록을 만들고 각 웹 사이트를 탐색하는데 5 분을 소비하십시오. 페이지에서 좋아하는 요소를 기록하고 이것이 디자인에 어떤 영향을 미치는지 확인하십시오. 이것은 당신을 도울 것입니다. 이러한 개념을 UI / UX 관점에서 내재화한다., 사용자의 관점보다는.

또한 물건을 두려워하지 마십시오! 아무도 잘 디자인하지 못했다. 다만 디자인에 대한 기사를 읽음으로써 예, 도움이됩니다. 실제로 도움이 될 수 있습니다. 하지만 너. 필요한 것 에 무엇을 배우기 위해 처음부터 물건을 만들어라. 공장 그리고 뭐 하지 않는다.

당신이 좋아하는 웹 사이트 레이아웃을 공부하고 눈을 뜨게 만들어보십시오. 시간이 지남에 따라 패턴 라이브러리를 작성하여 새 사이트를 훨씬 쉽게 디자인 할 수 있습니다..

마무리

바라기를,이 끝은 당신을 시작되고 따르기 위하여 당신에게 기본적인 도로지도를 줄 것이다. 웹 디자이너가 되기는 쉽지 않지만 세상에 재능이 필요하며 이러한 기본 개념을 스스로 가르치는 일은 결코 쉽지 않습니다..

연구 즐겨 찾는 페이지 요소가있는 웹 사이트의 가장 좋은 예. 기차 관계를 인식하는 당신의 눈, 그리고 당신은 빨리 나타나게 하다 필요한 기술 뒤로 젖히다 너의 일에있는 그 관계.