Idéias brilhantes e tendências para widgets Postagem de destaque proeminentes

Administrar uma revista on-line de sucesso exige um público sólido e muita redação de alta qualidade. Mas o layout da revista também desempenha um fator crucial no engajamento dos visitantes. Uma técnica é criar um Widget de posts em destaque no topo da página inicial. Isso mostra os artigos populares mais recentes para, idealmente, direcionar os leitores para o site.

Neste post, gostaria de abordar técnicas de design que podem ser usadas para criar um widget de postagem bem-sucedido. Embora esse widget funcione melhor em um layout de estilo de revista, você também pode aplicá-lo a blogs menores ou sites de conteúdo dinâmico.

Contraste Tipográfico

A maioria dos posts em destaque conta com imagens em miniatura para chamar a atenção. Isso geralmente assume a forma de uma imagem de fundo vinculada a cada título de artigo.

Essa técnica parece fantástica, mas é difícil criar um contraste notável entre tipografia e imagens dinâmicas de fundo. Ao estudar outras revistas, você pode aprender técnicas sutis para ajudar a melhorar a legibilidade.

The Next Web é uma grande revista on-line com um importante widget de posts na página inicial. Cada miniatura varia em tamanho, mas todos eles usam gradientes escuros para melhor contraste.

As manchetes dos artigos são colocadas na parte inferior dos blocos de miniaturas sobre os gradientes escuros. o texto claro é fácil de consumir em um fundo escuro, ainda não cobre toda a imagem ou.

Avanços modernos em CSS3 permitem aos desenvolvedores recriar esses efeitos com facilidade. Gradientes fixos são perfeitos se você conseguir que eles fluir naturalmente em cima de cada miniatura e ainda mostre o suficiente da imagem para capturar atenção.

Uma técnica ligeiramente diferente é usada na página inicial da Digital Trends. Este widget de postagens usa fundos sólidos de alto contraste por trás do texto para tornar cada título nítido e vibrante.

A diferença aqui é que cada cor de fundo é 100% sólida. Você não pode ver a foto inteira do thumbnail pequenas porções são perdidas da vista. Mas o texto é claramente legível, o que pode ser tão atraente para os visitantes que chegam pela primeira vez à página da Digital Trends..

Encontrar a quantidade certa de contraste é complicado. Alguns sites, como o TechCrunch, tentam colocar o texto ao lado da miniatura para remover completamente esse problema.

Mas se você gosta do estilo de design do título em cima de uma miniatura, você vai querer considerar como os fatores de contraste na equação.

Tamanhos de imagem esporádica

O valor de um widget de postagem em destaque é conteúdo de recurso no topo da página. A assimetria é uma ótima maneira de chamar a atenção para algo, e neste caso tamanhos de miniaturas assimétricas funcionam muito bem.

Tomemos por exemplo a homepage do ZDNet. Em seu widget em destaque, o maior artigo do lado esquerdo usa a imagem em miniatura mais ampla para ocupar mais espaço e esperamos chamar mais atenção. Outras miniaturas exibidas aparecem em tamanhos menores com títulos menores.

Observe como essa estrutura de grade naturalmente leva seu olhar ao redor da página. O olhar de cada visitante tende a cair em uma área específica, depois se move entre cada miniatura até que algo salte.

Também o ZDNet coloca um gradiente escuro sobre cada imagem em miniatura para construir contraste tipográfico para texto mais legível. Fundamentalmente é um dos melhores designs de widgets de post que eu já vi.

Um estilo de design muito semelhante pode ser encontrado na página inicial da CNET. A maior miniatura ocupa o seu lugar do lado esquerdo, pois a maioria dos visitantes lê da esquerda para a direita.

Ao projetar seu próprio widget de postagem, não se sinta obrigado a seguir essa mesma técnica. Você pode ir com qualquer tamanho de miniatura, desde que eles se encaixem de forma coesa e formem um layout de grade unificado.

Estilos de miniaturas personalizadas

As escolhas de design variam muito de layout para layout, de modo que não há uma solução perfeita. Widgets de postagem em destaque são definitivamente mais complexos para projetar, então eles exigem estudo e paciência para caber em um layout personalizado.

O estilo de cada miniatura afeta a aparência do widget inteiro para o seu público. Tomemos por exemplo o estilo de widget apresentado em The Verge.

Cada miniatura tem um gradiente colorido na parte superior da foto. Isso aumenta o contraste e melhora a legibilidade, mas também acrescenta um certo toque ao site..

Algumas pessoas não gostam deste estilo porque o consideram berrante ou desagradável. Mas também é bastante popular entre os leitores do Verge e outros designers estão imitando este estilo.

Mas cores e técnicas sofisticadas não são o único fator a ser considerado. Grades e tamanhos de miniatura também devem ser escolhidos com cuidado, pois ajudam a definir o estilo geral do widget de posts em destaque..

Talvez um dos melhores exemplos seja o design do Mashable, que passou por muitas fases ao longo dos anos. Agora considerado uma fonte mainstream de notícias, o Mashable trabalha para colocar um grande número de posts na página inicial para facilitar a navegação.

Algumas postagens usam pequenas miniaturas quadradas enquanto o cabeçalho principal corrige uma grande faixa de miniaturas no artigo. Isso deve exigir trabalho extra do editor para garantir que todas as postagens tenham suas fotos apropriadas nos tamanhos corretos.

Mas logo após o desembarque no site, você notará que emite um senso de credibilidade. Este estilo parece muito mainstream e pode ser usado por quase qualquer tipo de revista on-line para construir a confiança com o readerbase. O único problema é escrever conteúdo suficiente para preencher a página!

Widgets Multi-Post

Alguns widgets de postagem em destaque exibem artigos em um grade estática. Esta é frequentemente a escolha mais popular porque pode ser feito responsivo e combina muito bem em qualquer layout.

Outros widgets dependem de interações dinâmicas, como uma apresentação de slides. Tomemos por exemplo a página inicial da Vanity Fair com o bloco de postagem em destaque no topo da página. Apenas uma postagem é exibida por vez, mas novos artigos são exibidos quando você passa o mouse sobre um determinado título.

A miniatura e o título são atualizados automaticamente com uma simples interação de foco. Uma coisa a notar é que isso pode ser muito confuso para os usuários da Internet que não estão familiarizados com essa técnica dinâmica de foco.

Mas do lado positivo esta técnica vai economizar espaço na página, ocultando o excesso de conteúdo.

Tente não pensar em widgets de postagem em destaque como preto-e-branco. São apenas seções de página usadas para apresentar os artigos mais interessantes ou populares. A (s) técnica (s) pela qual você realiza essa tarefa pode sempre estar aberta para debate.

A revista Complex usa uma apresentação de slides completa para o widget em destaque. Cada post tem uma miniatura em destaque, juntamente com o gradiente inferior para contraste tipográfico.

Mas em vez de colocar cada miniatura lado a lado, os artigos transmitir dinamicamente através de uma caixa de apresentação de slides. A navegação pode ser definida automaticamente ou controlada por links de seta. Esse design economiza muito espaço e mantém o usuário mais disposto a interagir com a página.

Embrulhar

Não há design certo ou errado quando se trata de displays de postagem em destaque. Todos eles compartilham muitos traços semelhantes, mas cada revista usa seu próprio estilo para organizar o conteúdo em destaque.

Espero que este post ofereça dicas práticas para usar ao projetar seu próprio widget de posts em destaque. Se você se sentir preso, basta procurar outras revistas para se inspirar. Encontre características que você gosta e descubra como replicá-las para se misturar ao seu próprio design de revista.