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.