Webdesign : Les principales étapes de création d'un template

Définition

Un template est un gabarit, un patron de mise en page qui définit l'aspect graphique d'un site Internet. Cela s'apparente simplement à un imprime écran d'un site existant mais avec une grande partie de faux textes. Un template est généralement composé de deux éléments, une maquette de la page d'accueil du site ainsi que d'une page de contenu type.

Composition conseillée, fonctionnelle et la plus utilisée dans les templates actuels standards :

Schema template

1 : Header ou Bandeau

Il ne doit pas être d'une hauteur trop importante pour laisser visible au maximum le reste de la page sans que l'internaute soit obligé de descendre dans la page à l'aide de l'ascenseur. Ainsi en arrivant sur la page, l'internaute a directement sous les yeux toutes les informations importantes.

Dans le bandeau, il faut essayer d'y faire figurer :

le logo de l'entreprise : le mettre en valeur au maximum sans pour autant exagérer sa taille

un slogan : le slogan doit définir au maximum l'activité de l'entreprise tout en étant vendeur. Il est très important car c'est la première chose que va lire l'internaute, le slogan doit donc être évocateur et persuasif.

un visuel : celui-ci aussi est très important. C'est lui qui va donner le ton à l'ensemble du template. Le visuel peut être abstrait ou figuratif, quoique dans la plupart des cas il est conseillé d'avoir un visuel illustrant l'entreprise mais en restant un peu vague. C'est lui qui va donner le véritable aspect professionnel au template. Un mauvais visuel gâchera l'ensemble du template. Le meilleur site pour trouver des visuels professionnels est incontestablement fotolia. Les images y sont très abordables, généralement entre 1 et 3€.

Le moyen de contacter l'entreprise : souvent le numéro de téléphone est mis en valeur.

2 : Le menu principal

Le menu principal est quelquefois placé au-dessus du bandeau. Je vous le déconseil fortement pour des raisons d'ergonomie. Lorsque qu'une page est un peu longue, si le menu est trop en hauteur, l'internaute devra remonter beaucoup plus la page pour y accéder, ce qui n'est pas ergonomique. Lorsque vous réalisez le menu, pensez à y faire figurer les trois états principaux des liens : le lien non survolé, le lien au survol et le lien actif. Si certains états sont les mêmes, pensez à le préciser. Il faut également éviter les titres de rubriques à rallonge dans le menu.

Le champ de recherche :

Si le commanditaire le souhaite, le champ de recherche est souvent placé à droite du menu principal, dans le bandeau ou dans la partie droite du template.

3 : La zone de contenu

C'est la zone réservée à l'ensemble du contenu du site. La page d'accueil est l'élément le plus important dans le référencement. Il ne faut donc pas hésiter à y mettre un nombre conséquent de contenu, même si celle-ci sera un peu longue. Toujours sur la page d'accueil, il est conseillé d'y faire figurer les principales offres de la société. Ça se fait souvent au travers de trois ou quatre cases alignées horizontalement. Ne pas omettre d'inclure dans chaque offre un lien menant à la page concernée.

Il ne faut pas oublier de montrer dans la zone de contenu les différents éléments que le prestataire est susceptible d'avoir besoin pour l'édition de la page :

l'aspect des titres, de niveau un et de niveau deux (H1 et H2)
l'aspect des puces au travers d'une liste
l'aspect des images dans le contenu (bords arrondies ? Contours ? Ombrages ? ...)
l'aspect des liens dans le contenu et leurs différents états (non survolé, au survol, déjà cliqué)

4 & 5 : Colonnes de gauche et de droite

Les colonnes sont conseillées pour deux raisons :

elles permettent d'y insérer d'autres types de contenus
elles permettent de diminuer la largeur de la zone de contenu. Les écrans sont de plus en plus larges et il n'est pas agréable de lire des lignes trop longues. Les colonnes permettent de résoudre ce problème tout en ayant un template d'une largeur conséquente.

Deux colonnes ne sont pas forcément nécessaires, une seule peut suffire. Tout dépend de vos intentions.

Dans les colonnes sont souvent intégrés :

Le rappel du menu principal avec les sous-menu visibles dans la rubrique où l'on se trouve > toujours dans la colonne de gauche.
Les actualités > très souvent dans la colonne de droite
Des offres quelconques
Très important : un bloc de Call to Action : c'est un bloc affordant attirant l'attention de l'internaute afin de l'inciter à cliquer. Généralement se sont des blocs du type « Nous contacter » ou « Devis gratuit ».
Un rappel des coordonnées de l'entreprise

6 : Le footer

Le footer est le menu situé en-bas des pages. Dans le footer est conseillé d'y faire figurer les liens vers les rubriques suivantes :

Accueil
Plan du site (le plan du site était avant très utile pour le référencement. Maintenant il l'est moins mais il peut être également utile pour l'internaute pour naviguer d'une autre façon)
Mentions légales (les mentions légales sont obligatoires sur tout site Internet, aussi petit qu'il peut être.)
Contact
Ne pas hésiter à y mettre un lien vers votre société ou votre site personnel. C'est vivement conseillé pour le référencement et pour gagner d'autres clients !

Autres petits conseils et astuces

Le bolobolo

La majeure partie des textes dans le template sont fictifs. Ne remplissez pas les paragraphes avec des textes pris par-ci par-là. Il existe du faux texte standardisé appelé communément le bolobolo ou lorem ipsum. Cela s'apparente à du latin modifié. Voici un site parmi d'autres qui vous génère automatiquement la quantité de bolobolo que vous souhaitez : webyo.net

Par contre, évitez de mettre tous les textes en bolobolo. Ça donne au template un aspect standardisé qui a souvent moins d'impact envers le client. Essayez de mettre au moins le slogan, les menus et les principaux titres avec des textes correspondants à l'entreprise du commanditaire. Certains clients vous demanderont néanmoins de ne pas le faire car les textes ne sont pas le sujet principal d'un template. Je vous le conseille tout de même vraiment car le template aura beaucoup plus d'impact.

Connaître les fondamentaux !

W3C Il est absolument cruciale pour faire des templates de connaître les bases de la constitution d'un site : les CSS. Sans ça vous ne pouvez pas savoir ce qui est faisable ou non et surtout ce qui est facilement faisable. Ainsi faciliter au maximum le travail de l'intégrateur pour diminuer les coûts de production. Le mot d'ordre : faire simple, beau et fonctionnel !

Logiciel

Si certains peuvent encore utiliser Illustrator, je vous recommande Photoshop pour la réalisation de vos templates. Pensez à bien organiser votre fichier en renommant chaque calque et en les triant dans des groupes et sous-groupes de calques. Ceci bien sûr pour mieux vous retrouver. Mais surtout car vous serez amené à donner votre fichier source à votre client. Rien de plus désagréable que de devoir passer une heure à réorganiser parfaitement son fichier au dernier moment ! Pensez également à enregistrer régulièrement au fur et à mesure votre fichier Photoshop dans de nouvelles versions. Ceci pour garder une trace du travail effectué et pour ne rien perdre. Il arrive fréquemment que le client demande à revenir à une version antérieure.

La grande question à un million d'euros

Faut-il proposer tout de suite au client un template abouti ou faut-il avancer étape par étape ?

La question reste ouverte. Par expérience je vous conseil vivement de présenter au client dès la première proposition un template totalement abouti. Oui, mais si le client n'aime pas vous aurez alors perdu du temps à affiner le template ? Non, absolument pas.

Très souvent le client ne sait pas vraiment ce qu'il veut. Et ce qu'il pense savoir n'est pas beau, pas professionnel et pas fonctionnel. Si vous avancez étape par étape, c'est-à-dire en proposant d'abord une structure, puis un template grossièrement avancé pour enfin proposé une version plus définitive, le client va demandé à chaque fois des modifications car ce qu'il aura sous les yeux ne sera pas un produit fini. Et puisque souvent le client n'est pas un professionnel en graphisme et en ergonomie, en suivant ses demandes vous allez aller droit dans le mur !

Tandis que si vous proposez au client une solution finalisée dès le début, vous avez beaucoup de chance qu'il aime tout de suite. Dans 95% des cas j'ai uniquement eu des modifications mineures à effectuer. Bien sûr à condition d'avoir au préalable bien étudié et questionné le client sur ses attentes.

Le dossier complet de ce tutorial (pdf, 13p., 1,1Mo)