게시자 웹 사이트에 대한 디자인 접근 방식

"디지털 게시자 웹 사이트"란 무엇입니까? 매일 많은 기사를 게시하는 데 초점을 맞춘 웹 사이트입니다. "블로그"보다 높은 수준입니다. 기본적으로 BuzzFeed와 같은 뉴스 사이트 또는 바이러스 게시 플랫폼입니다.

제품 판매, 비즈니스, 개인 블로그 또는 다른 종류의 웹 사이트와 비교하여 이러한 웹 사이트의 디자인 접근 방식에는 차이가 있습니다. 레이아웃은 종종 "매거진"스타일로 알려져 있으며, 테마 마켓 플레이스에서도 상당히 포화 된 카테고리입니다.

게시자 웹 사이트의 차이점은 무엇입니까?

게시자 웹 사이트와보다 일반적인 웹 사이트 사이에는 두 가지 주요 차이점이 있습니다.

첫 번째 분명한 것은 콘텐츠의 양입니다. 물론 거대한 웹 사이트, 특히 Amazon이나 eBay와 같은 전자 상거래 웹 사이트는 훨씬 더 많은 콘텐츠를 보유하고 있지만 사이트 사용자로부터 콘텐츠를 얻는 플랫폼입니다. 게시자는 일정에 따라 콘텐츠를 제작하기 위해 풀 타임으로 작업하는 편집 팀을 보유하고 있습니다. 신문처럼.

다른 주요 차이점은 수입원입니다. Coca Cola와 같은 회사 웹 사이트 는 사이트에서 수입 을 창출하지 않고 대신 제품에서 제공합니다. 대부분의 회사 웹 사이트는 단순히 디지털 존재를 목적으로합니다.

이것을 알면 게시자의 웹 사이트 수입이 사이트 자체에서 발생한다는 것이 분명합니다. 어떻게? 광고! Google이나 Facebook이 대부분의 수입을 창출하는 방식입니다.

가장 확실하게 광고는 웹을 실행하며 많은 웹 사이트의 주요 우선 순위입니다. 그들의 콘텐츠는 레이아웃에서 광고를 볼 수 있도록 가능한 한 많은 독자를 유치하는 데 중점을 둡니다.

디자인 관점에서 이것은 출판사 및 잡지 웹 사이트의 주요 우선 순위입니다.

콘텐츠가 많은 웹 사이트 디자인

Variety와 같은 대규모 게시자를 살펴 보겠습니다.

가장 먼저 보게되는 것은 상단에있는 큰 광고입니다. 그 전에 콘텐츠 레이아웃에 대해 자세히 살펴 보겠습니다. 많은 링크가있는 큰 헤더 – 상단에 햄버거, 검색, 클릭 유도 문안 및 더 많은 메뉴 항목이 있습니다. 목표는 모든 범주의 콘텐츠에 쉽게 액세스 할 수 있도록하는 것입니다. 이는 블로그 페이지를 제외한 페이지가 10 페이지 미만인 많은 비즈니스 사이트와 극명한 대조를 이룹니다.

그 후 – 주요 기사를위한 큰 상자. 이것은 좋은 디자인 결정입니다. 방문자가 무엇을할지 쉽게 결정할 수 있습니다. 똑같이 중요한 요소가 10 개있는 경우 다른 요소를 선택해야하는 정신적 부담으로 인해 일부 사용자가 페이지를 벗어날 수 있습니다. 중요한 항목에서 덜 중요한 항목의 명확한 시각적 계층 구조를 통해 디자이너는 사용자가 웹 페이지에 더 오래 머무르게 할 수 있습니다.

오른쪽에는 다른 광고와 "가장 인기있는"위젯이 있습니다. 이는 대부분의 사용자가보고 싶어하는 것입니다. 많은 콘텐츠에 맞추기 위해 Variety는 스크롤 가능한 영역으로 만들기로 결정했습니다.

이것은 대규모 출판사에서 주로 사용하는 레이아웃 유형입니다.

BuzzFeed는 더 많은 양의 텍스트를 처리하도록 만들어진 레이아웃의 또 다른 예입니다. 여기에서 디자인은 생생한 색상과 시선을 사로 잡는 모양 (오른쪽 상단 모서리에있는 세 개의 버튼)으로 더 재미있어집니다.

오른쪽의 Trending에 1, 2, 3과 같은 "순위"가 더 있고 "속보"뉴스에 대한 밝은 빨간색 레이블 등이 있습니다. 유사한 디자인의 주요 트렌드 중 하나는 사용자의 관심을 끄는 것입니다. 그러나 똑같이 중요한 두 항목으로 나누고 싶지 않기 때문에 그주의는 잘 지시되어야합니다.

다음은 모든 것이 정상에 오려고하는 잘못된 접근 방식의 예입니다.

우리는 목적이 완전히 다르고 위의 사이트가 실제로 좋은 수익을 올릴 수 있다는 것을 잘 알고 있지만 "주의를 끌려는 모든 것"의 원칙을 잘 보여줍니다.

디지털 출판사 및 광고

광고를 중심으로 디자인하는 것은 게시자에게 또 다른 주요 주제입니다. 주요 수입원이라는 점을 감안하면 최우선 순위이기도합니다. 여기에서 디자이너가 고려해야 할 몇 가지 사항이 있습니다. 그 중 첫 번째는 이러한 광고의 요구 사항과 기능을 잘 이해하는 AdOps 팀으로부터 피드백이나 좋은 정보를받는 것입니다.

이에 대한 예는 광고 크기입니다. 300 × 250, 300 × 600, 728 × 90, 300 × 50이 있습니다.

• 일부는 다른 지점을 스크롤 할 수있는 화면의 한쪽에 붙어있을 수 있습니다.
• 일부는 자신의 작은 구석에 머물 수 있으며 일부는 항상 페이지 상단에 고정됩니다.
• 다른 것들은 2 개의 300x250 또는 1 개의 720x90px의 쌍으로 표시됩니다.

이 모든 것에 대해 어떻게 알 수 있으며 요구 사항은 무엇입니까?

예, 첫 번째 단계는 모든 정보를 수집하는 것입니다. 더 쉽게 볼 수있는 방법은 레이아웃입니다. 게시자의 목표에 따라 단일 게시물에 여러 레이아웃이있을 수 있습니다. 때로는 광고가 적고 때로는 더 많습니다. 로드에 따라 광고 크기가 변경되는 경우도 있고 일정하게 유지되는 경우도 있습니다. 새로운 트렌드와 규칙이 나오면 모든 것이 빠르게 변할 수 있습니다. 종종 매일!

명심해야 할 몇 가지 중요한 사항은 다음과 같습니다.

• 높이가있는 광고가로드 될 수 있습니다. 즉, 콘텐츠가 아래로 밀려서 스크롤없이 볼 수있는 특정 위젯에 맞게 제작 된 디자인이 실패합니다.
• 광고에 배경이 필요할 수 있습니다. 화면 모서리를 터치하는 광고 주변의 밝은 회색 배경 일 수 있습니다.
• 우발적 인 터치를 피하기 위해 광고 주위에 간격을 두어야하는 경우가 많습니다. 광고 사이에는 20 ~ 30 픽셀이 좋은 거리입니다.
• 광고 제공 업체에 더 많은 관심을 끌기 위해 앞뒤에 '광고'라벨을 추가하는 것이 좋습니다.
• 광고가 너무 많으면 안됩니다! 이를위한 최적의 지점은 AdOps 팀이 특정 게시자, 특정 페이지 및 특정 트래픽 (Facebook, Snapchat 등)을 파악하기 위해 작업하는 것입니다.

게시자 웹 사이트의 실적

성능 저하의 주요 원인은 수많은 다른 스크립트와 함께로드하려는 8 개 이상의 광고 설정입니다. 코드에 모두 포함되어 있는데 왜 이것이 디자이너의 관심사일까요? 개발자가 최적화 할 수는 없습니까? 네,하지만 그 자체로 거의 정규직이며 디자이너가 도울 수있는 일입니다. 이 모든 것을 이해하려면 먼저 브라우저에 대해 조금 이해해야합니다.

출처

브라우저는 프런트 엔드 개발자가 특정 요소를 코딩하는 방식에 따라 컴퓨터의 CPU 또는 GPU를 활용할 수 있습니다. 때로는 애니메이션 및 마우스 오버, 누르기의 상호 작용과 같은 작업이 CPU 또는 GPU를 사용합니다. 예를 들어 애니메이션이 CPU를 사용하는 경우 지연이 발생할 가능성이 높고 GPU 인 경우 더 나은 성능을 얻을 수 있습니다. 디자이너의 요구 사항은 둘의 차이 일 수 있습니다.

다음은 몇 가지 일반적인 팁입니다.

• 그림자를 거의 사용하지 않거나 사용하지 않습니다. 그림자는 특히 저가형 모바일 장치 및 랩톱에서 렌더링하는 데 매우 비쌉니다.
• 배경 필터 나 블러 (또는 필터)는 매우 비싸므로 사용하지 마십시오.
• 추가 컴퓨팅을 줄이기 위해 가능한 한 모양을 단순하게 유지하십시오.
• 레이아웃에 영향을 미치는 요소 (다른 요소)의 애니메이션을 요청하지 마십시오. 가능한 한 많이 그것을 중심으로 디자인하십시오. 겹치거나 팝업 인 것이 더 나은 선택입니다.
• 이미지를 비교적 작게 유지하십시오. 이를 통해 개발자는 더 작은 크기의 이미지를로드하여 사이트의 무게를 줄일 수 있습니다.
• 특히 사이트로드시 일반적으로 애니메이션을 최소한으로 유지합니다. 레이아웃 이동에도 동일하게 적용됩니다. 첫 번째로드는 모든 JavaScript가 적용될 때 웹 사이트에서 CPU를 가장 많이 사용하는 시간입니다.

출처

디자인의 우선 순위

게시자 사이트에서 발생하는 트래픽의 대부분은 모바일에서 발생합니다. 따라서 모든 세부 사항을 연마하는 데 가장 많은 시간을 할애해야합니다. 모바일에서도 대부분의 장치가 고급 플래그십이 아니라 $ 200- $ 300 스마트 폰이기 때문에 대부분의 최적화가 필요한 곳입니다.

모바일에서는 명확한 방식으로 광고를 표시하면서 콘텐츠를 읽을 수있게 유지하는 데 중점을 둡니다. 클릭 가능한 요소와 광고 사이의 거리를 크게 유지하여 의도하지 않은 광고 클릭을 제거하세요. 가능하면 사이트를 덜 깔끔하게 만들 수있는 애니메이션과 오버레이를 줄이십시오.

요약

게시자는 많은 콘텐츠와 많은 광고에 집중합니다. 일반적으로 방문 페이지 및 아카이브는 트래픽이 다른 광고에서 기사로 직접 유입되는 경우가 많기 때문에 단일보기보다 우선 순위가 낮습니다. 디자이너로서 귀하의 초점은 광고를 게재하는 가장 최적의 방법을 찾고, 적절한 간격을 추가하고, 모든 것을 읽기 쉽고 사용 가능하게 유지하기 위해 주요 콘텐츠와 잘 분리하는 것입니다.

속도 성능을 향상시키고 가능한 한 적은 애니메이션을 요청하려면 복잡한 UI 요소를 최소한으로 유지하십시오. 모든 것을 잘 정리하기 위해 게시자는 종종 AdOps에 대한 경험이 풍부하고 최신 트렌드를 따르고 DevriX와 같은 비즈니스의 기술 스택을 따르는 개발 대행사와 협력해야합니다.