A5 : Du storytelling au scrollitelling

@fperroy @MrEtourisme

On veut tous de belles histoires…

« pour que l’évènement le plus banal devienne une aventure, il faut et il suffit qu’on se mette à le raconter » Jean-Paul SARTRE – La Nausée

Oui, bon…

Le storytelling, on connait !

OK… On vous écoute

Quels sont les ingrédients du bon storytelling ?

On est d’accord ?

Dans ce cas, pourquoi nous limitons-nous

le plus souvent à ça ?...

#vismaviedeboulanger

#monbeauterritoire #picoftheday

#leshashtagscestjoli #storytelling

#monbeauterritoire

#maisouestcequejaimismesclés

#pouetaceluikilitça

Ceci n’est pas du storytelling

Le B.A.BA

OUI NON

OUI

NON Création

d’un symbole

Choix dans le patrimoine

méconnu

Recherche d’informations

Élaboration d’une identité

STORYTELLING  =  DES  HISTOIRES  =  DE  L’HUMAIN  

Disposons-nous d’un

symbole?

A-t-il une histoire ?

You know what? I hate

Thailand !

Tendance forte

Les sites recourant massivement au scroll et aux effets de parallaxe

Développée dès 2011, elle s’impose aujourd’hui.

L’effet parallaxe

La parallaxe est l’incidence du changement de position de l’observateur sur l’observation d’un objet. En d'autres termes, la parallaxe est l'impact (ou l'effet) de changement de position de l'observateur sur un objet observé. source http://fr.wikipedia.org/wiki/Parallaxe

EFFE

T PA

RA

LLA

XE

Traduction dans le web

L'effet de parallaxe dans la conception web est la technique qui permet de faire déplacer des images disposées sous différentes couches. L'interaction se fait à partir de la souris ou du scroll afin de créer un effet de vitesse/perspective pour donner une illusion agréable et intéressante de 3D.

EFFE

T PA

RA

LLA

XE

http://www.web-eau.net/blog/tutoriel-realiser-un-site-web-avec-l-effet-parallaxe

SCR

OLL

ET

CO

UC

HES

Avantages et inconvénients

•  Fluidification de la navigation

•  « Réduction » du temps chargement

•  Immersion dans les contenus

•  Technologie éprouvée (débuts en 2011)

•  HTML5, CSS3

•  Ergonomie/usabilité parfois douteuse

•  Plus adapté au tactile des tablettes qu’au tandem clavier/souris

•  Risque d’effet de mode •  Poids des images de fond •  Multiplication des scripts •  Abus

Des exemples pour mieux comprendre

PARALLAX WEB DESIGN

On aurait pu vous parler aussi…

•  … de l’infinite scrolling; •  … de l’hypothèse de voir Google

passer à 40 occurrences par page;

•  … des soucis que va rencontrer l’internaute… et pas que lui…

•  … du coup de vieux que se prennent nos sites…

Scrollitelling késako ?

Une tendance qui nous vient de la presse

Et sûrement l’influence des timelines…

Les outils du scrollitelling

•  Shorthand

•  Storehouse (app iPad)

•  Steller

•  Klynt

•  Racontr

•  Exposure

•  Aesop (extension WP)

•  Atavist •  …

C’est l’heure de VRAIMENT se mettre au transmédia!

Crossmedia VS Transmedia

http://www.contes-estuaire.fr/

Crossmedia VS Transmedia

http://www.contes-estuaire.fr/

Soyez malins: crowdsourcez !

Quelques exemples significatifs

Eton

nez-

moi

•  Un storytelling nouveau, événementiel, narratif, l’étape d’après les cadres MTL ?

1.  Racontez une vraie histoire (et pas forcément une histoire vraie…)

2.  Variez les média, pas seulement de la photo 3.  Faites voyager spatialement mais aussi

temporellement 4.  Inspirez-vous des mises en page des

magazines haut de gamme 5.  Usez des effets parallaxes sans abuser 5 co

nsei

ls

Et si…

…on testait ça en live et sans filet ?

Webographie sélective •  http://veilletourisme.ca/2015/07/22/promouvoir-les-regions-grace-aux-

recettes-de-grands-meres/ •  http://reference-etourisme.com/storytelling-chere-destination-raconte-moi-

une-histoire/ •  http://www.web-eau.net/blog/tutoriel-realiser-un-site-web-avec-l-effet-

parallaxe •  http://www.deepintheweb.com/effet-parallax-ressources-gratuites/ •  http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html •  http://www.blogduwebdesign.com/web-design-inspiration/25-sites-utilisant-

un-effet-de-parallaxe-original/435 •  http://www.webdesignertrends.com/2012/07/la-boite-a-outils-de-la-

parallaxe/ •  http://www.webdesigndev.com/parallax-scrolling-templates/