Un site web bien construit et optimisé est essentiel à la réussite de votre entreprise. Cependant, la conception et le développement d’un site web peuvent prendre beaucoup de temps et d’argent. Dans cet article, je vais vous montrer comment créer une maquette web en 1 heure chrono ! En utilisant les meilleures pratiques de conception web et d’optimisation des moteurs de recherche (SEO), vous pourrez créer un site web à la fois efficace et attrayant. Vous apprendrez comment choisir un modèle, définir les mots-clés, sélectionner les images et le contenu, et bien plus encore. Suivez ces étapes et vous serez sur la bonne voie pour créer un site web optimisé qui vous aidera à atteindre vos objectifs !
Gabarit, mockup, maquette de site web, tous ces termes ne m’inspirent pas grand chose. Pourtant, je les entends de temps à autre.
Lors de ma discussion hier soir avec Laurent sur la stratégie globale pour créer un nouveau site Web, il m’a dit ce qui suit :
Pour discuter 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, il est préférable d’utiliser un outil de concepteur de gabarits. En anglais, c’est le mockup.
Vous me connaissez, je ne peux me satisfaire de cette description dont certains mots m’échappent.
J’ai donc effectué des recherches supplémentaires sur Google.
Voici le résultat de mes recherches sur l’utilisation de différentes techniques de maquettage pour la mise en page d’un site.
Qu’est-ce qu’un Mockup ou une maquette de site Web ?
Commençons par expliquer ce qu’est une maquette de site Web, ou mockup en anglais : c’est une représentation visuelle simplifiée de la façon dont vous voulez organiser votre site Web et ses composantes.
Par exemple, le mockup peut afficher :
- Un menu de navigation en haut,
- Une colonne centrale contenant des articles,
- Une colonne de droite avec plusieurs blocs : un module d’inscription à une newsletter, un module “Derniers articles publiés”…
Sur une maquette, tout est réalisé de façon grossière et approximative.
L’objectif principal est de montrer à votre Web designer ce que vous désirez avant qu’il ne commence son travail.
C’est aussi une étape cruciale pour bâtir un site web facile à utiliser et performant en conversion.
On peut aussi employer les termes « maquette fonctionnelle » et « wireframe » (en anglais) pour désigner, plus ou moins, la même chose !
Il suffit de jeter un coup d’œil sur Google pour trouver plein de modèles de mockups de blogs ou de sites Web.
Mon conseil : avant de créer une maquette Web, étudiez bien la signification et l’utilité de chacune des parties d’une page web.
Le plus facile : le Mockup à l’ancienne
Je ne vais pas m’attarder sur cette première technique.
En effet, tracer la maquette de votre site web sur une feuille de papier semble démodé par rapport aux pratiques du Marketing Digital.
Cependant !
Dans certains cas de figure, pourquoi pas simplifier vos tâches et travailler sur du papier si :
- Vous êtes la seule personne à 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 !!).
Cependant, pour échanger à distance avec d’autres personnes de votre équipe ou pour être certain 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.
Rendre votre Mockup plus évolué avec Powerpoint
Microsoft a offert au monde (entre autres) un cadeau empoisonné : Powerpoint.
La raison est simple.
PowerPoint est pratiquement toujours associé à « présentation à l’oral ».
Malheureusement, cet outil entraîne un formatage de la pensée et de la manière de transmettre ses pensées et idées aux autres.
Vous trouverez ici un article du Guardian, un journal anglais qui aborde le sujet.
Je n’ai 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 en revanche un excellent 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 :
Vous pouvez voir que j’ai utilisé dans la rubrique Insertion > Formes des rectangles et des ovales pour schématiquement représenter l’emplacement du logo et du menu de navigation.
Vous trouverez également d’autres fonctionnalités utiles dans la rubrique «SmartArt». Et vous pouvez aussi travailler vos images de la maquette avec Paint.
Vous pouvez ensuite poursuivre l’exercice en représentant graphiquement tous les éléments de la page d’accueil.
Une autre option équivalente consiste à partir de Google Slides qui dispose de gadgets graphiques similaires. L’avantage est sa fonction de collaboration pour partager votre maquette avec vos collaborateurs.
Les meilleurs outils pour le maquettage en ligne
Il existe un grand nombre d’outils spécialisés en matière de maquettage.
Cet article met en lumière les outils de maquettage de sites web en ligne les plus connus :
Moqups est l’outil de maquettage que j’ai personnellement testé. Je vous le recommande vivement !
Cet outil est très intuitif et très abordable.
Voici quelques captures d’écran pour vous faire une idée :
Cliquez sur un élément de la colonne de gauche et faites-le glisser sur l’écran principal pour l’intégrer dans votre maquette.
C’est dans cet espace que vous pourrez imaginer l’apparence et la mise en page du site web de votre entreprise.
Voici un premier résultat :
Cette page d’accueil n’est pas encore très attractive mais vous pouvez y ajouter un logo et une image pour le compléter :
Ajoutez également un « menu de navigation fictif » en haut, comme ceci :
Pas encore très esthétique ? J’ai mis 20 secondes pour créer ce mockup de faible valeur.
Mais je ne vous parle pas de sa valeur esthétique, mais plutôt de son intérêt : il vous permet de créer un mockup très complet et intuitif en moins d’une heure.
Ensuite votre créateur de sites web utilisera cette maquette pour dialoguer, puis plus aisément accomplir vos désirs.
Conclusion sur comment concevoir une maquette de site web
Créer une (ou plusieurs) version de votre gabarit est une étape cruciale dans la construction de votre site internet.
C’est aussi important lors du remodelage de votre site existant, à l’exception que vous devez également tenir compte des contraintes liées à l’indexation actuelle.
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 indispensable de réfléchir à une mise en page cohérente et en adéquation avec vos objectifs et vos futurs contenus.
Commencez par élaborer votre maquette avec le design fonctionnel. Autrement dit, travaillez en noir et blanc comme le propose moqups.
Une fois que les grandes lignes sont formalisées et validées, passez au design graphique avec votre identité et vos couleurs.
Pour cela, je vous recommande de commencer par créer vos Persona et de valider leur attractivité avec votre charte graphique.
Enfin, pour que votre site web soit vraiment adapté à votre public cible, il est indispensable de tester dès que possible vos maquettes avec 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 essayé moqups ? Avez-vous expérimenté d’autres outils de conception de maquettes de site web ?
Q1: Qu’est-ce qu’une maquette de site web ?
R: Une maquette de site web est un schéma visuel qui définit la structure et l’apparence d’un site web avant sa création.
Q2: Quel est le meilleur outil pour créer une maquette d’un site web ?
R: Il existe de nombreux outils qui peuvent être utilisés pour créer une maquette de site web, notamment Adobe Photoshop, Adobe Illustrator, Balsamiq Mockups et Axure.
Q3: Est-il possible de créer une maquette de site web en 1 heure chrono ?
R: Oui, c’est possible, mais cela dépend du niveau de complexité du site web et de l’outil de maquettage utilisé. Il est recommandé de prendre un peu plus de temps pour créer une maquette de qualité.
