Tendances Web Design 2017/2018

webdesign
tendance s
2o17/18…
Philippe Rondepierre
_
09-16
mise à jour
Tendances Web Design 2017 - 2018
© Tous droits réservés

Conception:philipperondepierre.com
“La mode s’évapore,
la tendance s’érode...
Seul le style reste.
Contacter
Étude précédente
Tendances Web Design 2015
Article tendances 2016
sur alsacreations.com

/10 tendances
web design 2017/18…
Conception:philipperondepierre.com-TendancesWebDesign2016/2017/2018
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/IoT
et après ? • in • out • couleurs • contact

1/GAFAM
GAFAM design
Google, Apple, Facebook,
Amazon, Microsoft
and followers…

1/GAFAM design
Conceptionetinfographie:philipperondepierre.com
* 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
Android
Data design
Flat design
Gamification
iOS
Instagram
Material design
Modern UI (Metro)
Parallaxe
Réseaux sociaux
Skeuomorphisme (≤ iOS 6)
Typographie suisse
WatchOS
…
Tendances initiales
Bauhaus
Blogging
Data-visualisation
Gaming
Graphic design
Minimal design
Néoplasticisme
Parallaxe
Polaroid
Pop Culture
Skeuomorphisme
Style graphique international
(style suisse)
…
1/GAFAM design
Les GAFA* + Microsoft ont capté les tendances, pour mieux nous les imposer. Le monde suit…
* 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
Conception:philipperondepierre.com-Photo:Google
7
Android utilise Material
design depuis la version 5.0

1/GAFAM design
Conception:philipperondepierre.com-Photo:Apple
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 design
Conception:philipperondepierre.com-Photo:Microsoft
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: social
Conception:philipperondepierre.com-Photo:Facebook
* 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 grid
Conception:philipperondepierre.com-Photo:Amazon
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 grid
* 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.0
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.0
Conception:philipperondepierre.com-Photo:Google,Microsoft,Apple
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: minimal
« Less is more », symbole de modernité. Tout se joue dans la composition / apple.com
15

1/GAFAM: geometric
Conception:philipperondepierre.com-Photo:Abisko,Google
Geométrique + minimal pour Abisko, app développée avec Material design / design.google.com
16

1/GAFAM: monopage
Conception:philipperondepierre.com-Photo:amazon.com
Gamme, produit, descriptif, utilisation, avis, recommandations, achat… sur une page / amazon.fr
Monopage + scroll,
hérité du tactile
17

1/GAFAM: image+typo
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

* 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: pictos
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ônes
Conception:philipperondepierre.com-Photo:Apple,Google,Microsoft
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 design
1res interfaces graphiques (Xerox Star)
Typographie et grilles
Style suisse (Emil Ruder, Max Miedinger… )
Flat icons
Signalétique urbaine (US NPS)
Flat design
Graphic design (Paul Rand, IBM)
Conception:philipperondepierre.com-Photo:Mondrian,USNPS,EmilRuder,Xerox,PaulRand
1/GAFAM: inspirations…
– = +
Minimal design
Less is More (Bauhaus)
* Modern UI, nouveau nom de l’interface Metro 22

Conception:philipperondepierre.com-Photo:AntonyYang
2/360°post-responsive design
supports, 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*
Conception:philipperondepierre.com-Photo:skinnyties.com,paper-backgrounds.com
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**…
Conceptionetillustration:philipperondepierre.com
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***
Tablette
Windows 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.
26
Oui Cas spécifiques*
10:24

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 Menajovsky
IT 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 »
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°
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°
Conceptionetillustration:philipperondepierre.com-Photo:AntonyYang
* Framework proposant des composants pour simplifier le développement d’interfaces d’applications - ** CMS : système de gestion de contenu 30

3/UX first
expérience utilisateur
l’efficience
d’abord
ANALYTIQUE
EXTÉRIEUR
PARTENAIRES
MESURE
STRATÉGIE INTÉRIEUR
PRÉSENT UTILI-
SATEUR
COMMUNI-
CATION
LIENS
AFFAIRES
ENSEMBLE
AVENIR
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
Stephen Demange, Aquinum : « C’est quoi l’UX ? » (SlideShare)
U
X
32

3/UX first
journaldunet.com : « UX designer, ergonome, architecte de l’information, designer d’interaction ... Quelle différence ? »
Communiquer ses valeurs
directement du concepteur
à l’utilisateur
Valeurs du site et de l’utilisateur
Authenticité, créativité, culture, équité, empathie,
éthique, légitimité, liberté, originalité, partage,
philosophie, respect, plaisir, transparence…
UX : expérience utilisateur
User eXperience : utilité, efficacité, facilité, ergonomie,
accessibilité, crédibilité, architecture, référencement…
UI : interface utilisateur
User 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: concept
Wireframe : maquette fonctionnelle
Le design est conçu sans logiciel graphique. Puis vient le wireframe
Les outils
Papier, crayons, ciseaux…
Wireframe
• Liste d’outils
• 10 outils gratuits
I
D
34

3/UX first: atomic
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: atomic
Conception:philipperondepierre.com-Photo:20minutes
Créez le journal qui vous correspond, via les grilles et les éléments modulables / app 20minutes.fr
36

3/UX first: menu
Conception:philipperondepierre.com:Photo:Libération
* 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: wording
* 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 efficaces
Texte 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 naturel
Inutile 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
LeLoremIpsumestsimplementdufauxtexte
employé dans la composition et la mise en
page avant impression. Le Lorem Ipsum est
lefauxtextestandarddel’imprimeriedepuis
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,sansquesoncontenun’ensoit
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
applicationsdemiseenpagedetexte,comme
Aldus PageMaker.

3/UX first: app first!
App first! Une expérience unique entre la marque et l’utilisateur / pagesjaunes.fr
Conception:philipperondepierre.com-Photoapplications:PagesJaunes
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 ?
Conception:philipperondepierre.com-Photoswebetapplications:Arte
Site web, apps, TV connectée, box internet, console… La cohérence sur tous les écrans / arte.tv
*
40

philipperondepierre.com
* 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 UI
Sur 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
3/UX first: accessible
Protanopie
Hommes : 2% - Femmes : 0.01%
Tritanopie
Hommes et femmes : 0.01%
Deutéranopie
Hommes : 7% - Femmes : 0.04%
(Daltonisme)
Vision normale
Testez
vos couleurs
Principes et normes :
accessibilité web
Pattern UI : couleurs
et daltonisme
42

3/UX first: footer
Conception:philipperondepierre.com:Photo:popchartlab.com,lecoqsportif.com,wetransfer.com
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-data
smart data design
I’m halfcrazy,
all for the love
ofyou…*
* « Je suis à moitié fou, d’amour pour toi. » Hal 9000 dans 2001 : l’odyssée de l’espace.
Conceptionetillustration(d’aprèsAppleetStanleyKubrick):philipperondepierre.com

Conception:philipperondepierre.com-Photo:FutureMag,Arte
* 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-data
Du big data au smart data, via le design
Les enjeux du big data
Futuremag - Arte
45

4/s-data
Conception:philipperondepierre.com-Photo:gymwatch.com
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-data
Conception:philipperondepierre.com-Photoapplication:Apple
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-data
Conception:philipperondepierre.com-Photo:liberation.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-data
Conception:philipperondepierre.com-Photo:Apple,DavidMcCandless,Samsung
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-data
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-data
Conception:philipperondepierre.com-Photo:GiorgiaLupietStefaniePosavec
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-data
Conception:philipperondepierre.com-Infographie:JingZhang
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.0
de Gutenberg à Google
maquette, typo, style…
le print réinventé
Conception:philipperondepierre.com-Photo:WilliamCaslon,WilliHeidelbach,LaCie

5/print 3.0
Conception:philipperondepierre.com-Photo:wearejanuary.com
54
Face au règne de l’image, la typo graphique a la cote ! / wearejanuary.com

5/print 3.0
Conception:philipperondepierre.com-Photo:simplygum.com
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.0
Conception:philipperondepierre.com-Photo:linkedin.com/pulse,PhilippeRondepierre
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.0
Conception:philipperondepierre.com-Photo:nytimes.com
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.0
Conception:philipperondepierre.com-Photo:liberation.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

philipperondepierre.com-©LeMonde
5/print 3.0
Alternative à 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

philipperondepierre.com-Photo:LeMonde
* Lunettes VR de réalité virtuelle
5/print 3.0
Sur é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

philipperondepierre.com-Photo:SooonbyFotolia
jonathan-menet.fr : « SOOON : un guide sur le design du futur présenté entre papier et web »
5/print 3.0
Parlez 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

5/print 3.0
7. FFDIN
Tendances web design
La mode s’évapore, la tendance s’érode...
1. PROXIMA
NOVA
tendances web design
6. Montserrat
4. Droid Serif
Tendances Web Design
8. OPENsans
3. AVENIR
5. Helvetica
Neue Tendances web design
9. LaTo
Tendances Web Design
Quelques « classiques ». De forts contrastes dans les tailles et les graisses
62
...

Conception:philipperondepierre.com-Photo:lineto.com
5/print 3.0
Titres 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.0
Conception:philipperondepierre.com-Photo:AlexPalazzi
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.0
Conception:philipperondepierre.com-Photos:voirlien
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

Conceptionetillustration:philipperondepierre.com-Photoespace:public
6/explore!
immersion totale
préparez-vous
à vivre de nouvelles
expériences

6/explore!
* 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!
Conception:philipperondepierre.com-Photo:sirinlabs.com
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!
Conception:philipperondepierre.com-Photo:silenza.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!
Conception:philipperondepierre.com-Photo:Porsche
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!
Conception:philipperondepierre.com-Photo:activation-nodeplus.com
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!
Conception:philipperondepierre.com-Photo:99homesmovie.com
Images, scénario, transitions, ambiance… Plongez à fond dans l’histoire / 99homesmovie.com
Micro-animations et menu
caché 99 % visuel
72

Conception:philipperondepierre.com-Photo: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 sensorielle
jviewz.com
Architecture à 360°
dock.cz
Morphing tout en code !
species-in-pieces.com
Conception:philipperondepierre.com-Photo:voirliens
Effets typographiques
ffmark.com
74
6/explore!

7/artiste
retour vers l’inspiration
pop, kitsch, glitch, typo,
urbain, electro, toons,
techno, clip, rock,, fluo,
sexy, chic, ecolo, hype,
vintage, nerd, arty…

7/artiste
Conception:philipperondepierre.com-Photo:putput.dk
Rétro pop minimal, un style décalé, esthétisant et sucré / putput.dk
90’sinspiration
76

Conception:philipperondepierre.com-Photo:lovefila.com
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
Conception:philipperondepierre.com-Photo:locus-solus.wearetesting.it
Couleurs vibrantes, design élégant, interface high-tech / locus-solus.wearetesting.it
78
Le scroll laisse la place à
des transitions surprenantes

7/artiste
Conception:philipperondepierre.com-Photo:kotelett.info
Happening vidéo « subliminal » et hypnotique / kotelett.info
90’sinspiration
Vidéo entrecoupée par une
autre sous forme de flashs
79

7/artiste
Conception:philipperondepierre.com-Photo:garbett.com.au
Géométrique, coloré, impactant, graphique / garbett.com.au
Les transitions soignées sont
au centre du design
70’sinspiration
80

7/artiste
Conception:philipperondepierre.com-Photo:animade.tv/frankensim
Interface vintage revisitée, ludique et créative / animade.tv/frankensim
80’sinspiration
81

Look arty et scroll en biais
mocastepandrepeat.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
Conception:philipperondepierre.com-Photo:voirliens
7/artiste
No text, pictos only
ttmm.eu
80’s 80’s 70’s
80’s 70’s 80’s
82

7/artistes inspirés
>>> Galeries et sites pour inspirer vos créations <<<
Pinterest
Réseau social de collections d’images
Awwwards
Classement des meilleurs design web
Dribbble
Galeries de designers créatifs
Behance (Adobe)
Portfolios de designers créatifs
the FWA
Classement des meilleurs design web
Site Inspire
Galerie design web et interactif
83

8/playagain!
gamification
le jeu se prend toujours
plus au sérieux
Conception:philipperondepierre.com:Photo:Nintendo

Serious game* : utiliser le jeu pour communiquer une information sérieuse / J’aime les patates
8/play again
Conception:philipperondepierre.com-Photo:ValiFugulin,Minority,RubenFarrus
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!
Conception:philipperondepierre.com-Photo:D.Turmel,Ko-opMode,J.-F.Nadeau,S.Boucher
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: data
Conception:philipperondepierre.com-Photo:dairygivesyougo.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: ego
Conception:philipperondepierre.com-Photo:McMillan
* 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 life
Conception:philipperondepierre.com-Photo:Google,Niantic,ThePokémonCompany
*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: 3D
Conception:philipperondepierre.com-Photo:spacelamb.12wave.com
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: retro
Conception:philipperondepierre.com-Photo:McMillan
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 again
Conception:philipperondepierre.com-Photo:Nintendo
jeux-serieux.fr 92

@
#
;)
9/tribu
tribu vs social
la tribu face
aux réseaux sociaux
mainstream

9/tribu
Les « réseaux de niche » moins exposés et consensuels, complémentaires de Facebook et Twitter
Conception:philipperondepierre.com-Illustration:Facebook
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/tribu
Explorez le monde à travers les yeux des autres sur votre smartphone… et vice versa / Periscope
Conception:philipperondepierre.com-Photo:periscope.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/tribu
Conception:philipperondepierre.com-Photo:telegram.org
* 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/tribu
Conception:philipperondepierre.com-Photo:tribe.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/tribu
Canary, Gossip, Impulses, Whisper, Yik Yak… Exprimez-vous anonymement* / Yik Yak
Conception:philipperondepierre.com-Photo:yikyakapp.com
* 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/tribu
Le monde « parfait » selon Instagram. Espace d’expression ou de standardisation ? / Nick & Justin
Conception:philipperondepierre.com-Photo:instagram.com/justinick_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/tribu
Concurrencés par les réseaux sociaux, les blogs doivent monter en gamme / Medium
Conception:philipperondepierre.com-Photo:medium.com
* 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/tribu
LinkedIn, Scoop.it, SlideShare, Viadeo, Xing… Réseaux pros, tous experts ! / Jacques Lebègue, scoop.it
Conception:philipperondepierre.com-Photo:scoop.it,JacquesLebègue
* 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/IoT
internet ofthings*
hyper connectés
et «omnipotents»…
pour longtemps
* and everything
Conception:philipperondepierre.com-Photo:Flash-MaticTuning

Réalité augmentée : devenez pilote grâce à votre tablette… / parrot.com
10/IoT
Conception:philipperondepierre.com-Photo:Parrot
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/IoT
Conception:philipperondepierre.com-Photo:Parrot
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 »
Conception:philipperondepierre.com-Photo:Glowforge
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/IoT
Conception:philipperondepierre.com-Photo:Sauter
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
Conception:philipperondepierre.com-Photo:Amazon
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 »
Conception:philipperondepierre.com-Photo:LG,Apple
Le skeuomorphisme donne
une note d’authenticité
108

10/IoT
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 ?
Conception:philipperondepierre.com-Photo:Aldebaran,BlueFrogRobotics
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
Conception:philipperondepierre.com-Photo:Tesla
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
Conception:philipperondepierre.com-Photo:oculus.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
Conception:philipperondepierre.com-Photo:Mozilla,A-Frameteam,MozVRteam
WebVR* affiche la réalité virtuelle dans votre navigateur web / mozvr.com
113
Modélisation 3D, jeux,
science, exploration…

/et après?
évolution des tendances
2017, 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
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
Conception:philipperondepierre.com-Photo:Microsoft
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
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?
Conception:philipperondepierre.com-Photo: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?
Conception:philipperondepierre.com-Photo:KeiichiMatsuda
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?
Conceptionetretouche:philipperondepierre.com-Photo:FolkertGorter(superfamous.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
Conception:philipperondepierre.com-Photo:magicleap.com
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 »
Conception:philipperondepierre.com-Photo:MindMaze
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

/in
les tendances
au top !

* 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
Conception:philipperondepierre.com-Photo:manualcreative.com,Nike
/in
124
Diffuse shadows : les ombres
« naturelles » sont de retour*

Applications wearables, TV et objets connectés
Wearable (vêtements, chaussures, accessoires… ), domotique, transports, objets connectés… / Apple Watch
/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
/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 éthique
Sécurité, transparence, pas de tracking, respect de la vie privée… La réponse aux GAFAM ? / DuckDuckGo.com*
Conception:philipperondepierre.com-Photo:qwant.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ésolution
Les écrans haute résolution se sont généralisés. Idéal pour les interfaces, moins pour les bas débits
Conceptionetinfographie:philipperondepierre.com-Photo:Apple
/in
Taille des appareils en fonction
de leur résolution d’écran
2015
 Watch
312 x 390 px
2007
iPhone
320 x 480 px
2014
iPhone 6 plus
1920 x 1080 px
2015
MacBook 12“
2304 x 1440 px
2014
iMac 5K, 27“ avec écran Retina
5 120 × 2 880 px
1984
Macintosh
512 x 342 px
128

Écrans splittés / nightcall
Double scroll horizontal, vertical, ou en biais
Les panoramas / houseofborel
Avec mise en scène de la typographie
Conception:philipperondepierre.com-Photos:voirliensimages
/in
Les gros plans / bookofbeards
Assumez-vous avec le zoom plein écran !
Les gifographies
Infographies animées en GIF
Les filtres, la bichromie
Le style Instagram et les effets polychromes…
L’image en mouvement
Vidé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…
/in
Bluetooth Smart
iBeacon, Proximity, Eddystone…
Les algorithmes / bl.ocks.org
Des data à l’interface web, ils sont partout
Le partage / NightSwapping
Sites et applications entre particuliers
Le cloud
Attention à la sécurité des données !
130
SVG
Dessin et animation SVG
Dessin vectoriel sans perte de qualité

/out
démodé, daté,
obsolète…

Flat design 2.0
Ombres nettes, design et coloris Playskool
Les selfies old school
Invasifs sur les réseaux. Soyez créatifs !
Le foodporn
Gare à l’indigestion !
Les textos
La France résiste à Whatsapp. Jusqu’à quand ?
/out
132
SMS
La publicité intrusive
Adblock adopté massivement change la donne
La tyrannie du like
Le 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)
SKEUOMORPHISME
iOS 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 DESIGN
Windows 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é.
≠
Conception:philipperondepierre.com-Photo:Apple,Nokia
/out
133

Les interfaces chargées
Trop de pages, de boutons, de polices…
Trop de texte
Penser aux images, pictos ou data design
/out
Le web non éthique
Tel est pris qui croyait prendre
Le design low cost
Design agressif, kitsch ou cheap
134
Flash
Préférer HTML5 + CSS3 + JavaScript
Holo design
Antérieur à Material. Utilisé par Android 4.4

La lightbox
Et les pop-ins, les pop-ups intrusifs
Les carousels fourre-tout
Et les sliders sans fin, lourds et inefficaces
Le design glossy
Périmé depuis 3 ans (iOS 6 et antérieur)
Les illustrations impersonnelles
Banques d’images désuètes et vides de sens
Les photos clichés/creuses
Banques d’images désuètes et vides de sens
Les nuages de mots
Ultra 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.com
Non à l’exploitation du #travailgratuit comme modèle de réussite en France / Lettre ouverte
Conception:philipperondepierre.com-Photo:TopicSimple
/out
136
Compétitions, appels d’offres, concours, collaborations…
Pour une rémunération digne et équitable, affichez le logo*

/couleurs
mixez
les gammes!

Conception:philipperondepierre.com-Photo:Pantone,Apple,Google,Greetabl,TabacInfoService
/couleurs
Couleurs inspirées par la nature*
Technologiques mais naturelles.
Vert Greenery, couleur 2017 selon Pantone®.
Pastels acidulés et/ou délavés
Efficace avec flat design + blanc et gris
Attention aux palettes trop fades !
138* Tendances printemps 2017 selon Pantone®.
Couleurs vibrantes
Inspirées par iOS et Material + blanc et/ou gris.
Franches et efficaces sur mobiles.
+ ombres et dégradés

Conception:philipperondepierre.com-Photo:gt-cinetype.com,thefader.com,Microsoft
/couleurs
139
Couleurs basiques
Inspiré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 colors
Pour un effet narratif stylisé, ou une définition
radicale de « Less is more ».
* Ou or.

Conception:philipperondepierre.com-Photo:Vine,pointlesscorp.com,iStock
/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 design
Apporte 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…
141

/article: alsacréations
142
+

/clic !
Apple,
Branding
STORYDécryptage : branding, communication,
marketing, design, influences, historique…
143
+

/merci!
Directeur 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.

Tendances Web Design 2017/2018

Tendances Web Design 2017/2018

Recommended

More Related Content

Similar to Tendances Web Design 2017/2018

Similar to Tendances Web Design 2017/2018(20)

Tendances Web Design 2017/2018