WEB DESIGN

Comment réaliser une maquette de site web?

Vouloir créer son site web est une chose de plus en plus ancrée dans les esprits. De fait, un site web permet de présenter à de potentiels clients les services, actions ou encore réalisation faites par une personne ou une entreprise.

Mais avant de se lancer dans le développement d’un site internet, il faut penser à son architecture et à son apparence. On parle alors de maquette de site web.

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Web designer chez Snoweb
Publié(e) le 28 mars 2022 (Mis à jour le 8 avril 2022)


Petit point important avant toute chose. Les maquettes web doivent être réalisées par un professionnel du graphisme et du web, autrement dit, un web designer. S’aventurer dans la création de maquette par soi-même peu s’avérer long et assez périlleux. De plus, pour réaliser un site internet captivant et intuitif pour l’internaute, il est nécessaire de connaître certaines notions d’ergonomie.


1. Qu’est-ce que c’est une maquette pour un site web ?

Une maquette de site web est le résultat de plusieurs étapes de création pour fournir une représentation graphique de l’agencement d’un site internet. In fine, la maquette web va représenter ce à quoi va ressembler le futur site internet avec :

  • Ses couleurs
  • Ses blocs
  • Son menu
  • Ses boutons
  • Son logo
  • Ses illustrations ou images
La maquette est donc tout simplement l’étape avant le développement du site internet.

Pour certaines personnes, qui savent ce qu’elles veulent sur leur site internet, cette étape de création de maquette va leur paraître inutile. Mais elles ont tord ! Les maquettes permettent de structurer les idées, d’établir une architecture du site intelligente et enfin de faire des tests de mise en page. Ce n’est pas une fois sur le CMS ou avec le développeur qu’on doit tester de déplacer ou de changer des blocs et des éléments juste pour “voir ce que ça donne”. Les maquettes sont faites pour ça.

Comme indiqué plus haut, il peut paraître intelligent de supprimer cette étape de création de maquette pour à la fois gagner du temps de production et de l’argent. Mais croyez moi, ça ne l’est pas. Il faut savoir perdre du temps pour en gagner. Lorsque l’on fait le cahier des charges d’un site internet, il doit y figurer cette partie “maquette” avec a minima les wireframes ! Il faut aussi penser à allouer du temps pour ça, car la conception de maquettes peut prendre plusieurs semaines, selon le site à faire.

💡 Si vous souhaitez avoir plus d'information sur le contenu d'un cahier des charges, nous vous l'avons détaillé dans un article de notre blog.

Les atouts de la création de maquette web

Prévention

Pour prévenir d’éventuelles erreurs et les corriger avant de lancer le développement.

Test

Pour tester plusieurs idées de design ou de mise en page.

Réflexion

Pour travailler l’ergonomie et réfléchir au parcours utilisateur.

Anticipation

Pour gagner du temps sur le développement du site web.

2. Les étapes de réalisation d’une maquette de site web

2.1 Démarrer de la page blanche, désuet ou important ?

Personnellement, je suis une amoureuse du papier et du crayon, bizarre pour une web designer ? Et bien non ! Je commence toujours une création, une maquette ou une illustration par des croquis.
En ce qui concerne la création de maquette, sur papier, on peut déjà réaliser le wireframe ou zoning. Cela permet de trier et de mettre en place ses idées à moindre coût.

Mais attention, cette étape de papier permet juste de faire quelque croquis ! Pour faire une maquette professionnelle, il est important de passer assez rapidement sur un logiciel de création. Et si vous vous demandez pourquoi c’est tout simplement pour le partage du document et pour son évolution. Sur papier on est assez vite restreint alors que sur un logiciel, on peut créer plein de pages et de longueur différentes. Il est aussi important d’avoir une maquette claire et lisible pour ensuite la partager à un développeur ou un client et qu’il comprenne ce que vous avez fait.

2.2 L'arborescence

arborescence-site-internet

L’arborescence d’un site web a une importance sur la fluidité de la navigation, mais aussi sur le SEO, ou référencement naturel. Tout le monde connaît l’utilité d’une table des matières dans un livre. Et bien, on peut comparer l’arborescence d’un site internet à une table des matières. En d’autres termes, l’arborescence, c’est la hiérarchie des pages d’un site internet.
Pour faire une arborescence fluide, on va se mettre à la place de l’internaute final qui va se balader sur le site web. On va alors réfléchir à quel parcours il va prendre pour arriver à passer à l’action : contact, achat, inscription, etc.

Le principal objectif d’une arborescence, c’est de faire en sorte que l’internaute arrive à ses fins rapidement. Il faut donc que les pages soient bien reliées entres elle et que le menu du site soit clair.

2.3 Wireframe et maquette graphique, quelles différences y a-t-il entre les deux ?

Le wireframe et la maquette graphique sont deux étapes bien distinctes. On peut le voir ainsi :

  • Étape 1 : wireframe
  • Étape 2 : maquette graphique

Le wireframe ou maquette fonctionnelle

Aussi appelé zoning, le wireframe va schématiser la structure d’un site web. L’idée est de placer des formes géométriques pour représenter des blocs, du textes et des images. Le tout pour montrer les principales zones de contenu et d’interaction du site. C’est à ce moment qu’il faut penser ergonomie et concevoir le site le plus simple possible pour que l’internaute y trouve simplement et rapidement l’information.

D’ailleurs, voilà un autre point qui fait que vous devez passer par un professionnel pour réaliser vos maquettes.
wireframe-cc

Le prototype ou maquette graphique

Contrairement au wireframe, la maquette graphique va être plus poussée et plus précise. Ici, chaque partie du site va être détaillée, chaque fonctionnalité va être désignée et les éléments graphiques du site internet vont y figurer. Sur la maquette graphique, on y retrouve aussi le contenu texte, les couleurs, le logo et les bonnes typographies.

C’est à ce moment qu’on se rend compte si les idées qu’on avait en tête sont réalisables sur le web et, si elles ne le sont pas, il faut les repenser.

Pour s’aider lors de la création de la maquette graphique, il est intéressant de réaliser une planche d’inspiration avec les différents styles de site internet ou d’illustration qui nous plaise.

Les éléments graphiques d’une maquette web

La charte graphique

Élément fondateur d’une marque, la charte graphique regroupe toutes les notions graphiques de la marque. À savoir le logo, les couleurs et la typographie.

La charte graphique

Le logo

Il est important d’avoir un logo au bon format sur un site internet. Il doit être visible et ce, peu importe la taille de l’écran. Voilà pourquoi il faut un logo horizontal !

Le format du logo

Les couleurs

Les couleurs doivent être en accord avec la charte graphique de la marque pour que le site soit cohérent avec le logo et les autres supports de communication.

Les couleurs dans le web

La typographie

Plus communément appelées polices d’écritures, les typographies vont aider à la lisibilité et à la compréhension du texte. Elles vont aussi donner du caractère au site.

Choisir sa typographie

Les boutons d'action

Élément essentiels d'une page web, les boutons d'action. Ils permettent à l'internaute de faire une action décisive : contact, inscription, achat...

Les boutons d'action

Les illustration et images

Bien choisir le style des illustrations est important pour l'image de marque. Et je vous conseille de choisir le format SVG qui est léger et permet de belles animations.

Les SVG dans le web
Le web design vous intéresse ? Inscrivez-vous à notre newsletter

Notre newsletter Flocon de neige regroupe les dernières tendances et nos derniers articles web design.

3. Comment concevoir une maquette de site web ?

Étudier la concurrence

Regardez ce que vos concurrents font et inspirez-vous de leur site internet et de leur stratégie de communication.

Attention, j’ai bien dit “vous inspirer” ! Il n’est pas question de copier coller le site de votre concurrent. Vous n’en retirerez aucune satisfaction et vous n’aurez aucune crédibilité auprès de vos clients.

Listing

Listez les éléments que vous voulez faire apparaître sur le site web et les pages qui vont le constituer.

Contenu de page

Ensuite, avancez sur le contenu de la page que vous créez. Respectez les mises en pages traditionnelles et utilisez une grille pour que vos éléments soient alignés et à l’intérieur de la mise en page principal du site.

Vous le voyez sur tous les sites, il s’agit de cette zone où vont s’afficher les éléments d’une page. Par exemple, sur les sites web, vous voyez bien que le texte et les images ne vont pas d’un bord à un autre. Il existe une zone de vide sur les côtés.

Voici quelques astuces pour concevoir une maquette

  • Si vous ajoutez un élément à votre page, réfléchissez à son objectif.
    • Cet élément va-t-il apporter de la pertinence au contenu ?
    • Est-ce qu’il va intéresser ou aider l’internaute ?
  • Organisez les éléments d’une page de façon logique.
    • Il faut voir une page web comme une couverture de journal. Les éléments sont placés par importance et par degrés de pertinence pour le lecteur.
  • Les couleurs sur la maquette doivent être réfléchies
    • Elles doivent être en cohérence avec le logo et l’identité de la marque pour que l'internaute assimile à la marque une couleur. Il l'identifiera plus facilement par la suite..
  • Ne perdez pas de temps à créer des formes jolies et à écrire vos textes.
    • Utiliser du texte de substitution et des formes carrées, rectangulaires et rondes pour représenter vos images, vos zones de textes ou vos boutons.

4. Les erreurs à ne pas faire quand on créé une maquette de site web

  • Utiliser trop de couleurs

    Un site internet doit certes être dynamique, attractif, design, moderne, etc. Mais il doit surtout faire passer un message ! Et trop de couleurs vont perturber l’oeil de l’internaute. Le site va donc paraître surchargé et, au final, aucune information ne sera retenue par l’internaute.
  • Garder des faux textes sur la maquette graphique

    Avoir de faux textes sur les premiers tests, c’est intéressant. Mais, à partir d’un moment, il est essentiel de mettre du vrai texte afin de mieux se rendre compte du rendu final et de la quantité de texte à rédiger.
  • Oublier de travailler avec une grille

    La grille dans une maquette permet de “ranger” les éléments, de les aligner les uns aux autres et de travailler dans une zone délimitée. Cette grille permet d'avoir une maquette cohérente avec le rendu final du site internet.
  • Oublier de mettre en avant les boutons

    Les boutons ont une importance capitale dans un site internet. Ce sont les seuls éléments permettant à l’internaute de passer à l’action. Les boutons vont attirer le regard, apporter un sentiment d’urgence et aider à la conversion.
  • Ne pas suivre le parcours utilisateur

    Le parcours utilisateur est le chemin que va parcourir l'internaute sur un site internet afin de trouver ce qu'il recherche. Ce trajet doit être simple, court et sans embûches.

5. Les outils pour réaliser des maquettes de site web

Google Slides

Le premier outil dont je vais vous parler est un outil qui peut être utilisé par les personnes n’ayant pas de compétences graphiques. Google Slides ressemble traits pour traits à Power Point et est disponible gratuitement sur Google. Depuis Google Slides, vous pouvez réaliser à l’aide de formes géométriques le zoning de votre site internet assez simplement.

👍🏼 Logiciel gratuit et simple à prendre en main

👎🏼 Pas recommandé pour des sites internet demandant de nombreuses pages et fonctionnalités

google-slides


Adobe XD

Faisant partie de la suite Adobe, Adobe XD est un outil très performant pour faire de la mise en page web. Conçu pour ça, XD propose de créer des liens entre les boutons et/ou les pages et ainsi créer un prototype dynamique.

👍🏼 Logiciel complet avec de nombreux plug-in pour aider à la conception

👎🏼 Logiciel payant et assez compliqué à prendre en main. Il faut plusieurs heures de travail dessus avant de maîtriser le logiciel

adobe-xd


Sketch

👍🏼 Logiciel complet avec de nombreux plug-in pour aider à la conception

👎🏼 Logiciel payant et réservé aux professionnel car difficile à utiliser

sketch


Mockflow

👍🏼 Logiciel très simple d'utilisation qui propose de multitude de gammes de wireframe selon le type de site que vous faites.

👎🏼 Les fonctionnalités gratuites sont assez limitées

Mockflow


Wireframe.cc

👍🏼 L'interface est simple, peut-être même trop simple. Il permet de voir le rendu sur d'autres supports comme le téléphone et la tablette.

👎🏼 Logiciel freemium, qui possède 7 jours de gratuité

wireframe-cc


Moqups

👍🏼 Outil qui permet de travailler en équipe sur le même projet.

👎🏼 Les fonctionnalités gratuites sont assez limitées

moqups


FAQ des maquettes de site web

Pour rendre vivante votre maquette, vous pouvez faire appel à une agence de développement web comme Snoweb, à un développeur freelance ou encore utiliser un CMS et reproduire votre maquette à l'aide des blocs du CMS.

Vous pouvez me contacter et je vous guiderais pour la conception de vos maquettes. Ensuite, grâce à notre pôle développement, vos maquettes prendront vie sur le web.

TOUS ! Les maquettes sont essentielles pour organiser la mise en page et la structure d'un site internet. Que se soit pour une landing page, un e-commerce, un site vitrine, un blog ou encore un portfolio.

Je souhaite créermes maquettes de site web
En savoir plus

Le sujet du web design vous fascine, alors ces articles devraient vous intéresser également.

Inscrivez-vous à notre newsletter web design

Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.

Partager cet article sur les réseaux sociaux

Nos derniers articles sur le web design
Inscris-toi à notre newsletter et reçois les dernières nouveautés et astuces en lien avec le web design.
pop-up newsletter web design