Créez vos maquettes web pas à pas

Pas besoin d’être un concepteur de site web pour maquetter des sites Web. Tout simplement parce les maquettes ne consistent en fait, qu’en de simples conceptions graphiques et idées du design que vous vous en fait. Rien à voir avec la création et le codage de ce dernier. Il s’agit simplement de communiquer vos idées et de recueillir les commentaires qui auront le plus d’impact pour l’amélioration de votre site web actuel ou la création d’un nouveau site.

 

Dans cet esprit, les captures d’écran vous offrent un moyen rapide et facile pour la création de maquettes réussies. Elles vous permettront de communiquer vos idées en toute facilité à votre équipe et vos prestataires.

 

Déterminez un point de départ

 

Dans un métier comme le vôtre, on sait à quel point le gain de temps est important. Ne partez donc plus de zéro pour votre réalisation graphique. Il existe déjà de très bons sites web sur internet et en cherchant un peu, vous trouverez très probablement un site web similaire au design que vous essayez de créer. Et dans le cas d’un redesign de votre site, utilisez une capture d’écran de votre site web actuel pour procéder à des modifications de la maquette actuelle.

 

Avez-vous trouvé ce que vous cherchiez ? Vous pensez avoir le bon exemple de maquette ? 

 

Capturez et récoltez des idées 

 

Maintenant que vous avez votre base de maquette, partez à la recherche de pages supplémentaires pour davantage d’inspiration et capturez des objets que vous souhaitez ajouter à cette dernière. Par exemple, une barre d’inscription à votre newsletter. Lorsque vous effectuerez votre capture, sélectionnez la zone dont vous avez besoin, puis utilisez la loupe pour parfaire la capture.

 

Concentrez-vous sur la recherche d’exemples concrets des idées et des fonctionnalités que vous souhaitez créer. Gardez aussi à l’esprit, qu’à ce stade, la couleur et la police de vos captures d’écran n’ont pas d’importance.

 

Pour apporter des modifications à vos captures, utilisez les formidables outils d’édition comme TechSmith Snagit. Pour supprimer les objets superflus, utilisez l’outil “selection tool“, l’arrière-plan sera automatique remplacé pour donner l’impression que les objets n’ont jamais été présents. Utilisez aussi l’outil “crop” pour affiner la taille ou la forme de votre capture.

 

Rassemblez vos idées sur un même support

 

Une fois toutes les parties de votre maquette capturées, réunissez-les sur une même maquette depuis l’éditeur de Snagit. Commencez par sélectionner la capture de votre site web actuel ou du site que vous prenez en exemple. Faites ensuite glisser et déposer les captures depuis le plateau “recent” directement sur votre capture principale. De là, cliquez et faites glisser vos éléments pour les réorganiser et les positionner à la disposition souhaitée.

 

Personnalisez votre design

 

Lorsque vous êtes à l’aise avec votre mise en page et que vos éléments sont placés à l’endroit souhaité, il est temps de personnaliser votre maquette. Commencez par un clic droit sur votre maquette et choisissez “Flatten All” afin de combiner toutes les images en une, ce qui rendra l’édition plus facile. Sélectionnez ensuite l’outil “Smart Move” pour rendre votre contenu éditable (éditez les éléments grâce aux technologies OCR). Smart Move vous permettra de supprimer des objets supplémentaires, changer le texte et ajuster la position de n’importe quel élément.

 

Pour les finitions, utilisez l’outil Pot de peinture “fill” pour faire correspondre les couleurs et comblez les vides, l’outil “Text” pour ajouter du texte et l’outil “shape” pour compléter les idées de conception.

 

Obtenez des avis

 

Votre maquette terminée, utilisez les plateformes de partage pour l’envoyer rapidement à un collègue. Si la personne possède également TechSmithSnagit, elle pourra y ajouter des légendes, des flèches et des commentaires, directement sur votre maquette, et ce, en toute facilité.

 

Les captures d’écran sont parfaites pour les maquettes de site Web, mais elles fonctionnent également pour d’autres types de création graphique.

Sommaire

Articles récents

Plongez dans le monde en constante évolution de la technologie. Restez à jour avec les dernières tendances, les actualités technologiques, les guides d’achat et les analyses approfondies.

Copyright © 2023 | Tous droits réservés.