3 générateurs de mockups de site Web multi-appareils gratuits

Connaissez-vous les générateurs de mockups de site Web multi-appareils, en anglais, Multi Device Website Mockup Generator ?

À l’origine, ils sont plutôt conçus pour tester le responsive d’un site Web. Mais vous pouvez faire comme moi, c’est-à dire, les détourner de leur fonction première.

En un seul clic, vous obtiendrez un mockup présentant un site Web dans divers appareils Apple (iMac, MacBook, iPad et iPhone) et ce, en mode responsive.

Si vous êtes créateur de sites Web, les mockups multi-appareils, vous serviront, par exemple, à présenter vos réalisations à vos clients.

Et puis, vous pourrez aussi les inclure dans vos pages de garde de propositions commerciales, audits que vous envoyez à vos clients et autres afin de les rendre plus attractifs.

Perso, je trouve ça top, qualitatif et largement plus rapide à utiliser qu’un template de mockup dans lequel il faut intégrer une image.

De ce fait, aujourd’hui, j’ai envie de vous présenter trois sites qui en génèrent gratuitement.

Am I Responsive générateur de mockups de site Web basique 💛 

En premier lieu, voici Am I Responsive, un site bien connu pour montrer à vos clients le responsive d’un site Web, mais beaucoup moins pour sa fonction de Multi Device Website Mockup Generator.

Ce générateur de mockups de site Web multi-appareils permet d’obtenir une image avec des appareils Apple côte à côte.

Personnellement, ce n’est pas celui que j’utilise, car le trouve trop basique. Mais, il peut peut-être vous convenir.

Pour générer votre mockup, ajoutez votre URL dans le champ de saisie. Puis cliquez sur “Go”ou appuyez sur la touche “Entrée” de votre clavier.

Ensuite, soit vous laissez la fenêtre d’accueil du site dans chaque appareil, soit vous naviguez sur votre site et vous vous positionnez sur les pages que vous souhaitez afficher différemment dans chaque appareil.

Pour ce qui est de la couleur de l’arrière-plan, Am I Responsive propose un choix de deux couleurs d’arrière-plan : sombre (#0F0D0E) ou clair (#F9F4DA). Alors, selon votre goût, choisissez la couleur voulue en cliquant sur l’icône en forme de soleil/lune.

Enfin, faites une copie d’écran et utilisez-la comme bon vous semble.

💡​​ Ce qu’il y a de bien avec Am I Responsive, c’est que vous pouvez copier l’URL du mockup et la partager (https://ui.dev/amiresponsive?url=https://example.com/).

Yujin Yeoh Website Mockup Generator 💙 

Yujin Yeoh Website Mockup Generator est le deuxième générateur de mockups de site Web multi-appareils que je vous propose de tester.

Il propose non seulement 4 modèles de mockups de site Web multi-appareils différents, mais aussi 10 mockups avec un seul appareil. De plus, il a l’avantage de permettre d’afficher/masquer les appareils souhaités.

Par contre, pour les mockups multi-appareils, il est impossible de changer la couleur de fond et ça je trouve ça dommage. Vous aurez donc un fond blanc.

Pour générer votre mockup, tapez une URL. Puis, cliquez sur “Load/Update”.

Ensuite, sélectionnez la mise en page que vous préférez parmi les 14 modèles.

Enfin, cliquez sur “Preview Mockup” pour afficher votre mockup dans un nouvel onglet et faites une capture d’écran.

💡 ​​ J’ai l’impression que cet outil n’est pas mis à jour régulièrement puisque je n’arrive pas à faire défiler les pages des sites. Peut-être aurez-vous plus de chance que moi…

Techsini Multi Device Website Mockup Generator mon générateur de mockups de site Web multi-appareils 💖 

Techsini Multi Device Website Mockup Generator est le générateur de mockups de site Web multi-appareils que je préfère et celui que j’utilise depuis des années. 💖

Comme pour les deux autres, entrez l’URL de votre site Web dans la zone de saisie. Puis, cliquez sur le bouton “Generate Mockup”.

Ensuite, diverses options de mise en page s’offrent à vous.

Vous pouvez :

• Déplacer les maquettes et les placer où vous le souhaitez avec un simple glisser-déposer
• Changer la couleur de fond via un color picker
• Masquer les appareils que vous ne souhaitez pas voir
• Agrandir les appareils
• Modifier la perspective du mockup (droite, gauche, de face)

Enfin, lorsque le mockup est prêt, faites une capture d’écran.

💡​​ Le site comporte des publicités, mais rien de bien méchant.

Conseils pour les générateurs de mockups de site Web multi-appareils

Pour conclure, voici quelques conseils pour vos mockups :

Pour télécharger un mockup, faites une capture d’écran ou bien, utilisez l’extension Chrome FireShot en choisissant l’option “Capturer la sélection” et “Enregistrer en tant qu’image”.

Vous souhaitez avoir un mockup de site multi-appareils avec fond transparent pour les placer sur un fond de votre choix ? En ce cas, ne choisissez pas un mockup avec un fond blanc, car le détourage ne sera pas top. Optez plutôt pour un fond avec une couleur qui tranche et qui fait bien ressortir les contours des appareils. Puis, utilisez un outil dédié pour effacer l’arrière-plan ou encore l’outil “baguette magique” de Photopea.

Dernier petit conseil : avant d’intégrer votre mockup à un site Web, n’oubliez pas d’optimiser votre image. Et faites en sorte que le mockup soit bien référencé. 😉