J'ai fait mes débuts professionnels dans le monde du design chez un éditeur de magazines spécialisés. La présentation et le design des magazines me tiennent donc beaucoup à cœur.

Un grand nombre de principes de conception et de mise en page de magazines sont facilement transférables dans le monde du web design. Certains d'entre eux sont assez évidents, alors que vous avez peut-être négligé d'autres. Mais en réalité, tout est une question de design qui transcende le support.

Ici, j'ai couvert certaines de mes leçons préférées de la conception de magazines et comment elles peuvent s'appliquer à la conception de sites Web. Mais la chose la plus importante que j'espère que vous pouvez retirer de cet article est que vous pouvez prendre des idées et des conventions de conception à partir d'une forme de média et les appliquer à d'autres.

Donc, si votre expérience est dans le design d'intérieur ou le design graphique ou même quelque chose comme le design industriel, vous pouvez prendre ces principes que vous connaissez déjà et les appliquer à vos projets de conception web.

Arrière-plan simple = meilleure lisibilité

Si vous ouvrez 90% des magazines, la couleur d'arrière-plan principale derrière la copie du corps est blanche. Si la tradition en est la principale raison, cette tradition a commencé pour de bonnes raisons (en plus de la technologie d’impression). Même dans les cas où un fond blanc n'est pas utilisé, un arrière-plan simple, de couleur unie ou à motifs subtils. Cela rend la copie du corps très lisible et aide à prévenir la fatigue oculaire.

Dans certains cas, vous trouverez la composition de la copie du corps sur une image, mais dans ce cas, vous constaterez souvent que la taille du type a été augmentée et qu'une attention particulière est accordée au contraste suffisant entre le texte et l'image. Et il est rare de trouver un article entier composé sur des images. La même chose devrait être appliquée à toute conception de site Web.

font size differences

Maintenir la cohérence tout au long de

Parcourez n'importe quel magazine et vous remarquerez probablement qu'il y a beaucoup de cohérence d'une page à l'autre. Les polices sont les mêmes. Les titres sont les mêmes. Les mises en page de base sont les mêmes. Bien sûr, les articles peuvent présenter des différences dans la manière dont ils sont présentés, mais des éléments tels que les numéros de page se trouvent à peu près au même endroit et les images seront probablement présentées dans le même style, entre autres consistances.

consistency

Cette cohérence est rassurante pour le lecteur. Ils passent d'une page à l'autre et savent à quoi s'attendre. Il en va de même d’un numéro du magazine à l’autre.

Ce type de cohérence peut facilement être transféré au monde de la conception Web. Assurez-vous que les éléments tels que votre en-tête, votre navigation et d'autres éléments clés de votre mise en page sont les mêmes sur tout le site. Dans le même ordre d'idées, assurez-vous que vos polices sont cohérentes sur tout le site, non seulement la police, mais aussi la taille et les styles utilisés.

Toute déviation attire l'attention

Étant donné que les mises en page de magasin sont si cohérentes, toute déviation par rapport à la disposition standard attire l’attention. Il se distingue parmi les autres pages. C'est pourquoi, si souvent, nous trouvons que le principal article dans un magazine a au moins la page de titre formatée différemment.

Le même principe peut être appliqué à votre site Web. Si vous souhaitez distinguer une page particulière, apportez des modifications à la présentation standard. Cela se fait souvent avec deux types de pages: les pages de destination et les articles de blog dirigés par des artistes. Dans les deux cas, le but est de rendre la page spéciale dans l'œil de vos visiteurs.

La publicité est clairement marquée et non intrusive

La publicité dans les magazines est toujours clairement délimitée par le contenu du magazine. Soit il est visuellement distinct du contenu éditorial, soit marqué comme publicité.

Cela a à voir avec la confiance. Si vos lecteurs ne sont pas sûrs de ce que sont les éditoriaux et de la publicité, ils sont moins susceptibles de faire confiance à votre contenu. Cela est particulièrement vrai avec des choses comme les billets de blog sponsorisés. S'il n'est pas clair que ce soit sponsorisé, vos lecteurs se sentiront peut-être dupes s'ils croient au départ qu'il s'agit d'un éditorial uniquement pour découvrir différemment plus tard.

Les grandes images sont de meilleures images

Les magazines ont tendance à utiliser des images plus grandes. En fait, vous verrez beaucoup d'images qui couvrent une page entière ou même une page de deux pages.

big images

La même chose peut certainement être adoptée par les sites Web. Utilisez des images qui occupent la totalité de l'écran de votre utilisateur. Ils attirent l'attention des visiteurs tout en étant plus attrayants. L'incorporation de grandes images dans votre conception est un geste audacieux qui peut vraiment différencier la conception d'un site.

Ditch gros blocs de texte

Celui-ci peut ne pas sembler tout à fait aussi apparent au début. Après tout, la plupart des magazines contiennent de gros blocs de texte. Des pages entières, en fait.

Mais ces gros blocs de texte sont généralement séparés par des éléments tels que des guillemets ou des images. Vous avez rarement du texte page après page dans les magazines grand public (les publications commerciales ou scientifiques peuvent être une autre histoire).

Ainsi, plutôt que de mettre en forme de gros morceaux le texte principal de votre site, il faut le séparer des éléments typographiques, des images et même de la publicité. Même des choses aussi simples que de garder vos paragraphes courts et de diviser votre contenu en sections avec des en-têtes peuvent faire toute la différence en termes de lisibilité et d’intérêt pour vos visiteurs.

Utilisez la grille, mais n'ayez pas peur de la casser

Les magazines sont disposés assez strictement sur une grille. Mais en même temps, vous verrez souvent des mises en page qui brisent délibérément la grille. Des éléments tels que des images ou des guillemets chevauchent des colonnes, ce qui ajoute un intérêt visuel à la conception de la mise en page.

break the grid

Bien que le concepteur de sites Web ait parfois plus de difficulté à sortir de la grille que le concepteur d’imprimés, cela se traduit toujours bien de la conception imprimée à la conception numérique.

Vous avez besoin d'un teaser fort

La couverture d'un magazine sert de teaser. Lorsqu'un consommateur parcourt un kiosque à journaux, la couverture d'un magazine attire son attention. C'est la seule chance que la plupart des magazines attirent un nouveau lecteur ou pour inciter un lecteur existant à consulter le nouveau numéro.

cover

Les sites Web n’ont pas vraiment de «couverture» (je ne préconise certainement pas d’utiliser des intros animés ou des pages de garde pour attirer les visiteurs), mais ils ont des teasers. C'est ce que voit un visiteur lorsqu'il apparaît pour la première fois sur votre site. C'est l'en-tête, le titre, la navigation, le style visuel et la facilité d'utilisation. Fondamentalement, l'expérience utilisateur initiale.

Sans un teaser exceptionnel, un visiteur est susceptible de cliquer sur le bouton de retour de son navigateur, tout comme il négligerait un magazine avec une couverture inintéressante sur le kiosque à journaux. Regardez l’impression que votre site donne d’abord avec un œil critique, et demandez-vous si vous restez honnêtement à lire davantage le site.

Conclusion

Bien que de nombreux principes de présentation et de conception de magazines puissent facilement être appliqués à la conception Web, rappelez-vous qu'il ne s'agit pas vraiment d'appliquer des principes directement d'un support à un autre. Au lieu de cela, il s'agit d'explorer d'autres types de conception, et les détails d'un certain format, et de déterminer ce qui peut être transféré d'une discipline à une autre. Penser à vos conceptions en ces termes vous conduira presque certainement à essayer de nouvelles choses et à expérimenter des idées d'autres formats. Certains peuvent fonctionner et d'autres non, mais un bon design est un bon design.

Exemples de pages tirés de Magazine .net et Jardin et pistolet .