cbsch.net

Il s'agira donc de mon troisième template pour cbsch.net. Pour ne pas dévier de mes anciennes habitudes, il s'agit d'une maquette très proche de l'actuelle. Seuls quelques éléments vont radicalement changer dont, sans doute, le "look and feel" de la barre de navigation. Pour le reste: une épuration drastique de tous les éléments, une découpe plus nette et propre, des éléments très sobres et légers, une colorimétrie trichromique scrupuleuse et, surtout, un ajustement de tout le template sur un grid design soigné et méthodique. C'est après une documentation de longue haleine et des essais à large échelle que je me résigne à employer un grid design basé sur le rapport 1:5 (un rapport logique, donc). Pourquoi "s'y résigner"? J'ai longtemps hésité à revoir ma copie, et à passer à la très tentante suite de Fibonacci ou au nombre d'or pour élaborer ce nouveau template. Toutefois, dans mon esprit, les rapports irrationnels sont plus adaptés à des designs élaborés, soignés, voire alambiqués. Or, cette fois, je désirais vraiment aller vers la plus grande simplicité, tout en soignant un brin les contrastes "problématiques".

Principes d'ergonomie.

C'est devenu, au fil du temps, ma première préoccupation: pas trop de menus encombrés, peu d'informations, mais les bonnes informations et, si possible, au bon endroit. Bref. Cela, par rapport au template précédent, ne changera guère. Je ne vais pas revoir la copie du document servant de support à ma CSS deuxième version. Je n'ai donc pas trop retouché les menus: la seule "valeur ajoutée" vient d'icônes de navigation (un futur article à ce propos, peut-être?). Comme je suis très penché sur le fait-maison, ben, j'ai mis mes mains dans le cambouis, ai sorti ma toute nouvelle tablette graphique et m'y suis mis.

Sobriété et simplicité: et les couleurs furent.

Je voulais à tout prix faire quelque chose avec une très bonne tenue, très sobre, très léché et sans lourdeur. J'ai donc décidé de tout miser sur une couleur principale et une couleur de contraste, les deux en alternance avec le blanc pur. Pour ma première couleur, je suis parti du même Pantone (Pantone 285 C) que j'avais déjà employé par le passé (cette couleur devenant, au fil du temps, la base de l'espèce de "charte graphique" pour mes documents personnels). En passant, pourquoi un Pantone pour un site web? Simplement pour faciliter l'impression de cartes de vœux et d'autres documents personnels devant l'employer. Ce n'est pas le choix d'un homme pointilleux (quoique…) mais surtout d'un designer paresseux: j'ai ainsi une base pour l'ensemble de mes documents, tant pour l'impression que pour la production web. Mais passons. Afin de déterminer les bleus intermédiaires (ceux des dégradés, notamment, de certains éléments de titre et du pattern de fond de page), j'ai dégradé celui de base (R9, G94, B220) à 50% pour un bleu intermédiaire, et à 10% pour le bleu très clair, qui sera rarement employé. Ensuite, j'ai simplement inversé ma couleur de base et ai obtenu un splendide orange (Pantone 1375C ou R255, G161, B45). Les couleurs actuelles sont donc les suivantes:

Le choix de la grille: le choix crucial.

C'est le moment le plus tendu: le choix de la grille servant de référence. Après avoir fait de nombreux essais (dont je ne peux malheureusement pas fournir les URL pour des raisons de secret professionnel), j'ai choisi une grille avec un rapport vertical de 1:5 et horizontal de 1:3. Elle est donc composée de cellules de 50 pixels sur 50 pixels. Mon bandeau de titre ferait ainsi 150 pixels de hauteur (3 x 150) sur… sur combien déjà? Oui, le choix d'une grille, c'est bien beau, mais avant ça, est-ce que j'allais faire un template en unités fixes ou relatives? Au niveau de la hauteur des éléments, bien malheureusement, ce sera fixe. Non pas que ce soit difficile techniquement parlant d'en faire un en unités relatives (surtout pour un design aussi épuré que celui que je conçois), mais afin de ne pas trop prendre de risques pour l'affichage des éléments purement graphiques (dont fait partie le bandeau): mieux valait ne pas risquer de trop grandes disproportions entre l'affichage du site sur un écran 30" et un autre avec une résolution nettement inférieure. Par contre, pour le contenu, je désire garder les unités relatives, mais de manière un peu plus limitée qu'auparavant. Mais plutôt que de répercuter ce choix sur les CSS seulement, j'ai donc pensé à garder un design très uniforme, en employant partout des motifs horizontaux. Afin de conserver une tenue à mon site, j'ai ajouté un motif de fond composé d'une ligne horizontale bleu clair placée tous les 5 pixels (ah, proportions, toujours les proportions!). J'ai retouché la découpe de plume sur la droite du bandeau de titre, ai supprimé les arrondis et… Bref. J'ai tout re-dessiné. Pour finir, afin de rompre avec l'allure trop stricte du tout, j'ai ajouté une découpe de plume en fond de menu, sur la droite, en employant pour cela un orange intermédiaire. Après mise en place des différents éléments, voilà donc ce que le template de base donne (avec la grille):

Et, sans la grille:

Et voilà… Pour le moment, j'en suis (à peu près) là. La suite tout soudain!