Les mockups sont couramment créés sous le logiciel Photoshop qui permet d’aller loin dans le montage des visuels/photos. Mais ce logiciel est cher et n’est pas à la portée de tout le monde dans son utilisation. Des générateurs en ligne gratuits de mock-up ont fleuri sur la toile. Ayant pour ma part du en réaliser pour illustrer quelques création de sites vitrines WordPress, je me suis mise à en rechercher et tester plusieurs. Je partage avec vous mes 3 sites gratuits favoris pour créer des mockups en en rien de temps ! Si certains d’entre vous se demandent ce qu’est un Mock-up ou en ont vaguement entendu parler, faisons un point rapide, histoire d’être sur la même longueur d’onde.
Mock-up : définition
Initialement, un mock-up est une maquette simplifiée d’une interface utilisateur (prototype, site internet, application etc). Il sert à montrer les principales fonctionnalités sans se concentrer sur l’aspect visuel de la chose. Il s’agit là d’une définition trouvée sur le site très utile de glossaire.infowebmaster. Cette définition n’est pas la seule mais l’objet initial du mockup est de se concentrer sur les fonctionnalités plutôt que sur son graphisme. Aujourd’hui le mock-up est devenu bien plus visuel se mettant à l’oeuvre dans de multiples scènes.
Voici un aperçu d’un mockup selon leur définition : ça vous fait envie n’est-ce pas ?! 😉
Dans le domaine marketing et communication le mockup a plutôt une résultante visuelle en plus des fonctionnalités. C’est quand même notre vocation de rendre les choses alléchantes et sexy non ? Dans ce contexte, il s’agit d’un template/gabarit ou encore d’un montage photos dans diverses situations et sur différents supports (Iphone, PC, livre, carte de visite, logo, couverture magazine etc).
A quoi sert un mock-up ?
Un mock-up revêt de nombreuses utilités, en voici quelques-unes :
- Mettre en scène de manière visuelle votre portfolio de réalisations clients, vos produits ou services.
- Montrer via un template/montage photo à quoi ressemblera vos futurs logo/carte de visite/site web/application/e-book
- Aider les parties prenantes à visualiser et se projeter sur votre idée.
- Illustrer votre site web, vos articles de blog ou encore vos posts sur les réseaux sociaux.
Découvrez vite 3 sites gratuits pour créer vos propres mockups facilement.
1. Mockuper : complet et efficace
Mockuper : ce site a l’avantage de proposer une grande variété de supports différents pour obtenir des visuels de bonne qualité. PC, Mac, tablette, smartphone, montres connectées et même des supports pour impression. Vous avez de quoi trouver votre bonheur pour bien débuter. Vous téléchargez ensuite simplement votre mock-up au format PNG ou PDF.
- Son point fort : vous pouvez classiquement télécharger votre image et recadrer la zone à faire apparaître dans le mockup. Ou encore plus simple et rapide, copiez-collez l’adresse web qui vous intéresse, recadrez ensuite la zone et téléchargez votre mock-up !
Ci-dessous le résultat d’un test effectué en moins d’1 minute avec le site foxeo-marketing : plutôt efficace non ?
- Son point faible : contredisez-moi si je me trompe mais les scènes sur Mockuper ne proposent qu’un support à la fois. Il n’y pas de scènes multi-supports de type PC + Iphone + tablette par exemple. Ces scènes multi-supports sont utiles lorsque l’on veut montrer le côté responsive d’un site web ou d’une application.
2. Techsini : pour des mockups multi-support
Pour pallier au point négatif de Mockuper et en complément, vous pouvez utiliser Techsini. Il permet de sélectionner la combinaison de supports qui vous intéresse. Vous pouvez choisir la couleur de fond du visuel pour vous adapter parfaitement à votre site ou article de blog. Vous avez également le choix sur la perspective que vous souhaitez donner. Et pour terminer vous pouvez déplacer et agencer à votre guise les supports.
- Point fort : le côté multi-support et il suffit également de taper l’adresse du site pour obtenir le visuel. Nul besoin de faire une capture d’écran avant.
- Point faible : le site ne propose pas de scènes et il faut installer l’extension FireShot pour effectuer sa capture d’écran. Il ne génère pas l’image automatiquement. Je vous rassure l’extension est très simple et rapide à installer mais ça rajoute une étape au démarrage.
Exemple de test effectué avec Techsini :
3. Mockdrop.io
Mockdrop.io : ce site de mockups gratuits est plus classique mais efficace. Il propose suffisamment de choix dans les mises en scènes lesquelles proviennent de bibliothèques de photos libres de droits. Les montages sont de bonnes qualité. Il vous suffit d’ajouter votre photo ou capture d’écran. La taille de l’image requise est précisée comme sur la plupart des générateurs pour optimiser le rendu de votre mock-up.
- Point fort : un large choix de scènes et une simplicité d’utilisation entièrement gratuite.
- Point faible : il n’est pas possible de générer le mock-up automatiquement via l’adresse de votre site web ou blog.
Aperçu d’un mock-up avec Mockdrop.io – un mockup d’un mock-up d’ailleurs 😉 :
Maintenant à vous de jouer! Créez vos mockups gratuitement ! N’oubliez pas de compresser le poids de vos images avant de les mettre en ligne sur votre site ou blog afin de ne pas ralentir le chargement des pages.