Utilisation de Fireworks CS3 pour créer des présentations de sites web efficaces et interactives

Concevoir un nouveau site web est (relativement) aisé. Expliquer la façon dont une conception se concrétise en un site web l'est moins. Les captures d'écran du site web ou de l'interface utilisateur qui vous sembleront explicites, ne seront, aux yeux de toute autre personne, qu'une série d'images quelconques. Il est certes difficile de communiquer vos idées de façon à transmettre clairement votre message aux autres, mais le développement de maquettes itératives et l'obtention de la validation des clients web sont la clé du succès des sites web, surtout lorsque vous présentez vos idées de conception en suivant des consignes stratégiques éprouvées.

Dans ce didacticiel, nous verrons comment utiliser la fonctionnalité Pages d'Adobe Fireworks CS3 pour décrire efficacement une conception d'interactions et créer une présentation cliquable.

Raconter une histoire

Lorsque vous concevez un site, essayez de résumer le message que vous souhaitez véhiculer en une seule phrase succincte. Prenez le temps d'esquisser vos idées sur une feuille de papier et laissez-les mûrir. Si possible, partagez-les avec d'autres personnes et recueillez leurs commentaires sur les images et les symboles les plus efficaces. Une fois que vous avez bien compris le message et que vous avez développé quelques idées de conception qui vous semblent satisfaisantes, préparez quelques graphiques afin de les présenter à votre client. Il est très important de lui fournir une illustration visuelle des orientations que vous envisagez pour la conception afin de l'aider à comprendre et à valider l'approche globale avant de passer à la production du site.

Abordez la création de votre maquette de présentation comme la réalisation d'un film. Les captures d'écran de votre conception sont comparables aux vignettes d'un storyboard. Commencez par vous demander combien de captures d'écran, et sutout lesquelles, vous permettraient de raconter votre histoire efficacement. Une fois que vous avez défini l'enchaînement de la présentation et les scènes (captures d'écran) à y inclure, vous pouvez commencer à développer le storyboard du site.

Créer les vignettes d'un storyboard

Commencez par créer une page par vignette :

1. Sélectionnez Fenêtre > Pages pour ouvrir le panneau Pages. Vous pouvez également appuyer sur la touche de raccourci clavier F5.
2. Double-cliquez sur le nom de la page et entrez une description de la première vignette de votre storyboard. Utilisez des tirets de soulignement plutôt que des espaces lorsque vous entrez le nom descriptif. Cette description vous servira ultérieurement à organiser les vignettes.
3. Cliquez sur le bouton Ajouter/Dupliquer la page situé dans la partie inférieure droite du panneau Pages pour créer une nouvelle page.
4. Double-cliquez sur le nom de la nouvelle page et entrez une description de la deuxième vignette de votre storyboard.

Répétez les étapes précédentes pour créer une série de pages organisées qui serviront de vignettes dans votre storyboard. Le panneau Pages répertorie les pages que vous avez créées (voir la Figure 1). Cette approche se révèle très utile car elle vous permet d'utiliser le panneau Pages pour développer une présentation attrayante en utilisant des captures d'écran pour raconter une histoire. Les pages que vous créez peuvent être utilisées aussi bien dans votre présentation que dans le projet final.

Comprendre la fonctionnalité Pages de Fireworks CS3

Le panneau Pages contient plusieurs fonctionnalités performantes qui sortent du cadre de ce petit didacticiel. Pour en savoir plus sur les nouveautés de Fireworks CS3, reportez-vous à la page produit Fireworks et suivez la visite guidée.

Voici la liste de mes trois nouveautés favorites dans Fireworks CS3 :

• Le panneau Pages est extrêmement utile. Chaque page se comporte comme un fichier distinct. Vos pages peuvent avoir des dimensions, des couleurs d'arrière-plan et des calques (y compris des calques web !) différents. Vous gagnez un temps considérable, car vous n'avez plus besoin de vous préoccuper des calques vides et de la correspondance des tailles des documents.
• Vous pouvez maintenant partager les calques entre plusieurs pages, si vous le souhaitez.
• Le panneau Calques mis à niveau comprend maintenant des sous-calques, ce qui vous permet de sélectionner et de modifier uniquement les éléments de votre choix.

Créer une présentation interactive pour votre conception

La première étape pour créer une présentation efficace consiste à générer un storyboard élaboré. Toutefois, si vos clients ne peuvent pas naviguer à travers les captures d'écran et comprendre l'histoire que vous souhaitez raconter, votre storyboard passera inaperçu.

La section suivante de cet article vous explique comment créer une présentation cliquable qui reproduit l'expérience des utilisateurs. Fireworks CS3 vous permet de créer facilement de remarquables présentations cliquables avec des éléments de conception et des illustrations en haute résolution.

Relier les pages

1. Sélectionnez l'outil Référence dans la Boîte à outils (ou utilisez le raccourci clavier et appuyez sur la touche J). Utilisez l'outil Référence pour dessiner une zone réactive sur la page actuelle. Si vous avez ajouté des boutons sur la page, Fireworks crée automatiquement une découpe autour de chacun d'eux.
2. Activez l'option permettant d'afficher les zones réactives et les découpes en sélectionnant Affichage > Superposition de la découpe. Vous pouvez également appuyer sur la touche de raccourci clavier F2.
3. Assurez-vous qu'une zone réactive ou une découpe est sélectionnée (voir la Figure 2).

4. Ouvrez l'Inspecteur des propriétés (sélectionnez Fenêtre > Propriétés), si ce n'est pas déjà fait. Dans l'Inspecteur des propriétés, cliquez sur la flèche en regard du champ Liens et choisissez la page que vous souhaitez lier à la zone réactive ou à la découpe afin de pouvoir créer une navigation entre les différentes pages (voir la Figure 3).

5. Dessinez une autre zone réactive ou sélectionnez une autre découpe et répétez ce processus jusqu'à ce que toutes les pages soient reliées entre elles. Comme les zones réactives sont des objets, vous pouvez les copier et les coller comme n'importe quel autre objet de Fireworks. Par exemple, si vous souhaitez que le logo figurant sur chaque page renvoie à la page d'accueil, il vous suffit de créer une zone réactive une fois, puis de la coller sur toutes les pages de votre conception.

Exporter la présentation

Une fois que vous avez terminé de créer des liens entre les différentes pages de la conception, vous êtes prêt à exporter la présentation pour l'envoyer à votre client :

1. Choisissez Fichier > Exporter.
2. Dans la boîte de dialogue Exporter, saisissez un nom et choisissez l'emplacement où enregistrer la présentation. Commencez par créer un nouveau dossier, puis exportez-y la présentation. Vous pourrez ainsi facilement partager, charger ou déplacer les fichiers.
3. Lors de l'exportation des fichiers, utilisez les choix suivants comme Paramètres d'exportation :
   1. Exporter : Documents HTML et Images
   2. HTML : Fichier HTML
   3. Découpes : Exporter les découpes
   4. Assurez-vous que l'option « Page actuelle uniquement » est décochée.
   5. Les autres paramètres étant optionnels, effectuez les choix les mieux adaptés à votre présentation.
4. Cliquez sur Exporter.

C'est tout ce que vous avez à faire pour créer une présentation interactive qui vous permettra de vendre vos idées de conception à vos clients. N'oubliez pas que la conception web est un travail collaboratif. En communiquant, à l'aide d'une présentation attrayante, vos idées et suggestions sur l'orientation choisie pour la conception, vous obtiendrez beaucoup plus rapidement la validation de votre client. En vous assurant que chacun des acteurs du projet comprend l'enchaînement des pages, vous éviterez les quiproquos susceptibles d'engendrer une surcharge de travail lors du développement de votre site web.

Que faire maintenant ?

N'oubliez pas de consulter le Pôle de développement Fireworks, où vous trouverez d'autres didacticiels et articles sur les techniques et stratégies de conception web. Plusieurs de ces articles incluent des fichiers exemples qui vous aideront à explorer différentes stratégies de conception et à donner une nouvelle dimension à vos projets de conception web.

Pour en savoir plus sur les nouveautés de Fireworks CS3, lisez la Présentation d'Adobe Fireworks CS3 en anglais écrite par Alan Musselman. Si ce n'est déjà fait, je vous recommande fortement de consulter Fireworks Exchange pour découvrir de nouvelles façons d'étendre Fireworks.