Comment rendre votre publication extraordinaire

La personnalisation sur Medium n’a jamais été aussi puissante

Medium France
Une Histoire
8 min readApr 11, 2016

--

Depuis aujourd'hui, les options de personnalisation pour les publications ont augmenté de façon exponentielle.

Tout le monde n’est pas designer (ou même ne possède la fibre artistique - je parle en connaissance de cause ici), mais tout le monde peut rendre sa publication unique et professionnelle en gardant à l’esprit certains principes.

Concernant la migration

Les publications peuvent être créées à partir de rien sur Medium ou construites à partir de travaux existants venant d'une autre plate-forme. Notre Centre d'aide propose un guide qui va vous aider à transférer votre travail sur Medium (et votre domaine personnalisé, si c'est votre choix).

Concernant les logos, les avatars et les headers

La première des choses : Vous aurez envie de commencer à concevoir votre publication en créant un logo élégant, un avatar et un header.

Nous avons développé et rendu plus puissants les différents éléments de personnalisation qui existaient déjà pour les publications.

Utilisez des fichiers .png transparents pour les logos, les avatars, et les headers. Le rendu de votre logo sera excellent quelque soit les images en arrière-plan et les headers que vous utiliserez. Vous pouvez utiliser des outils comme Photoshop ou GIMP pour éditer vos fichiers.

  • Le logo de la publication (le logo qui apparaît en haut de la page de chaque histoire) ne devrait pas dans l’idéal avoir une largeur de plus de 600px et une hauteur de plus de 75 px.
  • L’avatar (l’icône qui apparaît à côté du nom de votre publication et en bas de chaque post) devrait dans l’idéal avoir une taille de 60x60px.
  • Le header est disponible en trois tailles : petit, moyen et large. Vous pouvez également choisir une image de fond avec le format large. Le rapport est de 2:1 avec une taille minimum de 1500px de large et 750px de hauteur.

Les headers en détails

Depuis le lancement des nouveaux headers, il y a de nombreuses manières d’obtenir un look personnalisé et unique en jonglant avec nos différentes options disponibles.

Voici à quoi ressemble notre outil de personnalisation de la page d’accueil.

Les tailles de header et les options d’image

Le header de votre publication peut être petit, moyen ou grand. Si vous choisissez un header petit ou moyen, vous aurez seulement la possibilité de choisir une couleur de fond.

Petit header.
Moyen header.

Pour les grands header, vous pouvez également choisir une image de fond. Il est possible de choisir une image d’une taille de 1500px de large et 750px de hauteur au minimum, cependant nous vous recommandons de choisir une image la plus grande possible avec un rapport de 2:1 (ce qui signifie que l’image est deux fois plus large que haute).

Grand header.

Les grands headers peuvent être recadrés en fonction de la zone de visualisation (ordinateur ou mobile). Vous pouvez alors définir le point central du header afin afin d’être sûr que les utilisateurs voient toujours la partie de l’image que vous avez choisi.

Concernant les logos et les headers

Si vous souhaitez avoir un logo dans votre header, choisissez-le avec la plus grande résolution possible, c’est la meilleure manière de garder un rendu excellent quelque soit le support utilisé.

Nous supposons que tous les logos sont retina, autrement dit qu’ils sont chargés avec une taille deux fois plus importante que celle qui sera pris en compte lors de l’affichage. Si vous téléchargez un logo avec une largeur de 2000px et une hauteur de 1000px, Medium l'interprète comme un logo de 1000 x 500px. Nous faisons cela pour que les logos soient de très bonne qualité sur tous les supports, que ce soit sur un mobile ou sur un écran retina géant.

Les logos s’insèrent parfaitement dans le header et se redimensionnent automatiquement lorsqu’ils sont d’une taille supérieur à l’espace prévu, mais ne sont pas redimensionnés si leur taille est plus petite que l’espace qui leur est dédié.

En deux mots : Réalisez vos logos avec la plus haute résolution possible. Choisissez la taille que vous voulez puis multipliez-là par deux.

Options de disposition du header

En plus de la taille, vous pouvez également personnaliser votre header avec un logo, un texte ou les deux.

Options d’ajout d’un texte, d’un logo ou les deux.

Votre logo ou votre texte peut être justifié à gauche ou centré au sein de votre header. Faites des essais avec les différentes tailles et couleurs proposées pour voir ce qui vous convient le mieux. Le monde (ou plutôt, votre header) vous appartient.

Options pour aligner les titres et les logos dans votre header.

Ces gens ont choisi un header sur Medium avec un petit logo carré et deux lignes de texte pour leur titre, qu’ils ont tous les deux justifié à gauche.

Même Medium; des styles de publication infinis.

La couleur des headers et leur influence sur votre publication

Vous pouvez personnaliser la couleur d’arrière-plan de votre header en la choisissant parmi toutes les couleurs de l'arc en ciel. Notre éditeur exige une couleur hexadécimale (les couleurs hexadécimales sont un mélange de chiffres et de lettres qui indiquent à un site Web quelle couleur il doit afficher) afin de vous permettre de choisir la nuance exact que vous recherchez. Vous pouvez également choisir entre les options “subtle” et “bold”. Si vous sélectionnez “bold”, la couleur choisie sera utilisée de façon prononcée dans l’ensemble de votre publication (elle sera aussi utilisée comme couleur d’arrière-plan de votre header). Si vous choisissez “subtle”, la couleur sera bien présente mais de manière plus discrète (seuls les liens et quelques autres éléments visuels seront de la couleur choisie, le header restera avec un fond blanc).

Vous recherchez la couleur de header parfaite en hexadécimal ? Cet excellent site, Color Hex, est exactement ce qu’il vous faut.

REGARDEZ TOUTES CES BELLES COULEURS.

Expérimentez avec cette palette de couleurs. Le choix d’une couleur personnalisée affecte toutes les couleurs de votre publication (y compris le surlignage, les boutons et d'autres parties de l'interface utilisateur). Un choix dynamique de teintes complémentaires afin que tout fonctionne parfaitement.

Le choix de couleurs réalisé par la publication Backchannel change l’apparence des surlignages et du cœur des recommandations.

Une petit rappel au sujet de l’importance d'utiliser des .pngs transparents pour les logos de vos publication : les .pngs transparents se fondront dans la couleur d’arrière plan choisie et donneront un aspect plus professionnel à votre publication.

Il vous faudra donc peut-être modifier légèrement vos logos avec ces nouvelles fonctionnalités (ce qui peut être fait facilement via Photoshop, GIMP, ou tout autre outil de retouche d'image).

Concernant la section tags

Vous pouvez personnaliser la navigation sur la page d'accueil de votre publication en fonction des tags que vous utilisez dans votre publication. Pensez les comme des sections de votre publication. Par exemple, la publication Talkback, pourrait utiliser les tags “Feedback”, “Updates”, et “How To” afin d’aider les utilisateurs à trouver plus rapidement les contenus précis qu’ils recherchent sur la publication. Choisissez les tags que vous souhaitez faire figurer en haut de la page d’accueil de votre publication dans la zone “Homepage Navigation” de l’éditeur - vous pouvez choisir jusqu'à sept tags. “About” est toujours un tag prédéfini, gardez cela à l’esprit lors de votre configuration.

L’outil pour personnaliser les tags de la page d’accueil de votre publication.

Concernant les favicons

Vous ne trouvez pas que c’est quand même plus sympa lorsqu’un site dispose d’un petit icône qui apparaît à côté du nom dans les onglets de votre navigateur, permettant ainsi de le reconnaître en un coup d’œil ?

Nous aussi.

Maintenant, votre publication peut avoir son propre favicon que vous pouvez personnaliser. Cette fonctionnalité est disponible pour les publications hébergées sur des domaines personnalisés. Vous voulez savoir comment obtenir un domaine personnalisé pour votre publication ? Pas de panique, il y a un article sur notre Centre d'aide qui vous explique tout.

Les favicons personnalisés peuvent faire ressortir votre publication dans la barre d’onglets de votre navigateur.

Vous ne voulez pas avoir de favicon ? Pas de problème, vous pouvez utiliser le nôtre.

Concernant la mise en page de votre publication

Bien que cela ne soit pas une nouvelle fonctionnalité, la mise en page est sans doute l'aspect le plus important d'une publication.

L'onglet de mise en page vous permet de personnaliser l'organisation, la mise en page, et l'apparence de votre publication.

Les options sont presque infinies.

Commençons par la mise en page : les articles peuvent apparaître sous forme de grille, dans un flux comme celui de votre page d’accueil de Medium ou alors comme une liste. Dans ce premier exemple, je choisi d'avoir une section, avec des articles triés par date de publication, et affichés sous forme de grille.

Talkback, sous forme de grille, avec des histoires publiées de la plus récente à la plus ancienne.

Les publications, à mesure qu'elles grandissent, ont souvent besoin d’une meilleure organisation que dans ce premier exemple. L’organisation de la page d’accueil est également cruciale pour tirer pleinement parti des tags que vous pouvez afficher dans le header de vos publications.

Pour obtenir une belle mise en page, vous pouvez construire des sections pour mettre en avant des articles (section “Featured”) ou organiser votre flux par date de publication (sections “Latest”), tags (section “Tagged”), ou articles tendances (section “Trending”).

Mettons un peu de fantaisie dans notre publication, ça vous dit ?

Dans cet exemple, je choisis comme première section une partie “Featured”, dans laquelle j’affiche deux de mes posts préférés sur Talkback, avec le reste de mes articles affichés en dessous sous forme de grille.

Talkback, maintenant avec des articles “Featured”.

Modifier une petite partie de votre mise en page peut avoir une incidence importante sur l'apparence de votre publication. Dans cet exemple, j'ai changé le format de mise en page de mes images pour ne pas avoir de marges et pour que les titres soient superposés aux images.

La différence est significative (et, dans ce cas, pas vraiment bonne).

Une mise en page sous forme de grille est totalement différente lorsque les images n’ont pas de marge et que les titres sont superposés à celles-ci.

Comme je l'ai déjà dit plus haut : Le monde (des publications) vous appartient.

Allez-y et imposez votre style.

--

--