Tendances Web Design 2017, et après…
Click here to load reader
-
Upload
philippe-rondepierre -
Category
Design
-
view
283.307 -
download
2
Transcript of Tendances Web Design 2017, et après…
webdesign tendance s 2o17/18…Philippe Rondepierre_09-16
mise à jour
Tendances Web Design 2017 - 2018© Tous droits réservés
”Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
“ La mode s’évapore, la tendance s’érode... Seul le style reste.
Contacter
Philippe Rondepierre
Étude précédente
Tendances Web Design 2015
Article tendances 2016 sur alsacreations.com
/10 tendancesweb design 2017/18…
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- Te
nd
ance
s W
eb D
esig
n 2
01
6/2
01
7/2
01
8
1/GAFAM design 2/360° 3/UX first 4/s-data 5/print 3.0 6/explore! 7/artiste 8/play again 9/tribu 10/IoTet après ? • in • out • couleurs • contact
1/GAFAMGAFAM design Google, Apple, Facebook, Amazon, Microsoftand followers…
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
1/GAFAM designC
on
cep
tio
n e
t in
fogr
aph
ie :
ph
ilip
per
on
dep
ierr
e.co
m
* GAFAM : Google (Alphabet), Apple, Facebook, Amazon, Microsoft - Followers : satellites des GAFA (souvent dans la Silicon Valley) - ** lesechos.fr
GAFAM & followers* : le web leur appartient, le web design aussi
5
Les GAFA pèsent plus de 1600 milliards de dollars en
bourse !** À qui le tour ?
clic !
Captation des tendances
AndroidData designFlat design
GamificationiOS
InstagramMaterial design
Modern UI (Metro)Parallaxe
Réseaux sociauxSkeuomorphisme (≤ iOS 6)
Typographie suisseWatchOS
…
Tendances initiales
BauhausBlogging
Data-visualisationGaming
Graphic designMinimal designNéoplasticisme
ParallaxePolaroid
Pop CultureSkeuomorphisme
Style graphique international(style suisse)
…
1/GAFAM designLes GAFA* + Microsoft ont capté les tendances, pour mieux nous les imposer. Le monde suit…
Co
nce
pti
on
et
info
grap
hie
: p
hili
pp
ero
nd
epie
rre.
com
* LeMonde.fr : Les « GAFAnomics », qu’est-ce que c’est ? - ** L’arrivée de l’iPhone (iOS) et de Windows Phone (Metro) ont accentué les faits
1900
PéRIODeS
2007 / 2010** 2016
6
1/GAFAM design
ANDROID WeAR
TéLéPhONe TABLeTTe ANDROID TV ANDROID AUTO
Android est présent sur plus d’un milliard d’appareils dans le monde : téléphones, tablettes, montres, téléviseurs, voitures… Et ce n’est pas fini !* Il fait la part belle à Google Now son assistant vocal.
Android 6.0 Marshmallow : la puissance pour les écrans de toutes tailles, sauf les PC / android.com
* android.com : Android 6 Marshmallow - Material Design for Android
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Go
ogl
e
7
Android utilise Material design depuis la version 5.0
1/GAFAM designC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: A
pp
le
iOS marque de son empreinte toutes les interfaces Apple : macOS, tvOS, watchOS, CarPlay. Renforcé par Siri désormais sur macOS. Côté wearables, watchOS inspire la concurrence (Tizen… ).
CarpPlay - iOS 10 - macOS - tvOS - watchOS - Apple Branding Story (SlideShare)
Apple : des interfaces toujours plus orientées vers la mobilité / apple.com
8
L’interaction par la voix arrive dans les applications mac
1/GAFAM designC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: M
icro
soft
Windows 10 se décline sur tous types d’appareils et via le cloud. Des objets connectés aux ordinateurs… Il utilise Cortana, son assistant vocal.L’interface flat design initiée en 2010 révèle son potentiel.
Windows 10 : la cohérence fonctionnelle et graphique à 360° / microsoft.com
9
1/GAFAM: socialC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: F
aceb
oo
k
* Source : Le Monde Économie - ** parlonsgeek.com
Facebook, le réseau des réseaux, avec 1,5 milliard d’utilisateurs* / facebook.com
Le News Feed est imité par la concurrence. Facebook en
détient le brevet
UX : la rentabilité avant l’expérience utilisateur ? **
10
1/GAFAM: dynamic gridC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: A
maz
on
Dynamic grid : grille dynamique, les pages vues par l’internaute sont calculées, exécutées en fonction de chaque visite
Un design efficace, imité par la concurrence, dont Alibaba
Des chaussures à la musique, la même grille centrée sur les produits et l’utilisateur / amazon.com
11
1/GAFAM: dynamic gridC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: G
oo
gle
* Pin-style : vignettes façon Pinterest (card design) - ** Masonry : grille sous forme de briques
Grilles dynamiques et responsives optimisées desktop et mobile / Google Design
12
Types de grilles : pin-style*, masonry**, magazine…
1/GAFAM: flat 2.0C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: G
oo
gle
Material Design (Google) : charte de design qui s’applique à l’interface des logiciels et applications web - Material motion : animation de l’interface
Plus frais, Material design lancé en juin 2014 a pris l’ascendant sur ses rivaux / Material design
Design semi flat avec effets papier, ombres, matières…Animations et typo soignées. Plus « concret » que le flat
Après le skeuomorphisme et le flat, Material design, une transition vers un style plus réaliste, animé, 3D en 2018 ?
13
Material motion fait la part belle au formes géométriques
et à la fluidité
1/GAFAM: flat 2.0C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: G
oo
gle,
Mic
roso
ft, A
pp
le
1 : iOS 10 (Music) - 2 : Android 6 (utilise Material design) - 3 : Windows Phone 10
Couleurs franches + gris et blanc, importance des icônes et du data design, grilles structurées
14
Les différents styles s’influencent mutuellement
1/GAFAM: minimalC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: A
pp
le
« Less is more », symbole de modernité. Tout se joue dans la composition / apple.com
15
1/GAFAM: geometricC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: A
bis
ko, G
oo
gle
Geométrique + minimal pour Abisko, app développée avec Material design / design.google.com
16
1/GAFAM: monopageC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: am
azo
n.c
om
Gamme, produit, descriptif, utilisation, avis, recommandations, achat… sur une page / amazon.fr
Monopage + scroll, hérité du tactile
17
1/GAFAM: image + typoC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: G
oo
gle
Images et vidéos en plein écran + mise en scène de la typo / Google Maps
Burger icon et menu caché issus du mobile
18
Slider plein écran, pour une navigation 100% visuelle
Monopage sans scroll, comme pour une application
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Ap
ple
* ergophile.com : le design émotionnel au sein de vos interfaces
Navigation intuitive et transitions fluides
19
1/GAFAM: storytelling
Créer une connexion émotionnelle* en racontant
une histoire
Monopage et storytelling, un duo efficace
Ne vendez pas un produit, donnez le premier rôle à l’internaute / apple.com
1/GAFAM: pictosC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: G
oo
gle
Voir aussi : Font Awesome (polices d’icônes), designscrazed.org (jeux d’icônes gratuites), Typekit (Adobe, polices de caractères en ligne)…
Pictos et polices de caractères en ligne : efficace et rapide / Google, Material design icons
Google gère vos pictos Material design et vos polices
Google Fonts. L’efficacité contre la dépendance ?
20
1/GAFAM: icônesC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: A
pp
le, G
oo
gle,
Mic
roso
ft
1. iOS - 2. Windows 10 - 3. apple.com - 4. OS X - 5. 6. Material design - * Apple et Android (Material design). Skeuomorphisme, voir p. 133
Pictos et icônes flat ou semi flat, outline, avec quelques remixes du skeuomorphisme*
1
4
3
6
21
2
5
Modern UI (Metro design)*Néoplasticisme (Mondrian, Composition II)
Data design1res interfaces graphiques (Xerox Star)
Typographie et grillesStyle suisse (Emil Ruder, Max Miedinger… )
Flat iconsSignalétique urbaine (US NPS)
Flat designGraphic design (Paul Rand, IBM)
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Mo
nd
rian
, US
NP
S, E
mil
Ru
der
, Xer
ox, P
aul R
and
1/GAFAM: inspirations…
– = +
Minimal designLess is More (Bauhaus)
* Modern UI, nouveau nom de l’interface Metro 22
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
An
tony
Yan
g
2/360°post-responsive designsupports, médias,technologies et usages tous azimuts
* Alsacreations.com : « C’est quoi le Responsive Web Design ? » 24
Responsive web design : un modèle obsolète ? / skinnyties.com
Web design liquide, responsive ou adaptatif*
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
skin
nyti
es.c
om
, pap
er-b
ackg
rou
nd
s.co
m
2/360°
* Réalité virtuelle - ** Wearable technology : technologie portable (vêtements, accessoires, bijoux, lunettes, montres connectées… )
explosion des écrans : auto, domotique, PC, hybride, TV, smartphone, tablette, RV*, wearable**…
Co
nce
pti
on
et
illu
stra
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
2/360°
25
10:24
Une multitude d’appareils, de formats et d’interfaces
2/360°
TV CONNeCTée / CONSOLe
Si navigateur
SMARTPhONeTABLeT PC hyBRIDe
Si compatible
AUTOORDINATeUR WeARABLe+ RV***
TABLeTTeWindows 10 sur
tablette ≥ 8”
DOMOTIqUe (APPAReILS)
Autres interfaces** (Android Auto/Wear/TV, Tizen, tvOS, watchOS, webOS, Windows IoT… )
Applications mobiles (Android, iOS, Windows Phone… )*
Applications pour ordinateurs (mac, PC)*
Responsive web design*
* Lire les notes pour voir la compatibilité dans les cas spécifiques. ** Hors ordinateurs et mobiles. *** Réalité virtuelle.
Co
nce
pti
on
et
info
grap
hie
: p
hili
pp
ero
nd
epie
rre.
com
26
Oui Cas spécifiques*
10:24
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
27
2/360°
* Partie visible par les utilisateurs ≠ back-end (côté serveur) - ** API JavaScript expérimentale - Mobizel : « WebApp, application hybride, native… »
Des outils en pleine mutation !
L’évolution des usages (mobilité, wearable, objets connectés, big data, cloud… ) soumettent de nouvelles problématiques aux développeurs qui recherchent la simplicité et l’efficience.
Le web design front-end* est la partie visible de l’iceberg, qui utilise JavaScript pour l’interactivité. Côté serveur, la plateforme Node.js permet, grâce aux évolutions récentes du langage JavaScript, de générer des pages web avec plus de souplesse que PHP (montée en charge… ). Aussi, NoSQL traite des bases de données plus efficacement que MySQL. Côté client*, des frameworks JavaScript comme AngularJS optimisent les développements. WebGL supporte la 3D dynamique sur navigateur et WebVR** la réalité virtuelle. Flexbox simplifie les grilles CSS…
Sur mobiles, les technologies HTML5 suffisent à créer des sites responsive, des sites mobiles (URL mobile) et des webapps simples (HTML5 encapsulé). Les apps sur les stores utilisent des langages dédiés à un OS : Objective-C pour iOS, Java sur Android, C# sur Windows Phone… On parle d’applications natives. Avec des outils multi-OS comme PhoneGap (utilise Node.js), on parle d’applications hybrides. Les objets connectés utilisent des applications natives plus complexes développées en Java pour Android ou Objective-C pour iOS… Aussi, Apple propose Swift pour ses plateformes, conçu pour être plus simple et plus rapide.
On assiste ainsi à une mutation nécessaire des outils de développement face à la transformation profonde du web, celui des de la mobilité et des objets.
et la programmation ? L’éclairage d’hernan Menajovsky, Chef de Projet Web
Hernan MenajovskyIT Digital Project Manager, grands comptes
Après une croissance dopée par les appareils mobiles, la high-tech doit se renouveler
2/360°
TV CONNeCTée SMARTPhONeTABLeT PC hyBRIDe
AUTOORDINATeUR WeARABLe+ RV
TABLeTTe DOMOTIqUe (APPAReILS)
clubic.com : « Les ventes de PC au plus bas depuis 2008 »
Co
nce
pti
on
et
info
grap
hie
: p
hili
pp
ero
nd
epie
rre.
com
Les produits connectés, nouveaux relais de croissance ?
Les ordinateurs voient leur lente érosion se confirmer, concurrencés par les tablettes dont la croissance s’essouffle déjà. Tout comme les smartphones qui frôlent la saturation. Les tablet PC se réveillent enfin, alors que les appareils connectés commencent à trouver un large public. Pas encore de quoi concurrencer les smartphones dont ils sont souvent dépendants.
L’ordinateur de demain ?
28
10:24
* Communication sur le lieu de vente
Le web design s’inscrit dans une approche globale
Concept, design, communication, branding : de la cohérence dépend la crédibilité de la marque. La charte graphique se décline sur tous les supports : enseigne, print, numérique, in-store*, TV…
Une approche communicationnelle à 360°
2/360°C
on
cep
tio
n e
t ill
ust
rati
on
: p
hili
pp
ero
nd
epie
rre.
com
29
10:24
Responsive web design et applications : quelques outils
AngularJS Framework* JavaScript libre et open-source développé par Google. Monte face à jQuery.
Bootstrap Framework HTML, CSS, JavaScript. Sites responsive et applications web.
Flexbox CSS3 Flexbox, plongez dans les CSS modernes.
Foundation Framework pour sites responsive, applications, e-mails…
JQuery Mobile Framework pour sites responsives et WebApp. Compatible avec PhoneGap.
Knacss Micro framework CSS simple et léger.
Node.js Plateforme de développement Javascript.
PhoneGap Framework destiné à la création d’applications mobiles hybrides (web encapsulé).
2/360°C
on
cep
tio
n e
t ill
ust
rati
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
An
tony
Yan
g
* Framework proposant des composants pour simplifier le développement d’interfaces d’applications - ** CMS : système de gestion de contenu 30
3/UX firstexpérience utilisateurl’efficience d’abord
Co
nce
pti
on
et
illu
stra
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
ANALYTIQUE
EXTÉRIEUR
PARTENAIRES
MESURE
STRATÉGIE INTÉRIEURPRÉSENT UTILI-
SATEUR
COMMUNI-CATION
LIENS
AFFA
IRES
ENSEMBLE
AVEN
IR
ENCADREMENTÉQUIPE
COMPROMIS
3/UX first
1. L’apparence du site et son ergonomie Cohérence, placement des éléments…
2. La capacité à rassurer, la crédibilité Utilité et pertinence du contenu, de la mise en forme
3. Les performances, l’efficacité Performances pour effectuer une tâche…
4. La facilité d’utilisation Par exemple pour passer une commande…
5. L’accessibilité Pour tous et sur tous types de supports
6. Le référencement Sur les différents moteurs de recherche
L’expérience utilisateur en 6 points
Co
nce
pti
on
et
illu
stra
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
Stephen Demange, Aquinum : « C’est quoi l’UX ? » (SlideShare)
UX
32
3/UX firstC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
journaldunet.com : « UX designer, ergonome, architecte de l’information, designer d’interaction ... Quelle différence ? »
Communiquer ses valeursdirectement du concepteur
à l’utilisateur
Valeurs du site et de l’utilisateurAuthenticité, créativité, culture, équité, empathie, éthique, légitimité, liberté, originalité, partage, philosophie, respect, plaisir, transparence…
UX : expérience utilisateurUser eXperience : utilité, efficacité, facilité, ergonomie, accessibilité, crédibilité, architecture, référencement…
UI : interface utilisateurUser Interface : concept graphique, esthétique, design, typographie, style, message, branding…
Tout d’abord, s’engager pour donner du sens
Le design n’est pas que fonctionnel et cosmétique, il se fonde sur de vraies valeurs
33
tendances web design
3/UX first: conceptC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
Wireframe : maquette fonctionnelle
Le design est conçu sans logiciel graphique. Puis vient le wireframe
Les outilsPapier, crayons, ciseaux…
Wireframe• Liste d’outils• 10 outils gratuits
ID
34
3/UX first: atomicC
on
cep
tio
n e
t in
fogr
aph
ie :
ph
ilip
per
on
dep
ierr
e.co
m
Oubliez les pages ! Construisez à partir d’atomes et de molécules, façon apps / bradfrost.com
35
TITRE
TITRE TITRE
TITRE TITRE TITRE
accueil À PROPOS actu BLOG CONTACT
ABSTRAIT CONCReT
Atomes Molécule Organisme Template (wireframe) Template
L’atomic design est une méthode qui consiste à penser le design d’interface par composants, et non plus par pages. Plus souple et modulaire pour concevoir des sites et applications modernes.
3/UX first: atomicC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: 2
0 m
inu
tes
Créez le journal qui vous correspond, via les grilles et les éléments modulables / app 20minutes.fr
36
3/UX first: menuC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m :
Ph
oto
: Li
bér
atio
n
* Navigation principale fixée en haut de l’écran
Menu caché, coulissant, en perspective… du sticky menu* au tableau de bord / liberation.fr
Le choix du type de menu doit rester cohérent
37
3/UX first: wordingC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
* Concepteur rédacteur web - CCM : « Référencement naturel (SEO) - Guide pratique complet »
Des mots choisis, qui ont du sens pour les utilisateurs… et le référencement
38
Texte pensé pour le web
Titres et chapôs efficacesTexte clair et original, avec une tonalité, qui
apporte une valeur ajoutée, qui a du sens.
Éviter le blabla, les textes à rallonges et les
copiés/collés qui seront décelés par les
lecteurs… et par les moteurs de recherche.
Composer et aérer les paragraphes.
Éviter les blocs justifiés difficiles à lire.
Référencement naturelInutile de tricher. Penser à la pertinence du
contenu rédactionnel, des mots bien choisis,
une mise en page bien structurée (HTML… ),
pour optimiser le référencement naturel.
Cette tâche revient au Digital Copywriter*.
Remplissage
Le Lorem Ipsum est simplement du faux texte
employé dans la composition et la mise en
page avant impression. Le Lorem Ipsum est
le faux texte standard de l’imprimerie depuis
les années 1500, quand un peintre anonyme
assembla ensemble des morceaux de texte
pour réaliser un livre spécimen de polices de
texte. Il n’a pas fait que survivre cinq siècles,
mais s’est aussi adapté à la bureautique
informatique, sans que son contenu n’en soit
modifié. Il a été popularisé dans les années
1960 grâce à la vente de feuilles Letraset
contenant des passages du Lorem Ipsum, et,
plus récemment, par son inclusion dans des
applications de mise en page de texte, comme
Aldus PageMaker.
3/UX first: app first!App first! Une expérience unique entre la marque et l’utilisateur / pagesjaunes.fr
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to a
pp
licat
ion
s : P
ages
Jau
nes
Application native ou WebApp selon la pertinence**
* (Fav)icône de lancement toujours accessible sur le mobile - ** mobizel.com : « WebApp, application hybride, native… quelle est la différence ? »
watchOS
39
Icône*, fonctions natives, offline, géolocalisation, push,
notifications… App first !
3/UX first: 360°
Toutes les applications et supports sur arte.tv - * Extrapolation. Arte, bientôt une application wearable ?
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
tos
web
et
app
licat
ion
s : A
rte
Site web, apps, TV connectée, box internet, console… La cohérence sur tous les écrans / arte.tv
*
40
ph
ilip
per
on
dep
ierr
e.co
m
* Motion UI / motion design : univers graphique en mouvement, par addition à la typo, images, vidéos, 3D, sons… - Voir aussi : micro UX
CuratorElevatePeriscope Storehouse UP Coffee
3/UX first: motion UISur mobile, le motion UI* renforce l’affordance, la fluidité et l’impact émotionnel
41
VOIR QUELQUES ANIMATIONS Morphing
Accessibilité pour tous. ex. : daltonisme, l’attention portée aux couleurs et aux contrastes
Co
nce
pti
on
et
info
grap
hie
: p
hili
pp
ero
nd
epie
rre.
com
3/UX first: accessible
ProtanopieHommes : 2% - Femmes : 0.01%
TritanopieHommes et femmes : 0.01%
DeutéranopieHommes : 7% - Femmes : 0.04%
(Daltonisme)
Vision normale
Testez vos couleurs
PRINCIPES ET NORMES : ACCESSIBILITÉ WEB
PATTERN UI : COULEURS ET DALTONISME
42
3/UX first: footerC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m :
Ph
oto
: p
op
char
tlab
.co
m, l
eco
qsp
ort
if.co
m, w
etra
nsf
er.c
om
Le footer est le socle de la page web. Soignez-le.
codemyviews.com : 15 points pour créer un bon footer
Attention, le footer n’est pas un fourre-tout !
43
Une interface plus simple ? Oubliez header et footer…
Des pieds de page clairs et fonctionnels / popchartlab.com, lecoqsportif.com, wetransfer.com
S’eNTRAÎNeR
BOUGeR
Se LeVeR
4/s-datasmart data design I’m half crazy, all for the love of you…*
* « Je suis à moitié fou, d’amour pour toi. » Hal 9000 dans 2001 : l’odyssée de l’espace.
Co
nce
pti
on
et
illu
stra
tio
n (d
’ap
rès
Ap
ple
et
Stan
ley
Ku
bri
ck) :
ph
ilip
per
on
dep
ierr
e.co
m
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Futu
re M
ag, A
rte
* Datamining : extraction de connaissances à partir de données (algorithmes, statistiques, intelligence artificielle, informatique… )
Les données du big data sont parfois inexploitables… Avec les smart data, on filtre les données de façon ciblée (recherches internet, jeux, géolocalisation, applications mobiles, capteurs, réseaux sociaux… ). Aussi, on peut modéliser et anticiper avec le datamining*. Les smart data impliquent un design personnalisé, dynamique et intuitif pour l’utilisateur.
La data-visualisation permet d’exprimer la pertinence de l’analyse des smart data, dans le but d’informer et d’aider à la décision.
Le smart data design s’inscrit dans l’information et l’action
4/s-dataDu big data au smart data, via le design
LES ENJEUX DU bIG DATAFUTUREMAG - ARTE
45
4/s-dataC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: gy
mw
atch
.co
m
Votre coach mobile virtuel vous conseille via le data design… et en vous parlant / gymwatch.com
46
L’interaction via la synthèse vocale toujours plus présente
4/s-dataC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
ap
plic
atio
n :
Ap
ple
Visualisez, gérez et partagez vos données personnelles / apple.com/ios/health
La sécurité des données au cœur des préoccupations
47
UX : les mobiles et wearables tirent profit du data design
4/s-dataC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: lib
erat
ion
.fr
Une profession d’avenir, le datajournaliste
Data design : prenez en main les données afin de mener vos propres expériences / liberation.fr
Data design high-tech, dynamique et responsive
48
David McCandless : « Information is beautifull » - Atelier Iceberg : « Visualisation d’informations » (SlideShare)
4/s-dataC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: A
pp
le, D
avid
McC
and
less
, Sam
sun
g
Edward Tufte a été décrit par le New York Times comme le « Léonard de Vinci des données » (Wikipédia)
49
WATCH Design de David McCandless, d’après Edward Tufte
Samsung Gear S2
Formaliser la data-visualisation la plus efficiente : les schémas types / David McCandless
4/s-dataC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
1, 5. David McCandless - 2, 6. Peter Ørntoft - 3. Thomson Reuters Foundation - 4. Jake barton, NYSCI
Infographies : design géométrique, dynamique, data motion (animations, typo, pictos, photos… )
50
4/s-dataC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: G
iorg
ia L
up
i et
Stef
anie
Po
save
c
51
Giorgia et Stefanie, ou le data design sur cartes postales !
Le data design, source d’inspiration et de créativité / dear-data.com
4/s-dataC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Info
grap
hie
: Ji
ng
Zh
ang
Style semi figuratif, typo ou graphique pour les infographies classiques / mazakii.com
52
Cartes et plans, tout est possible ! Ex. : mapbox.com
5/print 3.0de Gutenberg à Googlemaquette, typo, style… le print réinventé
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Will
iam
Cas
lon
, Will
i Hei
del
bac
h, L
aCie
5/print 3.0C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: w
eare
jan
uar
y.co
m
54
Face au règne de l’image, la typo graphique a la cote ! / wearejanuary.com
5/print 3.0C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: si
mp
lygu
m.c
om
Un site, une seule police de caractère / simplygum.com
Les polices rondes, sans serif, géométriques, sont à la mode
Référence au papier imprimé, pour donner vie aux pixels
55
5/print 3.0C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: lin
ked
in.c
om
/pu
lse,
Ph
ilip
pe
Ro
nd
epie
rre
Retour de l’écrit et de la typographie traditionnelle inspirés par le print / linkedin.com/pulse
La sobriété et l’élégance pour crédibiliser le discours
56
Le web design est avant tout un travail de typographie !
5/print 3.0C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: ny
tim
es.c
om
Page non responsive. Sur smartphone, on est redirigé
vers l’interface mobile
Grille journal, faisant clairement référence à la version papier / nytimes.com
57
App first : le NYT met en avant son application plutôt
que le site pour mobiles
No colors : la neutralité et l’élégance du noir et blanc
5/print 3.0C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: lib
erat
ion
.fr
* Un air de famille avec le site d’info « pure player » buzzfeed.com ? - « Appliquer le succès de Buzzfeed à son blog » - Pure player = 100 % web
Grille moderne responsive, orientée web et mobilité / liberation.fr
Visuels, Burger icon, menu caché, sticky bar, swipe list*…
Black is beautiful! Des titres plus impactants en très gras
58
ph
ilip
per
on
dep
ierr
e.co
m -
© L
e M
on
de
5/print 3.0Alternative à la liseuse, la tablette est privilégiée par la presse et les médias / lemonde.fr
59
Navigation et ergonomie optimales sur tablettes
App first : Le Monde incite fortement à télécharger l’app
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: Le
Mo
nd
e
* Lunettes VR de réalité virtuelle
5/print 3.0Sur écran ou avec des lunettes VR, vivez l’actu à 360° grâce à la réalité virtuelle / lemonde.fr
60
Immersion totale, en direct ou en différé. Réalité
virtuelle, voire augmentée…
Ajout de la data visualisation et interactions dynamiques
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: So
oo
n b
y Fo
tolia
jonathan-menet.fr : « SOOON : un guide sur le design du futur présenté entre papier et web »
5/print 3.0Parlez et interagissez entre papier et web / Sooon by Fotolia
61
Le retour du papier, aboutissement de l’écran ?
Le web cherche à s’ancrer dans le réel, en interagissant avec les supports physiques
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
5/print 3.0
7. FF DIN TeNDaNces web DesIgN La mode s’évapore, la tendance s’érode... Seul le style reste.
1. PROXIMA NOVA tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste.
6. Montserrat Tendances web design
La mode s’évapore, la tendance s’érode... Seul le style reste.
4. Droid Serif Tendances Web Design La mode s’évapore, la tendance s’érode... Seul le style reste.
8. OPENsans Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste.
3. AVENIR Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste.
5. Helvetica Neue Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste.
9. LaTo Tendances Web Design La mode s’évapore, la tendance s’érode... Seul le style reste.
quelques « classiques ». De forts contrastes dans les tailles et les graisses
62
...
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
linet
o.c
om
5/print 3.0Titres ou paragraphes, choisissez des polices signées par des typographes créatifs / lineto.com
63
Avantage des polices sans serifs, rondes, géométriques…
Les serifs permettent de s’affirmer (titres… )
5/print 3.0C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: A
lex
Pal
azzi
graphicstyle.fr : « Le Hand Lettering : retour aux sources »
La typographie à la main, c’est plus humain : stylet, papier, 3D, sculpture… / Alex Palazzi
64
La typo ne met plus l’image en scène. Elle devient l’image
Style pop, arty et régressif. Just enjoy!
5/print 3.0C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
s : v
oir
lien
Polices sélectionnées à titre d’exemple graphique. Vérifiez la compatibilité de votre police de caractère
Vectorielles ou images, quelques polices de caractères qui en ont / awwwards.com
65
Co
nce
pti
on
et
illu
stra
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
esp
ace
: pu
blic
6/explore!immersion totalepréparez-vous à vivre de nouvelles expériences
6/explore!C
on
cep
tio
n e
t in
fogr
aph
ie :
ph
ilip
per
on
dep
ierr
e.co
m
* ergophile.com : le design émotionnel
Convergence des éléments communicationnels et d’interface. L’immersion pour l’émotion !
67
UX & UI créatifs et disruptifs
Design sonore,3D dynamique,
Micro interactions, Réalité virtuelle,
Motion UI…
Storytelling, Branding…
Design émotionnel*
Monopage,Responsive,Image 100 %
(photo, vidéo… ), Parallaxe…
JavaScript
!!!
6/explore!C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: si
rin
lab
s.co
m
Design technologique, animations 3D futuristes, micro interactions / sirinlabs.com
68
Monopage sans scroll. L’écran comme au cinéma
WebGL* : la 3D dynamique
* Utilise WebGL, site officiel : khronos.org/webgl - WebGL est supporté par les navigateurs modernes
6/explore!C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: si
len
za.it
Choisissez votre scénario et jouez avec les acteurs du film / silenza.it
69
Site tout en vidéo + interactivité
So chic! Le noir et blanc varie peu selon vos écrans
6/explore!C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: P
ors
che
70
Animations 3D au scroll et site monopage
Immersion, interactions, 3D, animations… : prenez le contrôle ! / porsche.com, Mission E.
Le menu caché transformé en tableau de bord
Utilise WebGL, site officiel : khronos.org/webgl - WebGL sur Wikipédia
6/explore!C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: ac
tiva
tio
n-n
od
eplu
s.co
m
Animations 3D dynamiques, son… pour un effet « wouah » garanti / activation-nodeplus.com
71
En complément, le scroll fait apparaître une grille sobre
6/explore!C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: 9
9h
om
esm
ovie
.co
m
Images, scénario, transitions, ambiance… Plongez à fond dans l’histoire / 99homesmovie.com
Micro-animations et menu caché 99 % visuel
72
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
resn
.co
.nz
expérience utilisateur déroutante, ludique, artistique… unique ! / resn.co.nz
6/explore!
73
Bougez le diamant pour faire apparaître ses milles facettes
De l’œuf ou de la poule…creativeedgeparties.com
Jouez, au cœur de l’action !fiveminutes.gs
expérience sonore et sensoriellejviewz.com
Architecture à 360°dock.cz
Morphing tout en code !species-in-pieces.com
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
voir
lien
s
effets typographiquesffmark.com
74
6/explore!
7/artisteretour vers l’inspiration pop, kitsch, glitch, typo, urbain, electro, toons, techno, clip, rock,, fluo, sexy, chic, ecolo, hype, vintage, nerd, arty…
Co
nce
pti
on
et
illu
stra
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
7/artisteC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: p
utp
ut.
dk
Rétro pop minimal, un style décalé, esthétisant et sucré / putput.dk
90’sinspiration
76
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
love
fila
.co
m
Appuyez sur la barre pour plus de fun et d’effet wouah !
7/artiste 80’sinspiration
77
Flat 2.0, interactions psychédéliques, couleurs vibrantes et micro animations / lovefila.com
7/artiste 80’sinspiration
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
locu
s-so
lus.
wea
rete
stin
g.it
Couleurs vibrantes, design élégant, interface high-tech / locus-solus.wearetesting.it
78
Le scroll laisse la place à des transitions surprenantes
7/artisteC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: ko
tele
tt.in
fo
happening vidéo « subliminal » et hypnotique / kotelett.info
90’sinspiration
Vidéo entrecoupée par une autre sous forme de flashs
79
7/artisteC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: ga
rbet
t.co
m.a
u
Géométrique, coloré, impactant, graphique / garbett.com.au
Les transitions soignées sont au centre du design
70’sinspiration
80
7/artisteC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: an
imad
e.tv
/fra
nke
nsi
m
Interface vintage revisitée, ludique et créative / animade.tv/frankensim
80’sinspiration
81
Look arty et scroll en biaismocastepandrepeat.tumblr.com
So kitsch!weareroyale.com
“ Video killed the radio star ”y78.fr
Let’s go obsedo!obsedo.com
Juste un peu de CSS…designjobsboard.com
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
voir
lien
s
7/artiste
No text, pictos onlyttmm.eu
80’s 80’s 70’s
80’s 70’s 80’s
82
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
7/artistes inspirés
>>> Galeries et sites pour inspirer vos créations <<<
PinterestRéseau social de collections d’images
AwwwardsClassement des meilleurs design web
DribbbleGaleries de designers créatifs
Behance (Adobe)Portfolios de designers créatifs
the FWAClassement des meilleurs design web
Site InspireGalerie design web et interactif
83
8/play again!gamificationle jeu se prend toujours plus au sérieux
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
: P
ho
to :
Nin
ten
do
Serious game* : utiliser le jeu pour communiquer une information sérieuse / J’aime les patates
8/play againC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: V
ali F
ugu
lin, M
ino
rity
, Ru
ben
Far
rus
Sensibiliser au développement durable avec l’application « J’aime les patates »
De rares sites en Flash résistent encore. Remplacés par le HTML et les applications mobiles, bien plus efficaces et multiplateformes.
Jeu sérieux ayant une intention de type pédagogique, informative, communicationnelle, marketing, idéologique ou d’entraînement.
*
85
Sérieux sans se prendre au sérieux sur le site vitrine et les apps / Le Cancer du Temps
8/play again: app first!C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: D
. Tu
rmel
, Ko
-op
Mo
de,
J.-F
. Nad
eau
, S. b
ou
cher
Apprendre à ne pas se laisser dominer par le temps, avec l’application « Le Cancer du Temps » 86
Sortez du « flat plat » avec des graphismes forts et stylés
Jeu véritable ou simple emprunt des codes graphiques ludiques / dairygivesyougo.co.za
8/play again: dataC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: d
airy
give
syo
ugo
.co
.za
Les icônes et le data design sont plébiscités dans les jeux
Illustration flat mais pas trop, un style très « Material »
87
Les GAFAM s’inspirent des designers et studios qui
devancent les tendances
8/play again: egoC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: M
c M
illan
* ergophile. com : « Le design émotionnel au sein de vos interfaces »
Créer un personnage à son image optimise la connexion émotionnelle* / androidify.com
88
Ingress (Niantic*), jeu mobile en réalité augmentée. Toujours plus immersif / ingress.com
8/play again: real lifeC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: G
oo
gle,
Nia
nti
c, T
he
Po
kém
on
Co
mp
any
*Niantic, “ex”-propriété de Google - ** Le Figaro : « Pokémon GO : Nintendo calme le jeu… » - Ingress (Wikipédia) - Pokémon GO (Wikipédia)
Pokémon GO a été développé sur les bases d’Ingress**
Collecte de données, push, localisation GPS… pub !
89
* WebVR, affichage VR sur navigateur - ** WebGL, site officiel : khronos.org/webgl - WebGL est supporté par les navigateurs modernes
Animations et interactions en 3D dynamique / Spacelamb
8/play again: 3DC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: sp
acel
amb
.12
wav
e.co
m
WebGL** permet la 3D dynamique sur les pages et
applications HTML5
90
Spacelamb utilise WebVR* pour s’afficher en réalité
virtuelle dans le navigateur
Le retrogaming a encore quelques adeptes / arcade.mcmillan.com
8/play again: retroC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: M
c M
illan
Agence McMillan : jeu vidéo façon 8-bit pour former les nouveaux stagiaires - * Voir le site eboy.com, artistes pixel art
Le pixel art* est à la source du web design. Un classique ?
91
80’sinspiration
Serious game et gamification : choisissez votre playground !
Newsgame Jeu qui véhicule un message informatif.
Advergame Jeu communiquant un message publicitaire, marketing, social, politique, religieux…
Edugame / Edutainment Jeu ayant des fins éducatives, préventives ou utilisé en entreprise.
Socialgame Jeux sociaux liés aux réseaux (Facebook, Google+, intranet… ).
Exergame Jeu d’entraînement et de simulation physique ou intellectuelle.
Edumarket game Jeu qui passe un message marketing, sous une forme éducative, informative ou d’entraînement.
Jeux engagés Jeux détournés dans le but de passer un message (politique, humanitaire… ).
8/play againC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: N
inte
nd
o
jeux-serieux.fr 92
Co
nce
pti
on
et
illu
stra
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
@
#
;)
9/tributribu vs social la tribu face aux réseaux sociaux mainstream
9/tribuLes « réseaux de niche » moins exposés et consensuels, complémentaires de Facebook et Twitter
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- Il
lust
rati
on
: F
aceb
oo
k
Sources : Libération - Rue89 - Wikipédia - Siècle Digital
Enquête sur l’algo le plus flippant de Facebook
Facebook face à la désertifi-cation de son news feed
94
500 millions par jour : Whatsapp brasserait plus de photos que Facebook, Snapchat et Instagram !
Les vidéos Facebook plus performantes que YouTube
Les réseaux « institutionnels »
ont perdu de leur sex-appeal !
9/tribuexplorez le monde à travers les yeux des autres sur votre smartphone… et vice versa / Periscope
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
per
isco
pe.
tv
* Le Parisien : « Suicide sur Periscope : Océane, la mort en direct » 95
Periscope / Facebook, la guerre du direct !
Adopté par les jeunes, Periscope se veut un espace
de liberté. Vraiment ?*
9/tribuC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: te
legr
am.o
rg
* Wikipédia : le chat secret Telegram atteindrait le niveau de « confidentialité persistante » - ** Le Figaro : « Telegram, une application sulfureuse… »
Pour vivre heureux, vivons cachés ?
Vif succès auprès des élites, des politiques, mais aussi des malfrats de tous genres…**
96
Rival de WhatsApp et de Messenger, Telegram surprotège vos messages* / Telegram
9/tribuC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: tr
ibe.
pm
* iphon.fr : « App de messagerie Tribe : les créateurs Français, désormais à San Francisco » 97
Snapchat boloss ? Tribe : Vine, Snapchat ou Periscope à la sauce Skype…* / Tribe
Les jeunes zappent les apps : Vine, Layout, Bolt, Tricy…
1,8 Md de photos par jour.* En tête : Snapchat, Whatsapp, Facebook , Instagram
9/tribuCanary, Gossip, Impulses, Whisper, yik yak… exprimez-vous anonymement* / Yik Yak
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
yiky
akap
p.c
om
* influencia.net : « Que valent les apps anonymes ? » - ** lefigaro.fr : Yik Yak - *** lemonde.fr : « Le bluff des apps anonymes et éphémères »
Les applications « anonymes », une impression de liberté où
tout devient possible ? ***
Yik Yak : rencontrez vos semblables autour de vous **
98
9/tribuLe monde « parfait » selon Instagram. espace d’expression ou de standardisation ? / Nick & Justin
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
inst
agra
m.c
om
/ju
stin
ick_
pgh
* Source : lefigaro.fr - Instagram, acquisition de Facebook depuis avril 2012
Mettre en scène sa vie pour passer un message social
Instagram dépasse les 400 millions d’utilisateurs *
99
9/tribuConcurrencés par les réseaux sociaux, les blogs doivent monter en gamme / Medium
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
med
ium
.co
m
* Système de gestion de contenu ou de publication - ** Apprendre à utiliser Medium - Flipboard, agrégateur de réseaux sociaux
Minimal design pour Medium, le CMS* haut de gamme**
Pas de limite de caractères, le retour du texte !
Les tags sont très populaires sur les sites et réseaux
100
9/tribuLinkedIn, Scoop.it, SlideShare, Viadeo, Xing… Réseaux pros, tous experts ! / Jacques Lebègue, scoop.it
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
sco
op
.it, J
acq
ues
Leb
ègu
e
* Curation de contenu : sélectionner, éditer et partager des contenus pertinents pour un sujet donné - MOOC : formation en ligne ouverte à tous
Le savoir de leurs utilisateurs, mine d’or des réseaux pros
Présentations, curation, mooc, le fond et la forme*
101
10/IoTinternet of things*hyper connectés et «omnipotents»…pour longtemps
* and everything
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Fla
sh-M
atic
Tu
nin
g
Réalité augmentée : devenez pilote grâce à votre tablette… / parrot.com
10/IoTC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: P
arro
t
Bebop Drone Skycontroller de Parrot - * FPV : pilotage en immersion (First Person View)
Tablette et lunettes FPV* pour une immersion totale
La réalité augmentée partout : jeux, simulation 2D et 3D, sport, transport, shopping, immobilier, marketing…
103
… ou prenez soin de vos plantes / parrot.com
10/IoTC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: P
arro
t
Capteur Flower Power de Parrot 104
* WYSIWYG = What you see is what you get (Ce que vous voyez est ce que vous obtenez) - transdigital.fr : « La fabrication additive en images »
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Glo
wfo
rge
Plastique, métal, carton, bois, chocolat… l’impression 3D pour tous ! / glowforge.com
105
La démocratisation et la simplification de l’impression 3D passera par le cloud et les interfaces WYSIWYG*
10/IoT
La domotique pour tout, partout / confort-sauter.com
10/IoTC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: Sa
ute
r
Malao, radiateur connecté de Sauter 106
* Prénom d’Amazon Echo, appareil utilisant **l’intelligence artificielle, qui interagit par la voix avec l’utilisateur pour diriger les objets connectés
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Am
azo
n
Dialoguez avec Alexa*, ou la domotique assitée par la voix et l’IA** / Amazon Echo
107
Amazon mettra à disposition Alexa Voice Service pour les développeurs tiers
10/IoT
Les montres connectées déjà « old school » ? Ceci est un mobile 4G / LG G Watch Urbane 4G*
10/IoT
Téléphone et emails sans smartphone. 4G, GPS, Bluetooth, NFC… servent l’OS propriétaire LG Wearable Platform.La montre de demain ?Pas encore gagné face à l’Apple Watch, pourtant dépendante de l’iPhone.
* i-montres.net : « LG G Watch Urbane 4G/LTE, une montre qui peut se passer de smartphone »
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
LG, A
pp
le
Le skeuomorphisme donne une note d’authenticité
108
10/IoTC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: A
pp
le
Programmes, jeux, web, applications, voix… la TV connectée toujours plus autonome / apple.com
La télécommande, gadget bientôt dispensable ?
La TV connectée bientôt au cœur de la domotique ?
109
Pepper pourra lire vos émotions. Avant de vous imposer les siennes ? / aldebaran.com
10/IoT
aldebaran.com - bluefrogrobotics.com - trust.com - clubic.com, Live Japon: Pepper, menteur ?
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Ald
ebar
an, B
lue
Fro
g R
ob
oti
cs
Reconnaissance, synthèse vocale, détection et suivi d’humains, d’objets… Buddy vous assiste au quotidien…
110
Buddy, Trusty, Pepper, Nao, Romeo… bientôt chez vous ?
Autopilot : écran affiché sous les yeux du conducteur en mode pilotage automatique sur les Tesla
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Tesl
a
111
Tesla a présenté Autopilot pour la conduite assistée
Skeuomorphisme + flat servent l’ergonomie, ici vitale
Voiture connectée, laissez l’écran prendre le contrôle / teslamotors.com
10/IoT
10/IoT
Applications Oculus avec démos : share.oculus.com - 20 minutes : « Facebook rachète Oculus » - Les Numériques : casques RV
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
ocu
lus.
com
Oculus Rift, vos sens à 360°. Une révolution ?
Les consoles chahutées par les mobiles, bientôt dépassées par la réalité virtuelle ? / oculus.com
112
Facebook a embauché en 2014 un des fondateurs de Second Life. Play again ?
10/IoT
* API expérimentale (Mozilla, Google… ). Affiche la RV dans le navigateur, compatible avec lunettes VR. Soutenue par les navigateurs dès 2016
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Mo
zilla
, A-F
ram
e te
am, M
ozV
R t
eam
WebVR* affiche la réalité virtuelle dans votre navigateur web / mozvr.com
113
Modélisation 3D, jeux, science, exploration…
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
/et après ?évolution des tendances2017, 2018, 2019, 2020…
/et après ?
* Agent conversationnel qui dialogue avec l’utilisateur - ** La fusion des OS n’est pas dans l’intérêt d’Apple, qui préfère vendre différents devices
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
Des cycles liés aux avancées technologiques
La fonction première du design est d’améliorer l’expérience que l’on a d’un produit ou d’un service. Le web design n’est pas décoratif, il fait le lien entre les technologies et nous. Les nouveautés seraient plus difficiles d’accès sans l’ergonomie, le style et l’esthétique. Nous sommes animés par l’affect, même face à une machine. Apple ou Google l’ont bien compris, qui placent l’expérience utilisateur au centre de leurs problématiques.
Une nouveauté technologique n’est pas garante de succès. Les industriels doivent produire… Mais, si une nouvelle technologie ne prend pas sens pour le public, elle ne sera pas adoptée. Par exemple, les TV 3D n’ont pas eu le succès escompté. Le succès tient de la conjonction entre les inventeurs, les concepteurs, les designers, le marché et les utilisateurs.
Le cloud et le big data se sont imposés. Avec de nouveaux usages liés à la mobilité, aux objets connectés, à la réalité virtuelle et augmentée, à l’intelligence artificielle, au chatbot*… et qui vont évoluer. On assiste à une convergence des OS chez Microsoft, tandis que Google mise tout sur la mobilité et les appareils connectés. Apple garde quatre OS distincts, tout en multipliant les similitudes. Un rapprochement réel d’OS X et iOS pourrait prendre quelques années**…
115
/et après ?
Démonstration du mode Continuum sur le Lumia 950 avec le Microsoft Display Dock
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Mic
roso
ft
Et si le PC du futur ne faisait qu’un avec le smartphone ? En 2015, Microsoft présente Continuum sur Windows 10, qui donne à votre mobile des airs de PC.Avec quelques limitations… pour le moment.L’OS détecte la présence du clavier et affiche l’interface Modern UI sur le moniteur.
Microsoft Continuum : bientôt la fin du PC ? / microsoft.com
116
/et après ?
CSS sur Wikipédia - Les standards CSS sont publiés par le W3C - W3C : brouillon des dernières nouveautés des sélecteurs de niveau 4
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
Couleurs, interactions, typo, fonctionnalités, accessibilité, post-responsive design… CSS4 donnera encore plus de pouvoir aux designers.
Pas encore supporté par les navigateurs, en développe-ment depuis 2010, il faudra encore quelques années pour en profiter.
Un design encore plus précis, fonctionnel et facile à mettre en place, avec CSS4
117
4
/et après ?C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: LG
LG enroule l’écran Oled comme une feuille de papier / usine-digitale.fr
118
Arrivée des écrans souples et protéiformes : tablettes, journaux, domotique, TV, jouets, tableaux de bords…
/et après ?C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: K
eiic
hi M
atsu
da
Rue, commerces, musées, écoles… L’hyper réalité augmentée partout ou presque ! / km.cx
119
Une vision d’artiste colorée qui montre le potentiel de la réalité augmentée.Pokemon GO, déjà le bon vieux temps ?
/et après ?C
on
cep
tio
n e
t re
tou
che
: ph
ilip
per
on
dep
ierr
e.co
m -
Ph
oto
: Fo
lker
t G
ort
er (s
up
erfa
mo
us.
com
)
120
La conception assistée par ordinateur, intelligente et prédictive
* MIT (Massachusetts Institute of Technology), source : clubic.com
Photoshop, peux-tu effacer le pylône et les câbles ?
Voilà Philippe. Cela vous convient-il ?
Puissance matérielle, cloud, algorithmes, intelligence artificielle… Tout est prêt !
Le MIT* développe un algo-rithme capable de remplacer l’intuition humaine
Exprimez-vous ! L’interface graphique devient vocale
La réalité virtuelle ou augmentée, « holographique » et en temps réel / magicleap.com
/et après ?
journaldunet.com : « Que fait Magic Leap ? » - * Un appareil léger qui suit les yeux de l’utilisateur… Technologie en cours de développement
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
mag
icle
ap.c
om
Le requin holographique qui « dévore » Marty Mc Fly dans le film Retour vers le Futur 2, bientôt réalité ?Google y croit et a investi dans Magic Leap, qui, via un appareil*, explore la réalité « pseudo-holographique ». Avec un champ applicatif impressionnant : éducation, science, médecine, jeux…
121
Visionnez la démo sans
trucage !
Une interface dirigée par la pensée, vraiment ? / mindmaze.ch*
/et après ?
* s2pmag.ch : « Réalité virtuelle, MindMaze ajoute la lecture de pensées »
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Min
dM
aze
Nous sommes au début d’une nouvelle ère. Les appareils dirigés par la pensée sont déjà là. Par exemple chez MindMaze. La réalité augmentée se joint à la réalité virtuelle, avec un champ applicatif qui va du gaming à la santé.Les designers de demain devront se réinventer !
122
/inles tendances au top !
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
* Muzli (medium.com) : « Long shadow is dead. Welcome Diffuse shadows. »
Le semi flat « photoréaliste »Le flat influencé par Material. Effets de reliefs et d’ombres naturelles pour donner de la consistance / manualcreative.com
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
man
ual
crea
tive
.co
m, N
ike
/in
124
Diffuse shadows : les ombres « naturelles » sont de retour*
Applications wearables, TV et objets connectésWearable (vêtements, chaussures, accessoires… ), domotique, transports, objets connectés… / Apple Watch
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Ap
ple
/in
125
* Chatbot : agent conversationnel qui dialogue avec l’utilisateur - influencia.net : « Le chatbot ou l’obsolescence de 80% des sites web »
Chatbots* et assistants personnels vocaux (Siri, Cortana, Google Now… )Interaction vocale, intelligente et prédictive, à votre service, pour tout, partout
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
/in
126
Certains intellectuels nous alertent sur les risques potentiels en matière de sécurité et de liberté indivi-duelle. Les assistants intelligents apprennent à nous connaître… Peut être un peu trop ?
* Moteur de recherche. Voir aussi, Qwant.com… - Pierre-Yves Gosset de Framasoft : « Dégooglisons internet »
Le web éthiqueSécurité, transparence, pas de tracking, respect de la vie privée… La réponse aux GAFAM ? / DuckDuckGo.com*
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
qw
ant.
com
/in
127
Dégooglisation d’internet : Framasoft promeut le logiciel libre, éthique, solidaire, décentralisé… La volonté est de remettre le numérique entre les mains de M. et Mme tout le monde. Bon courage…
Les fonds, images et vidéos en très haute résolutionLes écrans haute résolution se sont généralisés. Idéal pour les interfaces, moins pour les bas débits
Co
nce
pti
on
et
info
grap
hie
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Ap
ple
/in
Taille des appareils en fonction de leur résolution d’écran
2015 Watch
312 x 390 px
2007iPhone
320 x 480 px
2014iPhone 6 plus
1920 x 1080 px
2015MacBook 12“
2304 x 1440 px
2014iMac 5K, 27“ avec écran Retina
5 120 × 2 880 px
1984 Macintosh
512 x 342 px
128
Écrans splittés / nightcallDouble scroll horizontal, vertical, ou en biais
Les panoramas / houseofborelAvec mise en scène de la typographie
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
tos
: vo
ir li
ens
imag
es
/inLes gros plans / bookofbeardsAssumez-vous avec le zoom plein écran !
Les gifographiesInfographies animées en GIF
Les filtres, la bichromieLe style Instagram et les effets polychromes…
L’image en mouvementVidéo, gifs et cinémagraphes*
129* Cinémagraphe : entre photo et vidéo, consiste à créer du mouvement dans un élément isolé de l’image
Le paiement mobile (NFC… )Android Pay, Apple Pay, Samsung Pay…
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
tos
: vo
ir li
ens
imag
es
/inBluetooth Smart
iBeacon, Proximity, Eddystone…
Les algorithmes / bl.ocks.orgDes data à l’interface web, ils sont partout
Le partage / NightSwappingSites et applications entre particuliers
Le cloudAttention à la sécurité des données !
130
SVG
Dessin et animation SVGDessin vectoriel sans perte de qualité
/out démodé, daté,obsolète…
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
Flat design 2.0Ombres nettes, design et coloris Playskool
Les selfies old schoolInvasifs sur les réseaux. Soyez créatifs !
Le foodpornGare à l’indigestion !
Les textosLa France résiste à Whatsapp. Jusqu’à quand ?
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
tos
: vo
ir li
ens
imag
es
/out
132
SMS
La publicité intrusiveAdblock adopté massivement change la donne
La tyrannie du likeLe like tue le partage spontané
Le skeuomorphisme datéInitiée par Microsoft en 2010, l’interface flat a « ringardisé » le photoréalime d’iOS, avant d’évoluer vers Material (Google)
SKEUOMORPHISMEiOS 6
Imiter la réalité
Représentation réaliste d’un élément d’interface graphique par l’objet réel
qui réalisait la fonction.
Exemple :pour l’heure on dessine
une véritable horloge photoréaliste.
FLAT DESIGNWindows Phone
Less is more
Représentation plate et graphique sans effet de profondeur (ombre, 3D, dégradé… ). Plus simple à décliner, plus léger, et conceptuel.
Un style optimisé pour le web et la mobilité.
≠
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Ap
ple
, No
kia
/out
133
Les interfaces chargéesTrop de pages, de boutons, de polices…
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
tos
: vo
ir li
ens
imag
es
Trop de textePenser aux images, pictos ou data design
/outLe web non éthique
Tel est pris qui croyait prendre
Le design low costDesign agressif, kitsch ou cheap
134
FlashPréférer HTML5 + CSS3 + JavaScript
Holo designAntérieur à Material. Utilisé par Android 4.4
La lightboxEt les pop-ins, les pop-ups intrusifs
Les carousels fourre-toutEt les sliders sans fin, lourds et inefficaces
Le design glossyPérimé depuis 3 ans (iOS 6 et antérieur)
Les illustrations impersonnellesBanques d’images désuètes et vides de sens
Les photos clichés/creusesBanques d’images désuètes et vides de sens
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
tos
: vo
ir li
ens
imag
es
Les nuages de motsUltra périmés. Pensez aux tags
/out
135
* Site officiel bientôt en ligne
Le Perverted Crowdsourcing (web non éthique)Travail spéculatif
Plateformes web basées sur un système crapuleux visant à flouer des personnes naïves, par le biais d’appels d’offres de masse ou de faux concours. Les participants ne sont pas payés ou touchent une somme dérisoire en abandonnant leurs droits. Les professionnels du web sont les premiers impactés : designers, développeurs, illustrateurs, photographes, rédacteurs…
Qu’est ce que le Perverted Crowdsourcing ? / rodleg.wordpress.comNon à l’exploitation du #travailgratuit comme modèle de réussite en France / Lettre ouverte
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Top
ic S
imp
le
/out
136
Compétitions, appels d’offres, concours, collaborations…Pour une rémunération digne et équitable, affichez le logo*
/couleursmixez les gammes !
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Pan
ton
e, A
pp
le, G
oo
gle,
Gre
etab
l, Ta
bac
Info
Ser
vice
/couleurs
Couleurs inspirées par la nature*Technologiques mais naturelles.
Vert Greenery, couleur 2017 selon Pantone®.
Pastels acidulés et/ou délavésEfficace avec flat design + blanc et gris
Attention aux palettes trop fades !
138* Tendances printemps 2017 selon Pantone®.
Couleurs vibrantesInspirées par iOS et Material + blanc et/ou gris.
Franches et efficaces sur mobiles.
+ ombres et dégradés
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
gt-c
inet
ype.
com
, th
efad
er.c
om
, Mic
roso
ft
/couleurs
139
Couleurs basiquesInspirées par Windows 8 à 10, très corporate.
Efficace avec un style institutionnel.
Noir, gris, blanc + couleur(s)*Élégance, sobriété et professionnalisme.
Met les visuels en valeur.
139
No colorsPour un effet narratif stylisé, ou une définition
radicale de « Less is more ».
* Ou or.
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
- P
ho
to :
Vin
e, p
oin
tles
sco
rp.c
om
, iSt
ock
/couleurs
140
Rétro, teintes « sépia »Doublement daté.
À mixer avec palettes flat et Material.
Rustique : ocres, kakis…Risqué ! Les couleurs varient selon les écrans.
Votre beau vert kaki peut virer caca d’oie.
Tons vifs vieillis / Flat designApporte de la consistance au flat.
Renouvelé par l’influence de Material design.
Daltonisme : pattern UI, vision des couleurs et daltonisme / blog.octo.com
Data : bienvenue dans l’ère du Smart Data ! / journaldunet.com
Data design : 14 outils de visualisation de données / thenextweb.com
Design émotionnel : exemples / emotional.design
Forum d’entraide développement front-end, code et design / alsacreations.com
Material design, le guide / material-design
Minimal websites / siteinspire.com
Responsive web design : design liquide, responsive ou adaptatif / alsacreations.com
Serious game et gamification / serious-game.fr
Sketch, spécialisé dans le design de sites et applications (mac) / sketchapp.com
Templates : themeforest, des milliers de thèmes et templates / themeforest.net
UX : Guérrilla design en milieu hostile, responsive et mobilité / Stéphanie Walter
/quelques liens…C
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
141
/article: alsacréationsC
on
cep
tio
n :
ph
ilip
per
on
dep
ierr
e.co
m
142
+
/clic !
Apple, BrAnding STOrY Décryptage : branding, communication, marketing, design, influences, historique…
philippe rOndepierre
Co
nce
pti
on
: p
hili
pp
ero
nd
epie
rre.
com
143
+
/merci !Philippe RondepierreDirecteur Artistique 360° : branding, design, print, web, in-store… philipperondepierre.com • LinkedIn • Viadeo • e-mail
© Philippe Rondepierre, 2015 - 2016. Reproduction et utilisation commerciale interdite - Les sites présentés en exemple le sont à titre de citation et d’analyse. Tous droits réservés par les ayants droit - Présentation en public interdite sans autorisation écrite.
© Philippe Rondepierre, 2015 - 2016. Do not reproduce - The images are presented as examples and analysis. All rights reserved by copyright holders.