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 :

Si tu dois échanger avec tes collègues ou un client sur la mise en page, l’architecture des éléments dans le 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 un 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.

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

Créer une maquette site Web en 1 heure chrono ! - Marketing Digital

Commençons par définir les choses.

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 inscription newsletter, un module “Derniers articles”, etc.

Tout cela est réalisé de manière assez brute et approximative.

L’objectif est de montrer à votre Web designer ce que vous avez en tête avant de commencer son travail.

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.

Mais avant de vous lancer dans l’élaboration d’une maquette Web, apprenez bien la signification et l’utilité de toutes les parties d’un site web.

Le plus simple : le Mockup à l’ancienne

Créer une maquette site Web en 1 heure chrono ! - Marketing Digital

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 (les pauvres arbres de nos forêts !! 🙂 alors .

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

Créer une maquette site Web en 1 heure chrono ! - Marketing Digital

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 vous coûtera rien de l’utiliser pour votre maquette site web.

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

Créer une maquette site Web en 1 heure chrono ! - Marketing Digital

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.

On pourrait ensuite poursuivre l’exercice pour représenter graphiquement l’ensemble de la page d’accueil avec tous ses éléments.

A noter, vous trouverez également d’autres éléments bien utiles dans la rubrique “SmartArt”.

Le Top : les Outils en ligne spécialisés

Il y en de nombreux.

Je vais e contenter de citer les plus connus :

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 :

Créer une maquette site Web en 1 heure chrono ! - Marketing Digital

Cliquez sur les éléments à gauche et faites les glisser sur l’écran principal.

C’est à cet endroit que vous allez visualiser votre design et la mise en page du site Web de votre entreprise.

Voici le résultat :

Créer une maquette site Web en 1 heure chrono ! - Marketing Digital

J’avoue que ce n’est pas très attirant pour l’instant !

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

Créer une maquette site Web en 1 heure chrono ! - Marketing Digital

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

Créer une maquette site Web en 1 heure chrono ! - Marketing Digital

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 vous permet en moins d’une heure de créer un mockup très complet et intuitif.

Ensuite votre Web designer peut s’appuyer cette maquette pour facilement réaliser vos souhaits.

Créer une maquette site Web en 1 heure chrono ! - Marketing Digital

Avant de vous lancer dans une maquette, apprenez bien la signification et l’utilité de toutes les parties d’un site web.

Avant de refondre votre site Web, voici 5 raisons de penser au Référencement avant la refonte d’un site Web.

Et vous chers lecteurs, avez-vous testé moqups.com ? Avez-vous testé d’autres outils de création de gabarits de site Web ? Si oui, nous vous invitons à nous en parler dans les commentaires ci-dessous.