Mockup Gratuit En Ligne : Quels Outils Utiliser ?

Qu’est-ce qu’un mockup ?

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 tu te demandes à quoi ressemblerait une page en utilisant une couleur secondaire, tu peux tester son apparence en créant une deuxième version de la maquette. De même, si tu souhaites apporter une modification telle que l’ajout d’un en-tête tout en centrant une image, ton 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 te lancer dans un nouveau projet, c’est toujours une bonne idée de planifier exactement ce que tu prévois de faire. Avec le travail de conception et les imprimés, c’est encore plus crucial.

Dans ce didacticiel, nous allons te montrer comment créer un mockup, y compris comment créer une maquette de produit dans Photoshop, afin que tu puisses facilement démarrer tes propres conceptions.

Comment faire un mockup avec Photoshop ?

Comme nous l’avons vu, il existe de nombreuses façons d’utiliser des mockups dans ton propre travail. Mais, soyons un peu plus précis. Dans ce didacticiel, nous allons te 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 : Trouve ton mockup

Lorsque tu essaies de présenter ton travail de la meilleure manière possible, tu voudras trouver des photos de haute qualité à utiliser pour tes 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 tu n’as 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 tu n’as pas les moyens.

Étape 2 : Prépare ton illustration

Avant de commencer à créer une maquette de produit dans Photoshop, il est important de préparer ton graphique.

Ouvre la photo que tu utilises 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 tu souhaites que ta conception soit utilisée.

Copie ce carré dans Adobe Illustrator sous forme de forme composée. Cela te donnera la taille correcte pour ta conception pour remplir l’objet dans l’image de maquette.

Remplis le carré avec ton motif ou ton illustration et enregistre 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 t’assurer qu’aucune ligne blanche ne traverse ta conception et qu’elle est enregistrée en tant que motif continu à utiliser dans ta maquette.

Étape 3 : Importation dans Photoshop

Maintenant que ton illustration est prête, tu devras préparer ton image de maquette. Trouve la section de l’image où tu souhaites que ton illustration aille et, à l’aide de l’outil « Lasso magnétique », déplace-toi le long des bords de la section pour mettre en évidence cette zone.

Fait glisser ta nouvelle illustration JPEG dans la zone sélectionnée (de sorte que ton image couvre tout ce que tu veux pour présenter le design) et clique sur « Convertir en objet intelligent » dans le panneau de calque de motif.

À partir de là, utilise le menu « Sélectionner » et « Charger la sélection » pour utiliser le lasso pour mettre en surbrillance l’objet que tu souhaites souligner. Clique sur le petit rectangle avec le cercle dans le panneau des calques et ton motif s’adaptera automatiquement à l’objet.

Ne t’inquiète pas s’il semble un peu plat au début. Pour résoudre ce problème, assure-toi 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 tu as sélectionné pour la maquette.

Étape 4 : Ajustement de la perspective

Si tu travailles 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 tu apprends à 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 tu l’as fait auparavant, tu utiliseras l’outil « Lasso magnétique » pour sélectionner la partie de l’image de maquette sur laquelle tu souhaites que le design figure et fait glisser ton illustration dans Photoshop. Clique sur « Modifier »>, « Perspective Warp » et fait le glisser sur la zone du motif. Choisis « Warp » dans le panneau supérieur, puis « Multiplier » sur le calque. Tu peux ensuite faire glisser les coins du dessin jusqu’à ce que tu aies la perspective que tu recherches.

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 : Configure ton espace de travail

Lorsque tu travailles dans la conception Web, la première étape consiste à ajuster ton 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 va dans « Affichage »>, « Règles » et modifie les paramètres en pixels pour les « Types » et les « Règles ».

Étape 2 : planifie ton site web réactif

Tu devras également garder à l’esprit que, lors de la création de conceptions Web réactives dans Photoshop, tu n’auras pas d’image évolutive comme tu le ferais dans la version définitive du site Web. Tu souhaiteras 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 : Utilise les guides de ligne

Les guides de ligne afficheront des lignes lumineuses sur ta maquette, et tu peux 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 tu travailles 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 ton site.

Étape 4 : Ajoutes des espaces réservés

À l’aide d’outils vectoriels et de l’outil « Texte », commence à créer chaque élément de ta page Web. Utilise Google Fonts pour t’assurer que tout ce que tu utilises est sûr et accessible pour le Web, et commence à saisir tout texte ou élément visuel que tu souhaites inclure dans la conception.

Comment faire un mockup sans Photoshop ?

Si tu ne possèdes pas le logiciel Photoshop, pas de panique, il existe des alternatives pour que tu puisses créer ton mockup. Plus précisément, ce sont des générateurs de mockups en ligne où tu pourras placer ton image sur le support que tu souhaites comme un smartphone, une carte de visite, livre, etc.

Pour ce faire, plusieurs sites permettent de créer un mockup sans Photoshop, il te suffit d’avoir une image pour la placer sur ton mockup.

Canva

Tu dois déjà sans doute connaître Canva de nom ou tu dois 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ù tu serais vraiment perdu.

Du coup tu vas pouvoir créer ton mockup sur Canva très facilement. Il te suffit de choisir un modèle prédéfini. Ensuite télécharge ta maquette + l’image que tu souhaites mettre à l’intérieur dans Canva. Fais glisser ton image principale sur le mockup et positionne-la comme tu le souhaites.

Accèdes à Grilles et sélectionne celle qui convient le mieux à ton écran, il s’agira très probablement de la première grille unique. Fait le glisser sur ta maquette et fait le pivoter ensuite redimensionne le jusqu’à ce qu’il soit posé sur le dessus de manière transparente. C’est ainsi que tu ajoutes simplement et rapidement ton image à une maquette, aucun Photoshop est requis.

MockupBro

MockupBro est un générateur de maquette en ligne qui fonctionne en trois étapes simples : tu choisis ton modèle préféré, télécharges ta conception pour l’intégrer et télécharges ton 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. Tu dois t’abonner au service pour supprimer le filigrane numérique sur tes créations.

Smartmockups

Si tu souhaites créer ton 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 tu recherches, 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 tu souhaites, ensuite sélectionnes un modèle gratuit puis place ton image. Quand tu as fini, il te restera juste à télécharger ton 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 tu peux 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 tu pourras retrouver 1000 modèles pour tes différentes créations. Sur le site, il te suffira de choisir le mockup que tu souhaites et tu pourras placer ton image pour voir à quoi ton modèle ressemble. Pour le récupérer, tu auras 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 tu pourras trouver sur le site seront gratuit et tu pourras les télécharger sans difficultés. Tu n’auras 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.

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 t’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 te permet de te promener dans la maison. L’image te permet de voir comment les couleurs fonctionnent ensemble ou la disposition d’une seule pièce.

Le programme informatique te 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 tu connais d’autres outils pour créer ou télécharger des mockups gratuits, n’hésite pas à nous les partager dans la zone commentaire ou au travers de nos réseaux sociaux.