/webdesigntendances 20/6…
passé:présent:futur
Philippe Rondepierre
_
(màj:03-16)
Tendances Web Design 2016
© Tous droits r...
Conception:philipperondepierre.com
“La mode s’évapore,
la tendance s’érode...
Seul le style reste.
Contacter
Philippe Rond...
/
/6
10 tendances
web design 20/6…
Conception:philipperondepierre.com-TendancesWebDesign2016
1/GAFAM design 2/360°
3/UX fi...
1/GAFAM
GAFAM design
Google, Apple, Facebook,
Amazon, Microsoft
and followers…
Conception:philipperondepierre.com
1/GAFAM design
Conceptionetinfographie:philipperondepierre.com
* GAFAM : Google, Apple, Facebook, Amazon + Microsoft - Fol...
Captation des tendances
Android
Data design
Flat design
Gamification
iOS
Instagram
Material design
Modern UI (Metro)
Paral...
1/GAFAM design
Android
Wear
Téléphone Tablette Android TV Android
Auto
Android est présent sur plus d’un milliard d’appare...
1/GAFAM design
Conception:philipperondepierre.com-Photo:Apple,mcleanmobile.com
iOS 9 marque de son empreinte toutes les in...
1/GAFAM design
Conception:philipperondepierre.com-Photo:Microsoft
Windows 10 se décline sur tous types d’appareils et via ...
1/GAFAM: social
Conception:philipperondepierre.com-Photo:Facebook
* Source : Le Monde Économie - ** parlonsgeek.com
Facebo...
1/GAFAM: dynamic grid
Conception:philipperondepierre.com-Photo:Amazon
Dynamic grid : grille dynamique, les pages vues par ...
1/GAFAM: dynamic grid
Conception:philipperondepierre.com-Photo:Google
* Pin-style : vignettes façon Pinterest (card design...
1/GAFAM: flat 2.0
Conception:philipperondepierre.com-Photo:Google
Material Design (Google) : charte de design qui s’appliq...
1/GAFAM: flat 2.0
Conception:philipperondepierre.com-Photo:Google,Microsoft,Apple
iOS 9 (Wallet) - 2 : Android 6 (utilise ...
1/GAFAM: minimal
Conception:philipperondepierre.com-Photo:Apple
« Less is more », symbole de modernité. Tout se joue dans ...
1/GAFAM: image+typo
Conception:philipperondepierre.com-Photo:Google
Images et vidéos en plein écran + mise en scène de la ...
1/GAFAM: monopage
Conception:philipperondepierre.com-Photo:amazon.com
Gamme, produit, descriptif, utilisation, avis, recom...
Conception:philipperondepierre.com-Photo:Apple
* ergophile.com : le design émotionnel au sein de vos interfaces
Navigation...
1/GAFAM: pictos
Conception:philipperondepierre.com-Photo:Google
Voir aussi : Font Awesome (polices d’icônes), designscraze...
1/GAFAM: icônes
Conception:philipperondepierre.com-Photo:Apple,Google,Microsoft
1. iOS 9 - 2. Windows 10 - 3. apple.com - ...
Modern UI (Metro design)*
Néoplasticisme (Mondrian, Composition II)
Data design
1res interfaces graphiques (Xerox Star)
Ty...
Conception:philipperondepierre.com-Photo:AntonyYang
2/360°post-responsive design
supports, médias,
technologies et usages
...
* Alsacreations.com : « C’est quoi le Responsive Web Design ? »
2/360°
23
Responsive web design : un modèle obsolète ? / s...
* Wearable technology : technologie portable (vêtements, accessoires, bijoux, lunettes, montres connectées… )
Explosion de...
Une multitude d’appareils, de formats et d’interfaces
2/360°
TV connectée
/ Console
Si navigateur
SmartphoneTablet PC
hybr...
Conception:philipperondepierre.com
26
2/360°
* Partie visible par les utilisateurs - ** Arrière plan - mobizel.com : « Web...
Après une croissance dopée par les appareils mobiles, la high-tech doit se renouveler
2/360°
TV connectée SmartphoneTablet...
* Communication sur le lieu de vente
Le web design s’inscrit dans une approche globale
Concept, design, communication, bra...
Responsive web design et applications : quelques outils
AngularJS
Framework* JavaScript libre et open-source développé par...
3/UX first
expérience utilisateur
l’efficience
d’abord
Conceptionetillustration:philipperondepierre.com
ANALYTIQUE
EXTÉRIE...
3/UX first
1.	 L’apparence du site et son ergonomie
	 Cohérence, placement des éléments…
2.	 La capacité à rassurer, la cr...
3/UX first
Conception:philipperondepierre.com
journaldunet.com : « UX designer, ergonome, architecte de l’information, des...
tendances web design
3/UX first: concept
Conception:philipperondepierre.com
Wireframe : maquette fonctionnelle
Le design e...
3/UX first: atomic
Conceptionetinfographie:philipperondepierre.com
Oubliez les pages ! Construisez à partir d’atomes et de...
3/UX first: menu
Conception:philipperondepierre.com:Photo:Libération
* Navigation principale fixée en haut de l’écran
Menu...
3/UX first: wording
Conception:philipperondepierre.com
* Concepteur rédacteur web - CCM : « Référencement naturel (SEO) - ...
3/UX first: app first!
App first! Une expérience unique entre la marque et l’utilisateur / pagesjaunes.fr
Conception:phili...
3/UX first: 360°
Toutes les applications et supports sur arte.tv - * Extrapolation. Arte, bientôt une application wearable...
philipperondepierre.com
* Motion UI / motion design : univers graphique en mouvement, par addition à la typo, images, vidé...
Accessibilité pour tous. Ex. : daltonisme, l’attention portée aux couleurs et aux contrastes
Conceptionetinfographie:phili...
3/UX first: footer
Conception:philipperondepierre.com:Photo:lecoqsportif.com
Des pieds de page clairs et fonctionnels / le...
3/UX first: design
Conception:philipperondepierre.com:Photo:BohemianCoding
Marre de Photoshop ? Sketch* est spécialisé dan...
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...
Conception:philipperondepierre.com-Photo:FutureMag,Arte
* Datamining : extraction de connaissances à partir de données (al...
4/s-data
Conception:philipperondepierre.com-Photo:gymwatch.com
Votre coach mobile virtuel vous conseille via le data desig...
4/s-data
Conception:philipperondepierre.com-Photoapplication:Apple
Visualisez, gérez et partagez vos données personnelles ...
4/s-data
Conception:philipperondepierre.com-Photo:liberation.fr
Une profession d’avenir, le datajournaliste
Data design : ...
4/s-data
Conception:philipperondepierre.com-Infographiesetphotos:voirliens
1. David McCandless - 2, 4, 6. Peter Ørntoft - ...
David McCandless : « Information is beautifull » - Atelier Iceberg : « Visualisation d’informations » (SlideShare)
4/s-dat...
4/s-data
Conception:philipperondepierre.com-Infographie:JingZhang
Style semi figuratif, typo ou graphique pour les infogra...
5/print 3.0
de Gutenberg à Google
maquette, typo, style…
le print réinventé
Conception:philipperondepierre.com-Photo:Willi...
5/print 3.0
Conception:philipperondepierre.com-Photo:simplygum.com
Un site, une seule police de caractère / simplygum.com
...
5/print 3.0
Conception:philipperondepierre.com-Photo:linkedin.com/pulse,PhilippeRondepierre
Retour de l’écrit et de la typ...
philipperondepierre.com-Photo:Gucci
5/print 3.0
Police script mise en scène sur de grands visuels + sans serif minimal / G...
5/print 3.0
Conception:philipperondepierre.com-Photo:AlexPalazzi
graphicstyle.fr : « Le Hand Lettering : retour aux source...
5/print 3.0
Conception:philipperondepierre.com-Photo:hotelmoscow.info,studiokraftwerk.com
56
Serif, sans, graphique, géomé...
5/print 3.0
Conception:philipperondepierre.com-Photo:nytimes.com
Page non responsive. Sur
smartphone, on est redirigé
vers...
5/print 3.0
Conception:philipperondepierre.com-Photo:liberation.fr
* Un air de famille avec le site d’info « pure player »...
philipperondepierre.com-©LeMonde
5/print 3.0
Alternative à la liseuse, la tablette est privilégiée par la presse et les mé...
philipperondepierre.com-Photo:SooonbyFotolia
jonathan-menet.fr : « SOOON : un guide sur le design du futur présenté entre ...
Conception:philipperondepierre.com
5/print 3.0
7.	FFDIN
	 Tendances web design
	 La mode s’évapore, la tendance s’érode......
Conception:philipperondepierre.com-Photo:lineto.com
5/print 3.0
Titres ou paragraphes, choisissez des polices signées par ...
5/print 3.0
Conception:philipperondepierre.com-Photos:voirlien
Polices sélectionnées à titre d’exemple graphique. Vérifiez...
Conceptionetillustration:philipperondepierre.com-Photoespace:public
6/explore!
immersion totale
préparez-vous
à vivre de n...
6/explore!
Conceptionetinfographie:philipperondepierre.com
* ergophile.com : le design émotionnel ** Mouvements dans l’int...
6/explore!
Conception:philipperondepierre.com-Photo:jviewz.com
Une interface innovante pour une expérience sensorielle imm...
6/explore!
Conception:philipperondepierre.com-Photo:Porsche
67
Animations 3D au scroll et
site monopage
Immersion, interac...
6/explore!
Conception:philipperondepierre.com-Photo:silenza.it
Choisissez votre scénario et jouez avec les acteurs du film...
6/explore!
Conception:philipperondepierre.com-Photo:ffmark.com
Des effets bluffants ? Juste
des CSS et du JavaScript…
Conj...
6/explore!
Conception:philipperondepierre.com-Photo:99homesmovie.com
Images, scénario, transitions, ambiance… Plongez à fo...
6/explore!
Conception:philipperondepierre.com-Photo:ValentinMarmonier
Design novateur, animations 3D futuristes, style mét...
6/explore!
Conception:philipperondepierre.com-Photo:fiveminutes.gs
Âmes sensibles s’abstenir. Vous voilà au cœur de l’acti...
Conception:philipperondepierre.com-Photo:TTMM
Nul besoin de texte, les pictos
sont internationaux
Expérience utilisateur i...
6/explore!
Conception:philipperondepierre.com-Photo:species-in-pieces.com
Morphing et animations vectorielles, tout en cod...
7/artiste
retour vers l’inspiration
pop, kitsch, glitch, typo,
urbain, electro, vintage,
bauhaus, rock, surréel,
techno, c...
7/artiste
Conception:philipperondepierre.com-Photo:putput.dk
Rétro pop minimal, un style décalé, esthétisant et sucré / pu...
7/artiste
Conception:philipperondepierre.com-Photo:mocastepandrepeat.tumblr.com
Scroll en biais, déstructuré, typo minimal...
7/artiste
Conception:philipperondepierre.com-Photo:kotelett.info
Happening vidéo « subliminal » et hypnotique / kotelett.i...
7/artiste
Conception:philipperondepierre.com-Photo:garbett.com.au
Géométrique, coloré, impactant, graphique / garbett.com....
7/artiste
Conception:philipperondepierre.com-Photo:animade.tv/frankensim
Interface revisitée, vintage, créative et ludique...
7/artiste
Typographie ou illustration ? Les deux bien évidemment / obsedo.com
Conceptionetillustration:philipperondepierre...
7/artiste
Conception:philipperondepierre.com-Photo:weareroyale.com
Des animations kitsch et surprenantes, limite surréalis...
Conception:philipperondepierre.com-Photo:loisjeans.com
Glitch, opacité, couleurs, flou,
vidéos, typo servent le récit
Coul...
Calendrier de l’avent
keepearthquakesweird.com
Flat food
bigapplehotdogs.com
L’illustration… loufoque ?
legworkstudio.com
...
Conception:philipperondepierre.com
7/artistes inspirés
>>> Galeries et sites pour inspirer vos créations <<<
Pinterest
Rés...
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 / Apec
8/play again
Conception:philipperondepier...
Jeu véritable ou simple emprunt des codes graphiques ludiques / dairygivesyougo.co.za
8/play again: data
Conception:philip...
8/play again: ego
Conception:philipperondepierre.com-Photo:McMillan
* ergophile. com : « Le design émotionnel au sein de v...
Ingress (Google), jeu mobile en réalité augmentée. Toujours plus immersif / ingress.com
8/play again: app first!
Conceptio...
Animations et interactions en 3D dynamique / Spacelamb
8/play again: 3D
Conception:philipperondepierre.com-Photo:spacelamb...
Le retrogaming a encore quelques adeptes / arcade.mcmillan.com
8/play again: retro
Conception:philipperondepierre.com-Phot...
Serious game et gamification : choisissez votre playground !
Newsgame
Jeu qui véhicule un message informatif.
Advergame
Je...
Conceptionetillustration:philipperondepierre.com
@
#
;)
9/tribu
tribu vs social
la tribu face
aux réseaux sociaux
mainstre...
Les réseaux de niche moins exposés et consensuels, complémentaires de Facebook et Twitter
9/tribu
Conception:philipperonde...
Canary, Ether, Gossip, Impulses, Truth, Whisper, Yik Yak… Exprimez-vous anonymement* / Yik Yak
9/tribu
Conception:philippe...
Snapchat boloss ? Apps éphémères, partagez une mosaïque photos, textes, emoji / Pleek
9/tribu
Conception:philipperondepier...
Le monde « parfait » selon Instagram. Espace d’expression ou de standardisation ? / Nick & Justin
9/tribu
Conception:phili...
Concurrencés par les réseaux sociaux, les blogs doivent monter en gamme / medium.com
9/tribu
Conception:philipperondepierr...
LinkedIn, Scoop.it, SlideShare, Viadeo, Xing… Réseaux pros, tous experts ! / Jacques Lebègue, scoop.it
9/tribu
Conception:...
10/IoT
internet ofthings*
hyper connectés
et «omnipotents»…
pour longtemps
* and everything
Conception:philipperondepierre...
Réalité augmentée : devenez pilote grâce à votre tablette… / parrot.com
10/IoT
Conception:philipperondepierre.com-Photo:Pa...
… ou prenez soin de vos plantes / parrot.com
10/IoT
Conception:philipperondepierre.com-Photo:Parrot
Capteur Flower Power d...
* WYSIWYG = What you see is what you get (Ce que vous voyez est ce que vous obtenez) - David Zagni : L’impression 3D (Slid...
La domotique pour tout, partout / confort-sauter.com
10/IoT
Conception:philipperondepierre.com-Photo:Sauter
Malao, radiate...
* Prénom d’Amazon Echo, appareil utilisant **l’intelligence artificielle, qui interagit par la voix avec l’utilisateur pou...
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...
10/IoT
Conception:philipperondepierre.com-Photo:Apple
Programmes, jeux, web, applications, voix… la TV connectée toujours ...
Pepper pourra lire vos émotions. Avant de vous imposer les siennes ? / aldebaran.com
10/IoT
		 aldebaran.com - bluefrogrob...
10/IoT
		 Applications Oculus avec démos : share.oculus.com - 20 minutes : « Facebook rachète Oculus » - Les Numériques : ...
Conception:philipperondepierre.com
/et après?
évolution des tendances
2016, 2017, 2018, 2019…
/et après?
Conception:philipperondepierre.com
Des cycles liés aux avancées technologiques
La fonction première du design e...
/et après?
Démonstration du mode Continuum sur le Lumia 950 avec le Microsoft Display Dock
Conception:philipperondepierre....
/et après?
Conception:philipperondepierre.com-Photo:LG
LG enroule l’écran Oled comme une feuille de papier / usine-digital...
/et après?
Autopilot : écran affiché sous les yeux du conducteur en mode pilotage automatique sur les Tesla
Conception:phi...
/et après?
Conceptionetretouche:philipperondepierre.com-Photo:FolkertGorter(superfamous.com)
116
La conception assistée pa...
La réalité virtuelle ou augmentée, « holographique » et en temps réel / magicleap.com
/et après?
journaldunet.com : « Que ...
Une interface dirigée par la pensée, vraiment ? / mindmaze.ch*
/et après?
* s2pmag.ch : « Réalité virtuelle, MindMaze ajou...
/in
les tendances
au top !
Conception:philipperondepierre.com
* Muzli (medium.com) : « Long shadow is dead. Welcome Diffuse shadows. »
Le semi flat « photoréaliste »
Le flat influencé ...
Applications wearables, TV et objets connectés
Wearable (vêtements, chaussures, accessoires… ), domotique, transports, obj...
* Moteur de recherche. Voir aussi, Qwant.com… - Pierre-Yves Gosset de Framasoft : « Dégooglisons internet »
Le web éthique...
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 inter...
Écrans splittés / Samsung
Double scroll horizontal, vertical, ou en biais
Les panoramas / houseofborel
Avec mise en scène ...
Le paiement mobile (NFC… )
Android Pay, Apple Pay, Samsung Pay…
Conception:philipperondepierre.com-Photos:voirliensimages
...
/out
démodé, daté
ou obsolète
Conception:philipperondepierre.com
Flat design 2.0
Ombres nettes, design et coloris Playskool
Les selfies old school
Invasifs sur les réseaux. Soyez créatifs...
Le skeuomorphisme daté
Initiée par Microsoft en 2010, l’interface flat a « ringardisé » le photoréalime d’iOS, avant d’évo...
Les interfaces chargées
Trop de pages, de boutons, de polices…
Conception:philipperondepierre.com-Photos:voirliensimages
T...
La lightbox
Et les pop-ins, les pop-ups intrusifs
Les carousels fourre-tout
Et les sliders sans fin, lourds et inefficaces...
* Site officiel bientôt en ligne
Le Perverted Crowdsourcing (web non éthique)
Travail spéculatif
Plateformes web basées su...
/couleurs
choisissez
vos gammes!
Conception:philipperondepierre.com
Conception:philipperondepierre.com-Photo:Apple,Google,Vine
/couleurs
Couleurs électriques / Material
Gamme Material design...
Conception:philipperondepierre.com-Photo:Microsoft,thefader.com,TabacInfoService
/couleurs
Couleurs franches
Inspirées par...
Conception:philipperondepierre.com-Photo:gt-cinetype.com,pointlesscorp.com,mashable.com
/couleurs
Rétro, teintes « sépia »...
Daltonisme : pattern UI, vision des couleurs et daltonisme / blog.octo.com
Data : bienvenue dans l’ère du Smart Data ! / j...
/article: alsacréations
Conception:philipperondepierre.com
137
+
/clic !
Apple,
Branding
STORYDécryptage : branding, communication,
marketing, design, influences, historique…
Philippe Ron...
/merci!
Philippe Rondepierre
Directeur Artistique
360° : branding, design,
print, web, in-store…
philipperondepierre.com •...
Prochain SlideShare
Chargement dans…5
×

Tendances Web Design 2016, et après…

243 313 vues
289 454 vues

Publié le

La mode s'évapore, la tendance s'érode… Seul le style reste.
Je vous présente les évolutions graphiques et digitales. Un point sur les tendances webdesign et autour du web. Une étude pour y voir plus clair.
Bonus : un guide des couleurs se trouve à la fin du document !

[Dernière mise à jour : 18 mars 2016]

Article Tendances Web Design 2016 rédigé pour Alsacréations :
http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html

Article de Frenchweb :
http://www.frenchweb.fr/web-design-quelles-seront-les-grandes-tendances-en-2016/221440

Présentation antérieure : Tendances Web Design 2015
http://fr.slideshare.net/philipperondepierre37/web-designtendances2015-38916551

Autre présentation : Apple, Branding Story
http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage

Philippe Rondepierrre - Directeur Artistique
http://philipperondepierre.com

Publié dans : Design
6 commentaires
146 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
243 313
Sur SlideShare
0
Issues des intégrations
0
Intégrations
62 065
Actions
Partages
0
Téléchargements
932
Commentaires
6
J’aime
146
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Tendances Web Design 2016, et après…

  1. 1. /webdesigntendances 20/6… passé:présent:futur Philippe Rondepierre _ (màj:03-16) Tendances Web Design 2016 © Tous droits réservés
  2. 2. Conception:philipperondepierre.com “La mode s’évapore, la tendance s’érode... Seul le style reste. Contacter Philippe Rondepierre Étude précédente Tendances Web Design 2015 Article tendances 2016 sur alsacreations.com
  3. 3. / /6 10 tendances web design 20/6… Conception:philipperondepierre.com-TendancesWebDesign2016 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
  4. 4. 1/GAFAM GAFAM design Google, Apple, Facebook, Amazon, Microsoft and followers… Conception:philipperondepierre.com
  5. 5. 1/GAFAM design Conceptionetinfographie:philipperondepierre.com * GAFAM : Google, Apple, Facebook, Amazon + Microsoft - Followers : satellites des GAFA (souvent localisés 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 ?
  6. 6. 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… Conceptionetinfographie:philipperondepierre.com * LeMonde.fr : Les « GAFAnomics », qu’est-ce que c’est ? - ** L’arrivée de l’iPhone (iOS) et de Windows Phone (Metro) ont accentué les faits 1900 Périodes 2007 / 2010** 2016 6
  7. 7. 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 !* 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
  8. 8. 1/GAFAM design Conception:philipperondepierre.com-Photo:Apple,mcleanmobile.com iOS 9 marque de son empreinte toutes les interfaces Apple : OS X El Capitan, tvOS, WatchOS 2, CarPlay. Renforcé par l’iPad pro. Côté wearables, WatchOS inspire la concurrence (Tizen… ). CarpPlay - OS X El Capitan - iOS 9 - tvOS - WatchOS 2 - Application en illustration : Listastic - Apple Branding Story (SlideShare) Apple : des interfaces toujours plus orientées vers la mobilité / apple.com 8
  9. 9. 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… 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
  10. 10. 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
  11. 11. 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
  12. 12. 1/GAFAM: dynamic grid Conception:philipperondepierre.com-Photo:Google * 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…
  13. 13. 1/GAFAM: flat 2.0 Conception:philipperondepierre.com-Photo:Google Material Design (Google) : charte de design qui s’applique à l’interface graphique et fonctionnelle des logiciels et applications web 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 ? 13
  14. 14. 1/GAFAM: flat 2.0 Conception:philipperondepierre.com-Photo:Google,Microsoft,Apple iOS 9 (Wallet) - 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
  15. 15. 1/GAFAM: minimal Conception:philipperondepierre.com-Photo:Apple « Less is more », symbole de modernité. Tout se joue dans la composition / apple.com 15
  16. 16. 1/GAFAM: image+typo Conception:philipperondepierre.com-Photo:Google Images et vidéos en plein écran + mise en scène de la typo / Google Maps Burger icon et menu caché issus du mobile 16 Slider plein écran, pour une navigation 100% visuelle
  17. 17. 1/GAFAM: monopage Conception:philipperondepierre.com-Photo:amazon.com Gamme, produit, descriptif, utilisation, avis, recommandations, achat… sur une page / amazon.fr Le monopage hérité du tactile, facilite la navigation 17
  18. 18. Conception:philipperondepierre.com-Photo:Apple * ergophile.com : le design émotionnel au sein de vos interfaces Navigation intuitive et transitions fluides 18 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
  19. 19. 1/GAFAM: pictos Conception:philipperondepierre.com-Photo:Google 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 ? 19
  20. 20. 1/GAFAM: icônes Conception:philipperondepierre.com-Photo:Apple,Google,Microsoft 1. iOS 9 - 2. Windows 10 - 3. apple.com - 4. OS X, El Capitan - 5. 6. Material design - * Apple et Android (Material design). Skeuomorphisme, voir p. 128 Pictos et icônes flat ou semi flat, outline, avec quelques reliquats du skeuomorphisme* 1 4 3 6 20 2 5
  21. 21. 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 21
  22. 22. Conception:philipperondepierre.com-Photo:AntonyYang 2/360°post-responsive design supports, médias, technologies et usages tous azimuts
  23. 23. * Alsacreations.com : « C’est quoi le Responsive Web Design ? » 2/360° 23 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
  24. 24. * Wearable technology : technologie portable (vêtements, accessoires, bijoux, lunettes, montres connectées… ) Explosion des écrans : auto, domotique, ordinateur, hybride, smartphone, tablette, TV, wearable*… Conceptionetillustration:philipperondepierre.com 2/360° 24 10:24
  25. 25. Une multitude d’appareils, de formats et d’interfaces 2/360° TV connectée / Console Si navigateur SmartphoneTablet PC hybride Si compatible AutoOrdinateur WearableTablette 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. Conceptionetinfographie:philipperondepierre.com 25 Oui Cas spécifiques* 10:24
  26. 26. Conception:philipperondepierre.com 26 2/360° * Partie visible par les utilisateurs - ** Arrière plan - mobizel.com : « WebApp, application hybride, native… quelle est la différence ? » 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 (back-end**), 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 (front-end), des frameworks JavaScript comme AngularJS optimisent les développements. Pour les mobiles, les technologies HTML5 suffisent à créer aussi bien des sites responsive, des sites mobiles (URL mobile) que des webapps simples (HTML5 encapsulé). Mais les applications mobiles livrées sur les stores, sont elles réalisées avec des langages dédiés à un OS (Objective-C pour iOS, Java sur Android, C# sur Windows Phone… ), on parle d’applications natives. Ou, avec des outils multi-OS, comme PhoneGap qui 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… Depuis peu, Apple propose Swift, comme alternative pour iOS, watchOS, tvOS, OS X, 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 objets. Et la programmation ? L’éclairage d’Hernan Menajovsky, Chef de Projet Web Hernan Menajovsky IT Digital Project Manager, grands comptes
  27. 27. 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 WearableTablette Domotique (appareils) clubic.com : « Les ventes de PC au plus bas depuis 2008 » Conceptionetinfographie:philipperondepierre.com Les produits connectés, nouveaux relais de croissance ? Les ordinateurs voient leur lente érosion s’infléchir, 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 ? 27 10:24
  28. 28. * 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° Conceptionetillustration:philipperondepierre.com 28 10:24
  29. 29. 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. 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é). WordPress CMS** populaire utilisé comme moteur de blog ou la gestion de sites. Foundation Framework pour sites responsive, applications, e-mails… 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 29
  30. 30. 3/UX first expérience utilisateur l’efficience d’abord Conceptionetillustration:philipperondepierre.com ANALYTIQUE EXTÉRIEUR PARTENAIRES MESURE STRATÉGIE INTÉRIEUR PRÉSENT UTILI- SATEUR COMMUNI- CATION LIENS AFFAIRES ENSEMBLE AVENIR ENCADREMENT ÉQUIPE COMPROMIS
  31. 31. 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 Conceptionetillustration:philipperondepierre.com Stephen Demange, Aquinum : « C’est quoi l’UX ? » (SlideShare) U X 31
  32. 32. 3/UX first Conception:philipperondepierre.com 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 32
  33. 33. tendances web design 3/UX first: concept Conception:philipperondepierre.com 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 33
  34. 34. 3/UX first: atomic Conceptionetinfographie:philipperondepierre.com Oubliez les pages ! Construisez à partir d’atomes et de molécules, façon apps / bradfrost.com 34 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.
  35. 35. 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 35
  36. 36. 3/UX first: wording Conception:philipperondepierre.com * 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 36 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.
  37. 37. 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 37 Icône*, fonctions natives, offline, géolocalisation, push, notifications… App first !
  38. 38. 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 * 38
  39. 39. 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 39 Voir quelques animations Morphing
  40. 40. Accessibilité pour tous. Ex. : daltonisme, l’attention portée aux couleurs et aux contrastes Conceptionetinfographie:philipperondepierre.com 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 40
  41. 41. 3/UX first: footer Conception:philipperondepierre.com:Photo:lecoqsportif.com Des pieds de page clairs et fonctionnels / lecoqsportif.com Sticky menu chronologique + boutons navigation verticale Attention, le footer n’est pas un fourre-tout ! 41 Une interface plus simple ? Oubliez header et footer…
  42. 42. 3/UX first: design Conception:philipperondepierre.com:Photo:BohemianCoding Marre de Photoshop ? Sketch* est spécialisé dans le design de sites et applications / Sketch UI, UX, icônes, design, grilles, interface… * Sur mac uniquement. Voir aussi, Affinity Designer (mac) 42
  43. 43. 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
  44. 44. 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 44
  45. 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 45 L’interaction via la synthèse vocale toujours plus présente
  46. 46. 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 46 UX : les mobiles et wearables tirent profit du data design
  47. 47. 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 47
  48. 48. 4/s-data Conception:philipperondepierre.com-Infographiesetphotos:voirliens 1. David McCandless - 2, 4, 6. Peter Ørntoft - 3. Thomson Reuters Foundation - 5. David McCandless Infographies : design géométrique, dynamique, data motion (animations, typo, pictos, photos… ) 48
  49. 49. 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
  50. 50. 4/s-data Conception:philipperondepierre.com-Infographie:JingZhang Style semi figuratif, typo ou graphique pour les infographies classiques / mazakii.com 50 Cartes et plans, tout est possible ! Ex. : mapbox.com
  51. 51. 5/print 3.0 de Gutenberg à Google maquette, typo, style… le print réinventé Conception:philipperondepierre.com-Photo:WilliamCaslon,WilliHeidelbach,LaCie
  52. 52. 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 52
  53. 53. 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 53 Le web design est avant tout un travail de typographie !
  54. 54. philipperondepierre.com-Photo:Gucci 5/print 3.0 Police script mise en scène sur de grands visuels + sans serif minimal / Gucci Style (app) 54 Duo de polices de styles opposés et complémentaires Des visuels authentiques renforcent l’impact
  55. 55. 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 55 La typo ne met plus l’image en scène. Elle devient l’image Style pop, arty et régressif. Just enjoy!
  56. 56. 5/print 3.0 Conception:philipperondepierre.com-Photo:hotelmoscow.info,studiokraftwerk.com 56 Serif, sans, graphique, géométrique, minimal… La typo d’abord ! / hotelmoscow.info 100% typo, 100% graphique ! studiokraftwerk.com Contrastes de tailles et de graisses marqués
  57. 57. 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
  58. 58. 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 Buzzfed à 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
  59. 59. 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
  60. 60. 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 60 Le retour du papier, aboutissement de l’écran ? Le web cherche à s’ancrer dans le réel, en interagissant avec les supports physiques
  61. 61. Conception:philipperondepierre.com 5/print 3.0 7. FFDIN Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 1. PROXIMA NOVA tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 6. Montserrat Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 4. Droid Serif Tendances Web Design La mode s’évapore, la tendance s’érode... Seul le style reste. 8. OPENsans Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 3. AVENIR Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 5. Helvetica Neue Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 9. LaTo Tendances Web Design La mode s’évapore, la tendance s’érode... Seul le style reste. Quelques « classiques ». De forts contrastes dans les tailles et les graisses 61 ...
  62. 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 62 Avantage des polices sans serifs, rondes, géométriques… Les serifs permettent de s’affirmer (titres… )
  63. 63. 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 63
  64. 64. Conceptionetillustration:philipperondepierre.com-Photoespace:public 6/explore! immersion totale préparez-vous à vivre de nouvelles expériences
  65. 65. 6/explore! Conceptionetinfographie:philipperondepierre.com * ergophile.com : le design émotionnel ** Mouvements dans l’interface Convergence des éléments communicationnels et d’interface. L’immersion pour l’émotion ! 65 UX & UI créatifs et disruptifs Motion UI**, Animation 3D, Micro interactions, Design sonore, Rich Media… Storytelling, Branding… Design émotionnel* Monopage, Responsive, Image 100 % (photo, vidéo… ), Parallaxe… !!! JavaScript
  66. 66. 6/explore! Conception:philipperondepierre.com-Photo:jviewz.com Une interface innovante pour une expérience sensorielle immersive / jviewz.com Design sonore soigné et micro-animations HTML, CSS, JavaScript, sons, graphismes, images, vidéos… sont au service de l’histoire, du concept 66
  67. 67. 6/explore! Conception:philipperondepierre.com-Photo:Porsche 67 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
  68. 68. 6/explore! Conception:philipperondepierre.com-Photo:silenza.it Choisissez votre scénario et jouez avec les acteurs du film / silenza.it 68 Site tout en vidéo + interactivité So chic! Le noir et blanc varie peu selon vos écrans
  69. 69. 6/explore! Conception:philipperondepierre.com-Photo:ffmark.com Des effets bluffants ? Juste des CSS et du JavaScript… Conjugaison d’effets réussie, effet « wouah » garanti ! / ffmark.com 69
  70. 70. 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 70
  71. 71. 6/explore! Conception:philipperondepierre.com-Photo:ValentinMarmonier Design novateur, animations 3D futuristes, style métaphorique / vaalentin.github.io Monopage : un scénario qui se dévoile avec le scroll 71
  72. 72. 6/explore! Conception:philipperondepierre.com-Photo:fiveminutes.gs Âmes sensibles s’abstenir. Vous voilà au cœur de l’action / fiveminutes.gs Influence des jeux PC et du cinéma 72
  73. 73. Conception:philipperondepierre.com-Photo:TTMM Nul besoin de texte, les pictos sont internationaux Expérience utilisateur innovante, pictographique et ludique / ttmm.eu 6/explore! 73
  74. 74. 6/explore! Conception:philipperondepierre.com-Photo:species-in-pieces.com Morphing et animations vectorielles, tout en code ! / species-in-pieces.com 74
  75. 75. 7/artiste retour vers l’inspiration pop, kitsch, glitch, typo, urbain, electro, vintage, bauhaus, rock, surréel, techno, chic, écolo, hype, ethnique, comics… Conceptionetillustration:philipperondepierre.com
  76. 76. 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
  77. 77. 7/artiste Conception:philipperondepierre.com-Photo:mocastepandrepeat.tumblr.com Scroll en biais, déstructuré, typo minimale. Simple et efficace / mocastepandrepeat.tumblr.com Typo black, photos live et effets kitsch. Arty ! 80’sinspiration 77
  78. 78. 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 78
  79. 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 79
  80. 80. 7/artiste Conception:philipperondepierre.com-Photo:animade.tv/frankensim Interface revisitée, vintage, créative et ludique / animade.tv/frankensim 80’sinspiration 80
  81. 81. 7/artiste Typographie ou illustration ? Les deux bien évidemment / obsedo.com Conceptionetillustration:philipperondepierre.com Sites et blogs de graphistes, espaces de créativité 50’sinspiration 81
  82. 82. 7/artiste Conception:philipperondepierre.com-Photo:weareroyale.com Des animations kitsch et surprenantes, limite surréalistes / weareroyale.com 70’sinspiration 82
  83. 83. Conception:philipperondepierre.com-Photo:loisjeans.com Glitch, opacité, couleurs, flou, vidéos, typo servent le récit Couleurs sucrées, parallaxes dans tous les sens, déstructuré… en apparence / loisjeans.com 7/artiste 80’sinspiration 83
  84. 84. Calendrier de l’avent keepearthquakesweird.com Flat food bigapplehotdogs.com L’illustration… loufoque ? legworkstudio.com 100 % code, 100 % développeur strml.net Juste un peu de CSS… designjobsboard.com Conception:philipperondepierre.com-Photo:voirliens 7/artiste Flat, black, big, glitch nordik.org 80’s 90’s 70’s 50’s 80’s 80’s 84
  85. 85. Conception:philipperondepierre.com 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 85
  86. 86. 8/playagain! gamification le jeu se prend toujours plus au sérieux Conception:philipperondepierre.com:Photo:Nintendo
  87. 87. Serious game* : utiliser le jeu pour communiquer une information sérieuse / Apec 8/play again Conception:philipperondepierre.com-Photo:Apec apec.fr : simulateur d’entretien de recrutement Certains sites de jeux en Flash résistent encore un peu sur le web. Remplacés par les applications mobiles, bien plus efficaces. Jeu sérieux ayant une intention de type pédagogique, informative, communicationnelle, marketing, idéologique ou d’entraînement. * 87
  88. 88. 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 » 88 Les GAFAM s’inspirent des designers et studios qui devancent les tendances
  89. 89. 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 89
  90. 90. Ingress (Google), jeu mobile en réalité augmentée. Toujours plus immersif / ingress.com 8/play again: app first! Conception:philipperondepierre.com-Photo:Google * Ingress (Wikipedia) Collecte de données, push, localisation GPS… pub !* Design science fiction issu des jeux et du cinéma 90
  91. 91. Animations et interactions en 3D dynamique / Spacelamb 8/play again: 3D Conception:philipperondepierre.com-Photo:spacelamb.12wave.com * WebGL, site officiel : khronos.org/webgl WebGL* est supporté sur les pages et applications HTML5 91
  92. 92. 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 ? 92
  93. 93. 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 93
  94. 94. Conceptionetillustration:philipperondepierre.com @ # ;) 9/tribu tribu vs social la tribu face aux réseaux sociaux mainstream
  95. 95. Les réseaux de niche moins exposés et consensuels, complémentaires de Facebook et Twitter 9/tribu Conception:philipperondepierre.com-Illustration:Facebook * Source : Wikipédia Les réseaux « institutions » ont perdu de leur sex-appeal 95 500 millions/jour : Whatsapp brasserait plus de photos que Facebook, Snapchat et Instagram !* Les vidéos Facebook plus performantes que YouTube
  96. 96. Canary, Ether, Gossip, Impulses, Truth, Whisper, Yik Yak… Exprimez-vous anonymement* / Yik Yak 9/tribu 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 ** 96
  97. 97. Snapchat boloss ? Apps éphémères, partagez une mosaïque photos, textes, emoji / Pleek 9/tribu Conception:philipperondepierre.com-Photo:Pleek * nouvelobs.com : « Layout, Pleek... La mosaïque, nouvelle tendance photo sur le web » Snapchat, Layout, Vine… les adulescents zappent les apps 1,8 Md de photos par jour.* En tête : Snapchat, Whatsapp, Facebook , Instagram 97
  98. 98. Le monde « parfait » selon Instagram. Espace d’expression ou de standardisation ? / Nick & Justin 9/tribu Conception:philipperondepierre.com-Photo:instagram.com/justinick_pgh * Source : lefigaro.fr Mettre en scène sa vie pour passer un message social Instagram dépasse les 400 millions d’utilisateurs * 98
  99. 99. Concurrencés par les réseaux sociaux, les blogs doivent monter en gamme / medium.com 9/tribu Conception:philipperondepierre.com-Photo:medium.com * Système de gestion de contenu ou de publication - ** Apprendre à utiliser Medium 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 99
  100. 100. LinkedIn, Scoop.it, SlideShare, Viadeo, Xing… Réseaux pros, tous experts ! / Jacques Lebègue, scoop.it 9/tribu 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* 100
  101. 101. 10/IoT internet ofthings* hyper connectés et «omnipotents»… pour longtemps * and everything Conception:philipperondepierre.com-Photo:Flash-MaticTuning
  102. 102. 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… 102
  103. 103. … ou prenez soin de vos plantes / parrot.com 10/IoT Conception:philipperondepierre.com-Photo:Parrot Capteur Flower Power de Parrot 103
  104. 104. * WYSIWYG = What you see is what you get (Ce que vous voyez est ce que vous obtenez) - David Zagni : L’impression 3D (SlideShare) Conception:philipperondepierre.com-Photo:Glowforge Plastique, métal, carton, bois, chocolat… l’impression 3D pour tous ! / glowforge.com 104 La démocratisation et la simplification de l’impression 3D passera par le cloud et les interfaces WYSIWYG* 10/IoT
  105. 105. La domotique pour tout, partout / confort-sauter.com 10/IoT Conception:philipperondepierre.com-Photo:Sauter Malao, radiateur connecté de Sauter 105
  106. 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 106 Amazon mettra à disposition Alexa Voice Service pour les développeurs tiers 10/IoT
  107. 107. 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é 107
  108. 108. 10/IoT Conception:philipperondepierre.com-Photo:Apple 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 ? 108
  109. 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… 109 Buddy, Trusty, Pepper, Nao, Romeo… bientôt chez vous ?
  110. 110. 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° (sortie en 2016) Les consoles chahutées par les mobiles, bientôt dépassées par la réalité virtuelle ? / oculus.com 110 Facebook a embauché en 2014 un des fondateurs de Second Life. Play again ?
  111. 111. Conception:philipperondepierre.com /et après? évolution des tendances 2016, 2017, 2018, 2019…
  112. 112. /et après? Conception:philipperondepierre.com Des cycles liés aux avancées technologiques La fonction première du design est d’améliorer l’expérience que l’on a d’un produit ou d’un service. Le web design n’est pas décoratif, il fait le lien entre les technologies et nous. Les nouveautés seraient plus difficiles d’accès sans l’ergonomie, le style et l’esthétique. Nous sommes animés par l’affect, même face à une machine. Apple ou Google l’ont bien compris, qui placent l’expérience utilisateur au centre de leurs problématiques. Une nouveauté technologique n’est pas garante de succès. Les industriels, eux, sont liés par les contraintes techniques. Mais, si une nouvelle technologie ne prend pas sens pour le public, elle ne sera pas adoptée. Le succès d’un produit 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é et qui vont évoluer. On assiste à une convergence des OS mobiles et PC 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 autour d’iOS. L’annonce le l’iPad pro pourrait servir de test vers un rapprochement d’OS X et iOS, ce qui pourrait demander quelques années. 112
  113. 113. /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 113
  114. 114. /et après? Conception:philipperondepierre.com-Photo:LG LG enroule l’écran Oled comme une feuille de papier / usine-digitale.fr 114 Arrivée des écrans souples et protéiformes : tablettes, journaux, domotique, TV, jouets, tableaux de bords…
  115. 115. /et après? Autopilot : écran affiché sous les yeux du conducteur en mode pilotage automatique sur les Tesla Conception:philipperondepierre.com-Photo:Tesla 115 Tesla présente Autopilot pour la conduite assistée Ergonomie sans concession quand l’UX devient vital Voiture connectée, laissez l’écran prendre le contrôle / teslamotors.com
  116. 116. /et après? Conceptionetretouche:philipperondepierre.com-Photo:FolkertGorter(superfamous.com) 116 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
  117. 117. 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… 117 Visionnez la démo sans trucage !
  118. 118. 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 ! 118
  119. 119. /in les tendances au top ! Conception:philipperondepierre.com
  120. 120. * 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 120 Diffuse shadows : les ombres « naturelles » sont de retour*
  121. 121. Applications wearables, TV et objets connectés Wearable (vêtements, chaussures, accessoires… ), domotique, transports, objets connectés… / Apple Watch Conception:philipperondepierre.com-Photo:Apple /in 121
  122. 122. * 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 122 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…
  123. 123. 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 123
  124. 124. Écrans splittés / Samsung 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 La bichromie / doamaral Les filtres photo et les effets polychromes… Flat 3D et relief / manual Effets de perspective, ombre, matière 124
  125. 125. Le paiement mobile (NFC… ) Android Pay, Apple Pay, Samsung Pay… Conception:philipperondepierre.com-Photos:voirliensimages /in Bluetooth Smart iBeacon, Proximity, Eddystone… Les algorithmes / bl.ocks.org Des data à l’interface web, ils sont partout Le partage, l’échange / blablacar Sites et applications entre particuliers Le cloud Attention à la sécurité des données ! 125 SVG Dessin et animation SVG Dessin vectoriel sans perte de qualité
  126. 126. /out démodé, daté ou obsolète Conception:philipperondepierre.com
  127. 127. 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 ? Conception:philipperondepierre.com-Photos:voirliensimages Holo design Antérieur à Material. Utilisé par Android 4.4 /out 127 SMS La publicité intrusive Adblock adopté massivement change la donne
  128. 128. 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 128
  129. 129. Les interfaces chargées Trop de pages, de boutons, de polices… Conception:philipperondepierre.com-Photos:voirliensimages Trop de texte Penser aux images, pictos ou data design /out Data design complexe Un design trop complexe est contre productif Le web non éthique Tel est pris qui croyait prendre Le design low cost Design agressif, kitsch ou cheap 129 Flash Préférer HTML5 + CSS3 + JavaScript
  130. 130. 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 Conception:philipperondepierre.com-Photos:voirliensimages Les nuages de mots Ultra périmés. Pensez aux tags /out 130
  131. 131. * 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 131 Compétitions, appels d’offres, concours, collaborations… Pour une rémunération digne et équitable, affichez le logo*
  132. 132. /couleurs choisissez vos gammes! Conception:philipperondepierre.com
  133. 133. Conception:philipperondepierre.com-Photo:Apple,Google,Vine /couleurs Couleurs électriques / Material Gamme Material design (Google, juin 2014). Supplante progressivement le flat design. Tons vifs vieillis / Flat design Apporte de la consistance au flat. Renouvelé par l’influence de Material design. Couleurs flash/fluo Présentes dans iOS 9 et Material + blanc et gris. Fraîches et efficaces sur mobiles. 133
  134. 134. Conception:philipperondepierre.com-Photo:Microsoft,thefader.com,TabacInfoService /couleurs Couleurs franches Inspirées par Windows 8 à 10, très corporate. Efficace avec un style institutionnel. Noir, gris, blanc (+ couleur) Élégance, sobriété et professionnalisme. Met les visuels en valeur. Pastels acidulés Efficace avec flat design + blanc et gris Attention aux palettes trop fades ! 134
  135. 135. Conception:philipperondepierre.com-Photo:gt-cinetype.com,pointlesscorp.com,mashable.com /couleurs Rétro, teintes « sépia » Doublement daté. À mixer avec palettes flat et Material. Nature : ocres, kakis… Plombant. Les couleurs varient selon les écrans. Votre beau vert kaki peut virer caca d’oie. No colors Pour un effet narratif stylisé, ou une définition radicale de « Less is more ». 135
  136. 136. 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 Parallaxe websites / awwwards.com Responsive web design : design liquide, responsive ou adaptatif / alsacreations.com Serious game et gamification / serious-game.fr 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… Conception:philipperondepierre.com 136
  137. 137. /article: alsacréations Conception:philipperondepierre.com 137 +
  138. 138. /clic ! Apple, Branding STORYDécryptage : branding, communication, marketing, design, influences, historique… Philippe Rondepierre Conception:philipperondepierre.com 138 +
  139. 139. /merci! Philippe Rondepierre Directeur Artistique 360° : branding, design, print, web, in-store… philipperondepierre.com • LinkedIn • Viadeo • e-mail © Philippe Rondepierre, 2015. 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. Do not reproduce - The images are presented as examples and analysis. All rights reserved by copyright holders.

×