Adobe Spark Pages : la création de long formats simplifiée

Recevez chaque semaine un article comme celui-là directement sur votre boite mail en vous abonnant (gratuitement) à La Lettre des Nouvelles Narrations.

Les outils du géant Adobe n’ont pas la réputation d’être particulièrement faciles d’accès. Pourtant, une suite réunissant trois outils très simples est née il y a quelques années : Adobe Spark.

Adobe Spark Video est un logiciel de montage vidéo plutôt simple mais qui, très honnêtement, ne révolutionne pas le genre. Il est pratique mais voilà tout.

Adobe Spark Post est déjà plus distinctif : il permet de créer des publications imagées pour divers réseaux sociaux (et plus encore). Vous pouvez vous baser sur des milliers de modèles existants ou créer le vôtre, tout en paramétrant vos couleurs et votre logo pour personnaliser vos créations. Pour ceux qui connaissent, cet outil se rapproche d’une autre application populaire appelée Canva.

Enfin, le troisième outil s’appelle Adobe Spark Pages, et c’est à lui que je vais consacrer ce tutoriel. Il vous permet de créer des pages web enrichies, des long-formats comme on les appelle parfois. Des pages qui font la part belle au texte mais aussi aux photos, aux vidéos, et à la fluidité de lecture.

Schématiquement, quelque chose comme ça donc :

Plus concrètement, vous pouvez visualiser ici le projet test qui m’a servi à construire ce tutoriel.

Quelles utilisations ?

Adobe Spark Pages peut servir de multiples besoins : créer un portfolio, un site de présentation d’un quelconque service ou produit… En ce sens, l’outil peut se comparer à WordPress ou à des services comme Wix, la différence avec ces autres outils étant que Spark Pages est beaucoup plus simple. Une simplicité qui est à la fois à atout (gain de temps, etc.) et un désavantage si vous souhaitez des fonctionnalités plus sophistiquées.

Autant le dire de suite, Adobe Spark Pages ne vous permettra pas de construire un site complet. Sa vertu est de pouvoir mettre en place une page unique, bien présentée, dynamique et agréable à la consultation.

Narrativement parlant, cet outil va notamment vous permettre de construire des long formats, c’est à dire des publications / articles enrichis. Nés dans le monde du journalisme, les long formats mettent l’accent sur une ergonomie de lecture améliorée, afin d’inciter des temps de consultation plus longs.

Retrouvez de nombreux exemples de long formats dans l’onglet Panthéon de mon site. Parmi mes favoris, je vous conseille le très sobre NSA Files: Decoded, le très coloré La Gran Fuga et le douloureux Choice or Chance.

En fonction de votre niveau d’exigence, vous pourrez bien sûr utiliser Adobe Spark Pages pour produire le « produit fini », et diffuser le résultat où bon vous semble. Mais vous pouvez aussi vous en servir pour faire un prototype d’un long format plus sophistiqué. Prototype qui pourra vous aider à faire valider le concept par un tiers, ou à communiquer vos besoins auprès d’une équipe de graphistes / développeurs / etc.

Coût, accessibilité, etc.

Pour répondre de suite à la question : Adobe Spark propose une version d’essai gratuite, donc vous pouvez vous y entrainer facilement. Si vous voulez toutes les options de personnalisation, de collaboration, etc. des versions payantes existent à partir de 12€ par mois.

En revanche, la suite Adobe Spark est bien sûr totalement gratuite si vous êtes déjà abonnés à Adobe Creative Cloud.

Enfin, pour ce qui est de l’accessibilité, Adobe Spark est disponible à partir de votre navigateur d’ordinateur ou via des applications mobiles dédiées.

Le tour du propriétaire

Sans plus attendre, voici donc un tutoriel, dont vous pouvez suivre et reproduire les différentes étapes de votre côté, bien entendu. Il vous faudra pour cela préparer quelques images… et c’est à peu près tout.

Créer un compte, créer un projet

Rendez-vous sur https://spark.adobe.com et commencez déjà par créer un compte personnel avec votre email ou un compte Google, Facebook…

Une fois cela réalisé, vous atterrissez sur votre page d’accueil. Vous pouvez y voir une collection de modèles et de formats prédéfinis. Je vous laisserai consulter tout cela ultérieurement, et nous partirons pour notre part d’un projet vierge.

Pour cela, cherchez un gros bouton « Créer un projet » puis sélectionnez « Page web » dans l’ensemble des formats disponibles, comme cela :

Titraille et image de garde

Une fois votre projet vierge créé, vous allez devoir donner un titre et un sous-titre à votre projet. Pour cela, rien de plus simple, il suffit d’écrire ce que vous voulez aux emplacements indiqués :

Puis vous devez choisir une image pour servir d’arrière-plan, en cliquant sur le bouton « + » en bas de l’écran. Puis en téléchargeant une image depuis votre ordinateur, comme cela :

Notez que depuis le panneau de droite (qui s’ouvre lorsque vous sélectionnez « Photo ») vous pouvez également aller chercher des images sur Google Drive, Dropbox ou sur divers services proposant des images de stock.

Choisir un thème

L’outil propose un certain nombre de mises en page prédéterminées, entre lesquelles vous pouvez basculer en cliquant sur l’onglet « Thèmes », en haut à droite :

Ici, il faut bien avouer que l’offre est assez limitée et on aimerait davantage de personnalisation…

Ajouter des blocs

La suite du processus créatif est extrêmement simple : vous allez ajouter bloc sur bloc pour constituer votre page. Les blocs peuvent être de différentes natures :

Photo
Texte
Bouton : ajoute un bouton qui conduit vers une adresse de votre choix
Vidéo : seulement si hébergée sur Youtube, Vimeo ou Spark Video
Grilles de photo : ajoute un « collage » de plusieurs images de votre choix
Glideshow : une animation mêlant photo et texte (voir plus bas)
Sciender la mise en page : divise l’écran en deux avec une image d’un côté et un bloc au choix de l’autre

Tous ces blocs sont accessibles en cliquant sur le bouton « + » disponible sous votre image de garde, comme cela :

Parmi les blocs un peu spécifiques, citons d’abord la grille de photos, qui s’intègre tout simplement en sélectionnant plusieurs images. Comme ceci :

Le glideshow est le plus complexe. Il s’agit d’une suite de photos sur lesquelles vous pouvez ancrer du texte en superposition. Avant de voir comment le créer, voici un exemple du résultat attendu :

Pour créer un glideshow, vous devez donc le choisir parmi les blocs disponibles, après avoir cliqué sur le bouton « + ». Vous pourrez alors choisir une ou plusieurs images de fond, comme cela :

Validez ensuite votre sélection avec le bouton « Enregistrer » en haut à droite. Vous verrez alors que sur chaque image sélectionnée, un rectangle apparaît, ainsi qu’un bouton « + », vous permettant d’ajouter des blocs. Des blocs qui viendront se superposer à l’image de fond :

Pour le reste des blocs (Photos, Texte, Bouton, Vidéo), rien de bien sorcier, il s’agira à chaque fois de sélectionner une image ou de coller un lien…

Prévisualiser et publier

Au cours de votre travail, vous pouvez cliquer sur le bouton « Aperçu », en haut au centre de l’écran, pour vérifier votre mise en page.

Une fois terminé, vous pourrez enfin cliquer sur « Partager » pour publier votre création :

Vous pourrez y modifier les informations essentielles de votre projet (Titre, Auteur…) puis créer un lien qui vous permettra de partager votre projet. Si vous préférez, vous pouvez aussi y trouver un code embed pour embarquer votre création sur votre propre site :

Et voilà…

En cas de soucis, une page d’assistance technique est à votre disposition. Amusez-vous bien avec cette outil (je l’espère en tout cas) !

Si cet article vous a été utile, jetez un oeil à mes livres sur les nouvelles narrations et rejoignez ma page Facebook pour davantage de contenus.