Vidéo: How to Create A Clickable Website Demo on PowerPoint with Hyperlink ! PowerPoint Pro Tutorial 2025
Au début du processus de construction d'un site Web, les clients doivent comprendre comment le site est organisé. Les wireframes (dessins détaillés en noir et blanc de chaque page Web principale) montrent ce qui se passe sur la page, comment fonctionnent la navigation et l'interaction et la mise en page générale. Pour les sites volumineux ou complexes, il suffit de regarder des wireframes de type blueprint sur papier pour que les clients puissent visualiser l'interaction et l'organisation d'un site. Ainsi, après avoir élaboré le sitemap et commencé le wireframing, mettez de côté un peu de temps pour assembler un fil de travail rapide prototype du site en HTML dans lequel de nombreux éléments cliquables fonctionnent. De cette façon, les clients peuvent physiquement cliquer sur les versions d'esquisse de la navigation et sur les boutons pour voir où ils vont. ( Note: Pour les petits sites qui n'ont pas beaucoup d'interactions complexes ou de nombreuses sections, il est très facile de parcourir les fichiers PDF de vos wireframes.)
La plupart des concepteurs et architectes de l'information utilisent Microsoft Visio ou des programmes d'illustration tels que Adobe Illustrator et Adobe InDesign pour créer des wireframes. Ces trois programmes peuvent exporter des wireframes en format GIF et JPEG. Vous pouvez ensuite utiliser un outil HTML tel qu'Adobe Dreamweaver pour importer ces fichiers GIF et JPG et les superposer au-dessus des zones cliquables.
Essayez d'exporter des wireframes en fichiers GIF. Parce que les wireframes sont (devraient être) en niveaux de gris et en texte, vous obtenez une meilleure qualité et compression lorsque vous les enregistrez en tant que GIF.
Dans Dreamweaver, insérez la totalité de l'image filaire GIF dans la page, comme vous le feriez pour insérer une image. Vous pouvez ensuite dessiner hotspots (régions cliquables que vous définissez) en haut de votre navigation et les lier pour accéder à vos différentes pages. Voilà: un prototype filaire rapide et cliquable prêt à être partagé avec vos clients.
Si vous êtes utile en HTML, vous pouvez aller plus loin avec votre prototype en construisant à la fois un système de navigation fonctionnel et des fonctions dynamiques que vous prévoyez d'inclure, comme des menus déroulants ou des espaces accordéon.
Présentez votre édition filaire cliquable aux clients pour les aider à visualiser comment le site est organisé et comment les utilisateurs navigueraient à travers les tâches clés telles que la commande d'un produit. Vous pouvez également présenter les wireframes cliquables aux utilisateurs finaux pour voir si le site a un sens de leur point de vue. À ce stade, il est important de mettre au point tous les défauts du site et d'obtenir l'approbation du client avant d'aller de l'avant avec la conception visuelle et le codage HTML.
