En matière de webdesign, il est parfois difficile de conjuguer esthétisme et ergonomie. Difficile au point d’en arriver parfois à s’arracher les cheveux et de maudire jusqu’à son propre métier. C’est dans ce contexte que je vous propose de découvrir cinq conseils tirés de ma propre expérience. En espérant que cela vous soit utile, bien entendu…

Soignez votre structure

Il est toujours tentant de foncer tête baissée dans son Photoshop et de commencer à créer son template avant même d’avoir pris le soin d’y réfléchir posément. Parfois, pour peu que l’inspiration pointe le bout de son nez, ça peut marcher. Mais rarement. Car avant de créer, il faut déjà penser et savoir exactement ce vers quoi on se dirige.

C’est la raison pour laquelle il est toujours préférable de commencer par l’étape de la feuille de papier. Cela peut paraître un peu vieillot mais lorsque vous allez commencer à coucher la structure de votre site sur une simple feuille de papier A4, vous allez repérer immédiatement les zones, les calques, dont elle sera composée. Du coup, vous aurez une meilleure vue d’ensemble de votre projet et cela devrait même vous éviter de faire de trop grosses bourdes.

Anticiper le processus de création, c’est prendre de l’avance sur la réalisation de son projet. Car le plus difficile, lorsqu’on se trouve en pleine création, c’est de prendre du recul et d’examiner son travail de manière objective. Avec la feuille de papier, tout sera déjà déterminé et il ne vous restera ensuite plus qu’à définir la taille de vos différents calques.

Si vous soignez la structure de vos pages, alors vous gagnerez du temps sur la découpe et sur l’intégration HTML. Et on le sait bien, cette dernière étape est souvent la plus frustrante et la plus problématique, surtout si des erreurs ont été commises.

Aérez votre contenu

Le vide n’est pas un ennemi. Bien au contraire, il vous assure clarté et lisibilité, deux points qu’il faut toujours avoir à l’esprit lorsqu’on fait de la création web. Si vos paragraphes sont trop chargés, trop massifs, alors personne ne les lira. Bien au contraire, si vous espacez correctement vos informations, alors votre contenu sera mis en valeur et le visiteur aura envie de vous lire.

Trois aspects peuvent être pris en compte pour aérer votre contenu :

• Les paragraphes : ils sont là pour structurer votre texte et mettre en évidence vos différents arguments. C’est leur métier et ils le font bien, mais ils le font encore mieux lorsqu’on prend la peine de les espacer un peu plus, ou un peu moins, qu’ils ne le sont déjà. Et ça tombe bien, parce que les CSS vous permettront de le faire en quelques clics.

• Le Padding : si vous avez besoin d’aérer vos pages, alors le padding est votre ami. Mettre de l’espace entre votre texte et les autres éléments de votre page est un minimum. En effet, il faut toujours être dans l’optique de soulager l’oeil de vos visiteurs. Ne leur en imposez pas trop, chouchoutez les, vous êtes là pour ça.

• Le vide : l’absence de contenu peut mettre en valeur votre contenu. Cela peut sembler paradoxal mais il ne faut jamais avoir peur de jouer sur le vide. Là encore, il faut raisonner en terme de contraste. Si vos pages sont surchargées, alors le contenu que vous diffusez sera noyé dans la masse. Bien au contraire, si elles sont épurées, claires, nettes, votre texte n’en ressortira que davantage. Il est toujours nécessaire de jouer sur les nuances.

Guidez vos visiteurs

Qu’on se le dise, l’internaute moyen n’aime pas chercher, il n’aime pas non plus réfléchir et c’est la raison pour laquelle vous devez lui faciliter le travail. Pour quelle raison ? C’est très simple, lire sur un écran, ce n’est pas confortable et ça ne le sera jamais. Alors si vos visiteurs doivent en plus se creuser la cervelle pour parvenir à naviguer au sein de vos pages, vous pouvez être certain qu’ils iront voir ailleurs.

C’est la raison pour laquelle il est nécessaire d’apporter le plus grand soin à son système de navigation. Vos menus doivent ressortir de votre page, être mis en évidence. Là encore, il faut aller droit à l’essentiel. Libre à vous de chercher à innover, à vous démarquer de la concurrence mais si vous faites ce choix, alors assurez-vous de mettre en place un système intuitif et ergonomique.

Là aussi, la meilleure solution reste de jouer sur les nuances. Les couleurs de votre site sont plutôt claires ? Alors ça veut dire que votre menu devra être un poil plus sombre. Juste pour qu’il ressorte du reste de votre page et qu’il attire l’oeil de vos visiteurs. Quand on fait du web, il faut bien se mettre en tête que nos visiteurs ne seront pas tous des internautes avertis, des professionnels du milieu. Il faut donc se mettre à leur place. C’est parfois difficile mais si vous n’y arrivez pas, alors vous pouvez toujours demander à vos parents ou à vos grands-parents de vous dire ce qu’ils en pensent ^^

Soignez la typographie

Une fois de plus, assurez-vous de faciliter la vie de vos visiteurs. Le choix de la typographie n’est pas à prendre à la légère puisque c’est elle qui va déterminer une partie de l’ambiance générale de votre site. Habituellement, il est donc conseillé d’opter pour une typographie sans serif qui s’avère beaucoup plus sobre, beaucoup plus claire et donc qui convient mieux à la lecture sur un écran. Cependant, d’autres paramètres sont également à prendre en compte :

• La taille : le texte n’est pas fait pour être vu, mais pour être lu. Et c’est la raison pour laquelle il ne faut pas avoir peur de trop en faire. Aujourd’hui, descendre en dessous d’une taille de 0.71em est totalement suicidaire. Votre but, ce n’est pas de rendre vos visiteurs aveugles, bien au contraire.

• La longueur de vos lignes : là aussi, il vaut mieux ne pas trop en faire. Plus votre zone de texte sera longue (ou large, c’est selon), plus vos visiteurs devront bouger leurs yeux de gauche à droite. S’en suivra une bonne vieille fatigue oculaire, ce qui les conduira naturellement à quitter votre site. Optez donc pour des zones de texte plutôt étroites. Les colonnes sont vos amies.

• La couleur : si vous avez lu ce billet en entier jusqu’ici, alors vous savez déjà que le contraste est une notion qu’il faut toujours avoir à l’esprit quand on décide de faire du design. Et bien pour la couleur de votre texte, c’est la même chose. Alors par pitié, du texte noir sur un fond rouge, il faut oublier…

• L’alignement : la plupart du temps, il vous faudra justifier votre texte afin de mieux le présenter. Sauf que dans certains cas (assez rares heureusement), cela aura pour effet d’espacer un peu trop vos mots. Si tel est le cas, il ne faut pas hésiter et revenir à un alignement sur la gauche. Ce sera moins joli, certes, mais beaucoup plus lisible.

Soyez clair avec vous-même

Après quatre ou cinq nuits blanches (à éviter), vous avez enfin fini le nouveau design de votre site. Vous êtes donc super contents, vous sabrez le champagne et décidez de dormir un coup histoire de récupérer. Manque de pot, lorsque vous vous réveillez 16 heures plus tard et que vous constatez la présence de quelques bugs plutôt gênants, vous êtes incapables de vous y retrouver dans votre code.

Alors bien sûr, c’est très romancé mais le sens est là. Quand on code comme un porc et qu’on doit ensuite repasser derrière après quelques semaines, je vous assure que ce n’est pas facile. Ça l’est d’ailleurs encore moins quand on passe derrière quelqu’un d’autre. Enfin passons, toujours est-il que c’est la raison pour laquelle vous devez vous faciliter les choses. Ca tombe bien parce qu’il existe des solutions :

• Annotez votre code : un code structuré et annoté, c’est un code facile à modifier. Vous n’êtes ni un génie, ni un surhomme et il vous est impossible de mémoriser des milliers de lignes de code. Enfin en tout cas, si vous y parvenez, c’est tant mieux mais la plupart des gens en sont incapables. N’hésitez donc pas à annoter vos éléments et à vous laisser des indices histoire de vous y retrouver par la suite.

• Organisez votre arborescence : un site, c’est avant tout un ensemble de fichiers et de répertoires qu’on raccroche les uns aux autres. Et forcément, quand on est ni ordonné, ni rigoureux, cela peut très vite tourner mal. C’est la raison pour laquelle il est nécessaire d’organiser au mieux son arborescence. N’ayez pas peur de créer des dossiers pour vos javascript, pour vos images ou pour vos CSS. Ca peut prendre du temps mais vous le rentabiliserez très vite sur la durée.

• Soignez vos CSS : avec les CSS, on peut tout faire et on peut même les nommer comme on en a envie. Et le risque, justement, c’est de faire n’importe quoi. Définissez une nomenclature précise qui vous permettra ensuite de savoir précisément où se trouve quoi. De la même manière, regroupez vos CSS selon leur champ d’application.

• Mettez les éléments récurrents à part : les pages de la Fredzone comportent des zones récurrentes. C’est ainsi le cas du logo, du menu de droite ou encore du pied de page. Plutôt que d’inclure ces différents éléments dans chaque page du blog, j’ai préféré les dissocier du reste de la structure. Le menu de droite se trouve par exemple dans un fichier à part, ce qui me facilite la vie quand je suis amené à le modifier. Du coup c’est beaucoup plus fluide et on a pas besoin de repasser dans les x pages du site pour modifier un seul élément.

Voilà, donc forcément la liste n’est pas exhaustive et nombre d’astuces n’ont pas été évoquées dans ce billet (c’est aussi à vous de bosser, hein ^^). Quoi qu’il en soit, ces conseils sont le fruit d’une longue expérimentation et vous aideront sans doute à mieux structurer vos pages. En tout cas, je l’espère… Et si vous avez vous-mêmes des remarques, des idées, des conseils à partager, je vous invite à les indiquer dans les commentaires.