Abordagens de design para sites de editores

O que é um “site de editor digital?” É um site que se concentra em publicar muitos artigos diariamente. É um nível acima de um “blog”. É basicamente um site de notícias ou plataforma de publicação viral como o BuzzFeed.

Há uma diferença na abordagem de design de um site desse tipo em comparação com vendas de produtos, negócios, blog pessoal ou qualquer outro tipo de site. Seu layout é frequentemente conhecido como o estilo “Revista”, que também é uma categoria bastante saturada em mercados temáticos.

O que torna um site de editor diferente?

Existem duas diferenças principais entre um site de editor e outro mais regular.

O primeiro óbvio é a quantidade de conteúdo. Agora, é claro, existem sites enormes, especialmente aqueles de comércio eletrônico como Amazon ou eBay, que provavelmente têm muito mais conteúdo, mas são plataformas que obtêm conteúdo dos usuários do site. As editoras têm equipes editoriais que trabalham em tempo integral para produzir conteúdo de acordo com uma programação. Assim como um jornal.

A outra grande diferença é a fonte de renda. O site de uma empresa como a Coca-Cola não gera receita com o site , mas com seus produtos. A maioria dos sites de empresas tem o objetivo de simplesmente ser uma presença digital.

Sabendo disso, provavelmente é óbvio que a receita do site de um editor vem do próprio site. Quão? Publicidades! Que é basicamente como o Google ou o Facebook geram a maior parte de sua receita.

Os anúncios, definitivamente, rodam na web e são a principal prioridade de muitos sites. Seu conteúdo é focado em trazer o maior número possível de leitores para que possam ver os anúncios em seus layouts.

Do ponto de vista do design, essa é a principal prioridade dos sites de editoras e revistas.

Projetando sites com muito conteúdo

Vamos dar uma olhada em algumas grandes editoras como a Variety:

A primeira coisa que se vê é um grande anúncio no topo. Veremos isso mais em um segundo, antes disso - o layout do conteúdo. Um grande cabeçalho com muitos links - hambúrguer no topo, pesquisa, frases de chamariz e ainda mais itens de menu. O objetivo é dar acesso fácil a todas as categorias de conteúdo. Isso contrasta fortemente com muitos sites de negócios que têm menos de 10 páginas (excluindo páginas de blog).

Depois disso - uma grande caixa para o artigo principal. Esta é uma boa decisão de design. Isso torna mais fácil para os visitantes decidirem o que fazer. Se houver 10 elementos igualmente importantes, a tensão mental de escolher um em vez do outro pode fazer alguns usuários pular para fora da página. Com uma hierarquia visual clara de itens importantes a menos importantes, um designer pode fazer os usuários permanecerem mais tempo em uma página da web.

À direita - outro anúncio e um widget “Mais populares”, que é exatamente o que a maioria dos usuários gostaria de ver. Para caber em tanto conteúdo, a Variety decidiu torná-lo em uma área de rolagem.

Este é o tipo de layout que você procuraria principalmente com editores maiores.

O BuzzFeed é outro exemplo de layout feito para funcionar com grandes quantidades de texto. Aqui, porém, o design é mais divertido com cores vibrantes e formas que chamam a atenção (como os três botões no canto superior direito).

Há mais “classificação” como 1, 2, 3 em Tendências à direita, o rótulo vermelho brilhante para notícias de “última hora” e assim por diante. Uma grande tendência em um design semelhante é chamar a atenção do usuário. Essa atenção deve ser bem direcionada, entretanto, você não gostaria de dividi-la entre dois itens igualmente importantes.

Aqui está um exemplo da abordagem errada em que tudo tenta estar no topo:

Estamos bem cientes de que o propósito é completamente diferente e o site acima pode de fato dar um bom lucro, mas ilustra bem o princípio de “tudo para tentar chamar sua atenção”

Editores e anúncios digitais

Projetar em torno de anúncios é outro tópico importante para os editores. Por ser a principal fonte de receita, também é a prioridade. Existem algumas coisas que um designer deve considerar aqui, primeiro das quais é obter feedback ou boas informações da equipe AdOps, que entende bem os requisitos e a funcionalidade desses anúncios.

Exemplos disso são os tamanhos de anúncio. Existem 300 × 250, 300 × 600, 728 × 90 e 300 × 50.

• Alguns podem ficar em um lado da tela onde você pode rolar por diferentes pontos
• Alguns podem ficar em seus próprios cantinhos, alguns colam sempre no topo da página.
• Outros apareceriam em pares de dois 300 × 250 ou um 720x90 px.

Como você sabe sobre tudo isso e quais são os requisitos?

Então, sim, o primeiro passo seria coletar todas essas informações. Uma maneira mais fácil de ver isso é em termos de Layouts. Uma única postagem pode ter vários layouts, dependendo dos objetivos do editor. Às vezes há menos anúncios, às vezes há mais. Às vezes, os anúncios mudam de tamanho para diferentes carregamentos, outras vezes eles permanecem constantes. Tudo pode mudar rapidamente, no entanto, à medida que novas tendências e regras surgem. Freqüentemente, diariamente!

Algumas das coisas importantes a se ter em mente são:

• Anúncios com altura podem carregar. Isso significa que o conteúdo seria empurrado para baixo e o design feito para caber em um determinado widget acima da dobra falharia.
• Os anúncios podem precisar de planos de fundo. Pode ser um plano de fundo cinza claro ao redor do anúncio, tocando os cantos da tela.
• Os anúncios geralmente precisam de espaçamento ao redor deles para evitar toques acidentais. 20-30 pixels é uma boa distância entre os anúncios.
• Você gostaria de adicionar um rótulo “Anúncio” antes / depois com o objetivo de atrair mais provedores de anúncios.
• Não deve haver muitos anúncios! O ponto ideal para isso é o que uma equipe de AdOps trabalharia para descobrir para um editor específico, página específica e até mesmo tráfego específico (como Facebook, Snapchat, etc)

Desempenho do site do editor

Um grande contribuidor para o mau desempenho são as configurações com mais de 8 anúncios tentando carregar com toneladas de outros scripts. Por que essa é a preocupação do designer quando está tudo no código? Os desenvolvedores não podem simplesmente otimizá-lo? Bem, sim, mas isso é quase um trabalho em tempo integral por conta própria, e no qual o designer poderia ajudar. Para entender tudo isso, primeiro você precisa entender um pouco sobre navegadores

Fonte

Os navegadores podem utilizar a CPU ou GPU de uma máquina, dependendo da forma como um determinado elemento é codificado por um desenvolvedor front-end. Às vezes, ações como animações e interações ao pairar, pressionar utilizam a CPU ou a GPU. Se uma animação por exemplo utiliza a CPU é bem provável que haja lag, se for a GPU então é possível obter um melhor desempenho. Os requisitos do designer podem ser a diferença entre os dois.

Aqui estão algumas dicas gerais:

• Use pouca ou nenhuma sombra. As sombras são muito caras para renderizar, especialmente em laptops e dispositivos móveis de baixo custo.
• Não use filtros de fundo ou desfocados (ou quaisquer filtros), pois eles também são muito caros.
• Mantenha as formas o mais simples possível para reduzir a computação adicional.
• Não solicite animações de elementos que afetam o layout (outros elementos). Projete em torno disso, tanto quanto possível. Qualquer coisa que se sobreponha ou seja um pop-up é uma escolha melhor.
• Mantenha as imagens relativamente pequenas. Isso permitiria aos desenvolvedores carregar imagens de tamanhos menores, o que economizaria peso no site.
• Mantenha as animações em geral no mínimo, especialmente no carregamento do site. O mesmo se aplica a mudanças de layout. O primeiro carregamento é o tempo mais intensivo da CPU para um site quando todo o JavaScript está sendo aplicado.

Fonte

Prioridade do Design

A maioria do tráfego em sites de editores vem de celular. Portanto, o tempo mais gasto no polimento de todos os detalhes deve ir para lá. No celular também é onde a maioria das otimizações também são necessárias, já que a maioria dos dispositivos não são carros-chefe de alta tecnologia, mas smartphones de $ 200 a $ 300.

No celular, seu foco é manter o conteúdo legível enquanto apresenta os anúncios de maneira clara. Mantenha distância entre qualquer elemento clicável e anúncios grandes para remover quaisquer cliques acidentais nos anúncios. Se possível, reduza quaisquer animações e sobreposições que possam tornar o site menos ágil.

Resumo

Os editores se concentram em muito conteúdo e muitos anúncios. Em geral, as páginas de destino e os arquivos têm menos prioridade do que as visualizações individuais, pois o tráfego geralmente chega diretamente aos artigos de outros anúncios. Como designer, seu foco é encontrar a melhor maneira de colocar anúncios, adicionar os espaçamentos adequados e separá-los bem do conteúdo principal para manter tudo legível e utilizável.

Mantenha os elementos complexos da IU ao mínimo para melhorar o desempenho da velocidade, bem como solicitar o mínimo de animações possível. Para definir tudo bem, os editores geralmente precisam trabalhar com agências de desenvolvimento que tenham uma boa experiência com AdOps, seguir as tendências mais recentes e pilhas de tecnologia no negócio, como DevriX.