고품질의 웹 디자인 및 기술 No. 4 (요소 구성)

디자이너라는 직업은 창의성을 만들어가는 과정이 정말 흥미로워서 많은 사람들에게 매력적인 직업입니다. 콘텐츠를 정리하는 과정이 그다지 흥미롭지 않다는 것은 알지만, 일단 콘텐츠를 정리하는 좋은 습관을 기르면 생각보다 지루하지 않다는 것을 알게 될 것입니다. 콘텐츠를 구성하는 방식은 항상 상황에 따라 다릅니다. 예를 들어, 이 사이트는 어떤 유형인가요? 페이지의 특정 콘텐츠가 얼마나 중요합니까?

콘텐츠를 배치하는 방법과 위치는 매우 다양합니다. 하지만 아직 따라야 할 몇 가지 팁이 있습니다. 가장 기본적인 것은 먼저 디자인이 달성해야 하는 효과를 결정하는 것입니다. 예를 들어, 물건을 판매하는 웹사이트를 구축하고 있나요? 컨텐츠 표시용인가요? 아니면 사용자 등록 페이지를 만들고 계시나요? 프로모션 페이지? 잠깐...

비즈니스 바이 디자인: 37Signals
37개 Signals의 인기 웹사이트를 확인해 보세요. 그들의 물건이 잘 팔리는 것은 단지 행운이 아닙니다. 그들의 웹사이트는 귀하가 그들의 제품에 대해 가능한 한 쉽게 배우고 최종 결정을 내리는 데 도움을 줍니다. 당신이 보는 모든 것은 정교하게 디자인되고 표현됩니다.

사진과 같이 제품을 구매해야 하는 4가지 이유를 제시하고 있습니다. 관심을 끄는 것이 첫 번째 단계입니다. 검정색 영역을 만들고 제품에 대한 간략한 소개를 넣고 굵은 제목을 사용했습니다. 그런 다음, 제품의 장점을 소개하기 위해 아름다운 일러스트레이션을 사용하여 관심(Interest)을 유도합니다. 그런 다음 고객 리뷰 견적 및 제품 수상 인증서를 게시하여 구매를 원하게 됩니다. 이 경우에는 여러 개의 "고객이 말하는 내용" 비디오를 통해 이를 수행했습니다. 마지막으로 달성해야 할 것은 구매 행동(Action)을 촉진하는 것입니다. 37Signals의 웹사이트는 페이지 전체에 걸쳐 많은 수의 액션 포인트(사용자를 다음 단계로 안내하는 링크)를 가지고 있습니다. 많은 액션 포인트가 페이지 하단에 배치됩니다.

콘텐츠를 위한 디자인(블로그): 약용
블로그 페이지를 디자인할 때는 상황이 매우 다릅니다. 사용자가 귀하의 제품을 신뢰하도록 설득하기 위해 열심히 노력할 필요가 없습니다. 귀하의 "제품"이 이미 사용자 앞에 표시되어 있습니다. 즉, 블로그 콘텐츠입니다. 당신이 해야 할 일은 사용자가 쉽게 기사를 읽고, 콘텐츠를 탐색하고, 귀하 및 귀하의 블로그와 연결할 수 있도록 하는 것입니다.

콘텐츠는 독자들 앞에 나타나는 블로그의 첫 부분 중 하나여야 합니다. 아래 예에서는 굵은 분홍색 제목이 사용자의 관심을 끌고 기사의 내용으로 직접 연결됩니다. 왼쪽에는 적당한 크기의 미리보기 이미지가 있고, 오른쪽에는 기사 요약 2~3문단과 "계속 읽기" 링크가 있습니다. 물론, 표준 날짜와 저자 정보도 있습니다. 이것은 제가 "콘텐츠 디자인"이라고 생각하는 것의 완벽한 예입니다. 관심 있는 모든 것에 주의를 집중할 수 있습니다. 이 예에서는 아름다운 RSS 구독 버튼이 중앙에 등장합니다. 이러한 초점은 독자가 콘텐츠에 대한 연결감을 느끼게 할 뿐만 아니라 사이트가 더 많은 구독을 얻는 데도 도움이 됩니다. 독자가 콘텐츠를 탐색하도록 장려하는 것은 사이드바에 최신 또는 가장 인기 있는 기사에 대한 링크 목록을 추가하거나, 드롭다운 메뉴를 만들거나, 푸시하려는 다른 콘텐츠의 효율적인 목록을 구성하는 것만큼 간단합니다. 이는 간단하지만 특히 블로거에게는 충분히 효과적입니다. 블로그는 비공개 도메인입니다. 다양한 채널을 통해 독자에게 귀하의 연락처 정보(Connect)를 알리면 귀하를 이해하는 데 도움이 될 수 있으며 예상치 못한 이점도 얻을 수 있습니다.

콘텐츠 정리를 위한 팁
물론 규칙을 깨고 특이한 일을 해야 할 때가 있을 수도 있지만, 다음과 같은 간단한 팁을 따를 수 있습니다. . 좋은 콘텐츠 구조와 읽기 순서를 보장합니다.

디자인을 하는 이유는 무엇인가요?
위에서 언급했듯이 디자인의 목표를 정하세요.
그리드 사용
그리드는 페이지를 최대한 활용하는 데 도움이 됩니다.
요소 위치 테스트
방문자의 관점에서 콘텐츠의 사용성을 검토합니다.
불필요한 요소를 모두 제거하세요
불필요한 것은 없애거나 최소한 눈에 띄는 곳에 두지 마세요
주의의 균형
어떤 것은 단순화해야 다른 것들은 밝게 빛납니다

위는 네번째 고품격 웹디자인 및 스킬(요소구성)에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!