Idées brillantes et tendances pour les widgets de premier plan

Diriger un magazine en ligne réussi requiert un public solide et une rédaction de grande qualité. Mais la présentation du magazine joue également un rôle crucial dans l'engagement des visiteurs. Une technique consiste à créer un widget de messages en vedette en haut de la page d'accueil. Ceci présente les articles les plus récemment populaires pour idéalement amener les lecteurs plus loin dans le site.

Dans cet article, je voudrais aborder les techniques de conception qui peuvent être utilisées pour créer un widget de publication avec succès. Bien que ce widget fonctionne souvent mieux avec une présentation de style magazine, vous pouvez également l'appliquer à des blogs plus petits ou à des sites Web à contenu dynamique..

Contraste typographique

La plupart des publications présentées s'appuient sur des vignettes pour attirer l'attention. Cela prend souvent la forme d'une image d'arrière-plan liée à chaque titre d'article..

Cette technique a l'air fantastique mais c'est Difficile d'établir un contraste notable entre la typographie et les images d'arrière-plan dynamiques. En étudiant d’autres magazines, vous pouvez acquérir des techniques subtiles pour améliorer la lisibilité..

The Next Web est un grand magazine en ligne avec un widget de messages bien en vue sur la page d'accueil. La taille de chaque vignette varie, mais tous utilisent dégradés sombres pour un contraste amélioré.

Les titres d'articles sont placés au bas des blocs de vignettes au-dessus des dégradés sombres. le le texte clair est facile à consommer sur un fond sombre, mais cela ne couvre pas non plus toute l'image.

Les avancées modernes de CSS3 permettent aux développeurs de recréer facilement ces effets. Les gradients fixes sont parfaits si vous pouvez les obtenir couler naturellement au-dessus de chaque vignette et encore montrer assez de l'image attirer l'attention.

Une technique légèrement différente est utilisée sur la page d'accueil de Digital Trends. Ce widget de publication utilise milieux solides à contraste élevé derrière le texte pour rendre chaque titre croustillant et vibrant.

La différence est que chaque couleur d'arrière-plan est composée à 100% de solides. Vous ne pouvez pas voir la photo miniature entière afin de petites portions sont perdues de vue. Mais le texte est clairement lisible, ce qui peut être tout aussi attrayant pour les visiteurs qui arrivent d’abord sur la page d’accueil de Digital Trends..

Trouver la bonne quantité de contraste est délicat. Certains sites Web tels que TechCrunch essaient de placer du texte à côté de la vignette pour supprimer entièrement ce problème..

Mais si vous aimez le style de conception du texte de titre par-dessus une vignette, vous voudrez examiner comment les facteurs de contraste dans l'équation.

Tailles d'image sporadiques

La valeur d'un widget de publication vedette est de contenu de la fonction en haut de la page. L'asymétrie est un excellent moyen d'attirer l'attention sur quelque chose, et dans ce cas, les tailles de vignettes asymétriques fonctionnent très bien..

Prenons par exemple la page d'accueil de ZDNet. Dans leur widget, le plus grand article à gauche utilise la plus grande image miniature pour prendre plus de place et attirer davantage l’attention. Les autres vignettes en vedette tombent dans des tailles plus petites avec des titres plus petits.

Remarquez comment cette structure de grille conduit naturellement votre regard autour de la page. Le regard de chaque visiteur a tendance à tomber dans une zone particulière, puis se déplace entre chaque vignette jusqu'à ce que quelque chose saute..

Aussi ZDNet place un dégradé sombre au-dessus de chaque image miniature pour construire un contraste typographique pour un texte plus lisible. Fondamentalement, c'est l'un des meilleurs designs de widget de publication que j'ai jamais vus.

Un style de conception très similaire peut être trouvé sur la page d'accueil de CNET. La vignette la plus grande prend place à gauche car la plupart des visiteurs lisent de gauche à droite..

Lors de la conception de votre propre widget de publication vedette, ne vous sentez pas obligé de suivre cette même technique. Vous pouvez utiliser n'importe quelle taille de vignette, à condition qu'elles soient cohérentes et forment une grille unifiée..

Styles de vignettes personnalisés

Les choix de conception varient considérablement d'une disposition à l'autre, de sorte qu'il n'existe pas de solution parfaite. Les widgets de publication en vedette sont nettement plus complexes à concevoir. Ils nécessitent donc une étude et de la patience pour s'intégrer dans une présentation personnalisée..

Le style de chaque vignette affecte l’apparence de tout le widget pour votre public. Prenons par exemple le style de widget présenté sur The Verge..

Chaque vignette comporte un dégradé coloré au-dessus de la photo. Cela renforce le contraste et améliore la lisibilité, mais ajoute également un certain talent au site Web..

Certaines personnes n'aiment pas ce style parce qu'elles le trouvent tapageur ou peu attrayant. Mais il est aussi plutôt populaire parmi les lecteurs de Verge et d’autres concepteurs imitent ce style..

Mais les couleurs et les techniques de fantaisie ne sont pas le seul facteur à considérer. Les tailles de grille et de vignette doivent également être choisies avec soin, car elles permettent de définir le style général du widget de messages en vedette..

L'un des meilleurs exemples est peut-être le design de Mashable, qui a traversé de nombreuses phases au fil des ans. Désormais considéré comme une source d’information traditionnelle, Mashable travaille à mettre un grand nombre de messages sur la page d’accueil pour faciliter la navigation..

Certains articles utilisent de petites vignettes carrées tandis que leur classement principal fixe une grande bannière de vignettes en taille réelle pour l'article. Cela nécessite un travail supplémentaire de la part de l'éditeur pour s'assurer que toutes les publications ont les photos appropriées aux tailles correctes..

Mais juste après avoir atterri sur le site, vous remarquerez que dégage un sentiment de crédibilité. Ce style est très courant et peut être utilisé par presque tous les types de magazines en ligne pour renforcer la confiance avec la base de lecture. Le seul problème est d'écrire suffisamment de contenu pour remplir la page!

Widgets à messages multiples

Certains widgets de publication en vedette affichent des articles dans grille statique. C’est souvent le choix le plus populaire car il peut être rendu réactif et se mélange bien dans n'importe quelle mise en page.

D'autres widgets s'appuient sur des interactions dynamiques telles qu'un diaporama. Prenons l'exemple de la page d'accueil de Vanity Fair, avec son bloc de messages en haut. Un seul message est affiché à la fois, mais les nouveaux articles s'affichent lorsque vous survolez un titre particulier..

La vignette et le titre sont mis à jour automatiquement avec une simple interaction survolée. Une chose à noter est que cela peut être très déroutant pour les internautes qui ne connaissent pas cette technique de survol dynamique.

Mais du côté positif cette technique va économiser de l'espace sur la page en masquant le contenu en excès.

Essayez de ne pas penser en noir et blanc aux widgets de publication en vedette. Ce ne sont que des sections de page utilisées pour présenter les articles les plus intéressants ou les plus populaires. La technique par laquelle vous accomplissez cette tâche peut toujours être ouverte au débat.

Le magazine Complex utilise un diaporama complet pour son widget. Chaque publication a une vignette en vedette avec le dégradé inférieur pour le contraste typographique.

Mais au lieu de placer chaque vignette côte à côte, les articles flux dynamique à travers une boîte de diaporama. La navigation peut être définie automatiquement ou contrôlée par des liens fléchés. Cette conception économise beaucoup d’espace et permet à l’utilisateur d’interagir davantage avec la page..

Emballer

Il n'y a pas de bonne ou de mauvaise conception lorsqu'il s'agit d'affichages en vedette. Ils partagent tous beaucoup de traits similaires, mais chaque magazine utilise son propre style pour organiser le contenu présenté..

J'espère que cet article propose des conseils pratiques à utiliser lors de la conception de votre propre widget de messages en vedette. Si jamais vous vous sentez coincé, il suffit de chercher l'inspiration dans d'autres magazines. Trouvez des traits que vous aimez et déterminez comment les reproduire pour les intégrer à votre propre design de magazine..