눈에 띄는 Feature Post위젯에 대한 훌륭한 아이디어 및 동향

성공적인 온라인 잡지를 운영하려면 견실 한 청중과 많은 양질의 글쓰기가 필요합니다. 그러나이 잡지의 레이아웃은 방문자 참여를 결정하는 중요한 요소이기도합니다. 한 가지 기술은 추천 게시물 위젯 홈페이지 상단에 있습니다. 가장 최근에 인기있는 기사를 통해 독자를 사이트로 유도하는 데 이상적입니다..

이 글에서는 성공적인 포스트 위젯을 만드는 데 사용할 수있는 디자인 기법에 대해 설명하고자합니다. 이 위젯은 종종 잡지 스타일 레이아웃에서 가장 잘 작동하지만 작은 블로그 나 동적 콘텐츠 웹 사이트에도이 도구를 적용 할 수 있습니다.

인쇄상의 명암

대부분의 추천 게시물은 관심을 끌기 위해 미리보기 이미지에 의존합니다. 이것은 종종 각 기사 헤드 라인에 연결된 배경 이미지의 형태를 취합니다..

이 기술은 환상적으로 보이지만 타이포그래피와 다이내믹 한 배경 그림을 눈에 띄게 대조하기 힘들다.. 다른 잡지를 공부하면 가독성을 높이는 미묘한 기술을 습득 할 수 있습니다..

다음 웹은 홈페이지에 눈에 띄는 소식 위젯이 포함 된 대형 온라인 잡지입니다. 각 축소판의 크기는 다양하지만 모두 사용합니다. 향상된 대비를위한 어두운 그라디언트.

기사 헤드 라인은 어두운 그라데이션 상단의 축소판 블록 아래쪽에 배치됩니다. 그만큼 가벼운 텍스트는 어두운 배경에서 쉽게 소비됩니다., 아직 전체 이미지를 다루지는 않습니다..

CSS3의 현대적인 발전으로 개발자는 이러한 효과를 쉽게 재현 할 수 있습니다. 고정 된 그래디언트는 그 (것)들을 얻을 수 있으면 완벽합니다. 각 미리보기 이미지 위에 자연스럽게 흐른다. 여전히 이미지를 충분히 과시하다 주의를 끌기 위해.

약간 다른 기술은 Digital Trends의 홈페이지에서 사용됩니다. 이 포스트 위젯은 고 대비 단색 배경 각 광고 제목을 선명하고 생생하게 표현하는 텍스트 뒤.

차이점은 각 배경색이 100 % 단색이라는 점입니다. 미리보기 이미지 전체를 볼 수는 없습니다. 작은 부분은보기에서 사라진다.. 그러나이 텍스트는 분명히 읽기 쉽기 때문에 디지털 트렌드 홈페이지에 처음 방문한 방문객에게도 매력적일 수 있습니다.

적절한 양의 대비를 찾는 것은 까다 롭습니다. TechCrunch와 같은 일부 웹 사이트는 축소판 옆에 텍스트를 배치하여이 문제를 완전히 없애려고합니다..

그러나 원하는 미리보기 이미지 위에 헤드 라인 텍스트의 디자인 스타일을 좋아한다면 등식에 대비 요소를 고려하십시오..

산발적 인 이미지 크기

추천 된 위젯의 가치는 다음과 같습니다. 기능 내용 페이지 상단에 있습니다. 비대칭 성은 무언가에주의를 기울일 수있는 좋은 방법이며,이 경우 비대칭 썸네일 크기는 훌륭하게 작동합니다..

예를 들어 ZDNet의 홈페이지를 예로 들어 보겠습니다. 기능이있는 위젯에서 왼쪽에있는 가장 큰 기사는 더 넓은 공간을 차지하고 더 많은 관심을 끌기 위해 가장 큰 축소판 이미지를 사용합니다. 다른 추천 작은 이미지는 더 작은 헤드 라인으로 더 작은 크기로 나뉩니다..

이 그리드 구조가 페이지 주위에서 자연스럽게 눈을 어떻게 유도하는지 확인하십시오. 각 방문자의 시선은 한 특정 영역에 들어가는 경향이 있습니다. 그런 다음 무언가가 튀어 나올 때까지 각 미리보기 이미지 사이를 이동합니다..

또한 ZDNet은 어두운 그라디언트 각 미리보기 이미지 위에 타이포그래피 대비를 구축하다 보다 읽기 쉬운 텍스트. 근본적으로 내가 본 최고의 포스트 위젯 디자인 중 하나입니다..

매우 유사한 디자인 스타일이 CNET의 홈페이지에서 찾을 수 있습니다. 대부분의 방문자가 왼쪽에서 오른쪽으로 읽은 이후 가장 큰 미리보기 이미지가 왼쪽에 표시됩니다..

자신의 추천 포스트 위젯을 디자인 할 때 이와 똑같은 기술을 따를 의무는 없습니다. 응집력이 딱 들어 맞고 통합 된 격자 레이아웃을 형성하는 한 모든 축소판 크기로 이동할 수 있습니다..

사용자 지정 축소판 스타일

디자인 선택은 레이아웃마다 매우 다양하므로 완벽한 해결책은 없습니다. 주요 포스트 위젯은 디자인이 훨씬 복잡하므로 사용자 정의 레이아웃에 맞추기 위해 연구와 인내가 필요합니다..

각 축소판의 스타일은 전체 위젯이 잠재 고객에게 보이는 방식에 영향을줍니다. The Verge에서 찾은 멋진 위젯 스타일을 예로 들어 보겠습니다..

각 미리보기 이미지에는 사진 위에 다채로운 그라데이션이 있습니다. 이것은 대조를 향상시키고 가독성을 향상 시키지만 웹 사이트에도 특정 감각을 더합니다..

어떤 사람들은이 스타일이 좋고 매력적이지 않기 때문에이 스타일을 좋아하지 않습니다. 하지만 Verge 독자들 사이에서도 오히려 인기가 있으며 다른 디자이너들은이 스타일을 모방합니다..

그러나 색상과 고급 기술 만 고려해야 할 요소는 아닙니다. 그리드 및 축소판 크기는 전체 추천 게시물 위젯 스타일을 정의하는 데 도움이되므로 신중하게 선택해야합니다..

아마도 가장 좋은 예 중 하나는 Mashable의 디자인으로 수년 동안 여러 단계를 거쳤습니다. 이제 뉴스의 주류 소스로 간주되는 Mashable은 쉽게 찾아 볼 수 있도록 많은 수의 게시물을 홈페이지에 밀어 넣습니다..

일부 게시물은 작은 사각형 축소판을 사용하지만 주요 리더 보드는 큰 전체 크기 축소판 배너를 기사에 고정합니다. 모든 게시물에 올바른 크기의 적절한 사진이 있는지 확인하려면 편집기에서 추가 작업이 필요합니다..

하지만 사이트에 착륙 한 직후에 신뢰감을 털어놨다.. 이 스타일은 매우 주류이며 거의 모든 유형의 온라인 잡지에서 독자층과의 신뢰를 구축하는 데 사용할 수 있습니다. 유일한 문제는 페이지를 채우기에 충분한 내용을 쓰는 것입니다.!

다중 포스트 위젯

추천 게시물 위젯 중 일부는 정적 그리드. 가능한 경우 가장 자주 사용되는 선택입니다. 반응이 좋고 멋지게 혼합되었습니다. 어떤 레이아웃 으로든.

다른 위젯은 슬라이드 쇼와 같은 동적 인 상호 작용에 의존합니다. 예를 들어, 배니티 페어 (Vanity Fair)의 홈페이지를 페이지의 맨 위에 특집 게시물 블록과 함께 가져갑니다. 한 번에 하나의 게시물 만 표시되지만 특정 헤드 라인 위로 마우스를 가져 가면 새 기사가 표시됩니다..

미리보기 이미지와 제목은 간단한 마우스 오버 상호 작용으로 자동 업데이트됩니다. 한 가지주의해야 할 점은이 동적 호버 기술에 익숙하지 않은 인터넷 사용자에게는 매우 혼란 스러울 수 있습니다..

그러나 긍정적 인 측면에서이 기술은 공간 절약 초과 콘텐츠를 숨겨서 페이지에.

추천 된 위젯을 흑백으로 생각하지 마십시오. 가장 흥미롭거나 인기있는 기사를 다루는 데 사용되는 페이지 섹션입니다. 이 작업을 수행하는 기술 (들)은 항상 논쟁의 여지가 있습니다.

복잡한 잡지는 자신의 추천 위젯에 대해 전체 슬라이드 쇼 표시를 사용합니다. 각 게시물에는 인쇄상의 대비를위한 하단 그래디언트와 함께 추천 미리보기 이미지가 있습니다..

그러나 각 미리보기 이미지를 나란히 배치하는 대신 기사 역동적 인 흐름 슬라이드 쇼 상자를 통해. 탐색은 자동으로 설정하거나 화살표 링크로 제어 할 수 있습니다. 이 디자인은 많은 공간을 절약하고 사용자가 페이지와 더 많이 상호 작용할 수있게합니다..

마무리

특집 게시물 디스플레이에는 옳고 그른 디자인이 없습니다. 그들은 모두 비슷한 특성을 공유하지만 각 잡지는 자신의 스타일을 사용하여 추천 콘텐츠를 구성합니다.

이 게시물이 자신의 추천 게시물 위젯을 디자인 할 때 사용할 유용한 팁을 제공하기를 바랍니다. 다른 잡지에 영감을 얻기 위해 붙어있는 느낌이 든다면. 자신이 좋아하는 특징을 찾고 자신의 잡지 디자인과 융합되도록 복제하는 방법을 찾아냅니다..