Si vous venez de rejoindre ce billet sans en comprendre le but ni l'intérêt, je vous renvoie au premier billet. Sinon pour résumer ce qui s'est passé dans l'épisode précédent, nous avions recherché le but et l'enjeu du site sur lequel le design sera fait. Ces questions préliminaires nous permettront de mieux cibler les demandes, et agir en conséquence.

Maintenant, nous avons des petits éléments du design, sans pour autant connaitre la forme globale de l'interface. Je vais passer au croquis, mais vous remarquerez comme moi que débuter une ébauche, comme cela sur le vif, c'est assez compliqué. Un croquis nécessite de nombreux choix qui permettront d'affiner la structure du design. Ces choix, ils sont importants, et nous devons jamais perdre en vue l'objectif du site.

Que de questions, que de questions...

Quelques questions peuvent suffire pour tirer des conclusions qui nous permettront de dessiner un peu :

  • Quel est le contenu du site ?
    C'est une question très simple que nous avons là. Et je suis sur que vous savez autant que moi le but de cette question: un design pour un site marchand n'aura pas les mêmes priorités, ni les mêmes contraintes qu'un site portant sur l'actualité en temps réel, ou un simple blog. Dans mon cas, c'est un blog qui aura en premier lieu du contenu purement écrit, mais contiendra par moment (même souvent) du contenu imagé. Cependant, cela reste un blog, et de ce fait les billets ne seront pas aussi nombreux qu'un site consacré à l'actualité.
  • Allons-nous opter pour un design fixe (qui ne change pas si l'on modifie la résolution de la fenêtre), fluide (c'est-à-dire un design qui s'adapte à la taille de la fenêtre) ou ce que je pourrais appeler un design mixte (c'est en réalité plusieurs designs fixes qui s'enclenchent selon la taille de la fenêtre, du fixe qui s'adapte) ?
    Pour ma part, j'ai opté pour un design fluide. Le fait que le design peut garder sa forme quelque soit la résolution est notamment un avantage assez attirant, mais l'aspect graphique se trouve être légèrement limité... (Je suis assez discret sur ce point, puisque ce choix a induit de nombreuses complications, cependant, je les développerai pas sur ce billet.)
  • Que doit voir en premier lieu le visiteur quand il arrive sur le site ?
    Cette question est moins évidente, mais pose bien la question de la page d'accueil. Une majeure partie du temps, les visiteurs arrivent sur le site par cette page, elle est alors très importante, car elle doit réussir à convaincre l'utilisateur de rester sur le site, et de continuer sa visite. Ce serait dommage de limiter le design à une seule page. Dans mon cas, j'ai voulu mettre l'accent sur le contenu. Dès que le visiteur arrive, il a en face de lui, une description simple du site (en gros, c'est un blog), le regard devrait se porter sur le billet exposé en page d'accueil. Pour y parvenir, quelques couleurs (du rouge en l'occurrence) pour attirer l'attention vers la date (ce qui donne l'idée d'une mise à jour récente, et ainsi d'un site entretenue récemment), mais aussi vers les tags (ces mots clés sont très utilisés dans les plate-formes de blog, et juste cette section pourra confirmer la présence de différents billets).

Le contenu principal est encore mis en valeur par la position particulière du menu, celui-ci étant mis dans la partie dite "secondaire", en faisant ceci, j'ai tenté de signaler que je privilégierais des billets complets et un tant soit peu recherchés, que des simples brèves.

Quelque chose que je fais personnellement, est d'observer rapidement les galeries de sites web (vous en trouverez un peu partout sur internet avec une bonne recherche avec les mots clés "css showcase"), afin de s'imprégner des modes de présentation, et ainsi de tenter d'innover dans ce domaine. Mais je tiens aussi à donner une attention toute particulière à l'ergonomie des sites (de nombreux sites donne un aperçu très utile des bases), pour ne laisser l'utilisateur perdu dans cette foule d'informations, ce serait dérangeant, et on aurait là des visiteurs qui partiront du site quelques secondes après avoir chargé la page.

Une fois les outils en main, c'est beaucoup plus simple pour bricoler!

Maintenant, le design s'assemble dans notre petite tête, on peut passer au croquis et tenter des choses aussi loufoques que possible.
J'aurais voulu vous montrer les dessins que j'ai fais pour ce design, mais apparemment, je les ai déjà jetés, c'est assez étonnant puisque je pensais les avoir scannés, mais après de nombreuses recherches, je n'en vois pas la trace. Néanmoins, j'aurais l'occasion de vous montrer des croquis que j'ai fais pour d'autres designs dans des billets spécifiques.

Les premiers croquis sont là, et après quelques heures de travail, on arrive avec quelque chose qui répond plus ou moins à nos attentes, et nos contraintes. Dans mon cas précis, j'avais opté pour un design extensible, qui dit fluide, demande des parties extensibles. Bref, utilisons le temps du dessin pour déterminer les parties qui devraient être extensibles, et celles qui devront rester fixes.

Pour finir, vous vous posez peut-être la question du menu principal situé juste en dessous de la "bannière" (je n'apprécie pas vraiment ce mot), et bien pour vous expliquer, c'est simplement pour donner clairement l'idée que le site ne se limite pas à un simple blog composé de billets. Ne pas la mettre dans le menu du blog peut alors éviter de nombreuses confusions.

La structure est faite, et on peut maintenant appliquer les idées à ne pas manquer que l'on a répertorié dans notre premier billet. Les biseaux, les couleurs, le bois, avec quelques annotations, on imagine déjà notre design sur internet. Et pourtant, on est loin d'avoir terminé...

PS : Un gros Mea Culpa pour le manque de croquis pour cette partie peut être délicate à comprendre. Vous pensez peut-être que j'aurais pu faire des croquis après coup, mais ce serait un peu vous mentir, car le dessin a été bien avant que le design a été terminée, et les observations que je peux avoir aujourd'hui sur mon design risquerait de fausser les croquis.