Comment créer une maquette pour un site web ?
La création de la maquette d’un site web est une des étapes les plus importantes d’un projet de création de site car elle permet d’en définir la structure. Pourtant, elle a tendance à être négligée.
Du simple zoning au design de votre futur site web, nous allons vous détailler toutes les phases de construction de votre maquette ainsi que les principaux outils disponibles à sa bonne réalisation.
Prêt à construire rapidement une maquette efficace ? En route !
Qu’est-ce qu’une maquette de site web ?
Pour commencer, on se fait un rappel de la définition d’une maquette de site web, ce terme en général se confond avec d’autres termes tels que mockup, zoning, wireframe…
Faisons la lumière !
Une maquette de site web est une représentation visuelle de votre site. Sur une maquette de site on retrouve :
- Des zones de contenus
- Le design de votre site : logo, couleurs
- Des fonctionnalités du site web
En somme, il vous permet de construire la structure et l’aspect graphique de votre site. C’est l’étape ultime avant la réalisation de votre site internet par un professionnel ou avec un website builder en toute autonomie.
Les intérêts de la maquette graphique
L’élaboration d’une maquette graphique présente de nombreux intérêts. Bien qu’elle semble onéreuse ou chronophage, elle est en réalité un excellent moyen de réduire le budget et l’ajustement ultérieur du site. Elle présente aussi d’autres avantages non négligeable :
Travailler votre image de marque
La maquette vous permet d’appliquer votre charte graphique au sein même de votre site web. Ainsi, l’idée est d’avoir un rendu graphique final de votre site. On pourra donc valider le choix des couleurs, des typos et de la mise en page. Les logiciels adaptés à la création de votre maquette (que l’on verra plus bas) vous permettront de naviguer entre vos différentes pages créées comme s’il s’agissait de la version définitive de votre site. Votre site doit véhiculer l’identité de votre marque, vous devez donc imposer votre design au site et en aucun cas subir les contraintes de votre système de gestion de site web.
Éviter que votre site soit mal structuré
La création d’une maquette en plus de définir la structure de votre site, elle permet de définir son arborescence ainsi que son maillage interne.
Si vous oubliez de créer une maquette, vous n’aurez aucune idée de la disposition ainsi que du cheminement nécessaire à la bonne cohésion de votre site. La création d’une maquette graphique permet également de travailler sur les différentes versions du site (tablettes, mobiles) via des logiciels adaptés comme Adobe Xd.
En travaillant la structure de votre site, via une maquette, vous étudierez le parcours de votre utilisateur sur votre site. La réflexion sur l’expérience de l’utilisateur sur un site internet est très importante de nos jours, puisque ces réactions face à votre site affecteront directement l’image de votre entreprise, donc vos ventes. Il est impératif de planifier ce parcours avant de se lancer dans la création d’un site internet.
Gagner du temps
En effet si vous pensez que la réalisation d’une maquette est une perte de temps détrompez-vous, c’est un véritable gain de temps lors de la réalisation de votre site.
Pour avoir une idée plus précise de votre projet et éviter des erreurs lors de la réalisation de votre site internet, vous pouvez et devez vous lancer dans la création d’une maquette complète !
Pour éviter que ces erreurs parasitent votre site, vous pouvez et devez donc vous lancer dans la création d’une maquette complète !
Les étapes de la création d’une maquette
L’arborescence (l’architecture SEO)
Tout d’abord, il faut avoir une vue d’ensemble de votre site. Il faudra identifier et regrouper vos pages par thématique ou par modèles de page. Ainsi vous pouvez regrouper certaines pages dans votre modèle de page “blog” ou “fiche produit” par exemple.
Vous allez définir l’architecture de votre site en veillant à ce que toutes vos pages soient accessibles en moins de 4 clics. Ce premier travail va permettre d’optimiser vos conversions. La réflexion sur le parcours utilisateur est primordiale car elle influera de manière importante sur vos ventes.
La maquette fonctionnelle
Il est conseillé de faire tout d’abord les wireframes des pages principales. Cela vous permettra d’identifier des composants graphiques à réutiliser pour les autres pages. Il est conseillé de travailler par améliorations successives (page par page). N’hésitez pas à demander des retours et axes d’amélioration au fur et à mesure. Ces échanges vont permettre de définir les éléments clés de la structure de vos pages. Une fois que les wireframes des pages principales sont terminés et ont été validés, vous pouvez alors poursuivre votre travail pour le reste des pages. Il faut identifier l’ensemble des composants graphiques communs entre les pages pour respecter la cohérence entre vos pages.
La maquette graphique
La création d’une maquette graphique est une étape non négligeable. La qualité du rendu final dépendra de la qualité du professionnel à vos côtés en UX/UI design. Ne pensez pas aux économies à court terme car le manque à gagner à long terme se fera ressentir si le professionnel ne peut répondre aux objectifs attendus. Vous devez donc, en tant que client, transmettre des idées, expliquer le positionnement de votre marque mais faites attention à ne pas empêcher le webdesigner de pouvoir s’exprimer librement en détaillant trop les instructions.
Il s’agira ici d’un travail créatif. Il faudra donc habiller vos wireframes. Vous devez appliquer votre charte graphique si elle a été définie ainsi que votre image de marque. Ensuite c’est à vous ou à votre designer de réaliser des maquettes graphiques de toutes les pages souhaitées. La maquette peut être réaliser à partir d’un brief mais certains professionnels les divisent en plusieurs étapes :
- La planche d’inspiration : ou moodboard sur lequel on recense les différentes idées et exemples graphiques.
- La planche de style : planche avec différentes typographies et gamme de couleurs. Cette planche est un commencement à la création d’une charte graphique.
- Une fois la maquette graphique terminée, l’intégration web de cette dernière peut commencer.
Pour ce faire, des connaissances en HTML, CSS, JavaScript et PHP sont nécessaires.
Les outils pour construire votre maquette
Les outils traditionnels
De nombreuse agences web utilisent encore des solutions traditionnelles. Ces solutions ne facilitent pas la gestion des proportions mais seront très utiles si vous disposez d’un budget limité.
- Le papier : utilisé pour réaliser une maquette fonctionnelle, le papier présente des avantages : rapide, accessible et souple.
- Powerpoint : également utilisé pour construire des maquettes fonctionnelles (notamment via le composant additionnel PowerMockup), le logiciel powerpoint est très simple et dispose d’une bonne souplesse pour faire des wireframes simples.
- Canva : ce service SaaS permet de réaliser des maquettes fonctionnelles et graphiques. Il dispose de fonctionnalités très intéressantes pour faire du graphisme mais aussi du zoning.
Les logiciels de wireframe (maquette fonctionnelle)
Pour créer votre maquette fonctionnelle, il existe des outils professionnels de zoning et wireframe. Ces outils proposent une valeur ajoutée importante mais il faut choisir l’outil adéquat en fonction de vos besoins réels et de votre budget.
- Sketch : cet outil (qui est un des piliers du secteur) permet donc de réaliser votre maquette fonctionnelle avec ses outils dédiés au wireframe et au zoning. Il est également d’une grande simplicité.
- Adobe XD : cet outil pour faire des maquettes présente de nombreux avantages (intégration native avec Photoshop, performant et simple d’utilisation).
- Cacoo : Ce logiciel SaaS est un logiciel pour créer vos maquettes. Vous pouvez également tester sa version gratuite avant de vous lancer
- Pencil : Pencil est un logiciel open-source gratuit disposant de nombreux modèles et éléments de base. Facile d’utilisation, vous pouvez relier vos pages entre elles (arborescence). Il est disponible sur Windows, Mac et Linux. »
- Basalmiq : Basalmiq est une référence dans le monde de la réalisation de maquette fonctionnelle. Ce logiciel est disponible en 2 versions (la version desktop à 79$ et la version web à 12$/mois). Simple d’accès mais disposant de nombreuses fonctionnalités, il vous permet de faire les wireframes de pages assez complexes.
- Axure rp : Ce logiciel destiné au professionnel (agences de designers ou freelance) est le plus complet et le puissant dans le marché du maquettage web. Cette qualité à un coût : la version basique coûte 30€ par mois.
Les logiciels de graphisme (maquette graphique)
Une fois que les maquettes fonctionnelles sont terminées, il y a une seconde étape ; la création d’une maquette graphique.
- Adobe Photoshop règne dans cette catégorie de logiciels. Le format de fichier associé, .PSD en est même devenu un substantif dans le langage des professionnels du web. C’est un logiciel assez complexe (destiné aux webdesigners) mais qui possède de nombreuses qualités : il est puissant, souple et adapté pour la phase de découpage nécessaire pour l’intégration du code (HTML/CSS).
- Un autre outil de la suite Adobe peut être efficace pour créer votre maquette graphique : il s’agit d’Illustrator. Polyvalent (il est également possible de faire du zoning et des wireframes), il est très utile pour découper les maquettes pour l’intégration web.
Quel est le coût d’une maquette ?
Il est très difficile de répondre à cette question. Cela va dépendre de vos choix, mais pour un projet standard, vous pouvez compter entre 1000 et 5000€. Cela peut vous sembler onéreux, mais il vaut mieux ne pas faire d’économie lors de cette étape. En effet, l’optimisation ultérieure vous coûtera plus cher et cela uniquement pour remettre en place les basiques.
Les exemples de maquettes de sites web :
Les maquettes fonctionnelles (wireframes) sont la première étape dans la construction d’une maquette.
Voici un exemple d’un wireframe d’une page produit. Toutes les informations sont donc disponibles mais il ne possède aucun élément de graphisme.
Voici un autre exemple de wireframe que l’on peut créer avec le logiciel Balsamiq :
Les erreurs à éviter lors de la conception d’une maquette de site web
Désormais, vous connaissez les outils pour créer votre maquette de site web, mais avant de se lancer dans la conception, il faut connaître les erreurs à éviter.
#1 Vouloir mettre trop d’éléments en avant
Une maquette de site web doit contenir assez de détails pour être comprises par tous, cependant il ne faut pas surcharger votre maquette d’éléments futiles au risque de perdre votre interlocuteur.
#2 Ne pas respecter sa charte graphique
Reprenez les couleurs de votre charte graphique pour éviter une incohérence graphique dans votre site internet.
#3 Ignorer la ligne de flottaison
Ne pas mettre le contenu important en dessous de cette ligne au risque de perturber l’expérience utilisateur.
#4 Utiliser une police illisible
Toujours pour l’expérience utilisateur, préférez une police simple et lisible, la taille des caractères et espacement entre les lignes.
Une fois votre maquette terminée, vous pouvez vous lancer dans la création de votre site web.
Alors, prêt à vous lancer ? On a hâte de voir le résultat ! 🚀
