14 beaux exemples de mises en page de magazines dans la conception Web

La prochaine fois que vous parcourrez des journaux ou des magazines imprimés/papier populaires, notez à quel point les mises en page ont tendance à varier d'une page à l'autre. Certaines mises en page sont nettes, propres et très lisibles.

D'autres sont un peu plus stylés, artistiques peut-être. Pourtant, ils respectent tous les normes de conception les plus élevées et présentent le contenu de manière claire, compacte et magnifique.

Le maintien de ces normes élevées ne peut pas être facile, mais il est constamment atteint. Et le plus souvent, ces normes de conception élevées se reflètent dans leurs versions Web, poussant souvent l'innovation comme elles le font, d'autant plus qu'elles doivent fournir du contenu à tant d'appareils et de tailles d'écran différents.

La conception de sites Web de style magazine est un style de mise en page très populaire, mais bien souvent, ces sites Web ne s'inspirent pas de magazines hors ligne. Un excellent moyen de découvrir ce qui fonctionne le mieux est d'examiner de plus près les magazines en ligne populaires, car les personnes responsables de la conception des éditions imprimées contribuent souvent également à la conception des mises en page des magazines en ligne.

Bien que tous soient esthétiquement agréables, chacun des sites Web de style magazine ci-dessous a une mise en page créative et très unique, ils accordent tous la priorité à l'expérience utilisateur et tous sont d'excellents exemples de cohérence dans la conception. C'est ainsi que la conception Web de style magazine devrait être faite.

Temps

La page d'accueil de Time s'appuie fortement sur les visuels, mais cela a toujours été le cas avec la version imprimée de ce magazine tout au long de son histoire. Les concepteurs de sites Web ont cependant réussi à présenter au spectateur une multitude de choix tout en évitant une apparence encombrée.

L'un des secrets du succès de la convivialité et de la lisibilité de ce site Web est le recours à la hiérarchie visuelle . Le visiteur peut toujours voir quelle est l'histoire en vedette du moment.

Le bord

Appelez cela une mosaïque ou un puzzle, mais la conception de la page d'accueil de The Verge vous donne une image rapide de ce qu'il y a à l'intérieur et vous amène rapidement là où vous voulez aller.

La mise en page est également agréable à l'œil. Et parcourir la liste des articles ne prend qu'une seconde ou deux. Les pages intérieures sont parfois divisées en carrousels de vignettes d'images, ce qui facilite l'exploration d'une histoire ou d'un sujet d'intérêt spécifique.

Le new yorker

Les fans de la version papier du New Yorker ne seront pas déçus par la mise en page de la version en ligne. L'accent est mis sur le contenu et le style de mise en page est minimaliste et attrayant.

La typographie du New Yorker est familière, car la typographie de la version imprimée a été maintenue de manière cohérente sur l'ensemble du site. Ce magazine fait un excellent travail pour que ses téléspectateurs en ligne se sentent comme chez eux.

Filaire

Le site Web de Wired démontre une capacité presque étonnante à prendre une vaste sélection de thèmes extrêmement variés (même si la plupart semblent être orientés geek) et à les organiser de manière à offrir une visualisation confortable et une excellente lisibilité.

Ceci est accompli grâce à l'utilisation habile des largeurs de colonne, de l'espacement, du rembourrage, de l'utilisation confortable de l'espace blanc et d'une police sans empattement agréable à l'œil. La taille de la police indique également quels articles sont les plus susceptibles d'intéresser la plupart des téléspectateurs. La cohérence est la règle, et toutes les différentes parties forment un tout cohérent sur l'ensemble du site.

Newsweek

Le site Web de Newsweek est soigneusement structuré, mais il est également livré avec une version réactive magnifiquement conçue, de sorte que vous pouvez parcourir ses articles lors de vos déplacements.

C'est particulièrement une bonne nouvelle pour les mobinautes puisque ce magazine se distingue par ses nombreux articles et images de qualité. Il fait un excellent travail de tout mettre ensemble.

Bloomberg

Bloomberg.com est devenu une destination numérique pour beaucoup en raison de sa capacité à offrir une expérience de nouvelles qui offre des nouvelles à jour et le fait dans un format moderne et convivial.

Les visiteurs apprécient particulièrement la manière dont ce magazine en ligne, conçu pour le consommateur mondial d'aujourd'hui, unifie habilement ses atouts médias les plus puissants.

GQ

Ceux qui sont des lecteurs réguliers de GQ et qui se sont habitués à la manière élégante dont le contenu de la version hors ligne est présenté retrouveront le même aspect familier dans la version en ligne.

Sans surprise, la première chose que vous voyez est une bannière d'images de mode qui s'étend sur toute la largeur de la page. Faites défiler vers le bas et la liste des articles est joliment présentée dans une grille élégante.

National géographique

La version en ligne de National Geographic ne déçoit pas. Le site présente un design simpliste et présente de grandes images ainsi qu'une sélection de polices faciles à lire.

Route & Piste

Le magazine Road and Track est depuis longtemps populaire auprès des passionnés de voitures pour ses articles perspicaces et ses images fantastiques. Les éditeurs de ce magazine étaient évidemment prêts à jouer lorsque la décision a été prise de créer la version en ligne.

Les excellents articles et les superbes photographies sont toujours là, ainsi qu'une barre de navigation statique très pratique.

Salon de la vanité

Vanity Fair a refait son site Web il y a un an, et les résultats ont été plus que satisfaisants. La nouvelle version en ligne fait un excellent travail en combinant de longs articles, pour lesquels le magazine est réputé, avec des actualités rapides, des diaporamas, des vidéos, etc.

Les éditeurs du site ont également pris note du fait que de nombreux visiteurs naviguaient sur des appareils mobiles. Ils se sont donné beaucoup de mal pour rendre le contenu fantastique sur toutes les plateformes – et ils ont eu un énorme succès.

Temps de Los Angeles

Le LA Times a réussi à créer l'un des plus grands sites Web réactifs jamais construits . Les lecteurs peuvent obtenir la même expérience de classe mondiale en lisant l'un des plus grands journaux du monde sur n'importe quel appareil ou taille d'écran.

Pour ce faire, les webdesigners se sont débarrassés de la traditionnelle grille de pages. Au lieu de cela, le journalisme phare des journaux est mis en évidence, l'encombrement a été éliminé et une plus grande attention est accordée aux voix uniques et au multimédia du journal.

Le prochain Web

The Next Web (TNW) est présenté dans un format de site Web solide d'une page avec un design audacieux. Il fait un excellent travail pour équilibrer les besoins de l'entreprise avec une UX forte.

Le contenu est à l'avant-plan, il y en a beaucoup, mais il n'y a aucun signe d'encombrement.

Chef d'entreprise

Entrepreneur, le guide définitif pour relever les défis de la propriété d'entreprise, est dans les kiosques depuis 30 ans, mais l'édition en ligne est résolument moderne dans sa mise en page.

La page d'accueil n'est peut-être pas particulièrement innovante, mais la mise en page est simple et facile à suivre. Publié mensuellement, ce magazine est disponible à la fois en version papier et sur une application mobile.

Âge de l'annonce

Depuis ses débuts en tant que journal grand format de Chicago en 1930, jusqu'à ce qu'il devienne une publication mondiale, Ad Age est désormais disponible en éditions imprimée et en ligne, ainsi que dans des bulletins électroniques quotidiens et hebdomadaires.

À l'exception de l'article en surbrillance, les sujets reçoivent un espace égal jusqu'à ce que vous fassiez défiler une page ou deux, après quoi bon nombre d'entre eux sont répertoriés en tant qu'éléments de ligne. La mise en page Ad Age est celle qui serait facile à imiter .

L'un de ces exemples ou une combinaison d'un ou deux pourrait bien fonctionner pour vous. N'oubliez pas l'importance de la cohérence dans la conception.