Embed Size (px)
Citation preview
N°5Design, créativité et innovation
des écosystèmes digitaux
🎶Work it BRAVER = DES EXPÉRIENCES PLUS AUDACIEUSES…
Make it SMALLER = …PARFOIS MINIMALISTES…
Do it COOLER= …UN BRIN NOSTALGIQUES…
Make us CLOSER = …ET SURTOUT PLUS HUMAINES ! 🎶
Lyrics
LES TENDANCES DU WEB
TENDANCE 1
TENDANCE 2
TENDANCE 3
TENDANCE 4
W o r k i t B R AV E R
L’ère du rapprochement
marque consommateur.
M a k e i t S M AL L E RD o i t C O O L E R
M a k e u s C L O S E R
L’audace haute en
couleurs.
En avant vers les
nineties !Le moins ami du mieux.
EXPÉRIENCE
VISUELS INTERACTIONS CONTENUSCe que nous voyons
Le style
Ce que nous en faisons
La technologie
Ce que nous lisons
La compréhension
Des tendances étudiées selon trois critères, qui participent à la création d’une
expérience globale
CLOSER, BRAVER, SAVER, SMALLER
TENDANCE N°1
BRAVER78% des Millennials choisiraient de dépenser de l'argent dans des expériences plutôt
que dans l'achat d'un bien d’après une étude Eventbrite et Harris.
Pour conquérir un consommateur dont le facteur expérience est
prioritaire, il faut savoir susciter son intérêt, provoquer son étonnement à
travers des expériences inédites, des contrastes surprenants et des
prises de paroles audacieuses.
Color Amaze« Je veux me sortir d’un quotidien monotone, où tout n’est que recommencement et banalité. Comme j’ai une
tendance à me lasser facilement, j’ai une soif permanente d’inédit et je consomme plus facilement de l’expérience et
de la nouveauté. J’admire la prise de risque car elle est guidée par la passion».
Les sites de marques se prennent au jeu de
l’audace et viennent piquer la curiosité des
visiteurs en les plongeant dans un univers pop,
fun et haut en couleurs.
LA COULEUR DONNE
LE TON
Par quels moyens visuels les marques arrivent-elles à
transformer leurs sites en de véritables lieux de divertissement ?
#PASSION #DIVERTISSEMENT
#AUDACE
La passion, les coups de cœur
sont les moteurs d’un
consommateur impulsif qui
fonctionne énormément à
l’affect.
En intégrant ce facteur, il sera
plus facile d’engager les
audiences.
Le visiteur est plongé dans un
contexte qui ne lui est plus
habituel, il considère alors les
messages qui lui sont transmis
dans une logique de loisir et de
plaisir.
CRUSH ENJOY
Le consommateur valorise la
prise de risque et se souvient
des personnalités hautes en
couleurs. Par l’audace, on
devient plus mémorisable.
BOLD
Les couleurs gradient et duotone ne sont pas prêtes de
disparaitre de la sphère digitale. Après une déferlante de
dégradés en 2016, il semblerait bien que cela perdure un petit
moment.
Des couleurs qui se font intenses et s’atténuent comme chaque
moments de nos vies : tantôt vibrantes, courageuses, acidulées,
et optimistes, tantôt apaisées, douces, calmes et fondues !
RÊVE TA VIE EN
COULEURS …
Couleurs : Gradient & Duotone
https://www.spotify.com/fr/
SPOTIFY
VISUELS
Les éléments se mettent en mouvement pour un effet
catchy et captivant. L’animation permet d’accentuer
les fonctionnalités et guide l’utilisateur dans son
parcours de visite. La 3D utilisée de façon ludique et
astucieuse permet, en plus, de donner vie aux
composants graphiques.
Animation & 3D
MADWELL
INTERACTIONS
http://www.madwell.com
DIMENSION
PUISSANCE 3
Souvent, les call to action sont apparus comme
des fonctionnalités rébarbatives pour l’utilisateur,
mais plus maintenant ! Chaque call to action est
devenu un bon moyen d’animer une page, de lui
faire prendre vie de façon fun.
CALL ME MAYBE
Call to action
LEONARD
INTERACTIONS
https://leonard.vinci.com/index.html
Cinemagraphs et gifs s’affichent en grand et en
homepage ! Ils ont la faculté d’imprimer un côté
fun et décalé d’entrée de jeu, comme la promesse
d’une aventure de chaque instant pour le visiteur.
ANI-MANIA
Visuels animés
ELSA MUSE
INTERACTIONS
http://www.elsamuse.com
INTERACTIONS
Le ton se fait volontairement léger, drôle et décalé.
Puisque la couleur apporte la bonne humeur, celle-ci se
fait sentir même dans le langage utilisé, volontairement
avec des hashtags sur-mesure #coolheures.
FUN RAISING
Tonalité : Humour, humeur
https://www.jc-de-castelbajac.com/magazine-happyculture/
JEAN CHARLES DE CASTELBAJAC
CONTENU
TENDANCE N°2
SMALLERD’après une étude Ipsos pour Audipresse, 92% des Français privilégient la simplicité
par rapport à la sophistication.
Pour conquérir un consommateur dont le facteur simplicité est prioritaire, il
faut construire des messages plus clairs et épurés qui ne soient pas parasités
par trop d’effets de style. Pour instaurer une certaine proximité et intimité avec
ce profil, il faut savoir lui faire ponctuellement des clins d’œil subtils.
MINI-MALL« Je suis saturé d’informations, cela me rend méfiant et ce trop plein de choix m’empêche de prendre de réelle
décisions. J’ai besoin de simplification dans mon quotidien et j’aime que l’on me présente les choses de façon
concrète. En somme, j’attache davantage d’importance au fond plutôt qu’à la forme ».
User et abuser d’effets visuels, à quoi bon ? Les
sites minimalistes ont également une carte à
jouer : celle de l’épure et de la surprise par
micro touches effet maxi !
DIGITAL LOW PROFILE
Comment rendre votre propos plus impactant et intelligent grâce
à la devise Less is More ?
BALENCIAGA
#CONTENTFIRST #SIMPLE
#DETAILS
Comme les écrans se font plus
petits, le design s’adapte en
conséquence : contenu
centralisé, contexte épuré…
La tendance mini est celle qui fait
la part belle au contenu.
Des touches de couleur pour une
dominance en noir et blanc, qui
se posent en valeurs sûres.
Symboles d’un ying et d’un
yang visuel qui veut éliminer au
maximum les messages
parasitaires, pour plus de clarté.
FOCUS LIGHTEN
Le minimalisme fait se faire
intelligent, et ruse en jouant sur
les détails. Faire beaucoup avec
peu, voilà tout l’art du
minimalisme : rationnel,
esthétique et ultra-moderne.
WINK
Avec le split content, la lecture est simplifié au
maximum pour le visiteur, qui retrouve une grille
similaire à celle d’un livre. Le détail qui peut faire la
différence : l’irrégularité qui donne un côté plus
moderne.
PANORAMA SPLIT
Contenu divisé
http://elitemodel.fr/en/
ELITE
VISUELS
Sur cette tendance, la couleur pourrait paraître dérisoire,
alors même qu’elle donne immédiatement le ton.
Le noir et le blanc se font stars, alors que les autres
couleurs la jouent low-profile ; sur cette tendance, pas
besoin d’en faire des tonnes avec des couleurs
détonantes, car c’est justement cette monotonie qui crée
la disruption.
NOIR ET BLANC DE
PEAU
Monochrome
http://kirichik.com KIRICHIK
VISUELS
Conséquence naturelle du mobile-first, centrer le contenu
permet de focaliser l’attention du visiteur et d’imprimer un
message épuré mais fort en homepage.
CENTER FEVER
Contenu centré
http://yes.studio/projects/featured/
STUDIO YES
VISUELS
Sans faire usage de formats visuels interactifs, voici une
tendance qui s’inspire des tabulations Excel, de façon
épurée et complètement ordonnée. Le ton est donné :
l’ordre est de mise !
EXCEL MODEL
Cases et quadrillages
http://klassegrafik.de/en/portfolio
KLASSEGRAFIK
VISUELS
Pour éliminer tout message accessoire et
concentrer l’utilisateur sur les informations que le
site lui demande de fournir.
ASK ME BIG
Formulaire plein écran
CODE AND THEORY
INTERACTIONS
http://www.codeandtheory.com/says-a-lot
Chez les mini, il y a deux écoles qui se distinguent niveau
interaction. Il y a ceux qui utilisent le scroll à l’infini et ceux qui le
limitent totalement pour faciliter la tâche aux visiteurs et satisfaire
les plus paresseux d’entre eux. Les deux formules marchent,
l’essentiel étant d’avoir un parti pris, et de s’y tenir !
SCROLL OR NOT
SCROLLHistoire de parti-pris
COCO CAPITAN VS
EMMITFENN
http://cococapitan.co.uk/#main
https://emmitfenn.com
INTERACTIONS
Quelques sites minimalistes misent sur le non visuel; le
texte laisse le champ libre à l’imagination alors que
l’image s’impose d’elle-même. Une image évoque,
tandis qu’un texte raconte avec précision ce qu’il veut
que vous reteniez.
LITTERALEMENT
Text only
http://western-promises.com/about
WESTERN PROMISES
CONTENU
TENDANCE N°3
COOLERSelon l’enquête annuelle « Fractures Françaises » réalisée par Cervipof 78% des
Français s'inspirent «de plus en plus des valeurs du passé» pour conduire leur vie.
74% pensent que «c'était mieux avant» et 70% que «rien n'est plus beau que la
période de mon enfance».
De plus en plus oppressé par un quotidien millimétré, normé et cadré, le
consommateur veut s’extirper de ce monde en perpétuel quête de perfection.
Il aspire à plus de liberté quitte à rechercher l’imperfection et à favoriser le
désordre. Ce qui compte c’est de laisser place au fun idéalisé de son enfance.
Véritable adulescent, le Xennial a plus que jamais envie de rupture et de voir
refleurir les méandres d’un passé moins parfait.
Retro Grade« Je vis dans un quotidien où tout va de plus en plus vite, j’aspire à une certaine harmonie, celle de mon enfance, pour
retrouver mes repères et établir mes propres règles pour aborder sereinement l’avenir. »
A l’heure où le citoyen, le consommateur est
empreint de nostalgie clamant qu’« avant s’était
mieux !» , les marques adaptent petit à petit leur
discours. Cela passe par des sites misant sur
une dynamique vintage.
DIGITAL LOVES
NOSTALGIA
Comment utiliser le rétro pour dynamiser l’expérience et se
rapprocher de l’audience ?
#NOSTALGIE #KIDULT
#REBELLION
Les marques transforment leurs
sites en véritables machines à
remonter le temps pour séduire
une audience à l’Etat d’esprit
nostalgique. Les plateformes
permettent ainsi d’accéder à un
idéal intemporel celui d’un
passé sublimé.
Qui dit enfance dit ludique. Les
sites web proposant des mini-
jeux se multiplient misant sur du
contenu divertissant qui
accompagne l’audience dans une
expérience de marque nouvelle.
MOOD FUN
Les marques misent sur des
sites qui s’abolissent des
règles préétablies du design.
Elles expriment un esprit
critique et rebelle en faisant
preuve d’une créativité à un
degré exacerbé.
FREEDOM
Les photos vintages sont réapparues en même temps que
nos vieux polaroids. Conséquence ? Les plus grands
influenceurs usent et abusent de filtres pour donner une
image plus spontanée et authentique à leurs clichés sur les
réseaux sociaux. Et ironie du sort, Polaroid affiche plus de
237K d’abonnés sur son compte instagram ! Le digital n’a
jamais été aussi nostalgique.
FILTER
INFLUENCER
Filtres rétro
https://www.instagram.com/polaroid/
VISUELS
POLAROID
Pour tout ceux qui en ont marre des moodboards
esthétiquement parfaits ! Souvenez-vous étant enfant,
lorsque vous découpiez vos plus belles illustrations, et
que vous dessiniez autour. La tendance visuelle qui
consiste à faire des collages et des associations
délicieusement vintage est de retour. Pour notre plus
grand plaisir!
COLLE-CTOR
Effet Scrapbooking
https://www.volkshotel.nl/fr/hotel/
VISUELS
VOLKS HOTEL
Qui dit nostalgie, dit aussi retour à des techniques traditionnelles
qui, parce qu’elles sont rares sur le digital, font un retour
fracassant ! Les illustrations, les peintures et les dessins
reviennent en force pour donner au lecteur la sensation du papier
au contact du crayon et du pinceau sur la toile pour un effet retro
complètement saisissant. Le plus bel exemple en date : la
couverture du Vogue Septembre qui met en scène l’actrice
Jennifer Lawrence et qui a fait le buzz sur instagram !
COUP DE CRAYON
Illustrations et dessins
https://www.instagram.com/voguemagazine/
VOGUE
VISUELS
Retenir l’attention par excès de brutalité ? C’est le
nouveau crédo de certains web designers un peu
trop nostalgiques, qui préfèrent le mauvais goût des
jeunes années du web comme seul gage
d’authenticité et de régression de l’identité.
LE PASSE EN PLEINE
FACE
Brutal Design
http://www.salazarla.com
SALAZARLA
VISUELS
Le brutal design s’illustre également en terme d’interactions
puisqu’il parodie les codes des années 90 à merveille en
proposant les fameux jeux que l’on pouvait retrouver sous
Windows comme le Solitaire (devenu Solitude) ou
Wolfenstein 3D dans lequel les nazis ont été remplacés par
des géants américains de l’internet. Bref, tout a été pensé
pour raviver la flamme des geeks dans l’âme !
CŒUR DE GAMER
Brutal Design
http://www.windows93.net/
WINDOWS 93
INTERACTIONS
Les marques multiplient les hommages et aiment se
remémorer leurs plus beaux souvenirs à travers des
plateformes sous formes de timelines ou de
rétrospectives. Une façon de remonter le temps et de
renforcer l’idée d’un succès intemporel.
SOUVENIRS, SOUVENIRS
Historique de marque
http://inside.chanel.com/fr/marilyn
CHANEL
CONTENU
Les références cultes de nos années passées n’en finissent pas d’inspirer
les créations d’aujourd’hui. Elles sont détournées, réutilisées et distillées
comme des clins d’oeil, signe de l’importance qu’on eu les années 80 et
90 dans la construction de notre culture commune et de l’engagement
que cela peut créer.
Par exemple, pour célébrer la sortie du DVD des Guardians of the Galaxy
volume 2, Marvel a réalisé le clip d’un son phare de sa BO. Le résultat est
totalement kitsch car bourré de références 80’s comme dans le film, avec
la présence des acteurs et celle de David Hasseloff pour un effet
passé/présent complètement surréaliste.
RE-USE
Utilisation de références
GUARDIANS OF THE GALAXY
CONTENU
https://www.youtube.com/watch?v=3MMMe1drnZY
Sur les réseaux sociaux, on parle souvent de communautés,
même si celles-ci n’ont plus rien à avoir avec notre vieux ciné-
club du lycée. Pourtant, redonner un sens premier degré à
cette notion de communauté s’avère être une ingénieuse
façon de fidéliser et donner rendez-vous à ses audiences, en
plus de dynamiser ici le format newsletter.
BIENVENUE AU CLUB
Les communautés retrouvées
ROCKYRAMA
CONTENU
http://rockyrama.com/invisible-club
TENDANCE N°4
CLOSERSelon une étude récente réalisée par Accenture Strategy, 79% des consommateurs
français préfèrent traiter directement avec une personne pour résoudre leurs
problèmes de service client.
A une époque rythmée par le chacun pour soi et où les discussions
digitales dépassent les discussions IRL, l’audience cherche à renouer
avec l’autre. Elle est à la recherche d’une dimension affective de plus en
plus forte et exprime la volonté de services plus humains auprès des
marques.
Human First« Avec toutes les nouvelles technologies, les robots dopés à l’intelligence artificielle, les services dématérialisés ce dont j’ai besoin, c’est de retrouver une relation plus humaine, plus vraie. »
Longtemps décris comme froids, peu
accueillants et plutôt génériques, les sites de
marques connaissent une période de
renouveau. Les marques cherchent de plus en
plus à humaniser leurs plateformes.
LE DIGITAL MARQUE POUR
UNE RELATION PLUS HUMAINE
Comment parviennent-elles à rendre les sites internet, fruit du
codage et de la data beaucoup plus humains et surtout
beaucoup plus conviviaux ?
THE NEW-YORK TIMES ET UBS
#STORYTELLING #CONVERSATION
#SINCÉRITÉ
Approche plus chaleureuse et
plus personnelle, le
storytelling permet de générer
de la proximité et d’emmener
l’audience dans un univers
propre à la marque qui ne se
limite pas à la présentation du
produit ou du service.
Plus proches de leurs audiences
que jamais, les marques créent
le dialogue. Adoptant une prise
de parole qui n’est plus
unilatérale mais beaucoup plus
participative elles créent ainsi
de l’engagement chez les
audiences et en fait de
véritables ambassadeurs.
STORY SPEAK
Aujourd’hui les sites de marque,
ancrés dans une démarche de
réassurance misent sur la
sincérité, la vérité et la
transparence. Le but étant de
créer une relation de confiance
avec l’audience
TRANSPARENCY
Des visuels en Haute définition pour favoriser l’aspect
authentique et transparent de la marque. Des images
originales, franches, qui capturent des moments de la vie
réelle plutôt qu'un aspect poli et posé.
Des visages, des regards qui rappellent qu’une marque est
une affaire d’équipes d’hommes qui œuvrent pour elle.
HUMAN AFTER ALL
L’humain en image
http://www.reebok.fr/fr-FR/be-more-human/#/home
REEBOK
VISUELS
Quand Apple a créé un compte Instagram pour présenter des
photos uniquement capturées avec iPhone, on a vécu une petite
révolution. Très récemment c’est le Times Magazine qui a
réalisé ses couvertures avec un iPhone, et cela a fait le buzz !
Cette démocratisation de la photographie par le mobile ouvre un
champ de possibilités et de liberté à un exercice qui se voulait
très sophistiqué, gage de plus de transparence et d’authenticité.
#SHOTONIPHONE
La mobilité retrouvée grâce aux
smartphones
http://time.com/4930561/kira-pollack-time-firsts-iphone/ TIME MAGAZINE
VISUELS
L’Utilisation du Fullscreen est toute trouvée pour engager
l’internaute en le propulsant dans un univers différent de façon
intégrale. La marque transporte ainsi le visiteur dans un
monde en résolument grand, pour que ses yeux soient
emportés totalement, comme s’ils étaient plongés en pleine
réalité.
FULL CONTACT
L’immersion
https://space10.io/labs/do-you-speak-human
SPACE10
VISUELS
FOCUS COULEURS
MARRON VERT BLEU
Durabilité Confort Harmonie
Couleur de la terre par excellence, le marron est une
couleur douce, rassurante et presque maternelle.
Couleur neutre mais chaude, elle représente la
douceur, la sérénité, la solidité, la stabilité, le calme, la
rusticité. Elle est naturellement associée à
l’authenticité.
Alimentation Luxe Mode
Croissance Nature Harmonie
Le vert a une propriété apaisante sur l’homme, il l’aide
à se détendre. Il est le plus populaire dans les
secteurs énergétiques, financiers, alimentaires,
domestiques et technologiques. Cependant, cela ne
fonctionne pas bien lorsqu’il est utilisé pour les
marques de vêtements, d’avion ou de voiture.
Sagesse Confiance Productivité
Visible par tous (même les daltoniens), c’est l’une
des couleurs les plus populaires et les plus utilisées
par les marques et les sites internet sur le marché car
elle possède des vertus positives.
Environnement Santé Energie Finance Technologie Social
Si les attentes des audiences se portent sur la proximité, il s’agit
d’un nouveau défi pour les marques. L’objectif : recréer du lien et
du dialogue en donnant un esprit et une voix à la plateforme
digitale pour la rendre plus accessible, intuitive et efficace.
Hermès en fait un bon usage en proposant les services d’un
conseiller digital pour vous accompagner dans vos choix de
cravate.
HELLO FROM THE
OTHER SIDE
Les interfaces conversationnelles
http://lesailes.hermes.com/tutorials?utm_campaign=LADH_Tutorials_Internal_FR&ut
m_source=Ombrelle&utm_medium=AllDevices&utm_term=Vignette HERMÈS
INTERACTIONS
Le visiteur parcourt le contenu comme si il y était grâce à
des fonctionnalités immersives. On retrouve ici un champ
de vision et une mobilité comparables à celui de nos
propres yeux et corps. Ces outils sont efficaces et
intelligents et permettent, sur la plateforme The Daily 360,
de traiter l’actualité avec plus de véracité et de dynamisme
qu’un simple photo-reportage.
TECHNOLOGIC
Réalité virtuelle et vidéo 360°
https://www.nytimes.com/video/the-daily-360
NEW-YORK TIMES
INTERACTIONS
Le contenu est contextualisé de manière à raconter une
histoire au visiteur, qui retiendra alors plus facilement les
informations clés. Les expériences Airbnb sont de cet
ordre là, et proposent aux visiteurs des activités en les
plongeant dans les centres d’intérêt des passionnés qui
proposent leurs services.
STORY-BOARDS
Un bon storytelling vaut mille
positionnements
https://www.airbnb.fr/experiences/57279?source=p2¤tTab=experien
ce_tab&searchId=429a40b2-8abe-4a7e-9f6f-5680fae2ff9e AIRBNB
CONTENU
Les sites interpellent de plus en plus leurs audiences.
Cela passe par l’emploi du « vous », mais aussi du
« nous » pour embarquer l’internaute dans l’histoire et
créer des liens de complicité.
SOMETHING ABOUT US
L’apostrophe
https://airism.sg/
UNIQLO
CONTENU
TENDANCE 1
TENDANCE 2
TENDANCE 3
TENDANCE 4
W o r k i t B R AV E RM a k e i t S M AL L E R
D o i t C O O L E RM a k e u s C L O S E R
Force ProximitéForce Dynamisme
Force SimplificationForce Réappropriation
►Visuel : authenticité et
transparence
►Interaction : immersion
et dialogue
►Contenu : storytelling et
branded stories.
►Visuel : univers colorés
►Interaction : mouvement
►Contenu : décalé et fun
►Visuel & Interaction :
accumulation
►Contenu : usage d’éléments
de références
►Visuel & Interaction :
Eloge du rangement par le
vide
►Contenu : précision
CE QUE L’ON RETIENT
