Vous souhaitez présenter un produit avec votre marque dessus ? Grâce aux mockups vous allez pouvoir réaliser beaucoup de choses à titre personnel et professionnel. Vous pourrez alors voir sur plusieurs supports comment rend votre idée, etc. Découvrez dans cet article comment et où télécharger des mockups gratuitement.
Accès rapide (Sommaire) :
Création de mockup en #Short
Un mockup est une conception statique non fonctionnelle.
C’est un outil visuel pour visualiser et modifier une idée.
Utilisez Photoshop pour créer un mockup : choisissez une image, préparez l’illustration, intégrez-la et ajustez la perspective.
Pour les mockups de sites web : configurez, planifiez, utilisez des guides et ajoutez du contenu.
Une maquette est une conception statique d’une page Web ou d’une application qui présente bon nombre de ses éléments de conception finaux, mais qui n’est pas fonctionnelle. Une maquette n’est pas aussi raffinée qu’une page en direct et comprend généralement des données d’espace réservé.
Il est utile de décomposer chaque partie de cette définition.
En tant que « conception statique », une maquette n’a pas la fonctionnalité d’un site internet en direct. Bien qu’une maquette inclue un bouton CTA coloré, par exemple, elle n’ouvrirait pas de formulaire lorsqu’on clique dessus, contrairement à un site Web (ou au prototype d’un site Web). Une maquette peut afficher une image de couverture en haut de la page, mais elle n’aura pas de carrousel actif comme un site Web.
Une maquette n’est pas la première étape du développement d’un site Web, elle est donc en passe de devenir un produit fini, mais elle a encore du chemin à parcourir. Une maquette peut inclure une copie d’espace réservé (pense à « lorem ipsum ») ou des images, mais elle est destinée à donner une assez bonne idée de ce à quoi ressemblera la page, mais pas de ce à quoi elle ressemblera à la fin.
À quoi sert un mockup ?
En fin de compte, un mockup sert de brouillon visuel de ce qu’est une page Web ou une application. Il est créé pour donner vie à une idée ou à une structure filaire et permet à un concepteur de tester comment divers éléments visuels fonctionnent ensemble.
Les mockups donnent aux parties prenantes de la page la possibilité de voir à quoi ressemblera cette page tout en suggérant des modifications de mise en page, de couleur, d’images, de styles, etc. Si vous vous demandez à quoi ressemblerait une page en utilisant une couleur secondaire, vous pourrez tester son apparence en créant une deuxième version de la maquette. De même, si vous souhaitez apporter une modification telle que l’ajout d’un en-tête tout en centrant une image, votre mockup peut permettre à l’équipe de voir à quoi pourrait ressembler ce changement potentiel.
Une page doit être créée dans un but précis avec un objectif particulier en tête. Les mockups offrent à l’équipe la possibilité de voir comment cet objectif peut être atteint grâce à la mise en page créée par un concepteur d’interface utilisateur avec une bonne structure, et comment cette mise en page peut être concrétisée en utilisant leurs normes de marque et leur créativité visuelle.
Comment faire un mockup gratuit ? Comment créer un mockup ?
Avant de vous lancer dans un nouveau projet, c’est toujours une bonne idée de planifier exactement ce que vous prévoyez de faire. Avec le travail de conception et les imprimés, c’est encore plus crucial.
Dans ce didacticiel, nous allons vous montrer comment créer un mockup, y compris comment créer une maquette de produit dans Photoshop, afin que vous puissez facilement démarrer vos propres conceptions.
Comment faire un mockup avec Photoshop ?
Comme nous l’avons vu, il existe de nombreuses façons d’utiliser des mockups dans votre propre travail. Mais, soyons un peu plus précis. Dans ce didacticiel, nous allons vous montrer comment transformer un motif dessiné à la main en collections personnalisées d’articles comme un smartphone, carte de visite, savon, couverture de livre, etc à l’aide de Photoshop.
Étape 1 : Trouvez votre mockup
Lorsque vous essayez de présenter votre travail de la meilleure manière possible, vous voudrez trouver des photos de haute qualité à utiliser pour vos maquettes. Il existe de multiples sites qui proposent des photos d’archives de qualité, telles que des articles ménagers, des vêtements, des murs, etc.
Unsplash est génial (et utilisé par de nombreux designers) car toutes leurs images sont libres de droits, ce qui signifie que vous n’avez pas besoin de payer ou de fournir une attribution à un photographe pour utiliser la photo. Les sites payants comme Getty Images et iStock sont également de bonnes options, mais peuvent devenir coûteux si vous n’avez pas les moyens.
Avant de commencer à créer une maquette de produit dans Photoshop, il est important de préparer votre graphique.
Ouvrez la photo que vous utilisez comme base de maquette. À l’aide de l’outil « Sélection », créer un carré ou un rectangle qui couvre la section de la photo sur laquelle vous souhaitez que votre conception soit utilisée.
Copie ce carré dans Adobe Illustrator sous forme de forme composée. Cela vous donnera la taille correcte pour votre conception pour remplir l’objet dans l’image de maquette.
Remplissez le carré avec votre motif ou votre illustration et enregistrez la conception à l’aide de la fonction « Exportation » et d’un format JPEG, avec les paramètres optimisés de base. Ceci est important pour vous assurer qu’aucune ligne blanche ne traverse votre conception et qu’elle est enregistrée en tant que motif continu à utiliser dans votre maquette.
Étape 3 : Importation dans Photoshop
Maintenant que votre illustration est prête, vous devrez préparer votre image de maquette. Trouvez la section de l’image où vous souhaitez que votre illustration aille et, à l’aide de l’outil « Lasso magnétique », déplacez-vous le long des bords de la section pour mettre en évidence cette zone.
Faitez glisser votre nouvelle illustration JPEG dans la zone sélectionnée (de sorte que votre image couvrez tout ce que vous voulez pour présenter le design) et cliquez sur « Convertir en objet intelligent » dans le panneau de calque de motif.
À partir de là, utilisez le menu « Sélectionner » et « Charger la sélection » pour utiliser le lasso pour mettre en surbrillance l’objet que vous souhaitez souligner. Cliquez sur le petit rectangle avec le cercle dans le panneau des calques et votre motif s’adaptera automatiquement à l’objet.
Ne vous inquiètez pas s’il semble un peu plat au début. Pour résoudre ce problème, assurez-vous que le masque de calque de l’image est sélectionné et change le mode de fusion de « Normal » à « Multiplier ». Cela permet à la conception de se fondre de manière plus transparente avec l’objet que vous avez sélectionné pour la maquette.
Étape 4 : Ajustement de la perspective
Si vous travaillez avec un produit qui a une sorte de perspective, la conception devra être ajustée pour éviter que ça ne paraisse trop plat.
Par exemple, lorsque vous apprenez à créer une maquette de t-shirt dans Photoshop, la perspective de la conception sera très différente en fonction de l’image globale de la maquette. Une chemise plate sans modèle ou une chemise sur une personne tournée directement vers l’avant donnera un aspect différent par rapport à une maquette plus « mobile », où le modèle peut participer à une action et créer des lignes ou des plis dans la chemise.
Comme vous l’avez fait auparavant, vous utiliserez l’outil « Lasso magnétique » pour sélectionner la partie de l’image de maquette sur laquelle vous souhaitez que le design figure et faites glisser votre illustration dans Photoshop. Cliquez sur « Modifier »>, « Perspective Warp » et faites le glisser sur la zone du motif. Choisissez « Warp » dans le panneau supérieur, puis « Multiplier » sur le calque. Vous pouvez ensuite faire glisser les coins du dessin jusqu’à ce que tu ayez la perspective que vous recherchez.
Comment faire un mockup de site web ?
Les maquettes ne sont pas réservées aux produits physiques. La conception de produits numériques, tels que des sites Web et des applications, nécessite une planification minutieuse et des visuels détaillés avant de passer en production. Jette un œil à ces étapes simples pour créer une maquette de site Web.
Étape 1 : Configurez votre espace de travail
Lorsque vous travaillez dans la conception Web, la première étape consiste à ajuster votre espace de travail Photoshop à la bonne taille. Les valeurs par défaut de Photoshop sont généralement configurées pour un travail plus axé sur l’impression, alors allez dans « Affichage »>, « Règles » et modifiez les paramètres en pixels pour les « Types » et les « Règles ».
Étape 2 : Planifiez votre site web réactif
Vous devrez également garder à l’esprit que, lors de la création de conceptions Web réactives dans Photoshop, vous n’aurez pas d’image évolutive comme vous le feriez dans la version définitive du site Web. Vous souhaiterez créer différentes vues du même design pour toutes les options de taille (ordinateur de bureau, tablette, mobile) afin que le concepteur Web sache exactement comment tout doit s’assembler.
Étape 3 : Utilisez les guides de ligne
Les guides de ligne afficheront des lignes lumineuses sur votre maquette, et vous pouvez les trouver dans l’onglet « Affichage ».
L’utilisation de guides de ligne est utile pour aligner des éléments clés tels que votre logo, la navigation principale et les blocs de contenu sur toute la page afin de créer un aspect final équilibré. Les lignes sont particulièrement importantes lorsque vous travaillez sur des sites réactifs, car elles permettent de garantir que les proportions d’espacement sont correctes sur les versions de bureau et mobiles de votre site.
Étape 4 : Ajoutez des espaces réservés
À l’aide d’outils vectoriels et de l’outil « Texte », commencez à créer chaque élément de votre page Web. Utilisez Google Fonts pour vous assurer que tout ce que vous utilisez est sûr et accessible pour le Web, et commencez à saisir tout texte ou élément visuel que vous souhaitez inclure dans la conception.
Comment faire un mockup sans Photoshop ?
Si vous ne possèdez pas le logiciel Photoshop, pas de panique, il existe des alternatives pour que vous puissiez créer votre mockup. Plus précisément, ce sont des générateurs de mockups en ligne où vous pourrez placer ton image sur le support que vous souhaitez comme un smartphone, une carte de visite, livre, etc.
Pour ce faire, plusieurs sites permettent de créer un mockup sans Photoshop, il vous suffit d’avoir une image pour la placer sur votre mockup.
Canva
Vous devez déjà sans doute connaître Canva de nom ou vous devez peut-être déjà l’utiliser. C’est un site en ligne qui permet de créer beaucoup de toute chose pour tout type de projet. Canva ne nécessite pas de compétences ardues dans la matière du graphisme, car tout est très simple et accessible pour tout utilisateur, de plus, on peut y retrouver des aides au cas où vous serez vraiment perdu.
Du coup vous allez pouvoir créer votre mockup sur Canva très facilement. Il vous suffit de choisir un modèle prédéfini. Ensuite télécharge votre maquette + l’image que vous souhaitez mettre à l’intérieur dans Canva. Faites glisser votre image principale sur le mockup et positionnez-la comme vous le souhaitez.
Accèdez à Grilles et sélectionnez celle qui convient le mieux à votre écran, il s’agira très probablement de la première grille unique. Faites le glisser sur votre maquette et faites le pivoter ensuite redimensionne le jusqu’à ce qu’il soit posé sur le dessus de manière transparente. C’est ainsi que vous ajoutez simplement et rapidement votre image à une maquette, aucun Photoshop est requis.
MockupBro
MockupBro est un générateur de maquette en ligne qui fonctionne en trois étapes simples : vous choisissez votre modèle préféré, téléchargez votre conception pour l’intégrer et téléchargez votre image finale.
L’utilisation de ces fichiers est libre de droits pour les portfolios, la conception de sites Web, les conceptions imprimées et d’autres projets commerciaux ou personnels, à la seule condition de ne jamais redistribuer ces fichiers modifiables sur d’autres plateformes. Vous devez vousabonner au service pour supprimer le filigrane numérique sur vos créations.
Smartmockups
Si vous souhaitez créer votre propre mockup, l’une des meilleures options pour le moment est Smartmockups, un outil Web qui vise uniquement à aider ses utilisateurs à les créer aussi rapidement et facilement que possible.
Ils ont actuellement plus de 8 000 modèles de maquette, donc quel que soit le type de maquette que vous recherchez, il y a de fortes chances qu’ils aient une gamme solide de modèles parmi lesquels choisir.
Le processus est simple pour créer son mockup, la première étape est de choisir le support que vous souhaitez, ensuite sélectionnez un modèle gratuit puis place votre image. Quand vous avez fini, il vous restera juste à télécharger votre fichier.
Où trouver des mockup gratuit ?
Mckups.com
Mckups.com est une collection organisée de maquettes PSD gratuites fabriquées à la main par les designers les plus talentueux. Ils proposent des maquettes gratuites photoréalistes qui t’aideront à présenter magnifiquement tes conceptions, sites internet et autres projets. Ils ont également une catégorie spéciale avec des maquettes de masques faciaux qui sont actuellement très demandées. Le site a une belle interface et une recherche rapide. Chaque modèle est publié avec un aperçu, une courte description et un lien menant à la page de téléchargement.
Smartmockups
Smartmockups est l’un des meilleurs générateurs de maquettes en ligne que vous pouvez trouver en ligne, avec une nouvelle galerie visuelle qui comprend de magnifiques maquettes dans toutes les catégories. La bibliothèque Smartmockups compte plus de 8 000 maquettes et en ajoute environ 300 nouvelles chaque mois. Les maquettes technologiques incluent des systèmes d’exploitation tels qu’iOS et Android et des appareils tels que des smartphones, des ordinateurs de bureau, des ordinateurs portables, des tablettes, des montres, etc.
Applaunchpad
Applaunchpad est un site de mockup ou vous pourrez retrouver 1000 modèles pour vos différentes créations. Sur le site, il vous suffira de choisir le mockup que vous souhaitez et vous pourrez placer votre image pour voir à quoi votre modèle ressemble. Pour le récupérer, vous aurez juste à télécharger le fichier.
Ce générateur de mockup est entièrement gratuit et ne requiert qu’une simple création de compte.
PSD Repo
PSD Repo est un site regroupant une collection sans cesse croissante de fichiers PSD de qualité conçus par des créateurs talentueux qui choisissent de partager leur travail gratuitement. Tout les mockups que vous pourrez trouver sur le site seront gratuit et vous pourrez les télécharger sans difficultés. Vous n’aurez pas besoin de créer de compte également.
Pixel Buddha
Pixel Buddha propose une collection de ressources gratuites à usage personnel et commercial, notamment des logiciels, des sites Web, des applications, des modèles et des thèmes. Tous les modèles PSD de maquette qui y sont présentés sont conçus à l’aide d’objets intelligents, ce qui rend le travail fluide et facile.
Pour réaliser un mockup de livre, Adazing.com est un site web où vous pouvez créer des mockups pour des ebooks, des affiches, des petits cahiers, mais aussi pour des DVDs : https://www.adazing.com/fr/book-mockup-generator/
Mockup application
Créer un mockup d’application est essentiel pour visualiser l’apparence de votre application avant de commencer son développement.
Quelle est la différence entre un mockup et un wireframe ?
Un mockup vient après un modèle filaire dans le processus de conception. Les maquettes, évidemment, sont plus robustes et plus proches d’un produit fini qu’un wireframe.
Il existe quelques différences importantes qui peuvent vous aider à garder les wireframes et les maquettes droites :
Les wireframes sont en noir et blanc ; les maquettes sont en couleur
Les wireframes sont utilisés pour la fonctionnalité ; les maquettes sont pour les visuels
Les wireframes montrent simplement les éléments d’une page ; les maquettes apportent de la substance
Par analogie, le wireframe représente le plan d’une maison. Elle montre, en deux dimensions et en noir et blanc, l’agencement de la maison et l’interaction des pièces entre elles.
Si un wireframe est un plan, un mockup est un rendu en deux dimensions d’une maison debout. Il montre la couleur du revêtement et le style de garniture. Il offre une coupe transversale du salon, complétée par du papier peint et du granit pour la cheminée.
Ces images peuvent être rapidement modifiées pour montrer un papier peint différent ou un plancher en bois plus foncé. De la même manière, une maquette peut montrer aux parties prenantes différents aspects visuels d’une page sans modifier sa structure.
Quelle est la différence entre une maquette et un prototype ?
Les maquettes viennent avant les prototypes, qui sont des simulations de ce que sera une page en direct. Alors qu’une maquette est une image statique, un prototype offre la plupart des fonctionnalités d’un site internet en direct, montrant aux parties prenantes quelque chose de très proche de l’expérience utilisateur réelle.
Pour en revenir à la comparaison architecturale, si une maquette est une image installée sur un écran d’ordinateur ou un autre support comme une carte de visite par exemple, alors un prototype est un programme de réalité virtuelle en trois dimensions qui vous permet de vous promener dans la maison. L’image vous permet de voir comment les couleurs fonctionnent ensemble ou la disposition d’une seule pièce.
Le programme informatique vous permet de simuler la marche d’une pièce à l’autre pour découvrir le plan d’étage ouvert ou de voir à quel point un couloir est étroit.
De la même manière, un prototype permet aux parties prenantes de se mettre à la place d’un véritable utilisateur et leur offre une expérience aussi proche que possible de la réalité avant de mettre une page en ligne.
Si vous connaissez d’autres outils pour créer ou télécharger des mockups gratuits, n’hésitez pas à nous les partager dans la zone commentaire ou au travers de nos réseaux sociaux.
Avant de se quitter…
Si cet article sur les mockups vous a plu, n’hésitez pas à le partager sur les réseaux sociaux et à vous abonner à notre newsletter digitale pour recevoir nos prochains articles.
Vous pouvez également suivre nos meilleurs articles via notre flux RSS : https://www.leptidigital.fr/tag/newsletter-digitale/feed/ (il vous suffit de l’insérer dans votre lecteur de flux RSS préféré (ex : Feedly)).
Nous sommes aussi actifs sur LinkedIn, Twitter, Facebook et YouTube. On s’y retrouve ?
Pour toute question associée à cet article, n’hésitez pas à utiliser la section « commentaires » pour nous faire part de votre remarque, nous vous répondrons dans les meilleurs délais (avec plaisir).
