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. 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 ! 

Les intérêts de la maquette graphique

L’élaboration d’une maquette graphique présente de nombreux intérêts. Bien qu’elle puisse sembler 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 permet de définir la structure de votre site, son arborescence, mais aussi 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.

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. Il est donc impératif de planifier ce parcours avant de se lancer dans la création d’un site internet.

exemple-arborescence

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. 

maquette fonctionnelle

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.

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.

maquette fonctionnelle

Voici un autre exemple de wireframe que l’on peut créer avec le logiciel Balsamiq : 

wireframe

Exemples de chartes graphiques : 

Nécessaire pour la création d’une maquette graphique, la charte graphique regroupe tous les éléments qui constituent l’identité graphique d’une marque ou d’une entreprise. Voici 2 exemples de chartes graphiques réussies : 

Charte graphique de la marque Hermès :

charte hermes

Hermès propose un design épuré avec une mise en avant de la couleur orange (la couleur orange « Hermès » a pris naissance en 1960, devenant un signe de reconnaissance de la marque). Symbole de l’exclusivité, Hermès capitalise sur un design intemporel pour rappeler la glorieuse histoire de la marque.

Charte graphique de la FFR (Fédération Française de Rugby) :

charte ffr

L’évolution de la charte graphique ne coïncide pas toujours avec la modernisation des éléments graphiques. Par exemple, la fédération française de rugby a décidé de remettre le logo originel sur le maillot de l’équipe de France de rugby. Revenir aux sources peut donc être une stratégie pour insister sur le poids de l’histoire. La Fédération Française de Rugby a rajouté le slogan « notre maillot, notre histoire, notre pays ».

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 ! 🚀

Aziliz Prebois

Inbound & Social Media Marketer at Orson.io