Francis Chouquet Graphiste Lettering

Tutoriels Webdesign: réflexions autour de la conception d’un blog…

0

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.

Image-Tutos-Design

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 !!

47 Commentaires

  • Pas grand chose à dire. Un commentaire légèrement inutile, mais juste pour dire merci 🙂

  • Je ne pense pas qu’une « checklist » soit une bonne idée pour du webdesign. Personnellement, j’ai trop vu de formulaire avec des cases à cocher, ce qui limite énormément le choix et écrase totalement la créativité.
    La seule bonne chose à faire (à mon avis) c’est de se poser les bonnes questions sur le besoin réel que l’on a. Et selon ces besoin penser les solutions, on peut même faire l’inventaire de ce qui existe comme tu le fais ici, mais (je vais me répéter) je ne pense pas qu’il faille cocher des cases prédéfinie, du genre sur le nombre de colonnes, ceci n’est pas définissable avant de savoir ce que l’on va y mettre.
    Je pense aussi que si tous les webdesigner faisaient cet exercice, ils enlèveraient 20% d’information superflue de leur blog/site.
    Mais tout ceci n’est que mon avis…

  • Sylvain > Je suis assez d’accord avec toi. Cependant, ici je n’ai pas voulu donner une liste « définitive » de ce qu’il faut faire mais plutôt des axes de réflexion, entraîner cette réflexion. Et du coup faire une sorte de brainstorming.

    Maintenant, peut-être m’y suis-je mal pris, mais je me voyais mal faire autrement, avec un billet plus évasif. Ici, je n’essaie pas de toucher les webdesigners, mais plutôt et surtout les personnes qui ne savent pas comment s’y prendre pour faire un blog, et donc l’idée c’était juste de leurs donner des orientations.

    Par contre, je suis d’accord que ce n’est pas l’approche à avoir pour des webdesigners. En même temps, si un webdesigner de métier a besoin de ce genre de billet pour apprendre à faire le design d’un blog, c’est qu’il doit retourner à l’école le gars !! :mrgreen:

  • Pardon d’avoir réagis ainsi Francis, c’est vrai que c’était un peu déplacé.
    Le truc c’est que je suis exaspéré par le nombre d’agences web qui utilisent le procédé du formulaire avec cases à cocher avec des prix en face…
    Très souvent les besoins du client ne sont pas respectés et ils deviennent farouche envers les webdesigners :/
    C’est donc le mot « checklist » qui m’a fait tilter, veuillez m’en excuser 😉

  • Oh là !! T’as pas à t’excuser Sylvain !! T’as quand même le droit de venir dire ton sentiment ici sans problème !! Je suis pas du genre « modérateur fou » !! :mrgreen: Je comprends tout à fait ce que tu veux dire. Je suis d’accord pour le côté « checklist », c’était pas très inspiré !! 😉

  • Article intéressant, qui est également valable dans la réflexion de la personne qui crée un site. Ce n’est pas seulement une démarche de réflexion pour les bloggueurs. Je m’y retrouve aussi. Il faut effectivement considérer cet article comme un brainstorm avant exécution plutôt qu’une todolist (je ne fais que répetter mes prédécesseurs).
    Bonne continuation

  • J’en ai profité pour modifier le titre de l’article, que je trouve plus pertinent comme ça et qui, finalement, correspond mieux à ce que je voulais faire ressortir ! 😉 Merci en tout cas pour vos retours très constructifs

  • Encore un superbe billet que je m’en vais bookmarker … et vivement la prochaine étape sous Photoshop !!

  • Tiens, moi je me sers des themes dotkit, pour illustrer l’interface auprès d’amis, ou de clients : http://themes.dotaddict.org/galerie-dc1/tag/dotkit

    Bon billet ! 😉

  • Ulrich > très intéressant… Je me demande si je ne vais pas en proposer autour des tutos que j’ai fait auparavant… Je note !! 😉

  • Sympa cet article 🙂 j’ai hâte de voir la suite même si j’ai déjà commencer mon design personnalisé.

    Sinon ils sont bien les moleskines

  • Ulrich > Francis > j’allais proposer quelque chose dans le genre :-). Quand je commence un nouveau blog je pars souvent d’un modèle vierge WP comme le propose tomorrow’s laundry (www.tomorrows-laundry.com – Désolé le site est en rade en ce moment mais je pense que cela ne va pas tarder à reprendre). Le souci majeur reste que c’est tout fait en anglais mais cela reste très utile.

    Francis > Bravo pour l’article, je pense que tu mets bien l’emphase sur l’ « esprit du blog », à savoir, l’expérience générale de l’utilisateur.

  • J’ai hâte de voir le prochain tutoriel ! 🙂
    Merci ! ^^

  • baboonette

    Vivement la suite!!!
    Je suis intéressée par la création d’un wordpress dans le style horizontal dans le genre
    http://www.thehorizontalway.com/
    http://www.sockho.com/
    http://www.bluevertigo.com.ar/bluevertigo.ht
    comment on fait ???

  • Bonjour Francis,

    Merci à vous pour l’ensemble des tutoriels. Aussi, mon thème est presque réussi mais selon les navigateurs, le footer ne s’affiche pas correctement. Sur safari, tout est parfait. Enfin, il me manque dans la sidebar les flux rss et le calendrier comme l’imprim ecran montre qu’il s’afiche sur votre blog à cette phase. Enfin, où peut on accéder aux tutoriels sur photoshop,s’ils existent?
    Je vous remercie,

    Laurent

  • Bonjour Francis,

    j’avance plutôt très bien dans l’évolution de mon blog (d’ailleurs merci pour tes fichiers sources qui m’ont permis de corriger mes différentes erreurs de div et autres ul…)

    Désormais, j’en suis au design (à cet article en somme), et je ne trouve pas la suite.
    Existe-t-elle?

    Merci d’avance

  • Voila Mr Francis Chouquet, grâce a vous j’ai bien compris la logique de WordPress, vous trouvez ici mon travail en local:
    http://www.bac2univ.com/?p=278

  • NotAlame

    Bonjour…

    Avez vous une technique pour arrondire les coins sans images, uniquement du CSS???

    Merci!

  • Val

    Re Hello 😉

    Dis-moi tu as une suite de prévue sur ce tuto « Création du design avec Photoshop » ?
    J’imagine que tu dois être hyper booké … mais ça serait coolooo 😉
    Où alors, je n’ai pas vu la suite 🙁

    Merci
    @ +

  • Val > Oui, c’est prévu mais la vie en ce moment ne me permet pas d’y passer le temps que je voudrais… J’ai à peine le temps d’écrire sur le blog… Mais c’est le seul truc sur ma todo liste pour le blog… Réussir à faire ces « Put**** de tutos !! 😀

  • Val

    mdr !!!
    Bon t’inquiète 😉
    Je comprends que tu aies des priorités… et c’est tout à ton honneur de t’y tenir !
    Cela dit, en ce qui me concerne, j’ai encore de la marge avant de maîtriser WP et la création de thème…lol !
    Donc, no panic 😉
    Prends ton temps… Tu nous donnes déjà bcp !
    Biz
    @ +++

  • Myriade

    Salut!

    Je suis à la fois très impressionnée, reconnaissante et toute débobinée. Les tutoriels s’arrêtent ici. Je sais ce que c’est, le sentiment de débordement, on l’a tous et il faut effectivement savoir placer ses priorités aux bons endroits. Enfin, voilà donc mon humble commentaire sur mon envie de voir cette série de tutoriels se poursuivre. Le cursus de la partie design était tellement enthousiasmant!

    Un grand merci Fran6art!

    Myriade au Québec

  • je suis suspendue à tes lèvres !!!!! vivement la suite !!!! Et merci mille fois pour ce que tu as déja fait….

  • chino

    Merci pour ces tutoriels très pédagogique , j’attends la suite avec impatience!

  • still waiting … 😉

  • jo’

    Bonsoir,
    Bravo pour tous ces tutos. Ils sont vraiment géniaux.
    Je ne trouve pas la partie design… Est-elle déjà en ligne ?
    a+ !!

  • renorcht

    Merci beaucoup pour tout ces fameux tutoriaux car je suis fans de design et enfin je vais pourvoir les mettre en pratique.

    Vivement que tout les tutos soient bouclés.

    PS : En une petite journée j’ai avalé les 23 tutos 🙂

    Bon courage et merci d’avance pour les tutos qui vont sortir.

    Cordialement

  • renorcht

    Bonjour,
    un petit passage pour voir si un new tut’s était sorti car je les attends avec impatience.

    Bon courage et encore merci !!

  • renorcht > Ils sont toujours en cours de rédaction… mais c’est TRES TRES long… sûrement comme l’attente d’ailleurs !! 😛

  • renorcht

    Je me doute bien Françis, je préfère attendre et avoir de la qualité.

    Vous connaissez Divine ? C’est un plugin photoshop qui permet de convertir un .psd en template wordpress mais je ne l’ai pas testé…

    Quelqu’un l’a déjà essayé ?

  • Raph

    Salut Francis,
    juste un petit commentaire pour te dire un grand merci !
    23 pures tutoriels tellement passionnants qu’engloutis en trop peu de temps :D.
    En tout cas comme les autres j’attends la suite avec impatience et te souhaite vraiment un gros courage pour tout le taf que ça te demande !

    Thx 😉

  • Bonjour Francis,
    Un commentaire de plus pour te féliciter et te remercier pour tes tutoriels !
    Et bien sûr pour faire part de mon impatience de découvrir les suivants 🙂
    Merci encore,
    Paul

  • Magali

    Salut Francis !

    Un grans bravo pour ces tutos ! Ils sont très bien fait ! J’attends moi aussi la suite avec impatience ! As-tu une idée de la date de publication des prochains ?

  • Aliz

    Bonjour,

    Déjà un grand merci pour ces tutos qui sont incroyablement super !
    Je suis en stage actuellement et je dois créer un site sous wordpress donc cela m’aide énormément! =)

    Cependant il faut que j’intègre mon design Photoshop… et là cela ne va plus, on n’a besoin de ton aide! =)

    Un grand merci pour tout le reste! =)

  • la rumba

    mais ou est Fran6????????????
    et la suite avec photoshop???????
    GGGRRrRrRrRRrAaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    aidé moi les amigos please! 😉

  • Salut,

    je viens d’attaquer la création d’un thème pour mon blog via ce tutoriel.
    C’est vraiment très clair, un gros merci pour les heures que vous avez passer pour partager votre savoir.

  • KM

    Bonjour @ tous, et surtout félicitation à Fran6 pour tous ces tutos !
    Je crois que le problème vient du rythme que tu as imprimé aux premiers tutos… Tout le monde s’attendait à la même fréquence, mais je comprends bien que les opportunités de temps libre à consacrer à une telle entreprise ne sont pas uniformément réparties dans l’année et encore moins sur plusieurs années (je les ai découvert/compilé uniquement cette année :-).

    Donc Fran6 merci encore et prends ton temps, tu mérites bien que nous soyons un peu patients…

  • S.R.

    Salut Francis !

    Tout d’abord merci pour ces tutoriels très bien expliquer !

    Malheuresement, il manque bien un chose… La conception d’un header de navigation !

    J’ai beau essayé, je me retrouve avec beaucoup de difficultés pour arriver à afficher correctement les block à la suite et surtout pour les alignés sur les lien tel que Home et À propos…

    Enfin bref, Merci déjà pour ces tuto !

  • S.R. > Je vais bientôt modifier les tutos pour créer un menu de navigation horizontale avec menus déroulants, j’espère que ça vous sera utile ! 😉

  • S.R.

    J’ai finalement réussi à le faire ( beaucoup de recherches avec mon ami Google 🙂 )

    http://img708.imageshack.us/im.....aderoe.png

    Mais j’avais pas pensé au menu déroulant, cela pourrait être intéressant !

  • vaness

    Je suis ce tuto depuis le début, il est très utile, un grand merci 🙂

  • audrey

    Je viens de faire en deux jours tous les tuto pour la création du thème, il sétaient supers!! mais quand pourrait on avoir la suite pour photoshop??

    merci 🙂

  • Euh Francis la suite elle est ou s’il te pais ?
    :p

  • Julien

    Super suite de tutoriaux ! J’ai suivis les 26 et je les ai trouvé très bien fait avec les différentes étapes. Merci ! Je m’intéresse plus particulièrement à Buddypress et je pense que ça va vraiment m’aider pour la suite.

    La suite sous photoshop et pourquoi pas gimp 😉 aurait été un vrai plaisir également.

    Merci encore.

Success, your comment is awaiting moderation.