L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Que les journaux peuvent nous apprendre sur la conception Web
Il est facile de se laisser prendre aux dernières tendances en matière de conception de sites Web. La technologie Web ne cesse de s’améliorer et, à l’heure actuelle, les développeurs disposent d’un nombre impressionnant de fonctionnalités . Cela crée un espace avant-gardiste et innovant – comme il se doit – mais aussi un risque de ne pas être enraciné. Chaque art a ses anciens maîtres. Dans le cas des sites Web, il s’agit des journaux.
Lorsque l’on approfondit les principes de base de la conception des actualités, les chevauchements avec le Web sont fréquents et souvent impossibles à distinguer. De nombreuses meilleures pratiques en matière de conception Web peuvent être directement rattachées à la conception des nouvelles. En fin de compte, les sites Web sont conçus pour les utilisateurs et, espérons-le, pour y revenir. Les journaux jouent à ce jeu depuis des siècles et sont gagnants.
Toute personne ayant un intérêt passager pour la conception Web bénéficiera de la connaissance du mode de création des informations et de ses raisons. Cette pièce examinera plusieurs principes de la conception des journaux et montrera leur lien avec les meilleures pratiques en ligne. Au cœur de cette connexion se trouve un principe enfantin dans sa simplicité, un concepteur de sites Web et un concepteur de sites Web feraient bien de s'en souvenir.
Tenez la page d'accueil
Les journaux existent depuis le 17ème siècle. Ils ont travaillé dur pour leurs règles, et comme leur contenu change tous les jours, les règles doivent être abstraites. Quatre-vingt-quinze pour cent de ce que nous voyons dans un journal donné n'y sera pas le lendemain. C’est ce qui ne se voit pas qui est essentiel pour remettre en question le contenu des journaux.
Ce cadre est ce que nous allons examiner; certaines des règles invisibles qui tiennent les journaux ensemble. Ils concernent principalement la forme et la manière dont les lecteurs traitent l'information. Les parallèles avec la conception Web deviendront bientôt clairs et, espérons-le, les leçons aussi. Commençons par une évidence: au-dessus du pli.
Au-dessus du pli
Si vous avez travaillé sur le Web, vous avez probablement entendu l'expression «au-dessus du pli», qui désigne le contenu que vous avez rencontré quand. vous atterrissez sur une page Web. C'est un terme de journal qui remonte à plusieurs siècles. En raison de leur taille, les journaux sont souvent empilés pliés en deux. Par conséquent, au-dessus du pli, on entend littéralement le contenu visible au-dessus, là où ils sont pliés en deux. C'est la première chose que voient les lecteurs potentiels. C'est souvent la seule et unique chance de faire bonne impression, d'amener les gens à acheter un exemplaire, car ils ont juste pour en savoir plus. Si le journal ne vaut pas la peine d'être repris en première page, quelle raison y a-t-il à croire que cela vaut la peine d'être repris?
L'espace au-dessus du pli est le domaine de l'histoire principale, l'information la plus importante de l'ensemble du document. Il doit accrocher le lecteur. Cela équivaut généralement à de gros titres, à des informations essentielles et à des images saisissantes. Cela dit, il n’existe pas de format rigide. Quel que soit le motif qui attire l'attention des gens sans déformer la vérité, c'est un gagnant.
Au-dessus du pli est la première et la plus importante réponse d'un journal au "test du pub" – ce que vous lâcheriez si vous racontiez à quelqu'un l'essentiel de la histoire dans le boozer. Si vous aviez la possibilité de dire à vos amis que les hommes marchaient sur la lune hier, vous n’ouvririez probablement pas avec la marque de chaussures en cause. Vous feriez un sprint et criez: «Les hommes ont marché sur la lune!», C’est au-dessus du pli. C’est là que les journaux condensent l’essentiel (ou les histoires) de la journée aux points essentiels.
Il en va de même pour les sites Web, ce qui explique sans doute pourquoi la terminologie a été conservée. "Au-dessus du pli" de la conception Web (ce qui en ligne signifie ce que vous voyez avant le défilement) est la réponse du site Web au test de pub. Quelle est la chose la plus importante que les gens devraient savoir? Bien que cela soit particulièrement pertinent pour les pages d'accueil, cela s'applique partout.
Selon une étude de 25 millions de navigateurs l'année dernière "Au-dessus du repli" est sans aucun doute la partie la plus consultée d'une page Web, avec un engagement record juste au dessous de. Du nouveau au commerce électronique, en passant par les réseaux sociaux, le même principe s’applique: aller au fond des choses.
Si vous souhaitez en lire plus au-dessus du pli et des pages de couverture en général, L’affiche de la page de garde de Newseum est un bon endroit pour commencer.
Le principe de Gutenberg
Vous avez donc attiré l'attention de quelqu'un. Toutes nos félicitations. Vous devez connaître le principe de Gutenberg – ou motif Z. Mis en avant par «le père du design de journal» Edmund C. Arnold (nous en parlerons plus tard), le principe de Gutenberg est une bonne règle à suivre lorsque l’on réfléchit à la façon dont les gens s’engagent avec une page de contenu, que ce soit du papier ou des pixels. 19659005] Le principe de Gutenberg stipule que, lorsque le contenu est homogène, nous partons du coin supérieur gauche pour finir dans le coin inférieur droit, en glissant de droite à gauche. Cela découle d'une idée appelée lecture gravité. Dans le monde occidental, nous passons notre vie à lire de gauche à droite, en bas et à gauche pour arriver au début de la ligne suivante. La conception des journaux a tendance à singer ce flot.
Prenez la page de couverture du New York Times précédemment affichée, par exemple. Vos yeux zigzaguent avec chaque ligne. Où lorgnez-vous après «PLANT FLAG»? C’est presque certainement pour «Voice from Moon». Casser ce flot a tendance à être choquant pour les lecteurs car c’est en contradiction avec toute une vie de habitudes de lecture. Combien de fois voyez-vous l'histoire principale s'embrasser du côté droit de la page plutôt que du côté gauche? Pas souvent.
Le même processus s'applique à la conception Web. L'article de Steven Bradley dans Smashing Magazine sur la composition et le rythme de la composition explore le principe dans un contexte en ligne et mérite certainement une lecture, mais j'ajouterais que son application présente un intérêt considérable. impression. C'est un principe qui était appliqué pendant des décennies avant que le World Wide Web ne soit créé, après tout. Toute liste restreinte de finalistes de la Society for News Design sera un atelier de maître en flux de contenu. Voici quelques quelques-uns des derniers gagnants qui vous mettront l’appétit
Soyons clairs: lire la gravité n’est pas aussi contraignant que, disons, la gravité. L’aigle aux yeux de vous a peut-être remarqué le qualificatif selon lequel cela s’applique principalement au contenu «homogène». De plus, il ne repose pas sur quelque chose d'inné dans la nature humaine – il est guidé par le langage. Dans les langues qui se lisent de droite à gauche (l'arabe par exemple), le même principe s'applique, mais il est inversé.
Cela importait moins le jour de l'impression. Les communications étaient généralement limitées à une région géographique et pouvaient refléter la langue principale du public de cette région. En ligne, n'importe qui, n'importe où, peut visiter votre site Web. Il est donc non seulement utile de comprendre le principe de Gutenberg, mais également de concevoir des sites Web qui changent de forme en fonction de la langue dans laquelle ils sont lus.
Ces motifs sont tous utiles à connaître. Ce ne sont pas des règles, juste des tendances. La conception des nouvelles fortes n’adhère pas aveuglément au motif en Z, quoi qu’il en soit; il l'utilise comme fondement. La même chose est vraie pour la conception web. En cas de doute, souvenez-vous-en, mais ne le vénérez pas. L'œil humain a une gravité de lecture enracinée, mais la conception excellente conduit plutôt que suit.
L'adaptabilité du Web ouvre de nouvelles possibilités étonnantes pour la présentation de contenu. Les leçons du principe de Gutenberg sont des points de départ sur lesquels on peut et devrait jouer. Les meilleurs détracteurs savent généralement exactement quelles sont les règles.
Pour plus d'informations sur le principe de Gutenberg, suivez les liens ci-dessous:
Plaques de désignation
Chaque journal a une plaque d'identification. C’est à peu près la seule chose que vous pouvez garantir que rien ne changera d’une édition à l’autre. C’est la partie du haut de la page de couverture (ou très occasionnellement sur le côté) qui comprend le nom et le logo de la publication.
Nombre d’entre eux sont emblématiques. Les plaques signalétiques de publications telles que The Washington Post et The Sun sont gravées dans la conscience publique. Les plaques signalétiques sont l’image de marque, la phrase qui dit: «Nous ne sommes pas cet autre journal. Nous sommes ce journal. Il indique qui vous êtes et de quoi vous parlez.
Il sert également de répertoire. Les journaux ont souvent des teasers sur leurs plaques signalétiques, ce qui indique aux lecteurs des histoires qui ne méritent pas une place en première page, mais qui méritent d’être connues. C’est un joueur clé dans le jeu ci-dessus. Rester dans les parages. Continue de lire. Il y a quelque chose ici pour vous. En gardant à l'esprit le principe de Gutenberg, la plaque signalétique est probablement la première chose que les lecteurs verront.
Pratiquement tous les sites Web ont une plaque signalétique, seuls les sites Web que nous appelons l'en-tête. Smashing Magazine en a un, Amazon en a un, Facebook en a un. C’est bizarre pour un site Web pas d’en avoir un, et pour ne pas le voir apparaître à chaque page. Sur le Web, chaque page doit en avoir un peu à la une. Beaucoup d'utilisateurs arrivent sur un site via le domaine racine, mais pas beaucoup.
C'est l'une des raisons pour lesquelles les plaques signalétiques en ligne ont tendance à être plus utilisées que leurs aînées imprimées. Ils sont capables de faire plus, ce qui est tout aussi bien, car on leur en demande plus. Mais dans la conception de sites Web et d’informations, l’objet sous-jacent de la plaque signalétique est le même: placer la marque au centre de la marque et guider les utilisateurs vers des services qui leur tiennent à cœur.
Systèmes de grille et blocs de contenu
Les journaux sont un contenu pur. De bout en bout, ils regorgent d’informations, informations qui doivent être bien organisées et bien présentées. Le système de grille est fondamental pour la conception d'un journal. Tandis que l’eau se façonne en un bol, le contenu de l’information se façonne en systèmes de grille.
Les colonnes en sont l’élément le plus important. Selon le format du journal (tabloïd, journal grand format, etc.), il peut comporter de quatre à quatorze colonnes. Il est rare que le contenu des journaux ne se façonne pas d'une manière ou d'une autre pour ces colonnes. Le texte descend une colonne puis reprend dans la suivante. Les images peuvent couvrir plusieurs colonnes, en particulier si elles sont accrocheuses.
Les journaux ont évolué au-delà du flot étrangement rigide de problèmes de conscience que vous trouverez dans les efforts précédents comme ceux décrits ci-dessus. Maintenant, il est généralement admis que le contenu des journaux doit être organisé en blocs, chaque histoire formant sa propre boîte. C'est ce qu'on appelle la disposition modulaire et il existe plusieurs raisons pour lesquelles il s'agit de la norme.
Premièrement, il est plus facile à organiser. Si chaque histoire s'inscrit dans un espace propre et ordonné, elle peut être réorganisée avec une relative facilité. Lorsque vous essayez de placer des douzaines (ou des centaines) d’histoires dans un espace fini avec l’horloge qui tourne, c’est une aubaine.
Deuxièmement, c’est plus clair. Une bonne information ne vaut que si elle est mal présentée. Les blocs créent des pages à l'intérieur de pages où chaque élément d'information est distinct et facile à suivre.
Ces normes ont toujours joué un rôle dans la conception Web, mais elles sont particulièrement utiles pour comprendre que nous disposons maintenant de CSS Grid . Non seulement les systèmes de grille de journaux offrent des conseils pour organiser le contenu proprement et clairement, ils montrent également comment les blocs de contenu interagissent les uns avec les autres et avec la publicité. Le mauvais alignement peut paraître très ridicule, alors que le bon arrangement est une joie à lire.
Comme toujours, il existe des différences. Par exemple, en ligne, il y a rarement des sauts (lorsque vous atteignez le bas d'une colonne et continuez à lire en haut de la suivante) car les pages Web peuvent être fermées indéfiniment. Ce type de mise en page a généralement moins de sens en ligne car cela amène les lecteurs à faire défiler et descendre pour consulter un seul contenu, ce qui est plutôt contre-intuitif. Comme le démontre Rachel Andrew les sauts peuvent convenir parfaitement aux listes et aux petites quantités de contenu, mais cette pratique est généralement le produit des limitations physiques de l’impression. La principale utilité des sauts dans la conception Web pourrait bien être d’empiler des blocs de contenu plutôt que d’organiser la copie.
De plus, l’abandon du système de grille imprimé et en ligne peut être frappant. Tout comme l'art dada a reculé par rapport aux normes esthétiques du début du XXe siècle, les sites Web brutalistes inversent le système de grille pour offrir quelque chose de plus… non conventionnel.
Comme indiqué précédemment, pour enfreindre les règles, vous devez d'abord les connaître. Pour cela et tout le reste, Tim Harrower’s The Newspaper Designer’s Handbook est un superbe endroit pour commencer. Pour une introduction plus radicale, l'utilisation de la grille dans Design Design de Carrie Cousins à l'adresse Design Shack est excellente.
Et combien cela importe-t-il lorsque vous passez sur le Web ? De plus en plus. Les propriétés CSS telles que Grid, Shapes et Flexbox facilitent plus que jamais les démarches suivantes: et enfreindre les règles du système de grille. De même que les journaux s'aventurent régulièrement au-delà des lignes invisibles de leurs structures filaires, les sites Web peuvent également repousser les limites de leur propre support.
Dans son livre Art Direction for the Web Andy Clarke plonge la tête la première dans le monde. leçons de la presse écrite (et autres), montrant comment les progrès de CSS peuvent ajouter de nouvelles dimensions au système de grille. Comme Clarke le dit lui-même :
Depuis des années, nous nous disons que le Web n’est pas imprimé. Nous nous sommes dit que les choses que nous admirons dans les autres médias de design ne peuvent pas et ne doivent parfois pas être utilisées en ligne. Nous n'avons plus besoin de penser à cela.
Écoutez, entendez-le
Pour plus d'inspiration, regardez Jen Simmons coder une mise en page imprimée dans CSS Grid à la Smashing Conference 2019 . Magnifique. Et pour un historique plus détaillé du système de grille et de son utilisation, consultez cette présentation de Groi Are Good de Khoi Vinh et Mark Boulton .
Regardez en avant… mais regardez en arrière en premier [19659002] Les conventions ci-dessus ont été forgées par des décennies – dans certains cas par des siècles – d’expérience. Ils se résument essentiellement à la compréhension du contenu et à la manière dont les gens s’engagent avec ce contenu.
Les meilleurs journaux suivent un principe aussi simple que caricatural: présenter l’information de manière claire, attrayante et accessible. comme possible. C’est un objectif louable pour tout site Web. Et ne me croyez pas sur parole. Ces idées ont été défendues par Edmund C. Arnold, le père susmentionné du design de journaux moderne. 'Arnold a conçu ou remodelé des centaines de journaux au cours de sa carrière, notamment The Chicago Tribune, The Boston Globe, The National Observer, et Newsday .
Il a insisté pour que les concepteurs aient plus d'influence, pour que les journaux aient du talent et du contenu. Il était également journaliste et universitaire. Il a écrit de nombreux ouvrages sur la conception des journaux et la typographie. Il connaissait ses affaires. Ce n'est pas un hasard si la Society for News Design (SND), dont il était l'un des membres fondateurs en 1992, détient désormais deux prix chaque année – l'un pour le design de l'information, l'autre pour le numérique.
Toute personne désireuse d'en apprendre davantage sur Arnold et son travail pourraient faire bien pire que de commencer avec les ressources ci-dessous:
Les concepteurs de journaux sont des étudiants du Web – les concepteurs Web doivent aussi être des étudiants de journaux. Alors que les améliorations de la technologie Web ouvrent de nouvelles frontières, il est utile de savoir si quelqu'un d'autre a déjà comparu devant nous. Nous recherchons tous la même chose, après tout. C’est tout, fondamentalement, le même langage.
Vous pouvez le constater en temps réel, à mesure que les journaux s’adaptent au Web. L’étalon-or du design d’actualités en ligne à l’heure actuelle est probablement le New York Times finaliste de l’édition et du prix SND numérique attribué cette année . Ce qui est intéressant dans le Times en ligne, c’est le mélange entre classicisme et innovation. La page d'accueil ressemble toujours essentiellement à la page de couverture d'une édition imprimée, tandis que des histoires individuelles, comme "Le complot pour renverser la démocratie" se plongent dans les nouvelles possibilités du Web.
Ou bien un designer de presse comme Mario García, membre de la génération d’après Edmund, dont le livre le plus récent, The Story a été conçu lu sur les téléphones mobiles . Les meilleurs concepteurs de nouvelles aiment le changement. La preuve est dans le pudding. (Pour ceux que cela intéresse, García publie des blogs quotidiens sur le chevauchement des nouvelles et de la conception Web.)
C’est, à bien des égards, le produit à retenir du design dans les nouvelles. Ses meilleurs praticiens ne sont pas des dogmatistes, mais des étudiants. Interrogé au crépuscule de sa carrière sur les conseils qu’il donnait à la prochaine génération de designers, Edmunc C. Arnold n’a pas répondu à une série de règles. C’était bien plus simple que ça: savoir d’où vous venez.
Mon message aux jeunes designers est le suivant: regardez, les enfants, vous pouvez faire mieux, mais le seul moyen d’exploiter votre potentiel est de revenir à – et de comprendre – Les bases. Cela semble ennuyeux, mais c’est la réalité.
Les journaux ne détiennent pas toutes les clés d’un bon design Web, mais la compréhension des principes qui les guident ne peut qu’être profitable aux concepteurs de sites Web. Il y a beaucoup d'esprits apparentés dans ces deux mondes. Je ne suis pas un concepteur de sites Web, mais je reconnais un bon design Web lorsque je le vois en partie à cause de ce que je sais des journaux.
Le gourou de la conception Web, Jeffrey Zeldman, a mis le doigt dans le mille lorsqu'il a tweeté ceci il y a plus de dix ans:
Le contenu précède le design. Le design en l'absence de contenu n'est pas un design, c'est une décoration.
– zeldman (@zeldman) Le 5 mai 2008
Vitaly Friedman s'est incliné devant le même autel lorsqu'il a déclaré: «Un bon design suppose une communication efficace, pas une décoration au détriment de la lisibilité.» Lui et Zeldman trouveraient de nombreux alliés dans l'espace de création de nouvelles. Peu de médias, voire aucun, ont un contenu plus riche en histoire et en design de mariage que les journaux. Cette lutte est tout ce qu’ils ont.
Pour le As Yet Inimagined
Il convient de rappeler ici qu’il existe des différences claires et indéniables entre la conception de l’information et la conception Web. Dans les journaux, les dimensions de l'espace sont toujours les mêmes, alors que les sites Web doivent s'adapter à des tailles d'écran et des appareils radicalement différents. Dans les journaux, ce que vous voyez est ce que vous obtenez, alors que les sites Web peuvent masquer toutes sortes de fonctionnalités utiles à l'abri des regards jusqu'à ce qu'elles soient invitées à apparaître. Le but de cette pièce n'est pas de vous convaincre que les nouvelles et la conception de sites Web sont les mêmes. Ils sont cependant souvent très similaires. Être maître de l'un ne vous rend pas maître de l'autre, mais ça aide.
C'est peut-être pour cette raison que Friedman a rassemblé une sélection de modèles de journaux primés tout au long de l'année 2008. À l'époque Il a reconnu le fait que les techniques d’impression ne sont pas applicables en ligne. A cette époque, CSS n’était pas assez sophistiqué. Eh bien, c’est maintenant, et c’est vraiment excitant.
Le processus ne se termine jamais. Ça ne peut pas finir. Aucun journal ou site Web digne de ce nom n'est jamais réellement réalisé. Il évolue constamment. Regardez le premier journal et le premier site Web et vous constaterez que beaucoup de choses ont changé dans les deux mondes:
Les deux formats se sont considérablement améliorés depuis ces modestes débuts, et il reste encore beaucoup à faire. Comme C. Y. Gopinath a très bien tracé en 2016 les paramètres changent constamment; la technologie Web, la taille de l'écran, les appareils, la vitesse de l'Internet, nommez-le. À l'ère de la mobilité la plaque signalétique appartient peut-être au bas de la page . Qui sait?
À bien des égards, un flambeau a été passé du design d’information au web. Si les développeurs peuvent aller de l’avant avec les connaissances de leurs aînés, ils réaliseront des choses que les générations précédentes n’auraient même pas imaginées. Quelle opportunité incroyable. Je suis impatient de voir ce qu’ils vont trouver.
(ra, yk, il)
Source link