Was ? What ? Les chroniques d'un design ne vous rappellent rien ? C'est un en fait une série de billets consacrés à l'organisation et à la conception d'un design. Pour rattraper les épisodes ratés, voici le lien, garantis sans DRM et totalement gratuit!

Bon, faisons un point à mi-parcours des chroniques : l'idée est faite et est exploitée, les croquis concernant l'allure générale, ainsi que le contenu de chaque page est également esquissé. Passons à l'acte, nous allons commencer à travailler sérieusement si je puis dire. Ce billet va se révéler très personnel, et vous aurez tous votre propre démarche, mais je trouve qu'il peut être intéressant de se comparer les manières de faire le design pour s'améliorer. Néanmoins, je mettrais l'accent en particularité sur quelques points qu'ils seraient utile d'insister.

Des logiciels ?

Je travaille sur Illustrator, et non pas sur Photoshop. Illustrator est un outil de dessin vectoriel, les possibilités sont différentes, mais toujours aussi infinies. Dans la même catégorie, vous pourrez trouver des logiciels libres comme Inkscape. J'ai choisi ce type de dessin, tout simplement car je suis particulièrement à l'aise avec la plume, de plus, ce domaine est aujourd'hui peu mis en valeur face au ténor Photoshop. Il faut savoir que toutes les figures faites sur ce type de logiciel peuvent être redimensionnées à souhait sans perdre de qualité, c'est peut-être un avantage, mais pas si important que cela.

J'ai également la particularité de créer de très nombreux calques, pour le blog par exemple, le fichier .ai (l'équivalent du .svg) contient près de 70 calques. Quelque soit le logiciel utilisé, cette solution peut être très utile et peut éviter de nombreux problèmes, mais elle peut alourdir considérablement le fichier. Pour ma part, je préfère travailler sur un fichier unique, sur lequel je trace directement toutes les formes de mon site web.

Ma démarche

1- Fond2 - Corps3 - Header4 - Menu5 - Contenu principal6 - Partie secondaire7 - Partie secondaire

  1. Je commence par le fond, c'est un simple dégradé, sur lequel je positionne différents rectangles un peu plus foncée, de sorte à créer une ambiance amicale, tel un papier peint dans une chambre.
  2. Le corps est également assez simple, on peut alors distinguer trois parties distincte : la partie principale dans lequel on verra le contenu, la partie secondaire, et le footer. Des dégradés sont également positionnés de sorte de donner un sentiment de progression.
  3. J'ai l'habitude de commencer par le header, qui se trouve être assez sombre, pour focaliser l'attention sur le nom du blog (qui reste clair). Vous pouvez également remarquer à la bordure du bas, qu'il existe un motif apparenté à la construction, ce qui permet de donner l'idée d'une possible évolution, mais aussi pour indiquer que rien n'est encore terminé.
  4. Je m'occupe ensuite du menu, et de la description des grandes parties. Vous pourrez remarquez que le menu est incrusté dans une texture de bois, elle même dans une forme assez étrange. Ceci s'explique par la volonté d'attirer le regard vers ces angles orignaux peu présents dans ce monde de rectangle. On retrouve encore ce motif de construction pour la même raison.
  5. Ensuite, passons au contenu principal. Du très classique, vous remarquerez la présence de biseaux graphiques (peut-être même trop) qui tend à soutenir l'idée générale de l'évolution. Les vis fixées sur le titre renforce cette idée de construction encore une fois.
  6. Passons au menu qui se trouve dans la partie secondaire. Tout repose sur la même charte graphique, les biseaux, les vis, le bois, tout cela dans un socle mis en valeur par l'ombre portée. J'ai voulu par cela mettre en valeur l'aspect "carnet de navigation" en le mettant en retrait, tout en insistant sur son côté "touche à tout". Il n'est pas coupé du contenu, puisqu'il garde une couleur assez claire, mais reste en contact avec la partie secondaire, du fait de sa position.
  7. Enfin, retrouvons à présent la partie secondaire. Elle est assez simple, elle contiendra soit des extraits de billets, soit les commentaires des visiteurs. Par contraste, elle est de couleur assez foncée comme pour créer une limite avec le contenu principal.
  8. Quand au footer, il reste assez simple, et garde simplement le style graphique utilisé tout au long de la page.

Le résultat, vous l'avez devant vos yeux, mais avant tout cela, l'allure était vraiment différente. Voici le premier croquis du design, vous remarquerez que les grandes parties étaient là, mais la lisibilité n'était pas au rendez vous...

D'ébauche en débauche

Un conseil, avant de passer directement au codage, n'hésitez pas à recevoir des critiques, aussi nombreuses qu'elles soient, elles peuvent vous aider à rendre un design agréable, et vous éviter à passer des heures inutiles sur le codage si la forme même était à revoir. Préférer les personnes assez pointilleuses dans le cas de critiques, car ces dernières sont souvent sont celles qui peuvent vous permettre à rendre votre design agréable à l'oeil, même pour les plus difficiles.

Quelques conseils bien utiles

Je vous donne quelques conseils pour parvenir à finir le design, car même si c'est, pour ma part, le moment l'un de tous meilleurs moments lors de la conception d'un design, c'est aussi l'un des plus durs, car c'est jamais simple de commencer un design qui nous occupera de nombreuses nuits.

  • Prenez votre temps, n'hésitez pas à faire des pauses.
    Un design ne se fait la plupart du temps pas en quelques minutes, il faut compter des heures, partant de l'idée pour parvenir à la finalisation du projet. Le meilleur moyen c'est de prendre son temps, alterner les périodes de design par des jeux vidéos, ou de la lecture, voire du travail scolaire. De plus, quand vous n'arrivez pas à trouver l'idée qui vous manque, ne vous acharnez pas dessus, passez, faites une pause, et revenez-y, quelques fois vous allez même trouver la solution en faisant autre chose.
  • Notez tous sur papier, soyez organisés
    Le design demande beaucoup de notes écrites, personnellement, j'aime bien me prendre un petit paquet de brouillons (pensons à l'écologie pendant que nous sommes des designers amateurs) sur lequel je note toutes mes idées, et tout ce qui pourrait être utile pour le site. Bref, être organisé, c'est voir le début du tunnel plus rapidement.
  • Les règles les plus basiques sont les plus difficiles
    Quelques règles simples doivent être respectés sur un design, et c'est certainement ces contraintes là qui sont les plus importantes. Le visiteur est roi, et tout doit être fait pour pour que le contenu (qui est roi également) lui soit accessible le plus facilement possible. Par cela, il faut penser à la lisibilité, et à l'ergonomie.
  • C'est souvent la fin qui prend du temps...
    La plupart du temps, la conception du design prend beaucoup de temps, lorsque vous voyez le bout du tunnel, c'est toujours plus difficile, car vous avez en tête les finalisations à faire, et le codage à commencer. A ce moment, il faut prendre votre courage à deux mains, voire même faire une pause de quelques jours pour se remettre plus tard dans le bain.

Ces quelques conseils peuvent vous paraitre assez simples à mettre en oeuvre, mais par expérience, c'est toujours utile de le préciser.

Oui, nous sommes presque arrivés, le design est là, et il ne manque plus que le développement. Mais le développement, ça pourrait dire IE 6, et alors débuggage intensif ? Le tunnel me parait bien long...