Tendanceswebdesign 151012015325 Lva1 App6892 PDF

webdesign
tendance s
2o17/18…
Philippe Rondepierre
_ mise à jour
09-16
Tendances Web Design 2017 - 2018
© Tous droits réservés
“La mode s’évapore,
la tendance s’érode...
Seul le style reste.
Article tendances 2016
Conception : philipperondepierre.com
sur alsacreations.com
Étude précédente
Tendances Web Design 2015
Contacter
1web
/0 tendances
design 2017/18…
1/GAFAM design 2/360°
Conception : philipperondepierre.com - Tendances Web Design 2016/2017/2018
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
GAFAM & followers* : le web leur appartient, le web design aussi
clic !
Conception et infographie : philipperondepierre.com
Les GAFA pèsent plus de

1600 milliards de dollars en
bourse !** À qui le tour ?
* GAFAM : Google (Alphabet), Apple, Facebook, Amazon, Microsoft - Followers : satellites des GAFA (souvent dans la Silicon Valley) - ** lesechos.fr 5
1/GAFAM design
Les GAFA* + Microsoft ont capté les tendances, pour mieux nous les imposer. Le monde suit…
Tendances initiales Captation des tendances

Bauhaus Android
Blogging Data design
Data-visualisation Flat design
Gaming Gamification
Graphic design iOS
Minimal design Instagram
Néoplasticisme Material design
Parallaxe Modern UI (Metro)

Polaroid Parallaxe
Pop Culture Réseaux sociaux
Skeuomorphisme Skeuomorphisme (≤ iOS 6)
Style graphique international Typographie suisse
(style suisse) WatchOS
… …
1900 2007 / 2010** 2016

Périodes
* 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 6
1/GAFAM design
Android 6.0 Marshmallow : la puissance pour les écrans de toutes tailles, sauf les PC / android.com
Android est présent sur plus d’un milliard d’appareils

Android utilise Material
dans le monde : téléphones, tablettes, montres, téléviseurs, design depuis la version 5.0
voitures… Et ce n’est pas fini !*
Il fait la part belle à Google Now son assistant vocal.
Conception : philipperondepierre.com - Photo : Google
Android Téléphone Tablette Android TV Android

Wear Auto
* android.com : Android 6 Marshmallow - Material Design for Android 7

1/GAFAM design
Apple : des interfaces toujours plus orientées vers la mobilité / apple.com
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… ).
Conception : philipperondepierre.com - Photo : Apple
L’interaction par la voix arrive

dans les applications mac
CarpPlay - iOS 10 - macOS - tvOS - watchOS - Apple Branding Story (SlideShare) 8

1/GAFAM design
Windows 10 : la cohérence fonctionnelle et graphique à 360° / microsoft.com
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.
Conception : philipperondepierre.com - Photo : Microsoft
9
1/GAFAM: social
Facebook, le réseau des réseaux, avec 1,5 milliard d’utilisateurs* / facebook.com
Conception : philipperondepierre.com - Photo : Facebook
Le News Feed est imité par

la concurrence. Facebook en
détient le brevet
UX : la rentabilité avant
l’expérience utilisateur ? **
* Source : Le Monde Économie - ** parlonsgeek.com 10

1/GAFAM: dynamic grid
Des chaussures à la musique, la même grille centrée sur les produits et l’utilisateur / amazon.com
Conception : philipperondepierre.com - Photo : Amazon
Un design efficace, imité par

la concurrence, dont Alibaba
Dynamic grid : grille dynamique, les pages vues par l’internaute sont calculées, exécutées en fonction de chaque visite 11
1/GAFAM: dynamic grid
Grilles dynamiques et responsives optimisées desktop et mobile / Google Design
Types de grilles : pin-style*,

masonry**, magazine…
* Pin-style : vignettes façon Pinterest (card design) - ** Masonry : grille sous forme de briques 12
1/GAFAM: flat 2.0
Plus frais, Material design lancé en juin 2014 a pris l’ascendant sur ses rivaux / Material design
Material motion fait la part

belle au formes géométriques
et à la fluidité
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 ?
Material Design (Google) : charte de design qui s’applique à l’interface des logiciels et applications web - Material motion : animation de l’interface 13
1/GAFAM: flat 2.0
Couleurs franches + gris et blanc, importance des icônes et du data design, grilles structurées
Conception : philipperondepierre.com - Photo : Google, Microsoft, Apple
Les différents styles

s’influencent mutuellement
1 : iOS 10 (Music) - 2 : Android 6 (utilise Material design) - 3 : Windows Phone 10 14

1/GAFAM: minimal
« Less is more », symbole de modernité. Tout se joue dans la composition / apple.com
15
1/GAFAM: geometric
Geométrique + minimal pour Abisko, app développée avec Material design / design.google.com
Conception : philipperondepierre.com - Photo : Abisko, Google
16
1/GAFAM: monopage
Gamme, produit, descriptif, utilisation, avis, recommandations, achat… sur une page / amazon.fr
Conception : philipperondepierre.com - Photo : amazon.com
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
Slider plein écran, pour une

navigation 100% visuelle
Monopage sans scroll,

comme pour une application
18
1/GAFAM: storytelling
Ne vendez pas un produit, donnez le premier rôle à l’internaute / apple.com
Créer une connexion

émotionnelle* en racontant
une histoire
Monopage et storytelling,
un duo efficace
Navigation intuitive et
transitions fluides
* ergophile.com : le design émotionnel au sein de vos interfaces 19

1/GAFAM: pictos
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 ?
Voir aussi : Font Awesome (polices d’icônes), designscrazed.org (jeux d’icônes gratuites), Typekit (Adobe, polices de caractères en ligne)… 20
1/GAFAM: icônes
Pictos et icônes flat ou semi flat, outline, avec quelques remixes du skeuomorphisme*
1 2 3
Conception : philipperondepierre.com - Photo : Apple, Google, Microsoft
4 5 6
1. iOS - 2. Windows 10 - 3. apple.com - 4. OS X - 5. 6. Material design - * Apple et Android (Material design). Skeuomorphisme, voir p. 133 21
1/GAFAM: inspirations…
Modern UI (Metro design)* Minimal design Flat icons
Néoplasticisme (Mondrian, Composition II) Less is More (Bauhaus) Signalétique urbaine (US NPS)
Conception : philipperondepierre.com - Photo : Mondrian, US NPS, Emil Ruder, Xerox, Paul Rand
–=+
Typographie et grilles Data design Flat design

Style suisse (Emil Ruder, Max Miedinger… ) 1res interfaces graphiques (Xerox Star) Graphic design (Paul Rand, IBM)
* Modern UI, nouveau nom de l’interface Metro 22

2/ 360°
post-responsive design
supports, médias,
technologies et usages
Conception : philipperondepierre.com - Photo : Antony Yang
tous azimuts
2/360°
Responsive web design : un modèle obsolète ? / skinnyties.com
Conception : philipperondepierre.com - Photo : skinnyties.com, paper-backgrounds.com
Web design liquide,

responsive ou adaptatif*
* Alsacreations.com : « C’est quoi le Responsive Web Design ? » 24

2/360°
Explosion des écrans : auto, domotique, PC, hybride, TV, smartphone, tablette, RV*, wearable**…
Conception et illustration : philipperondepierre.com
10 : 24
* Réalité virtuelle - ** Wearable technology : technologie portable (vêtements, accessoires, bijoux, lunettes, montres connectées… ) 25
2/360°
Une multitude d’appareils, de formats et d’interfaces
Oui Cas spécifiques*
Responsive web design*
Applications pour ordinateurs (mac, PC)*
Applications mobiles (Android, iOS, Windows Phone… )*
Autres interfaces** (Android Auto/Wear/TV, Tizen, tvOS, watchOS, webOS, Windows IoT… )
10:24
TV connectée Ordinateur Tablet PC Tablette Smartphone Wearable Auto Domotique

/ Console hybride Windows 10 sur + RV*** (appareils)
Si navigateur Si compatible tablette ≥ 8”
* Lire les notes pour voir la compatibilité dans les cas spécifiques. ** Hors ordinateurs et mobiles. *** Réalité virtuelle. 26
2/360° Hernan Menajovsky
IT Digital Project Manager, grands comptes
Et la programmation ? L’éclairage d’Hernan Menajovsky, Chef de Projet Web
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.
* Partie visible par les utilisateurs ≠ back-end (côté serveur) - ** API JavaScript expérimentale - Mobizel : « WebApp, application hybride, native… » 27
2/360°
Après une croissance dopée par les appareils mobiles, la high-tech doit se renouveler
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 ?
10:24
TV connectée Ordinateur Tablet PC Tablette Smartphone Wearable Auto Domotique

hybride + RV (appareils)
clubic.com : « Les ventes de PC au plus bas depuis 2008 » 28

2/360°
Une approche communicationnelle à 360°
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…
10:24
* Communication sur le lieu de vente 29

2/360°
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.
Conception et illustration : philipperondepierre.com - Photo : Antony Yang
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é).
* 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 EXTÉRIEUR COMPROMIS
l’efficience
ENCA
DREM
E R ENT
STRATÉGI INTÉRIEU ÉQUIPE
PRÉ
SEN ANALY
T UTILI- TIQUE
d’abord
SATEUR PARTEN AIRE
S
COMMUNI-
S
AIRE
IR
CATION
AVEN
AFF
LIENS
ENSEMB
LE
MESURE
3/UX first
L’expérience utilisateur en 6 points
1. L’apparence du site et son ergonomie

Cohérence, placement des éléments…
X
U
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
Stephen Demange, Aquinum : « C’est quoi l’UX ? » (SlideShare) 32

3/UX first
Le design n’est pas que fonctionnel et cosmétique, il se fonde sur de vraies valeurs
Tout d’abord, s’engager pour donner du sens
Valeurs du site et de l’utilisateur

Authenticité, créativité, culture, équité, empathie,
éthique, légitimité, liberté, originalité, partage,
philosophie, respect, plaisir, transparence…
Communiquer ses valeurs UX : expérience utilisateur

directement du concepteur User eXperience : utilité, efficacité, facilité, ergonomie,
à l’utilisateur accessibilité, crédibilité, architecture, référencement…
UI : interface utilisateur
User Interface : concept graphique, esthétique,
design, typographie, style, message, branding…
journaldunet.com : « UX designer, ergonome, architecte de l’information, designer d’interaction ... Quelle différence ? » 33
3/UX first: concept
Le design est conçu sans logiciel graphique. Puis vient le wireframe
Les outils
Papier, crayons, ciseaux…
tendances web design
D
Wireframe
• Liste d’outils
• 10 outils gratuits
I
Wireframe : maquette fonctionnelle 34

3/UX first: atomic
Oubliez les pages ! Construisez à partir d’atomes et de molécules, façon apps / bradfrost.com
Atomes Molécule Organisme Template (wireframe) Template
Abstrait Concret
TITRE TITRE
accueil À PROPOS actu BLOG CONTACT
TITRE
TITRE TITRE TITRE
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.
35
3/UX first: atomic
Créez le journal qui vous correspond, via les grilles et les éléments modulables / app 20minutes.fr
Conception : philipperondepierre.com - Photo : 20 minutes
36
3/UX first: menu
Menu caché, coulissant, en perspective… du sticky menu* au tableau de bord / liberation.fr
Conception : philipperondepierre.com : Photo : Libération
Le choix du type de menu

doit rester cohérent
* Navigation principale fixée en haut de l’écran 37

3/UX first: wording
Des mots choisis, qui ont du sens pour les utilisateurs… et le référencement
Remplissage Texte pensé pour le web

Le Lorem Ipsum est simplement du faux texte
employé dans la composition et la mise en Titres et chapôs efficaces
page avant impression. Le Lorem Ipsum est Texte clair et original, avec une tonalité, qui
le faux texte standard de l’imprimerie depuis apporte une valeur ajoutée, qui a du sens.
les années 1500, quand un peintre anonyme Éviter le blabla, les textes à rallonges et les
assembla ensemble des morceaux de texte copiés/collés qui seront décelés par les
pour réaliser un livre spécimen de polices de lecteurs… et par les moteurs de recherche.
texte. Il n’a pas fait que survivre cinq siècles, Composer et aérer les paragraphes.
mais s’est aussi adapté à la bureautique Éviter les blocs justifiés difficiles à lire.
informatique, sans que son contenu n’en soit
Référencement naturel
modifié. Il a été popularisé dans les années

1960 grâce à la vente de feuilles Letraset Inutile de tricher. Penser à la pertinence du
contenant des passages du Lorem Ipsum, et, contenu rédactionnel, des mots bien choisis,
plus récemment, par son inclusion dans des une mise en page bien structurée (HTML… ),
applications de mise en page de texte, comme pour optimiser le référencement naturel.
Aldus PageMaker. Cette tâche revient au Digital Copywriter*.
* Concepteur rédacteur web - CCM : « Référencement naturel (SEO) - Guide pratique complet » 38
3/UX first: app first!
App first! Une expérience unique entre la marque et l’utilisateur / pagesjaunes.fr
Conception : philipperondepierre.com - Photo applications : Pages Jaunes
Icône*, fonctions natives,

offline, géolocalisation, push,
notifications… App first !
Application native ou
WebApp selon la pertinence**
watchOS
* (Fav)icône de lancement toujours accessible sur le mobile - ** mobizel.com : « WebApp, application hybride, native… quelle est la différence ? » 39
3/UX first: 360°
Site web, apps, TV connectée, box internet, console… La cohérence sur tous les écrans / arte.tv
Conception : philipperondepierre.com - Photos web et applications : Arte
Toutes les applications et supports sur arte.tv - * Extrapolation. Arte, bientôt une application wearable ? 40
3/UX first: motion UI
Sur mobile, le motion UI* renforce l’affordance, la fluidité et l’impact émotionnel
philipperondepierre.com
Periscope Elevate Curator Storehouse UP Coffee
Voir quelques animations Morphing
* Motion UI / motion design : univers graphique en mouvement, par addition à la typo, images, vidéos, 3D, sons… - Voir aussi : micro UX 41
3/UX first: accessible
Accessibilité pour tous. Ex. : daltonisme, l’attention portée aux couleurs et aux contrastes
Deutéranopie Protanopie Tritanopie

Hommes : 7% - Femmes : 0.04% Hommes : 2% - Femmes : 0.01% Hommes et femmes : 0.01%
(Daltonisme)
Pattern UI : couleurs
et daltonisme Testez
vos couleurs
Principes et normes :
accessibilité web
Vision normale
42
3/UX first: footer
Des pieds de page clairs et fonctionnels / popchartlab.com, lecoqsportif.com, wetransfer.com
Conception : philipperondepierre.com : Photo : popchartlab.com, lecoqsportif.com, wetransfer.com
Le footer est le socle de la

page web. Soignez-le.
Attention, le footer n’est pas

un fourre-tout !
Une interface plus simple ?

Oubliez header et footer…
codemyviews.com : 15 points pour créer un bon footer 43

4/ s-data
smart data design
I’m half crazy,
Conception et illustration (d’après Apple et Stanley Kubrick) : philipperondepierre.com
BOUGER
S’ENTRAÎNER
all for the love SE LEVER
of you…*
* « Je suis à moitié fou, d’amour pour toi. » Hal 9000 dans 2001 : l’odyssée de l’espace.
4/s-data
Du big data au smart data, via le design
Le smart data design

s’inscrit dans l’information et l’action
Les données du big data sont parfois inexploitables…

Conception : philipperondepierre.com - Photo : Future Mag, Arte
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 Les enjeux du big data

de l’analyse des smart data, dans le but d’informer et Futuremag - Arte
d’aider à la décision.
* Datamining : extraction de connaissances à partir de données (algorithmes, statistiques, intelligence artificielle, informatique… ) 45
4/s-data
Votre coach mobile virtuel vous conseille via le data design… et en vous parlant / gymwatch.com
Conception : philipperondepierre.com - Photo : gymwatch.com
L’interaction via la synthèse

vocale toujours plus présente
46
4/s-data
Visualisez, gérez et partagez vos données personnelles / apple.com/ios/health
Conception : philipperondepierre.com - Photo application : Apple
UX : les mobiles et wearables

tirent profit du data design
La sécurité des données

au cœur des préoccupations
47
4/s-data
Data design : prenez en main les données afin de mener vos propres expériences / liberation.fr
Conception : philipperondepierre.com - Photo : liberation.fr
Data design high-tech,

dynamique et responsive
Une profession d’avenir, le datajournaliste 48

4/s-data
Formaliser la data-visualisation la plus efficiente : les schémas types / David McCandless
Conception : philipperondepierre.com - Photo : Apple, David McCandless, Samsung
Samsung Gear S2
 WATCH Design de David McCandless,

d’après Edward Tufte
Edward Tufte a été décrit

par le New York Times
comme le « Léonard de Vinci
des données » (Wikipédia)
David McCandless : « Information is beautifull » - Atelier Iceberg : « Visualisation d’informations » (SlideShare) 49

4/s-data
Infographies : design géométrique, dynamique, data motion (animations, typo, pictos, photos… )
1, 5. David McCandless - 2, 6. Peter Ørntoft - 3. Thomson Reuters Foundation - 4. Jake Barton, NYSCI 50
4/s-data
Le data design, source d’inspiration et de créativité / dear-data.com
Conception : philipperondepierre.com - Photo : Giorgia Lupi et Stefanie Posavec
Giorgia et Stefanie, ou le data

design sur cartes postales !
51
4/s-data
Style semi figuratif, typo ou graphique pour les infographies classiques / mazakii.com
Conception : philipperondepierre.com - Infographie : Jing Zhang
Cartes et plans, tout est

possible ! Ex. : mapbox.com
52
Conception : philipperondepierre.com - Photo : William Caslon, Willi Heidelbach, LaCie
5/
le print réinventé
print 3.0
de Gutenberg à Google
maquette, typo, style…
5/print 3.0
Face au règne de l’image, la typo graphique a la cote ! / wearejanuary.com
Conception : philipperondepierre.com - Photo : wearejanuary.com
54
5/print 3.0
Un site, une seule police de caractère / simplygum.com
Conception : philipperondepierre.com - Photo : 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
Retour de l’écrit et de la typographie traditionnelle inspirés par le print / linkedin.com/pulse
Conception : philipperondepierre.com - Photo : linkedin.com/pulse, Philippe Rondepierre
La sobriété et l’élégance pour

crédibiliser le discours
Le web design est avant tout

un travail de typographie !
56
5/print 3.0
Grille journal, faisant clairement référence à la version papier / nytimes.com
Conception : philipperondepierre.com - Photo : nytimes.com
Page non responsive. Sur

smartphone, on est redirigé
vers l’interface mobile
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
57
5/print 3.0
Grille moderne responsive, orientée web et mobilité / liberation.fr
Conception : philipperondepierre.com - Photo : liberation.fr
Visuels, Burger icon, menu

caché, sticky bar, swipe list*…
Black is beautiful! Des titres

plus impactants en très gras
* 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 58
5/print 3.0
Alternative à la liseuse, la tablette est privilégiée par la presse et les médias / lemonde.fr
philipperondepierre.com - © Le Monde
Navigation et ergonomie
optimales sur tablettes
App first : Le Monde incite

fortement à télécharger l’app
59
5/print 3.0
Sur écran ou avec des lunettes VR, vivez l’actu à 360° grâce à la réalité virtuelle / lemonde.fr
Immersion totale, en direct

philipperondepierre.com - Photo : Le Monde
ou en différé. Réalité
virtuelle, voire augmentée…
Ajout de la data visualisation

et interactions dynamiques
* Lunettes VR de réalité virtuelle 60

5/print 3.0
Parlez et interagissez entre papier et web / Sooon by Fotolia
philipperondepierre.com - Photo : Sooon by Fotolia
Le retour du papier,
aboutissement de l’écran ?
Le web cherche à s’ancrer

dans le réel, en interagissant
avec les supports physiques
jonathan-menet.fr : « SOOON : un guide sur le design du futur présenté entre papier et web » 61
5/print 3.0
Quelques « classiques ». De forts contrastes dans les tailles et les graisses
1. PROXIMA 3. AVENIR
NOVA ...

Tendances web design
La mode s’évapore, la tendance s’érode...
tendances web design Seul le style reste.
4. Droid Serif 5. Helvetica 6. Montserrat

Tendances Web Design
Neue

Seul le style reste. Seul le style reste.
7. FF DIN 8.

OPENsans
9. LaTo
Tendances web design Tendances Web Design
La mode s’évapore, la tendance s’érode... La mode s’évapore, la tendance s’érode... La mode s’évapore, la tendance s’érode...
Seul le style reste. Seul le style reste. Seul le style reste.
62
5/print 3.0
Titres ou paragraphes, choisissez des polices signées par des typographes créatifs / lineto.com
Conception : philipperondepierre.com - Photo : lineto.com
Avantage des polices sans

serifs, rondes, géométriques…
Les serifs permettent de

s’affirmer (titres… )
63
5/print 3.0
La typographie à la main, c’est plus humain : stylet, papier, 3D, sculpture… / Alex Palazzi
Conception : philipperondepierre.com - Photo : Alex Palazzi
La typo ne met plus l’image

en scène. Elle devient l’image
Style pop, arty et régressif.

Just enjoy!
graphicstyle.fr : « Le Hand Lettering : retour aux sources » 64

5/print 3.0
Vectorielles ou images, quelques polices de caractères qui en ont / awwwards.com
Conception : philipperondepierre.com - Photos : voir lien
Polices sélectionnées à titre d’exemple graphique. Vérifiez la compatibilité de votre police de caractère 65
Conception et illustration : philipperondepierre.com - Photo espace : public
6/
expériences
préparez-vous
immersion totale
à vivre de nouvelles
explore!
6/explore!
Convergence des éléments communicationnels et d’interface. L’immersion pour l’émotion !
!!! Monopage,
Responsive,
UX & UI créatifs Storytelling, Design
Image 100 %
et disruptifs Branding… émotionnel*
(photo, vidéo… ),
Parallaxe…
Design sonore,
3D dynamique,
Micro interactions,
Réalité virtuelle, JavaScript
Motion UI…
* ergophile.com : le design émotionnel 67

6/explore!
Design technologique, animations 3D futuristes, micro interactions / sirinlabs.com
Conception : philipperondepierre.com - Photo : sirinlabs.com
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 68
6/explore!
Choisissez votre scénario et jouez avec les acteurs du film / silenza.it
Conception : philipperondepierre.com - Photo : silenza.it
Site tout en vidéo

+ interactivité
So chic! Le noir et blanc varie

peu selon vos écrans
69
6/explore!
Immersion, interactions, 3D, animations… : prenez le contrôle ! / porsche.com, Mission E.
Conception : philipperondepierre.com - Photo : Porsche
Animations 3D au scroll et
site monopage
Le menu caché transformé

en tableau de bord
70
6/explore!
Animations 3D dynamiques, son… pour un effet « wouah » garanti / activation-nodeplus.com
Conception : philipperondepierre.com - Photo : activation-nodeplus.com
En complément, le scroll fait

apparaître une grille sobre
Utilise WebGL, site officiel : khronos.org/webgl - WebGL sur Wikipédia 71

6/explore!
Images, scénario, transitions, ambiance… Plongez à fond dans l’histoire / 99homesmovie.com
Conception : philipperondepierre.com - Photo : 99homesmovie.com
Micro-animations et menu
caché 99 % visuel
72
6/explore!
Expérience utilisateur déroutante, ludique, artistique… unique ! / resn.co.nz
Conception : philipperondepierre.com - Photo : resn.co.nz
Bougez le diamant pour faire

apparaître ses milles facettes
73
6/explore!
De l’œuf ou de la poule… Jouez, au cœur de l’action ! Architecture à 360°
creativeedgeparties.com fiveminutes.gs dock.cz
Conception : philipperondepierre.com - Photo : voir liens
Expérience sonore et sensorielle Effets typographiques Morphing tout en code !

jviewz.com ffmark.com species-in-pieces.com
74
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 inspiration 90’s
Rétro pop minimal, un style décalé, esthétisant et sucré / putput.dk

Conception : philipperondepierre.com - Photo : putput.dk
76
Flat 2.0, interactions psychédéliques, couleurs vibrantes et micro animations / lovefila.com

Conception : philipperondepierre.com - Photo : lovefila.com
Appuyez sur la barre pour

plus de fun et d’effet wouah !
77
Couleurs vibrantes, design élégant, interface high-tech / locus-solus.wearetesting.it

Conception : philipperondepierre.com - Photo : locus-solus.wearetesting.it
Le scroll laisse la place à

des transitions surprenantes
78
Happening vidéo « subliminal » et hypnotique / kotelett.info

Conception : philipperondepierre.com - Photo : kotelett.info
Vidéo entrecoupée par une

autre sous forme de flashs
79
Géométrique, coloré, impactant, graphique / garbett.com.au

Conception : philipperondepierre.com - Photo : garbett.com.au
Les transitions soignées sont

au centre du design
80
Interface vintage revisitée, ludique et créative / animade.tv/frankensim

Conception : philipperondepierre.com - Photo : animade.tv/frankensim
81
7/artiste
Look arty et scroll en biais “ Video killed the radio star ” So kitsch!
mocastepandrepeat.tumblr.com y78.fr weareroyale.com
80’s 80’s 70’s
Conception : philipperondepierre.com - Photo : voir liens
Let’s go obsedo! No text, pictos only Juste un peu de CSS…

obsedo.com ttmm.eu designjobsboard.com
80’s 70’s 80’s
82
7/artistes inspirés
Awwwards Behance (Adobe) Dribbble
Classement des meilleurs design web Portfolios de designers créatifs Galeries de designers créatifs
Pinterest Site Inspire the FWA

Réseau social de collections d’images Galerie design web et interactif Classement des meilleurs design web
>>> Galeries et sites pour inspirer vos créations <<< 83

8/ play again!
gamification
le jeu se prend toujours
plus au sérieux
Conception : philipperondepierre.com : Photo : Nintendo
8/play again
Serious game* : utiliser le jeu pour communiquer une information sérieuse / J’aime les patates
Conception : philipperondepierre.com - Photo : Vali Fugulin, Minority, Ruben Farrus
* Jeu sérieux ayant une intention

de type pédagogique, informative,
communicationnelle, marketing,
idéologique ou d’entraînement.
De rares sites en Flash résistent

encore. Remplacés par le HTML et
les applications mobiles, bien plus
efficaces et multiplateformes.
Sensibiliser au développement durable avec l’application « J’aime les patates » 85

8/play again: app first!
Sérieux sans se prendre au sérieux sur le site vitrine et les apps / Le Cancer du Temps
Conception : philipperondepierre.com - Photo : D. Turmel, Ko-op Mode, J.-F. Nadeau, S. Boucher
Sortez du « flat plat » avec des

graphismes forts et stylés
Apprendre à ne pas se laisser dominer par le temps, avec l’application « Le Cancer du Temps » 86
8/play again: data
Jeu véritable ou simple emprunt des codes graphiques ludiques / dairygivesyougo.co.za
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 »
Les GAFAM s’inspirent

des designers et studios qui
devancent les tendances
87
8/play again: ego
Créer un personnage à son image optimise la connexion émotionnelle* / androidify.com
Conception : philipperondepierre.com - Photo : Mc Millan
* ergophile. com : « Le design émotionnel au sein de vos interfaces » 88

8/play again: real life
Ingress (Niantic*), jeu mobile en réalité augmentée. Toujours plus immersif / ingress.com
Conception : philipperondepierre.com - Photo : Google, Niantic, The Pokémon Company
Pokémon GO a été développé

sur les bases d’Ingress**
Collecte de données, push,

localisation GPS… pub !
*Niantic, “ex”-propriété de Google - ** Le Figaro : « Pokémon GO : Nintendo calme le jeu… » - Ingress (Wikipédia) - Pokémon GO (Wikipédia) 89
8/play again: 3D
Animations et interactions en 3D dynamique / Spacelamb
Conception : philipperondepierre.com - Photo : spacelamb.12wave.com
Spacelamb utilise WebVR*

pour s’afficher en réalité
virtuelle dans le navigateur
WebGL** permet la 3D
dynamique sur les pages et
applications HTML5
* WebVR, affichage VR sur navigateur - ** WebGL, site officiel : khronos.org/webgl - WebGL est supporté par les navigateurs modernes 90
8/play again: retro inspiration 80’s
Le retrogaming a encore quelques adeptes / arcade.mcmillan.com

Conception : philipperondepierre.com - Photo : Mc Millan
Le pixel art* est à la source

du web design. Un classique ?
Agence McMillan : jeu vidéo façon 8-bit pour former les nouveaux stagiaires - * Voir le site eboy.com, artistes pixel art 91
8/play again
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
Conception : philipperondepierre.com - Photo : Nintendo
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… ).
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
Les réseaux
« institutionnels »
Conception : philipperondepierre.com - Illustration : Facebook
ont perdu de Facebook face à la désertifi-

cation de son news feed
leur sex-appeal !
Enquête sur l’algo le plus

flippant de Facebook
500 millions par jour :

Whatsapp brasserait plus
de photos que Facebook,
Snapchat et Instagram !
Les vidéos Facebook plus

performantes que YouTube
Sources : Libération - Rue89 - Wikipédia - Siècle Digital 94

9/tribu
Explorez le monde à travers les yeux des autres sur votre smartphone… et vice versa / Periscope
Conception : philipperondepierre.com - Photo : periscope.tv
Periscope / Facebook,
la guerre du direct !
Adopté par les jeunes,

Periscope se veut un espace
de liberté. Vraiment ?*
* Le Parisien : « Suicide sur Periscope : Océane, la mort en direct » 95

9/tribu
Rival de WhatsApp et de Messenger, Telegram surprotège vos messages* / Telegram
Conception : philipperondepierre.com - Photo : telegram.org
Pour vivre heureux,

vivons cachés ?
Vif succès auprès des élites,

des politiques, mais aussi des
malfrats de tous genres…**
* Wikipédia : le chat secret Telegram atteindrait le niveau de « confidentialité persistante » - ** Le Figaro : « Telegram, une application sulfureuse… » 96
9/tribu
Snapchat boloss ? Tribe : Vine, Snapchat ou Periscope à la sauce Skype…* / Tribe
Conception : philipperondepierre.com - Photo : tribe.pm
Les jeunes zappent les apps :

Vine, Layout, Bolt, Tricy…
1,8 Md de photos par jour.*

En tête : Snapchat, Whatsapp,
Facebook , Instagram
* iphon.fr : « App de messagerie Tribe : les créateurs Français, désormais à San Francisco » 97
9/tribu
Canary, Gossip, Impulses, Whisper, Yik Yak… Exprimez-vous anonymement* / Yik Yak
Conception : philipperondepierre.com - Photo : yikyakapp.com
Yik Yak : rencontrez vos

semblables autour de vous **
Les applications « anonymes »,

une impression de liberté où
tout devient possible ? ***
* influencia.net : « Que valent les apps anonymes ? » - ** lefigaro.fr : Yik Yak - *** lemonde.fr : « Le bluff des apps anonymes et éphémères » 98
9/tribu
Le monde « parfait » selon Instagram. Espace d’expression ou de standardisation ? / Nick & Justin
Conception : philipperondepierre.com - Photo : instagram.com/justinick_pgh
Mettre en scène sa vie pour

passer un message social
Instagram dépasse les

400 millions d’utilisateurs *
* Source : lefigaro.fr - Instagram, acquisition de Facebook depuis avril 2012 99

9/tribu
Concurrencés par les réseaux sociaux, les blogs doivent monter en gamme / Medium
Conception : philipperondepierre.com - Photo : medium.com
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
* Système de gestion de contenu ou de publication - ** Apprendre à utiliser Medium - Flipboard, agrégateur de réseaux sociaux 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, Jacques Lebègue
Le savoir de leurs utilisateurs,

mine d’or des réseaux pros
Présentations, curation,
mooc, le fond et la forme*
* Curation de contenu : sélectionner, éditer et partager des contenus pertinents pour un sujet donné - MOOC : formation en ligne ouverte à tous 101
10/ IoT
Conception : philipperondepierre.com - Photo : Flash-Matic Tuning
internet of things*
hyper connectés
et «omnipotents»…
pour longtemps
* and everything
10/IoT
Réalité augmentée : devenez pilote grâce à votre tablette… / parrot.com
Conception : philipperondepierre.com - Photo : Parrot
Tablette et lunettes FPV*

pour une immersion totale
La réalité augmentée partout :

jeux, simulation 2D et 3D,
sport, transport, shopping,
immobilier, marketing…
Bebop Drone Skycontroller de Parrot - * FPV : pilotage en immersion (First Person View) 103
10/IoT
… ou prenez soin de vos plantes / parrot.com
Conception : philipperondepierre.com - Photo : Parrot
Capteur Flower Power de Parrot 104

10/IoT
Plastique, métal, carton, bois, chocolat… l’impression 3D pour tous ! / glowforge.com
Conception : philipperondepierre.com - Photo : Glowforge
La démocratisation et la
simplification de l’impression
3D passera par le cloud et
les interfaces WYSIWYG*
* WYSIWYG = What you see is what you get (Ce que vous voyez est ce que vous obtenez) - transdigital.fr : « La fabrication additive en images » 105
10/IoT
La domotique pour tout, partout / confort-sauter.com
Conception : philipperondepierre.com - Photo : Sauter
Malao, radiateur connecté de Sauter 106

10/IoT
Dialoguez avec Alexa*, ou la domotique assitée par la voix et l’IA** / Amazon Echo
Conception : philipperondepierre.com - Photo : Amazon
Amazon mettra à disposition

Alexa Voice Service pour les
développeurs tiers
* Prénom d’Amazon Echo, appareil utilisant **l’intelligence artificielle, qui interagit par la voix avec l’utilisateur pour diriger les objets connectés 107
10/IoT
Les montres connectées déjà « old school » ? Ceci est un mobile 4G / LG G Watch Urbane 4G*
Téléphone et emails sans

smartphone.
4G, GPS, Bluetooth, NFC…
servent l’OS propriétaire
Conception : philipperondepierre.com - Photo : LG, Apple
LG Wearable Platform.
La montre de demain ?
Pas encore gagné face à
l’Apple Watch, pourtant Le skeuomorphisme donne
dépendante de l’iPhone. une note d’authenticité
* i-montres.net : « LG G Watch Urbane 4G/LTE, une montre qui peut se passer de smartphone » 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
10/IoT
Pepper pourra lire vos émotions. Avant de vous imposer les siennes ? / aldebaran.com
Conception : philipperondepierre.com - Photo : Aldebaran, Blue Frog Robotics
Reconnaissance, synthèse
vocale, détection et suivi
d’humains, d’objets… Buddy
vous assiste au quotidien…
Buddy, Trusty, Pepper, Nao,

Romeo… bientôt chez vous ?
aldebaran.com - bluefrogrobotics.com - trust.com - clubic.com, Live Japon: Pepper, menteur ? 110

10/IoT
Voiture connectée, laissez l’écran prendre le contrôle / teslamotors.com
Conception : philipperondepierre.com - Photo : Tesla
Tesla a présenté Autopilot

pour la conduite assistée
Skeuomorphisme + flat
servent l’ergonomie, ici vitale
Autopilot : écran affiché sous les yeux du conducteur en mode pilotage automatique sur les Tesla 111
10/IoT
Les consoles chahutées par les mobiles, bientôt dépassées par la réalité virtuelle ? / oculus.com
Conception : philipperondepierre.com - Photo : oculus.com
Oculus Rift, vos sens à 360°.

Une révolution ?
Facebook a embauché en
2014 un des fondateurs de
Second Life. Play again ?
Applications Oculus avec démos : share.oculus.com - 20 minutes : « Facebook rachète Oculus » - Les Numériques : casques RV 112
10/IoT
WebVR* affiche la réalité virtuelle dans votre navigateur web / mozvr.com
Conception : philipperondepierre.com - Photo : Mozilla, A-Frame team, MozVR team
Modélisation 3D, jeux,

science, exploration…
* API expérimentale (Mozilla, Google… ). Affiche la RV dans le navigateur, compatible avec lunettes VR. Soutenue par les navigateurs dès 2016 113
/et après ?
évolution des tendances
2017, 2018, 2019, 2020…
/et après ?
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**…
* 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 115
/et après ?
Microsoft Continuum : bientôt la fin du PC ? / microsoft.com
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.
Démonstration du mode Continuum sur le Lumia 950 avec le Microsoft Display Dock 116
/et après ?
Un design encore plus précis, fonctionnel et facile à mettre en place, avec CSS4
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.
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 117
/et après ?
LG enroule l’écran Oled comme une feuille de papier / usine-digitale.fr
Conception : philipperondepierre.com - Photo : LG
Arrivée des écrans souples

et protéiformes : tablettes,
journaux, domotique, TV,
jouets, tableaux de bords…
118
/et après ?
Rue, commerces, musées, écoles… L’hyper réalité augmentée partout ou presque ! / km.cx
Conception : philipperondepierre.com - Photo : Keiichi Matsuda
Une vision d’artiste colorée

qui montre le potentiel de
la réalité augmentée.
Pokemon GO, déjà le bon
vieux temps ?
119
/et après ?
La conception assistée par ordinateur, intelligente et prédictive
Conception et retouche : philipperondepierre.com - Photo : Folkert Gorter (superfamous.com)
Photoshop, peux-tu effacer Voilà Philippe.

le pylône et les câbles ? 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
* MIT (Massachusetts Institute of Technology), source : clubic.com 120

/et après ?
La réalité virtuelle ou augmentée, « holographique » et en temps réel / magicleap.com
Conception : philipperondepierre.com - Photo : magicleap.com
Le requin holographique qui

« dévore » Marty Mc Fly dans
le film Retour vers le Futur 2,
Visionnez bientôt réalité ?
Google y croit et a investi
la démo sans dans Magic Leap, qui, via un
trucage ! appareil*, explore la réalité
« pseudo-holographique ».
Avec un champ applicatif
impressionnant : éducation,
science, médecine, jeux…
journaldunet.com : « Que fait Magic Leap ? » - * Un appareil léger qui suit les yeux de l’utilisateur… Technologie en cours de développement 121
/et après ?
Une interface dirigée par la pensée, vraiment ? / mindmaze.ch*
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 !
* s2pmag.ch : « Réalité virtuelle, MindMaze ajoute la lecture de pensées » 122

/in
au top !
les tendances
/in
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
Diffuse shadows : les ombres

« naturelles » sont de retour*
* Muzli (medium.com) : « Long shadow is dead. Welcome Diffuse shadows. » 124

/in
Applications wearables, TV et objets connectés
Wearable (vêtements, chaussures, accessoires… ), domotique, transports, objets connectés… / Apple Watch
125
/in
Chatbots* et assistants personnels vocaux (Siri, Cortana, Google Now… )
Interaction vocale, intelligente et prédictive, à votre service, pour tout, partout
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 ?
* Chatbot : agent conversationnel qui dialogue avec l’utilisateur - influencia.net : « Le chatbot ou l’obsolescence de 80% des sites web » 126
/in
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
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…
* Moteur de recherche. Voir aussi, Qwant.com… - Pierre-Yves Gosset de Framasoft : « Dégooglisons internet » 127
/in
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
Taille des appareils en fonction

de leur résolution d’écran
Conception et infographie : philipperondepierre.com - Photo : Apple
2015 1984
 Watch Macintosh
312 x 390 px 512 x 342 px
2007 2014 2015 2014

iPhone iPhone 6 plus MacBook 12“ iMac 5K, 27“ avec écran Retina
320 x 480 px 1920 x 1080 px 2304 x 1440 px 5 120 × 2 880 px
128
/in
Écrans splittés / nightcall Les gros plans / bookofbeards Les panoramas / houseofborel
Double scroll horizontal, vertical, ou en biais Assumez-vous avec le zoom plein écran ! Avec mise en scène de la typographie
Conception : philipperondepierre.com - Photos : voir liens images
Les filtres, la bichromie Les gifographies L’image en mouvement

Le style Instagram et les effets polychromes… Infographies animées en GIF Vidéo, gifs et cinémagraphes*
* Cinémagraphe : entre photo et vidéo, consiste à créer du mouvement dans un élément isolé de l’image 129
/in
Dessin et animation SVG Bluetooth Smart Le paiement mobile (NFC… )
Dessin vectoriel sans perte de qualité iBeacon, Proximity, Eddystone… Android Pay, Apple Pay, Samsung Pay…
SVG
Le partage / NightSwapping Les algorithmes / bl.ocks.org Le cloud

Sites et applications entre particuliers Des data à l’interface web, ils sont partout Attention à la sécurité des données !
130
/out
obsolète…
démodé, daté,
/out
Flat design 2.0 Le foodporn Les selfies old school
Ombres nettes, design et coloris Playskool Gare à l’indigestion ! Invasifs sur les réseaux. Soyez créatifs !
La publicité intrusive Les textos La tyrannie du like

Adblock adopté massivement change la donne La France résiste à Whatsapp. Jusqu’à quand ? Le like tue le partage spontané
SMS
132
/out
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 FLAT DESIGN

iOS 6 Windows Phone
Imiter la réalité Less is more
≠
Conception : philipperondepierre.com - Photo : Apple, Nokia
Représentation réaliste Représentation plate et

d’un élément d’interface graphique sans effet de
graphique par l’objet réel profondeur (ombre, 3D,
qui réalisait la fonction. dégradé… ).
Plus simple à décliner,
Exemple : plus léger, et conceptuel.
pour l’heure on dessine
une véritable horloge Un style optimisé pour
photoréaliste. le web et la mobilité.
133
/out
Holo design Le web non éthique Trop de texte
Antérieur à Material. Utilisé par Android 4.4 Tel est pris qui croyait prendre Penser aux images, pictos ou data design
Les interfaces chargées Flash Le design low cost

Trop de pages, de boutons, de polices… Préférer HTML5 + CSS3 + JavaScript Design agressif, kitsch ou cheap
134
/out
Les illustrations impersonnelles Les photos clichés/creuses Le design glossy
Banques d’images désuètes et vides de sens Banques d’images désuètes et vides de sens Périmé depuis 3 ans (iOS 6 et antérieur)
Les carousels fourre-tout La lightbox Les nuages de mots

Et les sliders sans fin, lourds et inefficaces Et les pop-ins, les pop-ups intrusifs Ultra périmés. Pensez aux tags
135
/out
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…
Conception : philipperondepierre.com - Photo : Topic Simple
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
Compétitions, appels d’offres, concours, collaborations…

Pour une rémunération digne et équitable, affichez le logo*
* Site officiel bientôt en ligne 136

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

/couleurs
Conception : philipperondepierre.com - Photo : gt-cinetype.com, thefader.com, Microsoft
No colors Noir, gris, blanc + couleur(s)* Couleurs basiques

Pour un effet narratif stylisé, ou une définition Élégance, sobriété et professionnalisme. Inspirées par Windows 8 à 10, très corporate.
radicale de « Less is more ». Met les visuels en valeur. Efficace avec un style institutionnel.
* Ou or. 139
/couleurs
Conception : philipperondepierre.com - Photo : Vine, pointlesscorp.com, iStock
Tons vifs vieillis / Flat design Rétro, teintes « sépia » Rustique : ocres, kakis…
Apporte de la consistance au flat. Doublement daté. Risqué ! Les couleurs varient selon les écrans.
Renouvelé par l’influence de Material design. À mixer avec palettes flat et Material. Votre beau vert kaki peut virer caca d’oie.
140
/quelques liens…
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
141
/article: alsacréations
+
142
/clic !
Apple,
Branding
STORY
Dé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.

Tendanceswebdesign 151012015325 Lva1 App6892 PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tendanceswebdesign 151012015325 Lva1 App6892 PDF

Загружено:

Авторское право:

Доступные форматы

webdesign

3/UX first 4/s-data

Les GAFA pèsent plus de

Tendances initiales Captation des tendances

Parallaxe Modern UI (Metro)

1900 2007 / 2010** 2016

Android est présent sur plus d’un milliard d’appareils

Android Téléphone Tablette Android TV Android

* android.com : Android 6 Marshmallow - Material Design for Android 7

iOS marque de son empreinte toutes les interfaces Apple :

L’interaction par la voix arrive

CarpPlay - iOS 10 - macOS - tvOS - watchOS - Apple Branding Story (SlideShare) 8

Windows 10 se décline sur tous types d’appareils et via le cloud.

Le News Feed est imité par

* Source : Le Monde Économie - ** parlonsgeek.com 10

Un design efficace, imité par

Types de grilles : pin-style*,

Material motion fait la part

Design semi flat avec effets

Les différents styles

1 : iOS 10 (Music) - 2 : Android 6 (utilise Material design) - 3 : Windows Phone 10 14

Burger icon et menu caché

Slider plein écran, pour une

Monopage sans scroll,

Créer une connexion

* ergophile.com : le design émotionnel au sein de vos interfaces 19

Google gère vos pictos

Typographie et grilles Data design Flat design

* Modern UI, nouveau nom de l’interface Metro 22

Web design liquide,

* Alsacreations.com : « C’est quoi le Responsive Web Design ? » 24

Oui Cas spécifiques*

Responsive web design*

Applications pour ordinateurs (mac, PC)*

Applications mobiles (Android, iOS, Windows Phone… )*

TV connectée Ordinateur Tablet PC Tablette Smartphone Wearable Auto Domotique

Et la programmation ? L’éclairage d’Hernan Menajovsky, Chef de Projet Web

Des outils en pleine mutation !

Les produits connectés, nouveaux relais de croissance ?

TV connectée Ordinateur Tablet PC Tablette Smartphone Wearable Auto Domotique

clubic.com : « Les ventes de PC au plus bas depuis 2008 » 28

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.

* Communication sur le lieu de vente 29

1. L’apparence du site et son ergonomie

3. Les performances, l’efficacité

Stephen Demange, Aquinum : « C’est quoi l’UX ? » (SlideShare) 32

Tout d’abord, s’engager pour donner du sens

Valeurs du site et de l’utilisateur

Communiquer ses valeurs UX : expérience utilisateur

Wireframe : maquette fonctionnelle 34

Atomes Molécule Organisme Template (wireframe) Template

TITRE TITRE TITRE

L’atomic design est une méthode qui consiste à

Le choix du type de menu

* Navigation principale fixée en haut de l’écran 37

Remplissage Texte pensé pour le web

modifié. Il a été popularisé dans les années

Icône*, fonctions natives,

Periscope Elevate Curator Storehouse UP Coffee

Voir quelques animations Morphing

Deutéranopie Protanopie Tritanopie

Le footer est le socle de la