Un modèle de maquette de site Web peut vous aider à sauver des vies. Il est facile de présenter un concept de conception de site Web dans un cadre qui représente une utilisation réelle (sur de nombreux appareils différents). Mais comment pouvez-vous personnaliser un modèle de maquette de site Web et y déposer votre propre design? Voici comment.
Il y a deux façons de commencer. Vous pouvez créer votre propre modèle de maquette de site Web à utiliser dans les projets ou en télécharger un pour démarrer rapidement. Ce qui est formidable, c’est qu’il existe de nombreuses options de modèles pour aider les clients à visualiser un nouveau design en temps réel.
Voici tout ce que vous devez savoir sur la personnalisation d'un modèle (ainsi que sur la recherche d'un bon modèle, pour commencer).
Qu'est-ce qu'un modèle de maquette de site Web?
Les clients adorent voir un dessin fini dans un modèle de maquette, car cela leur donne une meilleure idée de ce que pense l’équipe de concepteurs. La plupart des modèles de maquette de site Web se présentent sous la forme d'un fichier Adobe Photoshop modifiable. Le design est conçu pour que vous puissiez coller une capture d'écran de votre site Web dans un cadre réaliste, par exemple, afficher la page d'accueil d'un site Web sur un ordinateur, une tablette ou un appareil mobile.
Les modèles de maquette de site Web peuvent inclure une seule image, plusieurs images et être restitués selon différentes orientations. Une bonne maquette peut fournir une excellente visualisation de ce à quoi un produit fini ressemblera en utilisation réelle.
Bien que vous puissiez créer vos propres maquettes, de nombreuses options sont disponibles au téléchargement. La plupart de ces modèles sont créés en tant que fichiers PSD à l'aide de calques et d'objets intelligents pour créer la conception finale, tout en conservant les propriétés visuelles du fichier. Cela s'avère pratique lorsque vous utilisez une maquette qui utilise une orientation intéressante, telle que la vue 3D ou en perspective.
La plupart des modèles de maquette de site Web incluent un mélange d'images vectorielles et raster, exportez-les avec précaution. Vous voulez vous assurer que l'image de votre site Web est aussi belle que possible avant de la montrer.
Comment personnaliser un modèle de maquette
Bien qu'un fichier Photoshop avec plusieurs calques d'apparence étrange puisse être un peu intimidant, la personnalisation d'un modèle de maquette n'est pas un processus compliqué. Vous avez juste besoin de:
- Trouvez un modèle de maquette de site Web que vous aimez. (Vous pouvez créer le vôtre, mais avec tant d’excellentes options disponibles, nous vous recommandons l’option de téléchargement.) Recherchez un modèle mettant en évidence les fonctionnalités de votre conception, telles que les vues multiples pour les sites Web réactifs (bureau, tablette et téléphone), avec arrière-plan qui correspond au style du projet (blanc ou noir par rapport à un arrière-plan coloré ou à un style photo-réaliste).
- Décompressez le téléchargement et vérifiez que vous disposez de toutes les pièces nécessaires: un fichier PSD avec la maquette modifiable, un fichier JPG qui vous montre à quoi devrait ressembler la conception (facultatif) et un fichier d’information ou un fichier Lisez-moi avec les informations de licence et les instructions.
- Ouvrez le fichier PSD dans Photoshop et examinez les calques. Recherchez le calque qui dit? Drop Your Design Here ?, ou similaire (il y en a toujours un qui se démarque avec cette instruction!)
- Double-cliquez sur cette couche pour l'ouvrir.
- Prenez les captures d'écran appropriées de votre conception, dimensionnées pour une résolution optimale et pour montrer exactement ce que vous voulez que les gens voient dans la maquette finale.)
- Copiez-collez ou glissez-déposez vos images ou votre contenu dans le calque approprié, en redimensionnant si nécessaire pour remplir l'espace.
- Appuyez sur Ctrl-S, ou Cmd-S, pour enregistrer le calque intelligent, puis revenez à l'image d'origine. Voila! Vous devriez voir votre nouvelle capture d'écran dans la maquette.
- Exportez le fichier, en utilisant la taille et le format requis, pour affichage.
Comment utiliser un modèle de maquette de site Web
Une fois que vous avez personnalisé un modèle de maquette de site Web, que faites-vous avec? Ces conceptions apparemment simples ont de nombreuses applications pratiques. Vous pouvez utiliser un modèle de maquette de site Web pour:
- Aperçu des conceptions pour les clients
- Préparer le marketing et les promotions après le lancement
- Inclure dans les portefeuilles imprimés
- Soumettez un bulletin de participation au concours, lorsque vous prévoyez de montrer la conception finale
Tout ce que vous avez à faire pour utiliser un modèle de maquette de site Web est d'exporter votre conception personnalisée dans un format utilisable. La plupart du temps, cela comprend deux options: un fichier image haute résolution pour les applications d'impression et un fichier résolution Web à utiliser en ligne ou pour le partage de courrier électronique.
Où trouver un modèle de maquette de site Web
Donc tout cela pose probablement la question: Où trouvez-vous l'un de ces modèles de maquette de site Web pratiques? Il y a beaucoup d'options gratuites et payantes disponibles à partir d'une variété de sources.
Nous avons également quelques superbes rafles comprenant de nombreuses maquettes avec lesquelles vous pouvez commencer tout de suite.
- 20+ meilleurs modèles réactifs de maquette de site Web et d'application
- 20+ meilleurs maquettes de perspective PSD pour sites Web
10 maquettes de site Web gratuites pour commencer
Pour vous assurer que vous êtes tous prêts à commencer à utiliser une maquette de site Web, nous avons trouvé 10 options gratuites - et gratuites - pour vous aider à démarrer. Certaines de ces maquettes se retrouvent également dans d'autres rafles de Design Shack.)
2 maquettes de bureau MacBook Pro
Mockups PSD de Showcase réactif
Vecteur PSD dispositif périphérique Apple
Vitrine Flat Responsive
Maquette de plancher blanche pour iPad et iPhone
MacBook et iPhone sur la maquette de table
Mockups Apple Wireframe Mockups
Maquette de présentation de conception de site Web réactif
Maquette MacBook Air
MacBook Pro Retina Display PSD
Conclusion
Personnaliser un modèle de maquette de site Web pour présenter un projet est un excellent outil à avoir dans votre arsenal. Même si vous ne disposez que de quelques minutes pour préparer une présentation, vous pouvez insérer la conception de votre site Web dans un scénario concret pour lui donner un aspect soigné.
Même si vous ne vous souciez peut-être pas de la présentation générale d'un dessin ou d'une idée, les clients le remarqueront certainement. C'est l'un de ces raccourcis rapides et faciles que les concepteurs (et les pigistes) peuvent utiliser pour faire bonne impression. Amusez-vous à personnaliser un modèle pour vos projets!
Mockups de site Web
Trouvez la maquette de site Web réactive parfaite pour mettre en valeur votre conception de sites Web sur tous les types d'appareils, d'écrans et de formats. De plus, apprenez à les utiliser à bon escient!