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 pour élaborer 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.

Le plus simple : le Mockup à l’ancienne

Je ne vais pas m’attarder sur cette première technique.

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

Quoi que !

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), mieux vaut travailler en version électronique pour construire votre gabarit de site Internet.

Déjà un peu plus évolué : le Mockup en utilisant Powerpoint

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 dessiner votre maquette 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 Paint.

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.

Le Top : les outils de maquettage de site Web en ligne

Évidemment, il y a aussi de nombreux outils spécialisés de maquettage.

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

• wireframe,
• balsamiq,
• 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.

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.

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é moqups ? Avez-vous testé d’autres outils de création de gabarits de site Web ?