Francis Chouquet Graphiste Lettering

Tutoriels Webdesign: Une checklist pour concevoir votre blog – 1ère partie

0

Désolé si les tutoriels en vue de la création d’un thème avec Photoshop mettent du temps à venir, mais ils demandent beaucoup de temps de réflexion et de rédaction et en ce moment, je suis vraiment très pris. Je vais essayer de faire un peu plus rapide sur les prochains, mais je ne peux rien vous promettre ! 😉

Plus je travaille pour le web et plus je trouve que le croquis est important. On ne s’en rend pas toujours bien compte quand on veut créer un simple blog parce que, finalement, le layout reste souvent assez classique et on va reprendre un schéma « traditionnel » pour ce genre de site web. Si c’est ce que l’on recherche, effectivement, l’intérêt du croquis est limité. Par contre, si vous souhaitez créer un design original, un peu comme les thèmes de type « magazine » que l’on voit fleurir ces derniers temps, alors là, le passage par le papier/crayon est primordial.

Sketch Highlight

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. 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 ? 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.

Dans la deuxième partie, on va s’attarder sur la ou les sidebars et notamment la page article. Et celui-là, je vous promets qu’il va arriver plus rapidement que les autres ! 😉

PS: la photo utilisée un peu plus haut est tirée d’un article de Ryan Imel, de Theme Playground, qui explique les premières étapes de création d’un de ses thèmes pour WordPress.

19 Commentaires

  • Bon article !
    Il y a quelques questions que je ne m’étais pas posées, je vais en profiter pour complèter ma maquette.
    Quelle est la différence entre une police Serif et San Serif ?

  • Merci Romain,

    Serif ce sont les polices avec des courbures aux extrémités, du style de Times par exemple. Et les Sans Serif, ce sont celles qui n’en ont pas comme Arial ou Helvetica pour ne citer qu’elles…

  • starkhay

    J’en suis exactement à ce point.
    J’ai les réponses à toutes ces questions mais voilà, j’ai beau être plein d’intentions et ne pas avoir trop de difficultés avec le codinge, il n’en reste pas moins qu’avoir une certaine capacité, sensibilité devrais-je dire, artistique aide beaucoup pour finaliser son projet.

  • Voilà un article qui tombe à pique !

  • Salut,
    j’étais justement en train de réorienter ma « carrière », et créer un site représentant au mieux mon travail actuel et mon identité est une entreprise assez passionnante.
    J’avoue avoir navigué sur des dizaines (centaines?) de sites (de blogging tips problogging wpdesigner webdesignerwall etc etc etc), on croule sous les informations, mais c’est un plaisir d’avoir les vues d’un français sur la question.
    Et justement, penses-tu que les différences culturelles aient une grande influence sur la manière de designer un site, car cette liberté est toujours limitée par la nécessité de conserver une structure commune, compréhensible et, finalement, internationale?
    (J’essaie de relire ma question, elle me parait torturée tout de même)

  • Ange > Je ne suis pas sûr qu’il y ait une uniformité entre les sites de « cultures » différentes. Ce que j’ai pu remarquer ce sont les mêmes tendances que dans le graphisme ou le monde du design en général. Des pays comme la Grande Bretagne sont très en avance, d’un point de vue graphique des sites web. Ils sont globalement plus évolués et les agences font du très bon travail. Ensuite, je trouve qu’énormément de designers n’apportent pas grand chose de nouveau et finalement si on ne regarde que les thèmes créés par WordPress, bien souvent conçus par des américains, indiens ou encore indonésiens, pour l’ensemble, la qualité graphique est assez basse. On retrouve environ un thème sympa pour 30 thèmes moches. Donc, il n’y a pas forcément, selon moi, une différence culturelle pour l’ergonomie, mais certaines avancées selon certains pays qui ont une culture graphique plus évoluée…

    J’espère que ma réponse n’aura pas été torturée non plus !! 😉

  • Merci 🙂 Informations très intéressantes.
    Mon but n’est pas de devenir designer (chacun son métier, ça ne s’improvise pas) mais j’aimerais que mes rares travaux en ce sens (portfolio + sites pour quelques clients + projets) aient un réel intérêt.
    Je me demande s’il est nécessaire pour un (travail de) graphiste de connaître les différentes tendances et de se familiariser avec elles, ou s’il vaut plutôt mieux valoriser un background complètement différent (mon cas personnel) afin de pouvoir proposer, peut-être, quelque chose de nouveau. Entretenir son ignorance pour préserver une certaine « fraîcheur » en somme, mais faire en sorte que cette fraîcheur ne se limite pas à de l’amateurisme…

  • Ange > Pas facile comme réflexion. Ca a été un peu mon crédo pour la peinture, et la solution que j’avais trouvé et que je réutilise pour le graphisme, c’est: découvrir, être curieux, s’intéresser à tout et réutiliser l’ensemble pour trouver sa propre voie. Par contre, au début, ce n’est pas toujours évident, sauf si tu as une bonne dose de créativité, auquel cas, tu vas avancer plus vite. Mais bien souvent, dans l’art, que ce soit plastique, appliqué ou encore culinaire, on commence toujours par des bases connues et éprouvées et c’est par cette expérience que l’on va découvrir ses propres tendances, ses propres oeuvres.

    L’ignorance, c’est très difficile d’y rester car de toute façon, quelque soit l’art que tu pratiques, tu vas toujours avoir besoin de compétences techniques. Tu as besoin de ces bases. Un minimum en tout cas. C’est ce qui va te permettre de t’exprimer et d’avancer sur ton propre chemin.

    Donc, en gros, on se nourrit de ce qui existe pour activer notre créativité et notre imagination… En tout cas, c’est ce que je pense… 😉

  • Je suis d’accord avec toi.
    Disons que dans mon activité (peintre, illustrateur) je n’ai aucun doute concernant la marche à suivre, celle qui me permet de me réaliser et de m’épanouir, et c’est la même que tu décris là. Je vis/ai vécu au Japon (entre autres) et l’ouverture est primordiale, si l’on prend bien soin d’oublier de se détacher de tous ces enseignements un jour. Je voulais savoir si cela s’appliquait au graphisme/webdesign qui n’est pas de mon domaine, et ta réponse ne laisse aucun doute à ce sujet. J’ai beaucoup surfé, tutoriaux(als?els?) etc… mais je pense arrêter et me concentrer sur ma feuille et mon crayon car ça commence à devenir « trop ».
    J’espère que mon prochain thème (le 2ème) me permettra de retranscrire ces envies.
    Merci bien pour la discussion (tes peintures sont intéressantes) 🙂

  • Salut,
    Bravo et merci pour les 23 tutos de creation de blog… simple, ca va à l’essentiel ! ca change 🙂 je les ai tous fait en une après-midi et je me sens déjà plus à l’aise pour me lancer et créer mon thème.
    J’ai vraiment hate de voir la suite des tuto photoshop. En tout cas ca commence bien et je suis deja sur mon croquis… mois qui ai l’habitude de lancer photoshop avant meme de savoir ce que je veux faire ca va m’obliger à poser un peu ma réflexion sur comment je souhaite présenter les infos de mon blog.
    J’ai décidé de faire un blog à la place de mon site (bidouillé à la va vite et donc un peu riblon…).
    Merci pour tous ces conseils.

  • hd-J

    Encore un article intéressant sur Fran6art… C’est vrai que toutes ces questions sont importantes, qu’il faut se les poser, mais mon probleme a moi reside plutot dans la faisaibilité de la chose… Pour ne prendre qu’un exemple, j’aimerais utiliser WordPress comme portfolio seulement, et donc moins pour l’utilisation blog a laquelle il est prédestiné. Au départ, lorsque je me suis posé toutes ces questions, j’ai choisi d’avoir une largeur ET une hauteur fixe, en faisant dont tenir tout le blog dans le cadre du browser sans avoir a scroller. Maintenant que j’en suis arrivé a la fin de la phase de realisation sur Photoshop, je me heurte a un probleme : cetee hauteur fixe, je ne sais pas comment la réaliser dans le code !
    Alors je rajouterai donc une ligne a cette article… Il faut bien penser a ce qu’on veut, MAIS aussi a ce qui sera realisable…

    Maintenant, il y a surement un moyen d’avoir WordPress qui tiendrait sur une seule page… Mais je n’ai pas encore trouvé de theme qui fonctionne comme cela… Des idées des bloggeurs ici peut etre ? 🙂

  • hd-j > remarque très intéressante… C’est sûr que tout n’est pas réalisable mais je pense qu’il est toujours important de commencer en laissant son imagination s’exprimer. Partir d’un idéal pour revenir à quelque chose de plus en phase avec la technique. Maintenant, il y a vraiment beaucoup de manières de trouver le petit truc qui te permettra d’être le plus proche possible de ce que tu veux…

    Et sinon, pour ce qui est de ton portfolio, j’en viendrai à te poser cette question: as-tu besoin d’une plateforme de blog ? Pourquoi ne pas faire un site HTML classique ?

  • hd-J

    Utiliser une plateforme Blog me semblait plus simple au départ… Oui, je sais, je suis un peu fainéant… Mais je connais bien WordPress, et vu le nombre des plugins qui peuvent venir s’y ajouter, cela me semblait une bonne idée au départ.. Mais tu as raison, je vais surement me pencher vers un site HTML au final, n’arrivant pas trouver d’exemple ou de tutorial pour avoir ma galerie photo sous WordPress avec le plugin Nextgen gallery, mais dans une hauteur fixe… Tant pis !

  • hd-J > je ne sais pas si ca peut t’aider, mais j’ai ajouté le plugin fgallery à mon blog (qu’est pas encore en ligne !) et la galerie s’intègre parfaitement. Seul petit hic pour l’instant c’est que tous les albums s’affichent sur une seule page, et comme j’en ai pas mal ca met du temps a charger. Mais bon c deja ca. Autre petit hic c’est l’impossiblité de gérer des sous-albums… dommage.
    en attendant voila le lien si ca peut te servir : http://www.fahlstad.se/wp-plugins/fgallery/

  • hd-J

    Merci a toi Charles, je vasi y jeter un oeil ! 😉

  • Bonjour,
    Bon article, mais vous devriez proposer un exemple de template à télécharger pour réaliser son blog à volonté, nous attendons de vous non seulement un cours sur la création des blogs, mais également des templates disponibles.
    Sinon bon courage

  • merci pour ce tuto

Success, your comment is awaiting moderation.