Créer un thème

Vous allez commencer par dupliquer un récit existant et créer un nouveau thème pour le styliser.

  1. Connectez-vous à ArcGIS StoryMaps avec votre compte d’organisation ArcGIS.
    Remarque :

    Si vous ne disposez pas d’un compte d’organisation, consultez les options disponibles pour accéder aux logiciels.

  2. Ouvrez le récit Smoke on the Horizon (Fumée à l’horizon).

    Texte du titre du récit sur la photo d’un feu de forêt

  3. Faites défiler ce récit et lisez son contenu.

    Il inclut une carte, des photos, du texte, des boutons et des liens vers des sources de données. Vous allez en créer une copie dont vous serez propriétaire et que vous pourrez modifier.

  4. Sur le ruban, cliquez sur le bouton More actions (Plus d’actions), puis sur Duplicate story (Dupliquer le récit).

    Duplicate story (Dupliquer le récit)

  5. Dans la fenêtre Duplicate this story (Dupliquer ce récit), cliquez sur Yes, duplicate (Oui, dupliquer).
  6. Supprimez le texte (Copy) ([Copie]) du titre, pour conserver uniquement Smoke on the Horizon (Fumée à l’horizon).

    Le récit utilise actuellement le thème par défaut, avec un arrière-plan blanc, un texte gris foncé et des accentuations en bleu. Ces couleurs ne sont pas adaptées au récit. La fumée d’un feu de forêt crée une ambiance sombre, brumeuse et inquiétante. La carte et les photos du récit reflètent cette atmosphère, mais ce n’est pas le cas du thème. Vous allez rechercher un autre thème.

  7. Sur le ruban, cliquez sur Design (Concevoir).

    Bouton Design (Concevoir)

  8. Dans le volet Design (Apparence), sous Theme (Thème), cliquez sur Mesa.

    Thème Mesa sélectionné

  9. Faites défiler le récit pour observer les changements.

    Le thème Mesa convient davantage aux couleurs du récit que le thème Summit par défaut, mais l’ambiance créée semble légère et nette. Vous allez créer un thème personnalisé pour que le récit semble plus enfumé, plus sombre et un peu menaçant.

  10. Cliquez sur le lien Manage my themes (Gérer mes thèmes).

    Lien Manage my themes (Gérer mes thèmes)

  11. Cliquez sur le bouton New theme (Nouveau thème).

    Bouton New theme (Nouveau thème)

  12. Dans la fenêtre Choose a starting point (Choisir un point de départ), cliquez sur Obsidian, puis sur Select (Sélectionner).

    Sélectionner un thème à utiliser comme point de départ

    Si vous choisissez un thème comme point de départ, les couleurs, polices et autres caractéristiques du thème seront chargés dans l’éditeur en tant que point de départ. Étant donné que vous avez choisi de donner une ambiance plus sombre au récit, l’arrière-plan sombre d’Obsidian et les couleurs aux accents rouges constituent un bon point de départ pour travailler.

  13. Dans le volet latéral, supprimer Untitled theme (Thème sans titre) et saisissez Fumée.

    Thème renommé en Fumée

Choisir des polices et des couleurs

Vous allez à présent choisir des polices et des couleurs qui confèrent un ton sérieux. Vous allez emprunter les couleurs de la carte ainsi que les photos qui figurent déjà dans le récit et vous assurer que ces couleurs répondent aux critères d’accessibilité en termes de taux de contraste.

  1. Dans le volet latéral, développez la section Colors (Couleurs) et cliquez sur le menu Background color (Couleur d’arrière-plan).
  2. Supprimez #0e1116 et saisissez #272520.

    Couleur d’arrière-plan définie sur 272520

    L’arrière-plan de la page prend une couleur marron foncé. Cette couleur est identique à la couleur d’arrière-plan (la couleur de l’océan) de la carte de prévision des fumées.

    Arrière-plan foncé avec du texte sombre

    Conseil :

    Vous pouvez installer sur le navigateur Web des extensions qui permettent de rechercher les valeurs hexadécimales des couleurs des cartes, des photos et d’autres graphiques. Eye Dropper en est un exemple.

  3. Pour Header color (Couleur de l’en-tête), cochez Use theme colors (Utiliser les couleurs du thème).

    Vous allez définir cette propriété ultérieurement dans la section Typology (Typologie). Sélectionnez cette option pour personnaliser davantage ces couleurs dans cette section.

  4. Cliquez sur le menu Accent color (Couleur d’accentuation). Dans la liste Basic colors (Couleurs de base), sélectionnez l’option orange ou saisissez #C86624.

    Menu Accent color (Couleur d’accentuation) défini sur orange

  5. Faites défiler le récit donné en exemple pour observer où les accentuations orange apparaissent.

    La couleur définie dans Accent color (Couleur d’accentuation) affecte les boutons, les liens, les séparateurs et les citations. La couleur orange est associée au feu, donc elle convient au sujet du récit.

  6. Développez la section Typography (Typographie).

    Les polices ont leur propre personnalité. Vous souhaitez donner un ton sérieux grâce à ce thème, donc vous devez éviter les polices qui semblent trop décontractées, ludiques ou décoratives. La police Charter BT possède une personnalité formelle, donc elle est adaptée au thème. De nombreuses polices disponibles dans ce menu pourraient également convenir, donc le choix de la police dépend largement de vos goûts. Lorsque vous choisissez des polices, pensez à ce que chacune d’entre elles vous rappelle. Une police qui vous fait penser à une invitation à un mariage, à un livre d’enfant ou à un jeu en ligne n’est peut-être pas le meilleur choix pour un récit sur la fumée des incendies. Une police qui vous rappelle des documents officiels est plus appropriée.

    La police Charter BT actuellement utilisée pour le titre constitue une bonne option de police à l’aspect formel. Conservez-la.

  7. Pour Title and headings (Titre et en-têtes), cliquez sur le menu des couleurs. Saisissez #A6671B.

    Le texte du titre prend une couleur jaune-orange empruntée à l’une des photos du récit.

    Texte du titre avec une police orange

    Un symbole d’avertissement apparaît en regard du menu des couleurs. Il indique que le contraste est faible entre la couleur du texte et celle de l’arrière-plan, ce qui rend le texte difficile à lire.

    Couleur d’arrière-plan avec une icône d’avertissement

  8. Dans la fenêtre du sélecteur de couleurs, cliquez sur la flèche située en regard de Not legible (Illisible).

    Taux de contraste pour #A6671B

    Les informations de cette section vous indiquent comment la couleur du texte contraste avec l’arrière-plan. Les nombres spécifiés sont des taux de contraste. Un taux de contraste est considéré comme lisible s’il respecte les seuils définis par les directives WCAG 2.1 AA. Dans ce cas, la couleur orange contraste bien avec l’arrière-plan, mais pas avec l’arrière-plan secondaire.

    La couleur d’arrière-plan secondaire est une version plus claire de la couleur d’arrière-plan marron. Elle est automatiquement générée et n’est pas configurable. Vous allez éclaircir la couleur orange pour qu’elle soit lisible sur les deux arrière-plans.

  9. Dans le cadre du sélecteur de couleurs, déplacez le cercle un peu plus vers le haut et vers la gauche. Vous pouvez également saisir #BC7F38.

    Les nombres des ratios de contraste deviennent verts, ce qui indique que le contraste est approprié avec les deux couleurs d’arrière-plan.

    Taux de contraste pour #BC7F38

    Les avertissements liés au contraste ne doivent pas être ignorés. Même si vous êtes capable de lire le titre sans difficulté dans la couleur que vous avez choisie, ce n’est peut-être pas le cas de tout le monde. Les avertissements vous permettent de créer un récit accessible.

    Pour le texte de paragraphe, vous allez choisir la même police que celle du titre et des en-têtes. En cartographie, il est souvent recommandé d’utiliser uniquement une ou deux polices, car il est plus facile de concevoir une carte attrayante et efficace avec peu d’éléments. Vous allez appliquer ce conseil à la conception du thème et utiliser une seule police tout au long du récit.

  10. Pour Paragraph (Paragraphe), sélectionnez Charter BT.

    Le fait de limiter le thème à une seule police vous permet de davantage faire varier les couleurs.

  11. Pour Paragraph (Paragraphe), modifiez la couleur en #C8BEA4.

    Texte de paragraphe défini sur un beige pâle

    Cette couleur est une version plus pâle de la couleur du titre. Elle est moins saturée, ce qui lui donne un aspect plus enfumé adapté au thème du récit. Elle est également plus claire, ce qui accentue le contraste avec l’arrière-plan. Plus le texte est petit, plus le contraste est important pour la lisibilité.

  12. Pour Captions (Légendes), définissez la couleur sur #B5ADB7, un violet pâle désaturé.

    Couleur du texte de légende définie sur un violet pâle

    Les trois couleurs du texte s’inspirent de l’une des photos présentées dans le récit.

    Ciel rempli de fumée sur un quartier suburbain

    L’emprunt de couleurs à partir de photos et de graphiques est une méthode fiable pour concevoir une combinaison de couleurs. Ces couleurs contribuent à définir le ton du récit à partir du ton de la photo. Les couleurs orange et jaune du texte correspondent également à la symbologie de la carte.

    Carte avec légende

    Il ne s’agit pas exactement des mêmes couleurs, mais elles sont suffisamment similaires pour donner une cohérence au récit.

    La couleur violet pâle se marie bien avec l’arrière-plan marron, mais elle n’apparaît qu’à quelques endroits. Vous souhaiterez peut-être réutiliser cette couleur ailleurs. Vous allez la définir comme couleur d’accentuation facultative pour pouvoir y accéder ultérieurement.

  13. Faites défiler le volet latéral vers le haut. Dans la section Colors (Couleurs), sous Optional accent colors (Couleurs d’accentuation facultatives), cliquez sur le premier menu des couleurs et définissez-le sur #B5ADB7.

    Optional accent colors (Couleurs d’accentuation facultatives)

    Cette couleur ne sera pas immédiatement appliquée à un élément du récit, mais elle sera disponible ultérieurement dans le générateur de récits.

Définir d’autres éléments de conception

Vous allez à présent modifier l’apparence des boutons et des liens dans le thème.

  1. Réduisez les sections Colors (Couleurs) et Typography (Typographie), et développez la section Buttons (Boutons).

    Le récit affiche le bouton donné en exemple.

    Bouton orange avec du texte noir

    Le bouton semble très gras en orange. Les boutons en gras conviennent à certains récits. Par exemple, un bouton d’appel à l’action doit être bien visible. Cependant, dans le cas de votre récit, vous ne souhaitez pas que les boutons détourne l’attention du texte de paragraphe. Vous allez donc leur attribuer une couleur plus terne qui attire moins l’attention.

  2. Dans le volet latéral, cochez la case Use custom color (Utiliser une couleur personnalisée).
  3. Définissez la couleur sur #776f5b.

    Option Use custom color (Utiliser une couleur personnalisée) sélectionnée

    Cette couleur grisâtre présente une nuance similaire au corps du texte du récit. Il s’agit d’une couleur plus terne, qui ne détourne pas l’attention du texte, mais qui est suffisamment claire par rapport à l’arrière-plan pour réussir les tests d’accessibilité.

    Bouton marron avec du texte blanc

    Le texte du bouton est également passé du noir au blanc, ce qui permet un contraste des couleurs lisible. Vous allez également rendre le bouton carré pour mieux l’aligner sur la ligne droite utilisée dans le thème pour le bloc de citation.

  4. Sous Buttons (Boutons), cliquez sur le premier type de bouton avec les coins carrés.

    Sélectionner le type de bouton avec les coins carrés

  5. Développez la section Links (Liens) et sélectionnez la seconde option.

    La couleur d’accentuation orange donnait un aspect trop voyant aux boutons, mais semble appropriée pour souligner les liens, donc vous n’allez pas la modifier en couleur personnalisée.

    Lien souligné avec des points orange

  6. Développez la section Separators (Séparateurs). Sous Position, sélectionnez la dernière option.

    Dernière option Position sélectionnée

    La ligne du séparateur donné en exemple s’étend sur toute la largeur du récit.

    Séparateur sur toute la largeur

    Il existe d’autres options pour les citations et les fonds de carte. Mais puisque vous n’en utilisez pas dans le récit, vous n’allez pas les ajuster.

Publier le thème

Vous allez publier et partager le thème pour pouvoir l’appliquer au récit.

  1. Faites défiler le récit donné en exemple et examinez la conception.

    Il possède une apparence sérieuse et formelle. Les couleurs correspondent au thème des feux de forêt et de la fumée.

  2. Sur le ruban, cliquez sur Publish (Publier).

    Bouton Publier

    Vous prévoyez de partager le récit Smoke on the Horizon (Fumée à l’horizon) avec le public, donc le thème doit également être partagé publiquement. Dans le cas contraire, les personnes qui n’ont pas accès au thème verront le récit avec le thème par défaut appliqué.

  3. Dans Set sharing level (Définir le niveau de partage), choisissez Everyone (public) (Tout le monde (public)).
  4. Pour Advanced options (Options avancées), cochez la case Allow duplication (Autoriser la duplication).

    Paramètres de partage

    Cette option vous permet de faire une copie du thème et de la modifier ultérieurement.

  5. Cliquez sur Publish (Publier).

Appliquer le thème au récit

Vous allez à présent appliquer le thème et observer la manière dont il modifie son apparence. Vous allez remplacer l’une des couleurs du thème.

  1. Revenez dans l’onglet du navigateur dans le récit. Vous pouvez également fermer l’onglet du thème.
    Remarque :

    Si vous avez précédemment fermé l’onglet du récit, connectez-vous à votre compte ArcGIS. Cliquez sur l’onglet Content (Contenu), puis sur l’élément ArcGIS StoryMaps Smoke on the Horizon (Fumée à l’horizon). Cliquez sur Edit Story (Modifier le récit).

  2. Sur le ruban, cliquez sur Design (Concevoir).
  3. Faites défiler le volet Design (Apparence) jusqu’en bas et cliquez sur Browse my themes (Parcourir mes thèmes).

    Bouton Browse my themes (Parcourir mes thèmes)

  4. Dans la bibliothèque de thèmes, cliquez sur la fiche Fumée.

    Le thème est appliqué au récit.

  5. Fermez le volet Design (Apparence) et faites défiler le récit pour observer sa nouvelle apparence avec le nouveau thème.

    Thème appliqué au récit

    L’arrière-plan de la carte se marie parfaitement avec l’arrière-plan du récit et les couleurs du texte et d’accentuation s’harmonisent avec celles des photos et de la carte.

    Thème appliqué au récit

  6. Faites défiler le récit jusqu’à la fin.

    La première ligne de la section des crédits utilise la couleur orange du titre et des en-têtes.

    Texte orange sur un arrière-plan marron

    Vous avez choisi cette couleur en pensant à un texte plus grand et vous préférez maintenant une couleur qui contraste davantage avec cette police de petite taille. Vous allez remplacer le thème et sélectionner une autre couleur.

  7. Mettez en surbrillance la ligne du texte qui commence par This story was created for (Ce récit a été créé pour).
  8. Dans le menu qui s’affiche, cliquez sur le bouton Color (Couleur).

    Bouton Color (Couleur) et texte mis en surbrillance

    Sous Recommended (Recommandé), quatre couleurs sont indiquées. Elles incluent les couleurs de titre et d’accentuation que vous avez définies dans le thème.

  9. Sous Recommended (Recommandé), cliquez sur la couleur violet pâle. Vérifiez que le contraste des couleurs est indiqué comme Legible (Lisible).

    Violet sélectionné comme couleur d’accentuation

    Le texte prend une couleur violette.

    Section des crédits

Publier le récit

Pour terminer, vous allez publier le récit et le partager avec le public.

  1. Sur le ruban, cliquez sur Preview (Aperçu).

    Bouton Preview (Aperçu)

  2. Cliquez sur Yes, continue (Oui, continuer).
  3. Faites défiler le récit pour l’examiner.
  4. Dans la barre d’outils d’aperçu, cliquez sur le bouton Close preview (Fermer l’aperçu).

    Bouton Close preview (Fermer l’aperçu)

  5. Sur le ruban, cliquez sur Publish (Publier).
  6. Dans Set sharing level (Définir le niveau de partage), choisissez Everyone (public) (Tout le monde (public)).
  7. Cliquez sur Publish (Publier).

Le récit est terminé. Grâce au thème personnalisé, il adopte un ton et une ambiance qui correspondent au sujet traité. Au cours de ce didacticiel, vous avez appris à :

  • Créer un thème personnalisé qui donne un ton approprié au récit
  • Créer une apparence cohérente en empruntant des couleurs qui figurent déjà dans le récit
  • Choisir des couleurs qui respectent les critères d’accessibilité

Vous trouverez d’autres didacticiels dans la bibliothèque des didacticiels.