Fran6art.com, blog d’un webdesigner WordPress freelance

Et oui, le temps a passé depuis la première partie de ce tutoriel qui remonte au 13 novembre dernier…

Pour faire suite aux différents aspects abordés la dernière fois, nous allons voir aujourd’hui principalement le contenu de notre sidebar et faire un petit tour sur la page article. Ensuite, il sera temps de repasser sur les croquis et d’aborder les premières étapes avec Photoshop.

Pour commencer (ou recommencer) et comme vous êtes peut-être nombreux à avoir loupé la première partie de ce tutoriel, je vous remets ci-dessous, les premières parties abordées et j’enchaînerais directement ensuite avec les parties suivantes (ça m’apprendra é prendre tellement de temps entre mes tutos moi… ).

Aujourd’hui, on va donc terminer notre première ébauche de thème. On a déjà un premier “jet” que l’on va améliorer en plaçant de manière plus précise les éléments du blog. Encore une fois, ici on va surtout se poser pas mal de questions d’architecture plutôt que de design. Il va être important de bien positionner les différentes parties du blog, leur donner une première dimension, afin de travailler de manière plus efficace dès que l’on passera sur Photoshop. On va donc reprendre les différentes “boîtes” du blog et voir comment les “articuler” et les mettre en valeur.

Plutôt que de faire de longs paragraphes à vous expliquer les pour et les contre de chaque technique ou de chaque design, j’ai préféré vous faire une sorte de To Do List ou checklist que vous pourriez réutiliser à chaque création de site web ou de blog. Cette liste n’est pas exhaustive et je l’améliorerai en fonction de vos remarques.

Tous ces points ne vont pas être cruciaux pour réaliser le croquis sur un carnet. Mais par contre, ils vont sûrement vous aider à trouver des idées pour la construction de votre blog:

1. Formes générales

• Quel type de blog souhaitez-vous ? 1, 2, 3 colonnes ?
• Quelle largeur pour chacune des colonnes ( contenu et sidebar(s)) ?
• Quelle largeur pour ce blog ? Fixe ou variable ?
• Forme générale du blog ? Plein écran de haut en bas ? Grande fenêtre distante des bords supérieurs et inférieurs ? Coins droits ? Coins arrondis ?

2. Premiers éléments graphiques

• Quel type de couleur souhaiteriez-vous donner à votre blog ? Chaud ? Froid ? Frais ? Pastel ? Minimaliste ? etc… Essayez d’avoir une cohérence entre le sujet du blog et le style que vous allez choisir. Le succès de votre blog en dépendra quand même un peu…
• Quel type de “background” souhaiteriez-vous mettre en place ? sombre ? clair ? uni ? dégradé ? pattern ?
• Avez-vous pensé à un logo pour votre blog ? Souhaitez-vous mettre en valeur une icône, un logo que vous pourriez réutiliser par exemple sur un avatar ? Ou alors preférez-vous peut-être travailler sur le titre du blog directement en choisissant une police qui donne à votre blog une identité particulière ?

3. La page d’accueil, bloc par bloc…

3.1 le header

• Que contient votre header ? Une image ? Un fond uni ? dégradé ?
• Quelle hauteur pour votre header ? 50, 100, 200, 300 pixels ? Plus peut-être ?
• Vous avez opté pour un logo ou une customisation du titre du blog ?
• Ce titre du blog, va-t-il apparaître à gauche, au centre ou à droite de l’entête ?
• Avez-vous pensé à une description pour cet entête ? Un slogan ? Une phrase personnelle ? Une citation ?
• Avez-vous pensé à y insérer un formulaire de recherche ? oui ? non ?
• Voulez-vous intégrer un menu de navigation dans votre header ? En haut de la page ? Sous le titre, et avant le contenu ? Centré à gauche ou à droite ?
• Avez-vous l’intention de monétiser le header ? Si oui, pensez à garder de la place en fonction du format choisi.

3.2 Le contenu

3.2.1 Aspects gé;néraux

• Je l’ai déjà dit plus haut mais je le redit ici: quelle largeur pour votre contenu ? 500, 600, 700 pixels ? Quelle importance voulez-vous lui donner par rapport à la (ou les) sidebars ?
• Quel type de police allez-vous utiliser ? Serif ? Sans-Serif ? On peut se poser la question pour l’ensemble du blog bien entendu, mais c’est au niveau du contenu que le choix va se faire. On est sur un blog pour lire des articles. Le choix de la police du texte est donc très importante.
• Quelle taille pour cette police ? Quelle couleur ? Une justification ? Aligné à gauche ? Espace entre les lignes ?

3.2.2. Le titre des articles

• Quelle police ? Elle peut tout à fait être différente de celle du texte. Quelle taille ? Quelle couleur ? Souligné, pas souligné ?

3.2.3. Les données méta

Ce sont la date, les catégories, les tags ou encore les commentaires…

• Apparaissent-ils sous le titre ? Sous le contenu de l’article ? Sont-ils séparés les uns des autres ?
• Où apparaît la date ? Sous quel format ? Quelle taille ?
• Idem pour les commentaires et les tags..

3.2.4. Monétisation du contenu

• Vous avez prévu des encarts dans le contenu pour la publicité ? Au-dessus ? Au-dessous ? Directement dans l’article ?

3.2.5. Spécial Page d’accueil

Avec l’arrivée des thèmes “magazine”, on assiste à une remise en question de la page d’accueil du blog. Peut-être auriez-vous envie de faire quelque chose de différent ? Ne pensez pas trop aux difficultés techniques pour le moment. Essayez juste d’apercevoir ce qui vous ferait plaisir !

• Quelle organisation pour le contenu ? Plusieurs articles à la suite ? Sur le même modèle que la page d’article ?
• Combien d’articles ? 5 ? 10 ? plus ?
• Flux complets ou flux tronqués ?
• Ajout d’un “thumbnail” peut-être, une image d’illustration pour vos articles ?
• Et pourquoi pas donner un aspect différent à certains articles ?
• Un article “Ã la une” peut-être ? Ou plusieurs ? A moins que vous souhaiteriez juste “customiser” le dernier article paru ?

Il y a vraiment beaucoup de possibilités à envisager pour le contenu de la page d’accueil. Pour tout ça, le croquis pourra énormément vous aider à trouver des idées. Je le répête mais ne vous lancez jamais tête baissée sur le logiciel, ça va considérablement perturbé vos pensées et comment vous envisagez votre blog. Par la suite, c’est grâce au logiciel que vous pourrez confronter vos idées avec la réalité, mais pour le moment, on fait une sorte de brainstorming. Permettez à votre créativité de s’exprimer LIBREMENT.

3.3 La sidebar

L’été dernier, j’ai posé une question qui me semblait intéressante dans le sens que le rôle de la sidebar est vraiment très différent d’un blog à un autre. Les réponses étaient très intéressantes et plutôt que de vous raconter une nouvelle fois 36 000 choses, je pense que le mieux est de vous proposer les réponses qui m’avaient été faites par différents blogueurs.

Je pense que d’une certaine manière, il faut se poser les questions suivantes:

• A quoi doit me servir ma sidebar ?
• Combien de colonnes pour ma sidebar ?
• Ai-je envie d’y afficher mes abonnés ? Mes fidèles lecteurs via MyBlogLog par exemple ?
• Quels aspects du blog me sont intéressants de mentionner ? Les derniers articles ? Les meilleurs articles ? Les derniers commentaires ? Les meilleurs commentateurs ?
• Est-ce que la blogroll a toujours de l’intérêt ? En tout cas, est-ce que j’estime important d’en avoir une ?

La sidebar a une importance qui n’est pas négligeable. Il est donc important de faire les bons choix dans un souci d’efficacité vis à vis du visiteur, mais aussi pour ce qui est de l’ergonomie générale du site. Une sidebar trop chargée en texte ou en images peut amener plus de confusion qu’autre chose.

4. La page Article

Pour pas mal de personnes, réaliser le design d’un blog revient souvent à plancher sur la page d’accueil… si si, je vous assure !! Il ne faudrait tout de même pas négliger la page article qui correspond bien souvent au plus grand nombre de visites sur votre blog !

Ici, différents points à voir:

• Est-ce que vous souhaitez garder le même design que sur votre page d’accueil ? Il se pourrait que vous souhaitiez en avoir un légèrement différent… Bien penser à tout ça car l’intégration sera elle-aussi différente dans ce cas-là.
• Idem pour le contenu de la sidebar… Même contenu que sur la page d’accueil (si page d’accueil classique) ou alors voulez-vous vous concentrer sur le contenu même de l’article et donc ne proposer que des liens dans la sidebar qui pourraient DIRECTEMENT intéresser le visiteur ?
• Quel style pour les commentaires ? Ils ont une une très grande importance sur les blogs. Ceux sont eux qui créent les discussions. Il va donc falloir bien penser à leur ergonomie pour attirer les commentaires et qu’ils soient agréables à lire.

Sur cette page, hormis la sidebar, on va donc avoir deux grandes parties, l’article lui-même et les commentaires. Pour ce qui est de l’article, on va souvent reprendre les mêmes données que pour son affichage sur la page d’accueil, c’est-à-dire même police, même taille de police et tout ce qui concerne l’alignement.

Cependant, dès lors que l’on a une page d’accueil unique, de type “magazine” ou pas, on va devoir repenser entièrement cette nouvelle page. Et dans ces cas, souvent, on doit penser ici au confort de lecture que l’on a mentionné plus haut.

Ici, on va aussi se demander s’il ne serait pas intéressant de garder un peu plus longtemps notre cher visiteur….

4.1 Renforcer l’expérience visiteur

Et oui, comme on l’a déjà vu plusieurs fois, une grande partie des visites se font sur la page article de votre blog. Et même si le visiteur arrive sur votre page d’accueil, il y a de grandes chances qu’il se rende sur un de vos articles. Il va donc falloir travailler sur ce point pour garder, voir fidéliser ce visiteur. Pour cela, on va devoir se poser les questions suivantes:

• Que puis-je faire au niveau du contenu pour “attiser” le visiteur ?
• Ajouter un lien en bas de l’article pour l’inviter à s’abonner au blog ?
• Lui donner la possibilité de découvrir d’autres articles sur le même sujet ?
• Trouver la technique pour l’inviter à commenter ?
• D’ailleurs, à ce niveau-là, ne serait-il pas utile d’utiliser un plugin de notification par email pour permettre à ce visiteur de revenir facilement sur le blog et ainsi l’inviter à participer à la discussion ?

Il y a vraiment pas mal de techniques que l’on peut utiliser pour fidéliser ce visiteur, que ce soit dans l’article même, sous l’article, au niveau des commentaires, ou encore dans la sidebar.

4.2 Les commentaires

On vient d’en parler largement au dessus, mais il n’est pas inutile de rappeler ici l’importance des commentaires. Il va donc être primordial de donner envie au visiteur de laisser un commentaire ou tout au moins de lire ceux qui sont déjà présents sur le blog. Regardons d’un peu plus près l’ergonomie d’un commentaire. On peut avoir les infos suivantes:

• le nom du commentateur
• la date du commentaire
• le numéro du commentaire
• le contenu du commentaire
• la photo du commentateur…

Toutes ces infos sont à prendre en compte, mais plus important encore, il faudra les disposer dans le design. Donc, une fois de plus, n’hésitez pas à prendre votre carnet, et à faire des croquis pour penser las positionnement de chacun de ses points. Et par dessus tout , bien penser au confort de lecture. Suivre une discussion sur un blog n’est pas toujours aisée, veillez bien à ce que l’ensemble soit facilement lisible. Pas besoin de trop de fioritures !!

5. Conclusion

On pourrait passer des heures et des jours pour penser à tout. Ici, je n’ai pas mentionner les autres pages du blog par exemple, celles notamment des catégories, des archives ou la fameuse page d’”A Propos”. Mais je pense qu’avec tout ce qu’on a évoquer ci-dessus, vous avez suffisamment de cartes en main pour concevoir par vous-même ces différentes pages. Pensez toujours au visiteur, c’est lui le plus important. Pensez à son confort de lecture.

Donc voilà, maintenant, prenez le temps de penser votre blog via votre carnet de croquis. D’ailleurs, à ce niveau-là je ne peux que vous conseiller les célèbres Moleskine. Je les utilise depuis pas mal d’années pour mes illustrations et quelques peintures, et ce sont vraiment des outils indispensables !!

Dans la prochaine étape, on va prendre notre croquis et commencer à lui donner une forme sur Photoshop !!