Créer une maquette site web en 1 heure chrono !

Mockup, gabarit, maquette site web, tous ces termes ne m’inspirent pas grand-chose. Et pourtant, j’en entends parler à droite à gauche.

Alors que je discutais hier soir avec Laurent sur la stratégie globale pour créer un nouveau site web, il m’a dit ce qui suit :

Pour échanger entre collègues ou avec un fournisseur sur la mise en page, l’architecture des éléments dans votre site web en cours de création, le plus simple est d’utiliser un outil de maquette de site web spécialisé pour créer des gabarits. En anglais, cela s’appelle travailler son mockup.

Vous me connaissez, je ne peux me satisfaire de cette explication dont certains mots m’échappent.

Je suis donc partie à la recherche d’informations complémentaires sur Google.

Voici le résultat de mes recherches concernant la mise en page d’un site en utilisant différentes techniques de maquettage.

C’est quoi un Mockup ou une maquette de site web ?

Commençons par définir les termes :

Une maquette de site web, ou mockup en anglais, est tout simplement une représentation graphique simplifiée de la façon dont vous voulez agencer votre site web et ses éléments/parties.

Par exemple, le mockup montre :

• Un menu de navigation en haut,
• Une colonne centrale contenant des articles,
• Une colonne de droite avec plusieurs briques : un module d’inscription à une newsletter, un module “Derniers articles publiés”…

Sur une maquette, tout cela est réalisé de manière brute et approximative.

L’objectif unique est de montrer à votre web designer ce que vous avez en tête avant qu’il ne commence son travail.

C’est aussi une étape cruciale du processus de conception d’un site web agréable à utiliser et efficace en conversion.

Notez que les termes « maquette fonctionnelle » et « wireframe » (en anglais) désignent, peu ou prou, la même chose !

Il suffit d’aller sur Google pour consulter plein d’exemples de mockups de blogs ou de sites web.

Mon conseil : avant d’élaborer une maquette web, apprenez bien la signification et l’utilité de toutes les parties d’une page web.

Les 7 avantages de l’utilisation d’une maquette de site web

• Visualiser l’apparence et la disposition du site web avant même de commencer la phase de développement. Toutes les parties prenantes (concepteur, marketing…) peut voir à quoi ressemble le site final. Cela facilite la communication et la prise de décision.
• Identifier des problèmes de conception. C’est-à-dire des incohérences de mise en page, des problèmes de navigation ou des zones de surcharge d’informations. Ces problèmes vont être résolus en amont du développement, ce qui permet d’économiser du temps et des ressources.
• Améliorer l’expérience utilisateur de manière à offrir la meilleure expérience possible aux visiteurs du site. Vous pouvez optimiser la disposition, la navigation et l’ergonomie pour répondre aux besoins de votre public cible.
• Aligner vos objectifs. Les maquettes aident à aligner l’équipe sur les objectifs du projet en fournissant une vision claire et concrète du site à créer. Vous évitez tout malentendu et divergence d’opinion.
• Gagner du temps et de l’argent. En résolvant les problèmes de conception en amont, les modifications sont moins coûteuses à effectuer à ce stade que lorsqu’un site est déjà en cours de construction.
• Faciliter la collaboration entre les différents membres de l’équipe, y compris les concepteurs, les développeurs, les clients… Ils offrent un point de référence visuel pour les discussions et les décisions.
• Réduire les erreurs. En visualisant votre site, vous réduisez le risque d’erreurs coûteuses qui pourraient survenir lors de la phase de développement. Les maquettes permettent de repérer et de corriger les erreurs avant qu’elles ne deviennent des problèmes majeurs.

3 différentes approches pour créer une maquette

1. Le plus simple : le Mockup à l’ancienne

Pourquoi ?

Parce que parfois, le crayon et le papier offrent une simplicité et une liberté créative inégalées, surtout lorsque vous êtes le seul décideur.

En effet, réaliser la maquette de votre site web sur une feuille de papier semble désuet par rapport aux pratiques du Marketing Digital.

Quoique !

Dans certains cas de figure, pourquoi pas vous faciliter la vie et travailler sur du papier si :

• Vous êtes seul(e) à prendre les décisions et que vous allez réaliser vous-même le design de votre site web,
• Vous aimez bien dessiner et utiliser du papier (Pauvres arbres de nos forêts !!).

Par contre, pour échanger à distance avec d’autres personnes de votre équipe ou pour être sûr de conserver votre travail (une feuille de papier, ça se perd facilement), il vaut mieux travailler en version électronique pour construire votre gabarit de site Internet.

2. Déjà un peu plus évolué : le Mockup en utilisant PowerPoint

Pourquoi ?

Parce que même s’il est souvent associé aux présentations, il peut être un outil efficace pour formaliser vos idées de mise en page.

Microsoft a fait un cadeau empoisonné à la planète (parmi d’autres) : PowerPoint.

La raison est simple.

PowerPoint est aujourd’hui quasi automatiquement associé à “présentation à l’oral”.

Or, cet outil engendre un formatage de la pensée et de la façon de transmettre ses pensées et idées aux autres.

Pour ceux que cela intéresse, voici un article du Guardian, un journal anglais qui traite du sujet.

Je n’ai malheureusement pas trouvé d’article en français sur le sujet.

Si vous en trouvez un, n’hésitez pas à le partager dans les commentaires de cet article !

Mais je m’égare.

PowerPoint est par contre un très bon outil, pour formaliser ce que vous avez en tête pour la mise en page de votre site Internet.

Ce n’est pas le meilleur, loin de là.

Mais si vous avez déjà la suite Office installée sur votre ordinateur, cela ne coûte rien de l’utiliser pour faire une maquette graphique de votre site web.

Afin de vous montrer comment procéder, j’ai créé un début de mockup avec PowerPoint, que voici :

Comme vous pouvez le voir, j’ai utilisé dans la rubrique Insertion > Formes des éléments rectangulaires et ovales pour représenter très schématiquement l’endroit où positionner le logo et le menu de navigation.

Vous trouvez également d’autres éléments bien utiles dans la rubrique “SmartArt”.

Et pourquoi pas aussi travailler vos images de la maquette avec Canva.

Vous pouvez ensuite poursuivre l’exercice en représentant graphiquement l’ensemble de la page d’accueil avec tous ses éléments.

Une autre option équivalente consiste à partir sur Google Slides qui dispose de gadgets graphiques similaires.

L’avantage est sa fonction de collaboration pour partager votre maquette avec vos collaborateurs.

3. Le Top : les outils de maquettage de site web en ligne

Pourquoi ?

Parce qu’ils offrent une bibliothèque d’éléments graphiques conviviaux et facilitent la collaboration avec votre équipe.

Dans cet article, je vais me contenter de citer les outils de maquette de site web en ligne plus connus :

• wireframe,
• balsamiq,
• figma,
• moqups.

Moqups est l’outil de maquettage en ligne que j’ai testé et utilisé.

Je vous le recommande vivement !

En effet, cet outil de maquettage est très intuitif et vraiment pas très cher.

Voici quelques copies d’écran pour vous mettre la salive à la bouche.

Ce premier écran présente toutes les fonctions de l’outil :

Cliquez sur un élément de la colonne de gauche et faites-le glisser sur l’écran principal pour l’insérer dans votre maquette.

C’est dans cet espace que vous visualisez au fur et à mesure votre design et la mise en page du site web de votre entreprise.

Voici un début de résultat :

À ce stade, j’avoue que ce n’est pas une page d’accueil très attirante !

Alors ajoutons quelques éléments complémentaires, comme un logo et une zone à compléter plus tard par une vraie image :

Toujours pas très sexy, je peux ensuite ajouter un “faux menu de navigation” en haut, comme ceci :

Soyez indulgent.

Cela m’a pris exactement 20 secondes pour créer ce mockup dont la valeur est faible, je vous l’accorde.

Mais l’intérêt est autre, vous l’avez compris.

Cet outil de création de maquette de site web permet en moins d’une heure de créer un mockup très complet et intuitif.

Ensuite votre web designer va s’appuyer cette maquette pour échanger, puis plus facilement réaliser vos souhaits.

12 recommandations et conseils pour créer une maquette efficace

• Comprenez vos objectifs. Avant de créer votre maquette, définissez clairement les objectifs de votre site web. Comprenez ce que vous souhaitez accomplir, qu’il s’agisse de fournir des informations, de vendre des produits, de générer des leads… Vos objectifs orienteront la conception de la maquette.
• Connaître votre public cible. Identifiez votre public cible et comprenez ses besoins, ses préférences et ses comportements en ligne. Adaptez la maquette en fonction de ces informations pour offrir une expérience utilisateur optimale.
• Priorisez la simplicité. Une maquette efficace est souvent simple et intuitive. Évitez la surcharge d’informations et la complexité excessive. Gardez la navigation claire et concise pour que les visiteurs puissent facilement trouver ce qu’ils recherchent.
• Utilisez une hiérarchie visuelle. Utilisez la mise en page, la taille de la police, les couleurs et la mise en évidence pour créer une hiérarchie visuelle. Mettez en avant les éléments les plus importants pour guider l’attention des utilisateurs.
• Assurez-vous de la cohérence. Veillez à la cohérence en termes de design, de couleurs et de style avec l’identité de votre marque. Cette cohérence renforce la reconnaissance de la marque et améliore l’expérience utilisateur.
• Pensez au mobile d’abord. De nos jours, de nombreuses personnes accèdent aux sites web depuis des appareils mobiles. Assurez-vous que votre maquette est responsive, c’est-à-dire qu’elle s’adapte correctement aux différentes tailles d’écran.
• Utilisez des wireframes. Avant de passer à une maquette détaillée, créez des wireframes simples pour définir la structure et la disposition des éléments. Ainsi, vous éliminez les problèmes de mise en page rapidement.
• Soyez attentif à la typographie. Choisissez des polices de caractères lisibles. Adaptez leur taille pour une lecture confortable. Utilisez la typographie de manière cohérente sur l’ensemble du site.
• Testez la convivialité. Effectuez des tests d’utilisabilité en demandant à des personnes extérieures au projet d’interagir avec la maquette. Recueillez leurs commentaires pour identifier les points à améliorer.
• Restez ouvert aux retours. Soyez ouvert aux commentaires et aux retours de l’équipe, des clients et des utilisateurs. Les maquettes peuvent évoluer et s’améliorer grâce aux rétroactions constructives.
• Documentez vos choix. Fournissez des annotations et des explications claires dans la maquette pour expliquer les fonctionnalités et les interactions prévues. Cela facilite la compréhension pour les personnes qui travaillent sur le développement.
• Soyez flexible. La maquette n’est qu’une étape du processus de conception. Soyez prêt à apporter des ajustements et des modifications en cours de route pour répondre aux besoins changeants ou aux nouvelles idées.

FAQ – 3 questions fréquentes sur les maquettes de site internet

Conclusion sur comment élaborer une maquette de site web

Réaliser une (ou plusieurs) version de votre maquette est une étape déterminante dans la création de votre site internet.

C’est aussi nécessaire lors de la refonte de votre site existant, sauf que vous devez aussi prendre en compte les contraintes dues au référencement actuel.

Pour que votre site web soit agréable à utiliser, vous devez soigner le design de l’interface graphique. C’est essentiel pour l’expérience Utilisateur.

Mais surtout, pour qu’il soit efficace, il est nécessaire de penser à une mise en page fluide et en accord avec vos objectifs et vos futurs contenus.

Pensez tout d’abord au design fonctionnel de votre maquette. Autrement dit, travaillez en noir et blanc comme le propose moqups.

Une fois, les grands principes formalisés et validés, passez au design graphique avec votre identité et vos couleurs.

Pour cela, je vous conseille de commencer par élaborer vos Persona, puis de valider leur attrait avec votre charte graphique.

Enfin, pour que votre site web soit réellement adapté à votre cible, il est indispensable de confronter dès que possible vos maquettes à des personnes extérieures au projet.

Ensuite se pose la question suivante : allez-vous construire votre site par vous-même ou faire appel à une agence ?

Et vous, chers lecteurs, avez-vous testé d’autres outils de création de gabarits de site web ?