Cliquez sur le signe plus (+) sur la droite ou en dessous des pages existantes, puis cliquez sur le champ de nom de page pour taper son nom.
Dernière mise à jour le
Découvrez comment créer des prototypes ou la structure filaire de vos sites web dans Adobe Muse.
Remarque :
Adobe Muse n’ajoute plus de nouvelles fonctionnalités et son support cessera le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous aux questions fréquentes (FAQ) consacrées à la fin de service Adobe Muse.
Outre le fait d’être d’une utilisation très intuitive, Adobe Muse vous permet de créer rapidement des prototypes de projets web que vous pouvez afficher en ligne. La possibilité de créer des sites d’évaluation signifie que vous pouvez partager les liens avec des clients éventuels, pour leur permettre de consulter les prototypes en ligne à l’aide des mêmes navigateurs qui vont afficher la version finale du site. Cela permet d’aider les clients à comprendre la façon dont le site terminé va s’afficher.
Lisez ce qui suit pour en savoir plus sur la conception de structures filaires, l’élaboration d’une vue Plan structurée et la création d’éléments d’espace réservé pour votre site. Vous pouvez remplacer des éléments d’espace réservé par les éléments réels de la page une fois votre contenu finalisé.
Utilisation des structures filaires
Les structures filaires affichent les mises en forme de page pour le site et vous permettent de cliquer sur les liens pour examiner la fluidité du site. Après avoir interagi avec les structures filaires, visitez le site en direct final pour comparer les structures filaires à la version finale. Remarquez comment les éléments d’espace réservé dans les structures filaires ont été remplacés par les graphiques pour la version finale du site.
Si vous voulez voir comment les structures filaires sont construites, téléchargez les fichiers d’exemples (ZIP, 4,5 Mo). Décompressez le fichier ZIP, ouvrez le dossier, puis recherchez le fichier KevinsKoffeeKartWire.muse. Double-cliquez dessus pour ouvrir les structures filaires dans Adobe Muse. Utilisez la vue Plan pour voir comment les pages sont organisées en niveaux différents pour construire le plan du site. Double-cliquez sur les pages individuelles pour les ouvrir dans la vue Conception et explorer leur conception.
Adobe Muse offre de nombreuses fonctionnalités qui vous aident à créer des structures filaires :
- La vue Conception inclut une grille à colonnes facultative pour faciliter l’alignement des éléments de mise en page.
- Les outils souples de dessin facilitent la création de formes d’espace réservé pour les graphiques.
- Le panneau Ressources inclut des fonctions pour vous aider à mettre à jour les images d’espace réservé.
- Adobe Muse optimise, tranche et exporte tous les fichiers d’images lorsque vous publiez ou exportez un site.
- Les en-têtes de texte et les styles de paragraphe vous permettent de créer des pages structurées et de modifier la mise en forme du texte facilement.
- La commande Importer vous permet d’enregistrer le logo de votre client directement depuis votre navigateur, puis de le placer dans votre fichier Adobe Muse.
Conception de structures filaires pour approbation par le client
Après une première réunion avec votre client, vous pouvez créer une maquette filaire du site qui souligne le positionnement et les fonctions des éléments de page sans les graphiques de site final et le formatage de texte. L’objectif d’une structure filaire est de répliquer la structure squelettique de chaque page, en créant une simulation de la présentation Web sans la distraction des couleurs ni du contenu visuel. Des rectangles sont utilisés en tant qu’espaces réservés pour marquer l’emplacement des images, et des polices manuscrites ou génériques sont utilisées pour afficher les zones de la page qui contiennent du contenu textuel.
Les structures filaires offrent les avantages suivants :
- Elles permettent aux clients de se concentrer sur la structure d’un site et de comprendre les mises en page.
- Elles offrent une expérience en direct interactive, qui aide les clients à réviser et approuver les sites.
- Elles servent d’outil de communication pour clarifier la conception et la fonctionnalité du site.
En plus d’être un outil de conception web, Adobe Muse est parfait pour les projets prototypes. Vous pouvez créer immédiatement une URL d’évaluation en direct et l’envoyer à vos clients dans un courrier électronique, ce qui simplifie le processus d’approbation. Mais ce n’est pas là le seul avantage de la création de maquettes filaires avec Adobe Muse.
Les structures filaires dans Adobe Muse élèvent la productivité à un niveau bien supérieur à celle des autres outils de conception, car ses fonctions d’édition d’image en aller-retour et ses styles de paragraphe éditables permettent aux concepteurs web de mettre rapidement à jour le fichier .muse et de convertir les structures filaires approuvées dans la version en direct finale. Au lieu d’obtenir l’approbation du client, de jeter au rebus les structures filaires et de recommencer à zéro pour créer le projet, vous pouvez immédiatement commencer à mettre à jour les structures filaires approuvées pour ajouter le contenu Web réel et créer la version finale. Au cours du processus, vous pouvez publier autant de sites d’évaluation que nécessaire pour documenter les itérations et partager les liens avec vos clients alors que la conception du site évolue.
Vous pouvez créer des sites avec des structures filaires en utilisant le flux de travail de base suivant :
- Vous construisez les structures filaires et publiez une version d’évaluation gratuite.
- Le client revoit le site en direct en cliquant sur les pages.
- Le client demande des modifications ou des précisions sur la conception.
- Une fois les révisions nécessaires apportées, le client approuve les structures filaires.
- Vous mettez à jour le site de structures filaires pour ajouter des éléments graphiques et des couleurs.
- Vous mettez à jour les styles de paragraphe pour formater le contenu textuel existant.
- Le client revoit la version mise à jour du site et demande des modifications supplémentaires.
- Vous implémentez les modifications demandées.
- Le client approuve la version finale.
- Vous mettez à niveau le site, définissez le domaine et lancez le site final.
Examen de la structure du site en vue Plan dans Adobe Muse
Pour voir comment les pages du site sont placées dans une hiérarchie qui définit les niveaux supérieurs et les sous-niveaux des liens de navigation, ouvrez le fichier .muse des structures filaires dans Adobe Muse pour l’analyser. Lorsque vous ouvrez le projet, la vue Plan s’ouvre et affiche toutes les pages du site.
Vous remarquez qu’il y a deux niveaux : un niveau supérieur et un sous-niveau, représentant la hiérarchie du plan du site. A tout moment au cours du développement ou de la maintenance du site, vous pouvez cliquer et faire glisser ces pages pour les repositionner au sein de la structure du site.
Procédure pour créer de nouvelles pages :
-
Soyez aussi descriptif que possible avec chaque nom de page.
-
Cliquez avec le bouton droit de la souris sur une vignette de page et utilisez les options de menu qui s’affichent pour dupliquer, supprimer ou renommer la page.
Vous pouvez également placer le pointeur de la souris sur une page et cliquer sur l’icône X qui s’affiche dans le coin supérieur droit pour supprimer la page.
-
Si vous suivez cette procédure, essayez d’ajouter, de repositionner et de supprimer des pages pour modifier le plan du site. Choisissez la commande Edition > Annuler si vous voulez rétablir le site de structures filaires à son état d’origine.
L’interface de la vue Plan est d’une utilisation intuitive, et Adobe Muse suit tous les noms de page et maintient les liens qui s’affichent dans les widgets de menu. Toute modification que vous apportez est automatiquement mise à jour pour vous assurer que les liens ne sont pas rompus.
Utilisation de styles graphiques pour créer des éléments d’espace réservé qui partagent des attributs
A l’instar des programmes Adobe Photoshop et Adobe Illustrator, Adobe Muse vous permet de créer des styles graphiques chaque fois que vous souhaitez produire une apparence homogène et l’appliquer à un ensemble d’éléments. Cette fonction est utile pour la structure filaire (ainsi que pour la conception des pages) car il est possible de modifier un style graphique existant pour rapidement mettre à jour tous les autres éléments de la page auxquels ce style est appliqué. Vous pouvez également copier des styles existants afin d’en créer des variations.
Pour utiliser des styles graphiques pour appliquer des attributs à des formes et créer des espaces réservés pour les fichiers d’images dans un site de structures filaires :
-
Utilisez l’outil Rectangle pour dessiner trois rectangles sur une page dans la vue Conception.
-
Sélectionnez un rectangle et modifiez-le pour définir la couleur de son contour, la couleur de fond et l’opacité et pour lui ajouter des effets graphiques, tels que des ombres portées.
-
Lorsque le rectangle est sélectionné, cliquez sur l’option Créer un nouveau style graphique située au bas du panneau Styles graphiques. Le style est basé sur la mise en forme du rectangle sélectionné. Double-cliquez sur le nouveau style graphique pour lui donner un nom descriptif.
-
Sélectionnez l’une des autres formes rectangulaires et appliquez-lui le même style graphique en cliquant sur le nom du style. Répétez cette étape pour appliquer le style au troisième rectangle, afin que tous les trois rectangles utilisent le même style.
-
Sélectionnez un rectangle et modifiez-le pour changer légèrement le style. Remarquez qu’un signe plus (+) s’affiche dans le panneau Styles graphiques en regard du nom du style modifié.
-
Avec le bouton droit de la souris, cliquez sur le nom du style dans le panneau Styles graphiques et choisissez Redéfinir le style. Les deux autres rectangles sont désormais mis à jour afin de correspondre au nouveau style et le signe plus (+) disparaît.
-
Utilisez des styles graphiques pour formater rapidement des formes afin de créer des structures filaires cohérentes et de mettre vite à jour un ensemble de ressources de site lorsque le client demande des modifications.
Création de pages Web structurées et mise en forme de texte à l’aide de styles de paragraphe
Lorsque vous créez un site avec des structures filaires, vous pouvez utiliser l’outil Texte pour créer des blocs de texte et placer des espaces réservés (ou lorem ipsum) que vous pouvez remplacer plus tard. Ou si le client dispose d’un site Web, vous pouvez copier le texte directement à partir d’un navigateur et le coller dans les blocs de texte. Après avoir créé des éléments de texte, vous pouvez utiliser le panneau de texte pour appliquer une mise en forme au texte.
A l’aide des styles de paragraphe, vous pouvez définir le texte de l’en-tête et des balises de paragraphe pour structurer le contenu textuel de la page :
-
Dans la vue Conception, utilisez l’outil Texte pour faire glisser un bloc de texte sur la page. Tapez ou collez du texte dans le bloc de texte pour le remplir.
-
Utilisez le panneau de texte ou les options du panneau de configuration dans la partie supérieure de l’espace de travail de la vue Conception pour définir les options de mise en forme, comme le choix de la police, sa taille, sa couleur, ainsi que d’autres propriétés.
-
Cliquez sur le bouton Créer un style de paragraphe dans la partie inférieure du panneau Styles de paragraphe pour créer un nouveau style de paragraphe. Double-cliquez sur le nom du nouveau style pour lui donner un nom descriptif.
-
Avec le bouton droit de la souris, cliquez sur le style, puis choisissez la commande Options de style. Utilisez le menu de balise de paragraphe pour définir le style de paragraphe pour cibler une balise HTML spécifique, comme P, H1, H2 ou H3.
Cliquez avec le bouton droit de la souris sur un nom de style dans le panneau Styles de paragraphe, puis utilisez la boîte de dialogue Options de style pour définir le style d’un en-tête spécifique ou d’une balise de paragraphe. -
Créez quelques autres blocs de texte avec du texte. Remarquez que si vous cliquez sur le nom du style de paragraphe alors qu’un bloc de texte est sélectionné, vous appliquez la mise en forme du style de paragraphe au bloc de texte sélectionné. Si, par la suite, vous sélectionnez l’un des blocs de texte auquel un style de paragraphe est appliqué et que vous le modifiez, le signe plus (+) s’affiche dans le panneau Styles de paragraphe, en regard du nom du style. Ce signe indique que le style a changé, en utilisant le même comportement que les styles graphiques.
-
Pour mettre automatiquement à jour tous les blocs de texte en utilisant le même style, cliquez avec le bouton droit de la souris sur le nom du style dans le panneau Styles de paragraphe et choisissez la commande Redéfinir le style.
Comme vous pouvez le voir sur ce bref exemple, vous pouvez créer différents conteneurs de texte et les configurer pour utiliser des styles spécifiques afin de créer une conception cohérente. Par la suite, lorsque vous mettez à jour les structures filaires pour concevoir la version finale du site, il est facile de mettre à jour les styles en vous basant sur les demandes du client. Créer des pages Web structurées avec des conteneurs de texte est une meilleure pratique, car elle améliore le classement d’optimisation d’un moteur de recherche.
Remarque :
lors de la conception de pages avec des couleurs pleines d’arrière-plan, définissez la couleur de remplissage d’arrière-plan des blocs de texte correspondante. Cela permet à Adobe Muse de publier le contenu textuel plus efficacement. Si le remplissage d’arrière-plan est inconnu, le texte publié de remplacement manque de fluidité car Adobe Muse définit la couleur d’arrière-plan du bloc de texte sur transparent. Toutefois, si l’arrière-plan de la page affiche des dégradés ou des images, laissez la couleur de remplissage de blocs de texte définie sur Aucun.
Mise à jour des images d’espace réservé avec les graphiques du site final
Une fois que le client a approuvé les structures filaires, vous pouvez rapidement mettre à jour le site pour utiliser les fichiers d’images réelles.
-
Sélectionnez un espace réservé pour l’image sur la page.
-
Ouvrez le panneau Ressources pour localiser l’élément de page sélectionné.
-
Cliquez avec le bouton droit de la souris sur l’élément de la page. Dans le menu qui s’affiche, vous avez le choix entre deux possibilités pour vous aider à mettre à jour le fichier d’image, selon la façon dont vous avez assemblé le site de structures filaires.
Si vous avez créé un fichier dans le programme Adobe Photoshop ou Adobe Fireworks et que vous l’avez importé dans la page, vous pouvez choisir Modifier l’original pour modifier le fichier d’origine dans le produit utilisé pour le créer. Lorsque vous enregistrez le gabarit et revenez à Adobe Muse, les instances importées du fichier sont automatiquement mises à jour dans le site.
Vous pouvez également créer des espaces réservés pour les fichiers d’images dans Adobe Muse à l’aide de l’outil Rectangle. Choisissez Rééditer les liens de toutes les occurrences et parcourez l’arborescence pour sélectionner un fichier qui existe déjà sur votre ordinateur pour permuter un fichier d’espace réservé avec l’image graphique finale.
Cliquez avec le bouton droit de la souris sur le nom du fichier, puis choisissez Modifier l’original pour ouvrir le gabarit d’un fichier d’espace réservé dans le programme d’édition d’image que vous avez utilisé pour le générer. -
Répétez ces étapes pour remplacer toutes les images d’espace réservé sur la page par de véritables fichiers d’images.
Remarque :Lorsque vous cliquez avec le bouton droit de la souris sur le nom d’une ressource dans le panneau Ressources, vous pouvez également choisir Aller à la ressource. Cette option demande à Adobe Muse d’ouvrir la page qui contient la ressource sélectionnée pour la mettre rapidement à jour.
Accès aux fichiers d’images optimisés générés par Adobe Muse
Outre la publication des sites Adobe Muse que vous créez pour le serveur hôte, vous pouvez également exporter tout le site pour obtenir le dossier de fichiers d’images découpés et exportés :
-
Choisissez Fichier > Exporter au format HTML.
La boîte de dialogue Exporter au format HTML s’affiche.
-
Sélectionnez sur votre ordinateur l’emplacement d’exportation des fichiers du site, puis cliquez sur OK.
Après avoir effectué cette opération, Adobe Muse exporte les fichiers et les enregistre dans le dossier local que vous avez spécifié. Naviguez jusqu’au dossier et ouvrez le dossier des fichiers d’images pour accéder aux fichiers d’images optimisés. Vous pouvez réutiliser ces fichiers d’images pour créer des bulletins, des applications mobiles, des pages de réseaux sociaux et d’autres projets connexes.
Accéder à votre compte