Comment réaliser une maquette de votre futur site web en moins d’une heure !
--
Mockup, gabarit, maquette site web, tous ces termes ne m’inspiraient pas grand chose. Et pourtant j’en entendais 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 permettant de créer des gabarits, en anglais on appelle cela un mockup.
Vous me connaissez, je ne pouvais me satisfaire de cette explication, dont certains mots m’échappaient, et 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 Encore une Maquette Site Web ?
Commençons par définir les choses. Une maquette de site Web, ou mockup en anglais, c’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 montrera un menu de navigation en haut, une colonne centrale contenant des articles et une colonne de droite contenant plusieurs briques : un module inscription newsletter, un module “Derniers articles”, etc.
Tout cela sera réalisé de manière assez brute et approximative. L’objectif est de permettre au designer du site de savoir ce que vous avez en tête avant de commencer son travail.
Notez qu’on utilise aussi les termes maquette fonctionnelle et wireframe (en anglais) pour désigner, 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. Ve vous en ai préparé une ici.
Le Plus Simple : le Mockup à l’Ancienne
Je ne vais pas m’attarder sur cette première technique car elle semble diamétralement opposée au Web : faire une maquette de votre site sur une feuille de papier.
Quoi que !
Dans certains cas de figure, si vous êtes seul(e) à prendre les décisions et que vous allez réaliser vous-même le design de votre site Web, et si par ailleurs vous aimez bien dessiner et utiliser du papier (les pauvres arbres de nos forêts !! :) alors pourquoi pas vous faciliter la vie et travailler sur du papier.
Par contre, dès que vous voulez pouvoir échanger avec des personnes à distance, ou être sûr de conserver votre travail (une feuille de papier, ca se perd facilement), mieux vaut travailler en version électronique pour faire votre gabarit de site Internet.
Déjà un Peu Plus Evolué : le Mockup en Utilisant Powerpoint
Microsoft a fait un cadeau empoisonné à la planète (parmi d’autres) : Powerpoint.
La raison est simple : cet outil est aujourd’hui quasi-automatiquement associé à “présentation à l’oral”. Or cet outil présente plein de problèmes qui font qu’on assiste à 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, de départ, pour montrer 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 vous pouvez procéder, j’ai créé un début de mockup avec Powerpoint, que voici :
Comme vous pouvez le voir, j’ai utilisé dans la partie 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 des éléments intéressants dans la partie “SmartArt”.
A lire aussi : Installer WordPress sur OVH-Le Miracle du Module en 1 Click !
Le Top : les Outils en Ligne Spécialisés
Il y en a toute une série. Je pense que je vous les présenterai sous forme d’une liste dans un prochain article :)
Je peux simplement déjà citer les plus connus :
C’est Moqups que j’ai testé et utilisé, et je vous le recommande !
Il est très intuitif et pas très cher.
Voici quelques copies d’écran, pour vous mettre la salive à la bouche :)
Ce premier écran montre comment se présente l’outil :
Il suffit de cliquer sur les éléments à gauche et les glisser sur l’écran principal. C’est à cet endroit qu’on va représenter notre design et mise en page de site Web.
Voici le résultat :
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 :
Toujours pas très sexy, je peux ensuite ajouter un “faux menu de navigation” en haut, comme ceci :
Soyez indulgents, 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’aurez compris. Cet outil de création de maquette de site Web vous permettra en 1 heure environ de créer un mockup. Celui-ci pourra être très complet et intuitif. Celle-ci pourra être utilisée par un designer de site, qui pourra ensuite mettre en œuvre vos souhaits facilement.
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, je vous invite à m’en parler dans les commentaires ci-dessous, je serais ravie d’en savoir plus :)
