Concevoir les gabarits de son site internet

Pour une création pure de site internet, vous aurez tout à construire, et notamment à concevoir les différents gabarits de vos pages web. En revanche, si vous projetez une refonte de votre site, saisissez l’opportunité pour améliorer la navigation et l’efficacité de votre site pour mieux répondre aux problématiques des visiteurs.

Cet article de DoYouSpeakDigital a pour objectif de vous accompagner dans la création de vos gabarits pour un site web en détaillant les questions à vous poser avant de vous lancer. On précisera aussi quelques erreurs trop souvent vues qu’on peut éviter !

 

Définition d’un gabarit de site web

A la place de gabarits, vous pouvez retrouver le nom de maquette, wireframe ou encore templates. Tous ces termes ont pour but de définir la mise en page de votre site internet. En fonction des contenus que vous souhaitez mettre et des objectifs de votre page, vous allez organiser toutes ces informations pour qu’elles soient structuer et cohérente pour le lecteur.

Commencer par définir son arborescence

Avant de commencer à réfléchir sur vos gabarits, il est essentiel que vous ayez défini l’arborescence de votre site internet, c’est à dire son plan. Pour rappel, l’arborescence de votre site c’est la structure d’information en diverses rubriques et sous-rubriques contenant la totalité de l’information y étant présentée.

Dès lors que vous avez votre arborescence, vous saurez le nombre de pages différentes que vous allez devoir concevoir et développer et le contenu présent à l’intérieur de chacune. Ce travail de préparation est nécessaire pour commencer, sinon vous allez très souvent revenir en arrière sur votre travail pour y apporter sans cesse des modifications.

La maquette fonctionnelle :

Il est important qu’en tant que donneur d’ordre vous puissiez réfléchir sur la maquette fonctionnelle de votre page. Pour vous donner des idées, regardez sur les sites que vous aimez bien (sites concurrents mais pas nécessaire), et essayez de décrypter l’organisation de leur page. Sur une feuille de papier, faites des croquis du zoning (l’organisation des différents emplacements qui accueilleront vos contenus).

Il n’est pas nécessaire de détailler le contenu des blocs. Par contre, on vous conseille d’établir des blocs de tailles suffisantes pour garder une lecture aérée. Votre prestataire aura la possibilité de vous les faire, mais il n’aura as la vision opérationnelle du métier pour vous proposez le meilleur zoning. Cette étape peut lui prendre du temps et ce qui aura une répercussion directe sur votre timing et sur le coût de développement.

Notre conseil :

Elaborez vous même vos gabarits avant de rencontrer des prestataires même si ils ne sont pas parfaits. Ensuite vous gagnerez du temps pour expliquer votre projet aux différents prestataires, et ce sera plus faciles pour eux de se projeter. Néanmoins, ce n’est pas parce que vous les avez définis qu’ils sont figés. Vous pourrez les faire évoluer en fonction des différents retours, conseils et autres avis que vous aurez pu récupérer.

La maquette graphique

Pour approfondir votre maquette fonctionnelle, vous pouvez y ajouter du graphisme. L’objectif est d’avoir une vision plus proche du rendu final. Il est toujours plus facile de se projeter avec du concret, et parfois beaucoup plus motivant aussi !

Nos Recommandations

Penser à la navigation des utilisateurs

Dans l’organisation de votre contenu, mettez-vous à la place de  l’internaute pour lui proposer la navigation la plus intuitive possible. L’enchainement des informations et le positionnement des boutons d’action vont directement impacter votre mise en page. Gardez à l’esprit les objectifs de votre site et construisez votre maquette dans ce sens.

Définir des maquettes communes

Réaliser une maquette est une étape assez longue. A partir de votre arborescence, si vous pouvez regrouper plusieurs pages pour définir une maquette commune, n’hésitez pas car vous gagnerez beaucoup de temps. Travaillez à organiser votre contenu pour pouvoir les mettre en page de la même manière. Si vous avez des pages qui ont une architecture plus ou moins semblable, essayez d’organiser le même contenu de la même manière, toujours dans l’optique de faire des « économies d’échelle ».

Les Outils pour réaliser vos maquettes

Les basiques

Feuille de papier :

Pas forcément besoin de technologie, une feuille blanche et un crayon papier peuvent suffire. Dans la mesure où vous devez rester sur des plans de grosses masses, vous n’avez pas besoin d’avoir des compétences hors-normes de dessinateur. Une fois vos croquis établis, n’hésitez pas à les remettre au propre pour avoir une version claire et précise.

Microsoft Powerpoint :

Toujours pareil, dans la mesure où il faut rester sur une vision globale, vous pouvez travailler sur Microsoft Powerpoint. L’outil propose de nombreuses formes géométriques ainsi qu’un panel de couleurs assez large. A vous de voir si vous êtes à l’aise avec l’outil ou pas !

Les logiciels de design

Si vous avez l’habitude d’utiliser des logiciels de design tel que Photoshop, vous pouvez l’utiliser. Photoshop est un logiciel très complet. Il est utilisé par beaucoup de prestataire pour intégrer cette maquette avec le design dans le code. Mais malheureusement, il nécessite une certaine prise en main pour pouvoir l’utiliser. Si vous en êtes à votre première utilisation, nous ne le vous recommandons pas.

Les logiciels spécialisés pour les gabarits

Il existe de nombreux logiciels qui pourront vous aider à réaliser vos maquettes. Ces logiciels peuvent être complètement dédiés à la création de gabarits ou bien à la création de schémas en tout genre. Nous vous proposons deux solutions qui nous semblent les plus répondre assez bien à la problématique de création de gabarit.

Balsamiq :

L’outil Balsamiq peut être un outil intéressant pour définir vos maquettes car il propose un grand nombre de templates. L’outil est payant, mais il a l’avantage d’être un outil spécialisé dans les gabarits. Les concepteurs de l’outil ont pensé l’outil pour, ce qui le rend très adapté à ce genre de projet et très facile à prendre en main. Ca peut valoir le coup pour vous d’investir un peu de votre budget dans cette solution.

Cacoo :

L’outil Cacoo est gratuit qui vous permet de créer, partager et publier des schémas. Il n’est pas spécifique pour les gabarits de site internet, mais il possède déjà des schémas prédéfinis, ce qui vous permettra de gagner du temps. Si vous arrivez à prendre en main l’outil, vous pourrez facilement l’utiliser pour une autre utilisation.

Conclusion

Réalisez un site internet peut s’avérer assez long. Il est important d’y ajouter de la méthodologie. Créer votre arborescence et vos gabarits sont des étapes nécessaires pour vous. Elles vont vous permettre d’aboutir votre réflexion sur votre produit. Elles vous amèneront à vous concentrer sur l’essentiel pour atteindre vos objectifs et à cadrer votre réflexion. Une fois que vous aurez fait ce travail, il vous sera d’autant plus facile de discuter avec vos différents prestataires. Ces étapes ne sont pas dures techniquement. Si vous voyez que vous bloquez, c’est peut-être que votre projet n’est pas assez cadré.

En passant du temps sur ces deux étapes, vous ferez gagner beaucoup de temps à votre projet. Les prestataires seront opérationnels beaucoup plus rapidement et comprendront plus facilement les objectifs. C’est aussi un gain de temps pour votre prestataire et donc une meilleure allocation de vos ressources pour les consacrer à des tâches à plus forte valeur ajoutée.

Related

Dans la phase de définition, au-delà de l’étude de l’existant, les besoins sont recueillis, le budget...

Join li diskason

Comments

  • Comment réaliser un bon cahier des charges pour votre site Internet 18 mars 2017 at 5 h 52 min

    […] mieux est de l’accompagner d’une représentation graphique de votre arborescence. Vous pouvez le faire vous-même, quitte à commencer par un dessin à la main, ou faire appel à un designer pour le mettre en […]

    Reply