Ceci est la version simplifiée (AMP ) de l'article Comment faire un mockup iPhone, Android, Mac ou PC ? Une mise en situation digitale ? Définition, Astuces et Exemples.
Pour votre stratégie de contenu, la variété des supports de communication est la clé. Et si vous souhaitez marquer les esprits de votre cible, mieux vaut miser sur des supports originaux. Chez Eficiens, nous utilisons les mockups pour présenter nos créations en situation réelle que ce soit sur mobile (iPhone / Android) ou PC. Et cela vaut aussi bien pour nos clients qu’en interne. Pour en savoir plus, découvrez le fonctionnement des mockup dans cet article.
💻 C’est quoi un mockup ?
La définition du mockup
C’est quoi un mockup ? Il s’agit d’un visuel modifiable. Plus précisément, c’est une maquette sur laquelle vous pouvez ajouter du contenu à votre guise, comme une image, une vidéo, du texte, un bouton, etc. Par principe, la maquette est relativement simpliste afin de mettre en avant votre contenu.
Un exemple très connu : le téléphone ou l’ordinateur (avec écran noir) contextualisé dans différents environnements en toile de fond. Il suffit alors de remplacer cet écran noir par le contenu que vous choisissez : site web, application, portfolio, etc. Le mock-up est calibré de sorte que vous puissiez modifier rapidement le contenu visuel.
L’objectif est de transmettre votre message de manière originale avec un support de communication innovant et design.
Les utilisations du mockup
Le mockup peut être utilisé d’une multitude de manières :
- Simulation d’un site web : lors de la phase de conception d’un site, le mockup donne un aperçu du résultat. Cela permet de se mettre facilement à la place de l’internaute. Dans le même temps, vous pouvez apporter des ajustements si vous constatez le moindre problème de placement. L’objectif étant toujours d’améliorer l’expérience utilisateur.
- Mise en situation : vous n’avez pas besoin de photographier votre contenu dans une situation réelle. Il vous suffit de l’insérer dans la maquette que vous aurez choisie. Avant même que votre projet ne soit matériellement existant, vous obtenez un aperçu du résultat.
- Publicité : cela permet ainsi de le vendre plus facilement. Par exemple, vous pouvez poser votre logo sur une multitude de supports. En effet, outre l’écran, le mock-up peut aussi exister sous le format magazine, tote-bag, prospectus, t-shirt, mug, livres, etc.
- Mise en avant dans les stores mobiles notamment sur App Store d’Apple et le Playstore d’Android : il s’agit de présenter au mieux votre application pour inciter au download
🗒 Comment faire un mockup ?
L’outils recommandé par Eficiens : Placeit.net
Le fonctionnement de Place it
Chez Eficiens, nous utilisons placeit.net pour faire nos mockup. Voici le fonctionnement de cet outil.
- Une fois que vous êtes sur le site, cliquez sur “Mockup Generator” pour accéder à des centaines de templates. Ces derniers sont répartis en plusieurs catégories. Par exemple, android, t-shirt, coffee mug, banner, print, etc.
- Ensuite, choisissez la catégorie qui vous convient. Par exemple Brochure.
Pour chaque catégorie, vous retrouverez plusieurs mises en situation (dans la rue, avec des individus, etc.).
- C’est alors à vous de choisir la maquette qui vous convient. Nous choisissons alors cet exemple et accédons à la phase de personnalisation
- Pour commencer, téléchargez l’image (de préférence à la bonne taille) :
- Ensuite, ajoutez du texte si nécessaire. Vous pouvez alors ajouter plusieurs lignes de textes, choisir la typographie, mais également les couleurs de la police et du fond.
- Dans cet exemple, vous pouvez sélectionner plusieurs couleurs, pour le fond, la carte, les cadeaux ou encore le ruban.
- Dès que votre mockup est prêt, il ne vous reste plus qu’à le télécharger.
Le tarif de Place it
Pour télécharger autant de mockup que vous le souhaitez et accéder à toutes les maquettes, l’abonnement à placeit.net est de 14.95 $ par mois ou 89,69 $ par an.
Le retour d’expérience de Sarada, notre CM
Pour l’utilisation des mockup, Sarada est notre spécialiste. En tant que community manager, placeit.net est un de ses outils préférés. Et pour cause, le logiciel permet d’avoir des visuels engageants et esthétiques en très peu de temps. La plateforme est très intuitive, ce qui rend son utilisation très rapide et facile. En outre, « il y a un large choix de visuel », aussi bien des images que des vidéos. En effet, vous pouvez choisir des supports avec ou sans individu, avec des sujets de tout âge, des fonds multiples et toutes sortes d’écrans (ordi, tablette, téléphone ou voire les trois en même temps). Au-delà des maquettes, le site permet d’insérer une image, mais aussi une page web à partir de son URL. Par ailleurs, les visuels créés peuvent être conservés dans la bibliothèque. Ils peuvent ainsi être téléchargés ou modifiés à plusieurs reprises.
Même si le logiciel est l’un des plus utiles pour faire un mockup, il présente quelques inconvénients minimes :
- Il n’y a que très peu de modèles d’appareils hors Apple.
- Il est impossible d’insérer directement une vidéo à la place d’une image. Pour cela, Sarada télécharge l’image avec un fond vert et insère sa vidéo par la suite via un logiciel de montage.
- Il est possible de croper l’image, mais les possibilités de montage sont minimes. Dans ce cas, il vaut mieux avoir une image à la bonne taille pour un meilleur rendu.
Le mot de Sarada : « Placeit est vraiment un de mes logiciel préférés en tant que community manager. Il me permet de gagner du temps et d’avoir des visuels engageants et esthétiques rapidement ! »
Les autres outils
L’avantage de placeit.net est sa fonction tout-en-un. Vous pouvez ainsi créer des mockup et accéder à plusieurs templates. Mais ce n’est pas toujours le cas.
Les outils tout-en-un
Parmi les outils proposant des templates et la création de mockup, on retrouve :
- Frameshift : il permet de faire des mockup uniquement pour site web. Ainsi, il ajoute une barre de recherche à votre image. Vous avez ensuite la possibilité de personnaliser le fond, la taille, etc. Frameshift vous permet aussi d’ajouter votre URL sur la barre de recherche. L’avantage de cet outil est sa gratuité.
- Previewed : c’est un outil focalisé sur les mockup pour les applications mobiles (app store ou google store). Cette application propose plusieurs versions selon l’utilisation. Ainsi, pour une extraction par semaine, Previewed est gratuit. En revanche, si vous avez besoin de plus (+20 extractions) et de sauvegarder vos créations, le tarif est de 20 $. Et pour les entreprises utilisant les mockup de manière régulière, il existe la formule en illimité. Dans ce cas, il faut prévoir 9 $ par mois.
- Device shots : cette interface vous permet de créer des mockup pour une multitude de supports. Par exemple, mobile, tablette, ordinateur, montre connectée et autres objets connectés pour la maison. Là encore, le service est gratuit.
- Screenshot rock : il permet de créer des mockup pour ordinateur et mobile, et ce, gratuitement. Tout comme frameshift, cette application vous propose d’ajouter une barre de recherche avec l’url de votre choix.
Les autres outils
À défaut d’utiliser les outils spécialisés dans la génération de mockup, il est possible d’utiliser des banques de mockup ou banque d’image et un logiciel de design.
Pour les banques de mockup, les plus connus sont :
- Mockup world : cette banque en ligne regroupe des mockup au format PSD. Ils sont réalisés par des designers en provenance du monde entier.
- Adobe stock : cette banque d’image propose également des mockup à ses utilisateurs.
- Les outils gratuits sous forme de PSD : faites une recherche « mockup iPhone » ou « mockup android » sur Google
Pour ceux qui maîtrisent les logiciels de graphisme, vous pourrez utiliser Photoshop, Illustrator ou encore Sketch. Dans ce cas, les designers choisissent une maquette et y intègrent leur contenu en jouant avec les différentes fonctionnalités de l’outil. Cela vous permet de personnaliser vos mockups à l’infini. Mais attention, cela demande de bien connaître les techniques de design graphique et du logiciel utilisé.
🎉 Nos exemples
Eficiens utilise le mockup dans sa stratégie de communication.Et ce, aussi bien sur le site web, LinkedIn ou encore sur Twitter ou encore dans notre newsletter.
Dans notre stratégie de communication sur Linkedin, nous utilisons beaucoup les mockups.
Et pour sa stratégie de communication, Eficiens utilise le mockup dans différentes mise en situation.
Ou sur différents supports.
Cas client
Outre notre propre stratégie de communication, nous utilisons également les mockup pour présenter nos résultats à nos clients.
C’est ainsi que nous avons utilisé le mockup pour présenté le site Mutuelle Bleue.
Ou Mutualia.
