Boris Forconi — Webdesigner freelance à Nantes 

Voici le troi­sième vo­let des ar­ticles dé­taillant le making-of de mes nou­veaux ou­tils de com­mu­ni­ca­tion — sur le choix des couleurs, sur la genèse du logotype, sur la naissance de ce site et sur la mise en oeuvre technique. Je vais ici par­ler dans les grandes lignes des étapes qui ont faites de ce site ce que vous voyiez aujourd’hui, de mes ins­pi­ra­tions à la ma­quette fi­nale.

Ins­pi­ra­tion

Com­ment abor­der la créa­tion de son propre site sans par­ler de ses in­fluences ? Comme tout de­si­gner, un cer­tain nombre d’artistes, gra­phistes et de­si­gners ins­pirent mon tra­vail, plus ou moins im­pli­ci­te­ment. Je vais for­cé­ment en ou­blier ici, mais je vais tâ­cher de ci­ter les plus im­por­tants pour moi.

Et com­men­cer par les clas­siques — les règles du de­sign s’appliquent à In­ter­net comme à tout autre mé­dia, et cer­taines bases sont heu­reu­se­ment uni­ver­selles et in­tem­po­relles.

Ainsi, les écrits et tra­vaux d’Emil Ruder et de Josef Müller-brockmann ont pro­fon­dé­ment changé ma fa­çon d’aborder mon mé­tier, avec leurs en­sei­gne­ments sur ty­po­gra­phie et les sys­tèmes de grilles.

Plus ré­cem­ment, les livres d'Ellen Lupton sur la ty­po­gra­phie, de Kimberly Elam sur la géo­mé­trie, de 37signals & Luke Wroblewski sur l’ergonomie, et en­fin de Mark Boulton sur le web­de­sign en gé­né­ral m’ont aussi beau­coup ap­porté.

J’ai bien sûr des sites de ré­fé­rence. Je vais, heu­reu­se­ment pour vous, me li­mi­ter — avec dif­fi­culté — au chiffre de 7 : Wilson Miner, Kyle Meyer, Khoi Vinh, Dan Cederholm, Squared Eye, Shaun Inman et Oliver Reichenstein. Je vous in­vite à par­cou­rir mes favoris si vous avez soif de plus.

Ré­flexion ini­tiale

Comme tout pro­jet web que j’aborde, la pre­mière phase se passe loin d’un or­di­na­teur. Elle consiste à noir­cir des pages de sché­mas, de contenu et de ré­flexions. L’objectif ? Éta­blir une ar­chi­tec­ture des conte­nus, une ar­bo­res­cence, des prin­cipes de na­vi­ga­tion, une grille de struc­ture et en­fin — après quelques Kaizens —  un cro­quis pré­pa­ra­toire.

Ma­quette

À par­tir de ce cro­quis, je réa­lise une ma­quette image de la page d’accueil du site. Je pars en gé­né­ral de la grille struc­tu­relle ré­sul­tant de mes re­cherches (ici une grille clas­sique de 950px de large,) puis je po­si­tionne à échelle 1:1 les élé­ments, les tex­tures et les ty­po­gra­phies, telles qu’elles ap­pa­raî­tront sur le site. Je veille à bien uti­li­ser des conte­nus qui exis­te­ront, pour éva­luer le réel ordre de gran­deur des élé­ments. Je fais aussi bien at­ten­tion à an­ti­ci­per les be­soins tech­niques et les contraintes er­go­no­miques du site fi­nal (ré­so­lu­tions d’écran, sup­per­po­si­tions, choix des po­lices…)

Bien sûr, il y a for­cé­ment quelques amé­na­ge­ments par rap­port au cro­quis, mais je m’y tiens en gé­né­ral. Pour ce site, je vou­lais des règles struc­tu­relles strictes et éla­bo­rées. Je suis parti d’une struc­ture glo­bale à trois co­lonnes, en ap­pli­quant ici en­core les pro­por­tions du nombre d'or.

Après quelques cor­rec­tions et ajus­te­ments, j’aboutis à une image que je peux tes­ter dans un na­vi­ga­teur pour déjà res­sen­tir le rendu fi­nal. Je dé­cline en­suite les autres ga­ba­rits de page, en conser­vant la même grille de mise en forme et les mêmes codes vi­suels.

La suite — et fin — de cette sé­rie dans making-of — Borisforconi.net, sur la mise en oeuvre technique