• webdesign tendance s 2o17/18… Philippe Rondepierre _ 09-16 mise à jour Tendances Web Design 2017 - 2018 © Tous droits réservés
  • ”Conception : p h ili p p er o n d ep ie rr e. co m “ 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 http://philipperondepierre.com http://fr.slideshare.net/philipperondepierre37/web-designtendances2015-38916551 http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html
  • /10 tendances web design 2017/18… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - Te n d an ce s W eb D es ig n 2 0 1 6 /2 0 1 7 /2 0 1 8 1/GAFAM design 2/360° 3/UX first 4/s-data 5/print 3.0 6/explore! 7/artiste 8/play again 9/tribu 10/IoT et après ? • in • out • couleurs • contact http://philipperondepierre.com
  • 1/GAFAM GAFAM design Google, Apple, Facebook, Amazon, Microsoft and followers… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • 1/GAFAM design C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m * GAFAM : Google (Alphabet), Apple, Facebook, Amazon, Microsoft - Followers : satellites des GAFA (souvent dans la Silicon Valley) - ** lesechos.fr GAFAM & followers* : le web leur appartient, le web design aussi 5 Les GAFA pèsent plus de 1600 milliards de dollars en bourse !** À qui le tour ? clic ! http://philipperondepierre.com http://www.lesechos.fr/finance-marches/marches-financiers/021224804509-google-apple-facebook-et-amazon-affolent-la-bourse-1139369.php https://twitter.com/ https://www.uber.com/ https://www.flickr.com/ https://www.tumblr.com/ https://www.linkedin.com/ https://snapchat.com/ https://www.netflix.com/ https://www.airbnb.com/ https://www.pinterest.com/ http://www.adobe.com/ https://www.twitch.tv/ https://www.messenger.com/ https://abc.xyz/ https://www.android.com/ http://www.apple.com/ https://www.amazon.com/ https://www.microsoft.com/ https://www.facebook.com/ https://www.youtube.com/ https://www.whatsapp.com/ https://www.oculus.com/ https://www.tesla.com/ https://www.fotolia.com https://evernote.com/ https://www.periscope.tv/ https://www.instagram.com/ https://hangouts.google.com
  • 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… C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m * 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 http://philipperondepierre.com http://www.lemonde.fr/economie/article/2014/11/30/les-gafanomics-qu-est-ce-que-c-est_4531698_3234.html
  • 1/GAFAM design ANDROID WeAR TéLéPhONe TABLeTTe ANDROID TV ANDROID AUTO Android est présent sur plus d’un milliard d’appareils dans le monde : téléphones, tablettes, montres, téléviseurs, voitures… Et ce n’est pas fini !* Il fait la part belle à Google Now son assistant vocal. Android 6.0 Marshmallow : la puissance pour les écrans de toutes tailles, sauf les PC / android.com * android.com : Android 6 Marshmallow - Material Design for Android C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e 7 Android utilise Material design depuis la version 5.0 http://www.android.com/ http://www.android.com/ http://developer.android.com/design/material/index.html http://philipperondepierre.com http://developer.android.com/design/material/index.html
  • 1/GAFAM design C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le iOS marque de son empreinte toutes les interfaces Apple : macOS, tvOS, watchOS, CarPlay. Renforcé par Siri désormais sur macOS. Côté wearables, watchOS inspire la concurrence (Tizen… ). CarpPlay - iOS 10 - macOS - tvOS - watchOS - Apple Branding Story (SlideShare) Apple : des interfaces toujours plus orientées vers la mobilité / apple.com 8 L’interaction par la voix arrive dans les applications mac http://philipperondepierre.com http://www.apple.com/fr/ios/carplay/ http://www.apple.com/fr/ios/ http://www.apple.com/fr/macos http://www.apple.com/fr/accessibility/tvos/ http://www.apple.com/fr/watchos-2/ http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://www.apple.com/fr/ http://www.apple.com/fr/macos
  • 1/GAFAM design C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M ic ro so ft Windows 10 se décline sur tous types d’appareils et via le cloud. Des objets connectés aux ordinateurs… Il utilise Cortana, son assistant vocal. L’interface flat design initiée en 2010 révèle son potentiel. Windows 10 : la cohérence fonctionnelle et graphique à 360° / microsoft.com 9 http://philipperondepierre.com https://www.microsoft.com/fr-fr/windows/features
  • 1/GAFAM: social C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : F ac eb o o k * Source : Le Monde Économie - ** parlonsgeek.com Facebook, le réseau des réseaux, avec 1,5 milliard d’utilisateurs* / facebook.com Le News Feed est imité par la concurrence. Facebook en détient le brevet UX : la rentabilité avant l’expérience utilisateur ? ** 10 http://philipperondepierre.com http://www.lemonde.fr/economie/article/2015/07/30/l-irresistible-ascension-de-facebook_4704684_3234.html http://www.parlonsgeek.com/facebook-nouveau-design-nest-pas-la/ https://www.facebook.com/
  • 1/GAFAM: dynamic grid C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A m az o n 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 http://philipperondepierre.com http://www.petitefabrique.net/qu-est-ce-qu-un-site-dynamique.html http://www.amazon.com/
  • 1/GAFAM: dynamic grid C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e * 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… http://philipperondepierre.com https://design.google.com/
  • 1/GAFAM: flat 2.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e Material Design (Google) : charte de design qui s’applique à l’interface des logiciels et applications web - Material motion : animation de l’interface Plus frais, Material design lancé en juin 2014 a pris l’ascendant sur ses rivaux / Material design Design semi flat avec effets papier, ombres, matières… Animations et typo soignées. Plus « concret » que le flat Après le skeuomorphisme et le flat, Material design, une transition vers un style plus réaliste, animé, 3D en 2018 ? 13 Material motion fait la part belle au formes géométriques et à la fluidité http://philipperondepierre.com https://material.google.com/motion/material-motion.html# https://www.google.com/design/spec/material-design/introduction.html# https://material.google.com/motion/material-motion.html# https://material.google.com/motion/material-motion.html#
  • 1/GAFAM: flat 2.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e, M ic ro so ft , A p p le 1 : iOS 10 (Music) - 2 : Android 6 (utilise Material design) - 3 : Windows Phone 10 Couleurs franches + gris et blanc, importance des icônes et du data design, grilles structurées 14 Les différents styles s’influencent mutuellement http://philipperondepierre.com http://www.apple.com/music/
  • 1/GAFAM: minimal C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le « Less is more », symbole de modernité. Tout se joue dans la composition / apple.com 15 http://philipperondepierre.com http://www.apple.com/mac/
  • 1/GAFAM: geometric C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A b is ko , G o o gl e Geométrique + minimal pour Abisko, app développée avec Material design / design.google.com 16 http://philipperondepierre.com https://design.google.com/articles/expressing-brand-in-material/
  • 1/GAFAM: monopage C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : am az o n .c o m Gamme, produit, descriptif, utilisation, avis, recommandations, achat… sur une page / amazon.fr Monopage + scroll, hérité du tactile 17 http://philipperondepierre.com http://www.amazon.fr/gp/product/B00ZDWLEEG/ref=fs_fire
  • 1/GAFAM: image + typo C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e Images et vidéos en plein écran + mise en scène de la typo / Google Maps Burger icon et menu caché issus du mobile 18 Slider plein écran, pour une navigation 100% visuelle Monopage sans scroll, comme pour une application http://philipperondepierre.com http://www.google.com/maps/about/behind-the-scenes/streetview/treks/miniatur-wunderland/?ref=magazineduwebdesign#america
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le * ergophile.com : le design émotionnel au sein de vos interfaces Navigation intuitive et transitions fluides 19 1/GAFAM: storytelling Créer une connexion émotionnelle* en racontant une histoire Monopage et storytelling, un duo efficace Ne vendez pas un produit, donnez le premier rôle à l’internaute / apple.com http://philipperondepierre.com http://www.ergophile.com/2012/04/21/design-emotionnel-walter-livre/ http://www.apple.com/fr/start-something-new/
  • 1/GAFAM: pictos C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e Voir aussi : Font Awesome (polices d’icônes), designscrazed.org (jeux d’icônes gratuites), Typekit (Adobe, polices de caractères en ligne)… Pictos et polices de caractères en ligne : efficace et rapide / Google, Material design icons Google gère vos pictos Material design et vos polices Google Fonts. L’efficacité contre la dépendance ? 20 http://philipperondepierre.com http://fontawesome.io/ http://designscrazed.org/free-glyph-icons/ https://typekit.com/ https://www.google.com/design/icons/ https://www.google.com/fonts https://www.google.com/fonts https://www.google.com/fonts
  • 1/GAFAM: icônes C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le , G o o gl e, M ic ro so ft 1. iOS - 2. Windows 10 - 3. apple.com - 4. OS X - 5. 6. Material design - * Apple et Android (Material design). Skeuomorphisme, voir p. 133 Pictos et icônes flat ou semi flat, outline, avec quelques remixes du skeuomorphisme* 1 4 3 6 21 2 5 http://philipperondepierre.com
  • 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) C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M o n d ri an , U S N P S, E m il R u d er , X er ox , P au l R an d 1/GAFAM: inspirations… – = + Minimal design Less is More (Bauhaus) * Modern UI, nouveau nom de l’interface Metro 22 https://fr.wikipedia.org/wiki/N%C3%A9oplasticisme https://fr.wikipedia.org/wiki/Style_typographique_international https://fr.wikipedia.org/wiki/Xerox_Star https://fr.wikipedia.org/wiki/Signal%C3%A9tique http://www.iconofgraphics.com/paul-rand/ http://philipperondepierre.com https://fr.wikipedia.org/wiki/Bauhaus http://www.cnetfrance.fr/news/modern-ui-le-nouveau-nom-de-l-interface-metro-de-windows-8-39775123.htm
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A n to ny Y an g 2/360° post-responsive design supports, médias, technologies et usages tous azimuts http://philipperondepierre.com
  • * Alsacreations.com : « C’est quoi le Responsive Web Design ? » 24 Responsive web design : un modèle obsolète ? / skinnyties.com Web design liquide, responsive ou adaptatif* C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : sk in ny ti es .c o m , p ap er -b ac kg ro u n d s. co m 2/360° http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html http://skinnyties.com/ http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html http://philipperondepierre.com
  • * Réalité virtuelle - ** Wearable technology : technologie portable (vêtements, accessoires, bijoux, lunettes, montres connectées… ) explosion des écrans : auto, domotique, PC, hybride, TV, smartphone, tablette, RV*, wearable**… C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m 2/360° 25 10:24 http://philipperondepierre.com
  • Une multitude d’appareils, de formats et d’interfaces 2/360° TV CONNeCTée / CONSOLe Si navigateur SMARTPhONeTABLeT PC hyBRIDe Si compatible AUTOORDINATeUR WeARABLe + RV*** TABLeTTe Windows 10 sur tablette ≥ 8” DOMOTIqUe (APPAReILS) Autres interfaces** (Android Auto/Wear/TV, Tizen, tvOS, watchOS, webOS, Windows IoT… ) Applications mobiles (Android, iOS, Windows Phone… )* Applications pour ordinateurs (mac, PC)* Responsive web design* * Lire les notes pour voir la compatibilité dans les cas spécifiques. ** Hors ordinateurs et mobiles. *** Réalité virtuelle. C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m 26 Oui Cas spécifiques* 10:24 http://philipperondepierre.com
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 27 2/360° * Partie visible par les utilisateurs ≠ back-end (côté serveur) - ** API JavaScript expérimentale - Mobizel : « WebApp, application hybride, native… » Des outils en pleine mutation ! L’évolution des usages (mobilité, wearable, objets connectés, big data, cloud… ) soumettent de nouvelles problématiques aux développeurs qui recherchent la simplicité et l’efficience. Le web design front-end* est la partie visible de l’iceberg, qui utilise JavaScript pour l’interactivité. Côté serveur, la plateforme Node.js permet, grâce aux évolutions récentes du langage JavaScript, de générer des pages web avec plus de souplesse que PHP (montée en charge… ). Aussi, NoSQL traite des bases de données plus efficacement que MySQL. Côté client*, des frameworks JavaScript comme AngularJS optimisent les développements. WebGL supporte la 3D dynamique sur navigateur et WebVR** la réalité virtuelle. Flexbox simplifie les grilles CSS… Sur mobiles, les technologies HTML5 suffisent à créer des sites responsive, des sites mobiles (URL mobile) et des webapps simples (HTML5 encapsulé). Les apps sur les stores utilisent des langages dédiés à un OS : Objective-C pour iOS, Java sur Android, C# sur Windows Phone… On parle d’applications natives. Avec des outils multi-OS comme PhoneGap (utilise Node.js), on parle d’applications hybrides. Les objets connectés utilisent des applications natives plus complexes développées en Java pour Android ou Objective-C pour iOS… Aussi, Apple propose Swift pour ses plateformes, conçu pour être plus simple et plus rapide. On assiste ainsi à une mutation nécessaire des outils de développement face à la transformation profonde du web, celui des de la mobilité et des objets. et la programmation ? L’éclairage d’hernan Menajovsky, Chef de Projet Web Hernan Menajovsky IT Digital Project Manager, grands comptes http://philipperondepierre.com http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ https://nodejs.org/ https://fr.wikipedia.org/wiki/NoSQL https://www.angularjs.org/ https://fr.wikipedia.org/wiki/WebGL https://en.wikipedia.org/wiki/WebVR http://www.alsacreations.com/livres/lire/1702-css3-flexbox-plongez-dans-les-css-modernes.html http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ http://cordova.apache.org/ http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ https://developer.apple.com/swift/ https://www.linkedin.com/in/hernanmenajovsky https://www.linkedin.com/in/hernanmenajovsky https://www.linkedin.com/in/hernanmenajovsky
  • Après une croissance dopée par les appareils mobiles, la high-tech doit se renouveler 2/360° TV CONNeCTée SMARTPhONeTABLeT PC hyBRIDe AUTOORDINATeUR WeARABLe + RV TABLeTTe DOMOTIqUe (APPAReILS) clubic.com : « Les ventes de PC au plus bas depuis 2008 » C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m Les produits connectés, nouveaux relais de croissance ? Les ordinateurs voient leur lente érosion se confirmer, concurrencés par les tablettes dont la croissance s’essouffle déjà. Tout comme les smartphones qui frôlent la saturation. Les tablet PC se réveillent enfin, alors que les appareils connectés commencent à trouver un large public. Pas encore de quoi concurrencer les smartphones dont ils sont souvent dépendants. L’ordinateur de demain ? 28 10:24 http://pro.clubic.com/it-business/actualite-792180-ventes-pc-bas-2008.html http://philipperondepierre.com
  • * Communication sur le lieu de vente Le web design s’inscrit dans une approche globale Concept, design, communication, branding : de la cohérence dépend la crédibilité de la marque. La charte graphique se décline sur tous les supports : enseigne, print, numérique, in-store*, TV… Une approche communicationnelle à 360° 2/360° C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m 29 10:24 http://philipperondepierre.com
  • Responsive web design et applications : quelques outils AngularJS Framework* JavaScript libre et open-source développé par Google. Monte face à jQuery. Bootstrap Framework HTML, CSS, JavaScript. Sites responsive et applications web. Flexbox CSS3 Flexbox, plongez dans les CSS modernes. Foundation Framework pour sites responsive, applications, e-mails… JQuery Mobile Framework pour sites responsives et WebApp. Compatible avec PhoneGap. Knacss Micro framework CSS simple et léger. Node.js Plateforme de développement Javascript. PhoneGap Framework destiné à la création d’applications mobiles hybrides (web encapsulé). 2/360° C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A n to ny Y an g * Framework proposant des composants pour simplifier le développement d’interfaces d’applications - ** CMS : système de gestion de contenu 30 https://angularjs.org/ https://angularjs.org/ http://getbootstrap.com/ http://getbootstrap.com/ http://www.alsacreations.com/livres/lire/1702-css3-flexbox-plongez-dans-les-css-modernes.html http://www.alsacreations.com/livres/lire/1702-css3-flexbox-plongez-dans-les-css-modernes.html http://foundation.zurb.com/ http://foundation.zurb.com/ http://jquerymobile.com/ http://jquerymobile.com/ http://knacss.com/ http://knacss.com/ https://nodejs.org/en/ https://nodejs.org/en/ http://phonegap.com/ http://phonegap.com/ http://philipperondepierre.com
  • 3/UX first expérience utilisateur l’efficience d’abord C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m ANALYTIQUE EXTÉRIEUR PARTENAIRES MESURE STRATÉGIE INTÉRIEU R PRÉSENT UTILI- SATEUR COMMUNI- CATION LIENS AF FA IR ES ENSEMBLE AV EN IR ENCADREMENT ÉQUIPE COMPROMIS http://philipperondepierre.com
  • 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 C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m Stephen Demange, Aquinum : « C’est quoi l’UX ? » (SlideShare) U X 32 http://philipperondepierre.com http://fr.slideshare.net/sdemange/cest-quoi-lux
  • 3/UX first C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m journaldunet.com : « UX designer, ergonome, architecte de l’information, designer d’interaction ... Quelle différence ? » Communiquer ses valeurs directement du concepteur à l’utilisateur Valeurs du site et de l’utilisateur Authenticité, créativité, culture, équité, empathie, éthique, légitimité, liberté, originalité, partage, philosophie, respect, plaisir, transparence… UX : expérience utilisateur User eXperience : utilité, efficacité, facilité, ergonomie, accessibilité, crédibilité, architecture, référencement… UI : interface utilisateur User Interface : concept graphique, esthétique, design, typographie, style, message, branding… Tout d’abord, s’engager pour donner du sens Le design n’est pas que fonctionnel et cosmétique, il se fonde sur de vraies valeurs 33 http://philipperondepierre.com http://www.journaldunet.com/solutions/expert/53783/ux-designer--ergonome--architecte-de-l-information--designer-d-interaction------quelle-difference.shtml
  • tendances web design 3/UX first: concept C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m Wireframe : maquette fonctionnelle Le design est conçu sans logiciel graphique. Puis vient le wireframe Les outils Papier, crayons, ciseaux… Wireframe • Liste d’outils • 10 outils gratuits I D 34 http://philipperondepierre.com https://fr.wikipedia.org/wiki/Wireframe_(design) http://wireframes.linowski.ca/ http://www.responsive-mind.fr/10-outils-wireframe-gratuits/
  • 3/UX first: atomic C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m Oubliez les pages ! Construisez à partir d’atomes et de molécules, façon apps / bradfrost.com 35 TITRE TITRE TITRE TITRE TITRE TITRE accueil À PROPOS actu BLOG CONTACT ABSTRAIT CONCReT Atomes Molécule Organisme Template (wireframe) Template L’atomic design est une méthode qui consiste à penser le design d’interface par composants, et non plus par pages. Plus souple et modulaire pour concevoir des sites et applications modernes. http://philipperondepierre.com http://atomicdesign.bradfrost.com/chapter-2/
  • 3/UX first: atomic C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : 2 0 m in u te s Créez le journal qui vous correspond, via les grilles et les éléments modulables / app 20minutes.fr 36 http://philipperondepierre.com http://www.20minutes.fr/
  • 3/UX first: menu C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m : P h o to : Li b ér at io n * Navigation principale fixée en haut de l’écran Menu caché, coulissant, en perspective… du sticky menu* au tableau de bord / liberation.fr Le choix du type de menu doit rester cohérent 37 http://philipperondepierre.com http://www.liberation.fr/
  • 3/UX first: wording C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m * Concepteur rédacteur web - CCM : « Référencement naturel (SEO) - Guide pratique complet » Des mots choisis, qui ont du sens pour les utilisateurs… et le référencement 38 Texte pensé pour le web Titres et chapôs 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 Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l’imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n’a pas fait que survivre cinq siècles, mais s’est aussi adapté à la bureautique informatique, sans que son contenu n’en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker. http://philipperondepierre.com http://www.commentcamarche.net/contents/1267-referencement-naturel-seo-guide-pratique-complet
  • 3/UX first: app first! App first! Une expérience unique entre la marque et l’utilisateur / pagesjaunes.fr C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to a p p lic at io n s : P ag es J au n es Application native ou WebApp selon la pertinence** * (Fav)icône de lancement toujours accessible sur le mobile - ** mobizel.com : « WebApp, application hybride, native… quelle est la différence ? » watchOS 39 Icône*, fonctions natives, offline, géolocalisation, push, notifications… App first ! http://www.pagesjaunes.fr/ http://philipperondepierre.com http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/
  • 3/UX first: 360° Toutes les applications et supports sur arte.tv - * Extrapolation. Arte, bientôt une application wearable ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s w eb e t ap p lic at io n s : A rt e Site web, apps, TV connectée, box internet, console… La cohérence sur tous les écrans / arte.tv * 40 http://www.arte.tv/sites/services/le-replay-sur-tous-vos-ecrans/ http://philipperondepierre.com http://www.arte.tv/fr
  • p h ili p p er o n d ep ie rr e. co m * Motion UI / motion design : univers graphique en mouvement, par addition à la typo, images, vidéos, 3D, sons… - Voir aussi : micro UX CuratorElevatePeriscope Storehouse UP Coffee 3/UX first: motion UI Sur mobile, le motion UI* renforce l’affordance, la fluidité et l’impact émotionnel 41 VOIR QUELQUES ANIMATIONS Morphing http://philipperondepierre.com http://pro.xilopix.com/blog/donnez-du-peps-a-votre-site-e-commerce-avec-les-micro-ux/ http://capptivate.co/ http://tympanus.net/Tutorials/ShazamButtonEffect/
  • Accessibilité pour tous. ex. : daltonisme, l’attention portée aux couleurs et aux contrastes C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m 3/UX first: accessible Protanopie Hommes : 2% - Femmes : 0.01% Tritanopie Hommes et femmes : 0.01% Deutéranopie Hommes : 7% - Femmes : 0.04% (Daltonisme) Vision normale Testez vos couleurs PRINCIPES ET NORMES : ACCESSIBILITÉ WEB PATTERN UI : COULEURS ET DALTONISME 42 http://philipperondepierre.com http://www.etre.com/tools/colourblindsimulator/ http://www.kitpages.fr/fr/cms/129/principes-et-normes-de-l_accessibilite-web http://www.kitpages.fr/fr/cms/129/principes-et-normes-de-l_accessibilite-web http://www.kitpages.fr/fr/cms/129/principes-et-normes-de-l_accessibilite-web http://blog.octo.com/pattern-ui-vision-des-couleurs-et-daltonisme/
  • 3/UX first: footer C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m : P h o to : p o p ch ar tl ab .c o m , l ec o q sp o rt if. co m , w et ra n sf er .c o m Le footer est le socle de la page web. Soignez-le. codemyviews.com : 15 points pour créer un bon footer Attention, le footer n’est pas un fourre-tout ! 43 Une interface plus simple ? Oubliez header et footer… Des pieds de page clairs et fonctionnels / popchartlab.com, lecoqsportif.com, wetransfer.com http://philipperondepierre.com https://codemyviews.com/blog/15-tips-for-creating-a-great-website-footer https://www.popchartlab.com/ http://www.lecoqsportif.com/fr-fr/histoire https://www.wetransfer.com/
  • S’eNTRAÎNeR BOUGeR Se LeVeR 4/s-data smart data design I’m half crazy, all for the love of you…* * « Je suis à moitié fou, d’amour pour toi. » Hal 9000 dans 2001 : l’odyssée de l’espace. C o n ce p ti o n e t ill u st ra ti o n (d ’a p rè s A p p le e t St an le y K u b ri ck ) : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : Fu tu re M ag , A rt e * Datamining : extraction de connaissances à partir de données (algorithmes, statistiques, intelligence artificielle, informatique… ) Les données du big data sont parfois inexploitables… Avec les smart data, on filtre les données de façon ciblée (recherches internet, jeux, géolocalisation, applications mobiles, capteurs, réseaux sociaux… ). Aussi, on peut modéliser et anticiper avec le datamining*. Les smart data impliquent un design personnalisé, dynamique et intuitif pour l’utilisateur. La data-visualisation permet d’exprimer la pertinence de l’analyse des smart data, dans le but d’informer et d’aider à la décision. Le smart data design s’inscrit dans l’information et l’action 4/s-data Du big data au smart data, via le design LES ENJEUX DU bIG DATA FUTUREMAG - ARTE 45 http://philipperondepierre.com https://www.youtube.com/watch?t=1&v=ye-DsD_EHKk https://www.youtube.com/watch?t=1&v=ye-DsD_EHKk
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : gy m w at ch .c o m Votre coach mobile virtuel vous conseille via le data design… et en vous parlant / gymwatch.com 46 L’interaction via la synthèse vocale toujours plus présente http://philipperondepierre.com https://www.gymwatch.com
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to a p p lic at io n : A p p le Visualisez, gérez et partagez vos données personnelles / apple.com/ios/health La sécurité des données au cœur des préoccupations 47 UX : les mobiles et wearables tirent profit du data design http://philipperondepierre.com http://www.apple.com/ios/health/
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lib er at io n .fr Une profession d’avenir, le datajournaliste Data design : prenez en main les données afin de mener vos propres expériences / liberation.fr Data design high-tech, dynamique et responsive 48 http://philipperondepierre.com http://www.liberation.fr/apps/2015/09/rugby/
  • David McCandless : « Information is beautifull » - Atelier Iceberg : « Visualisation d’informations » (SlideShare) 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le , D av id M cC an d le ss , S am su n g Edward Tufte a été décrit par le New York Times comme le « Léonard de Vinci des données » (Wikipédia) 49  WATCH Design de David McCandless, d’après Edward Tufte Samsung Gear S2 Formaliser la data-visualisation la plus efficiente : les schémas types / David McCandless http://www.davidmccandless.com/#information-is-beautiful http://fr.slideshare.net/ateliericeberg/presentation-visualisation-dinformations http://philipperondepierre.com https://fr.wikipedia.org/wiki/Edward_Tufte http://www.gurvankris.com/ http://www.davidmccandless.com/#information-is-beautiful
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 1, 5. David McCandless - 2, 6. Peter Ørntoft - 3. Thomson Reuters Foundation - 4. Jake barton, NYSCI Infographies : design géométrique, dynamique, data motion (animations, typo, pictos, photos… ) 50 http://www.peterorntoft.com/ http://www.informationisbeautiful.net/visualizations/the-internet-of-things-a-primer/ http://www.fastcodesign.com/3049888/innovation-by-design/the-2015-innovation-by-design-awards-winners-data-visualization http://philipperondepierre.com http://www.informationisbeautiful.net/visualizations/the-internet-of-things-a-primer/ http://www.peterorntoft.com/ http://www.trust.org/ http://www.informationisbeautiful.net/visualizations/the-billion-pound-o-gram/ http://www.trust.org/ http://www.peterorntoft.com/
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G io rg ia L u p i e t St ef an ie P o sa ve c 51 Giorgia et Stefanie, ou le data design sur cartes postales ! Le data design, source d’inspiration et de créativité / dear-data.com http://philipperondepierre.com http://www.dear-data.com/theproject http://www.gurvankris.com/ http://www.dear-data.com/theproject
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - In fo gr ap h ie : Ji n g Z h an g Style semi figuratif, typo ou graphique pour les infographies classiques / mazakii.com 52 Cartes et plans, tout est possible ! Ex. : mapbox.com http://philipperondepierre.com http://www.gurvankris.com/ http://www.mazakii.com/ https://www.mapbox.com/ https://www.mapbox.com/
  • 5/print 3.0 de Gutenberg à Google maquette, typo, style… le print réinventé C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : W ill ia m C as lo n , W ill i H ei d el b ac h , L aC ie http://philipperondepierre.com
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : w ea re ja n u ar y. co m 54 Face au règne de l’image, la typo graphique a la cote ! / wearejanuary.com http://philipperondepierre.com http://wearejanuary.com/
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : si m p ly gu m .c o m Un site, une seule police de caractère / simplygum.com Les polices rondes, sans serif, géométriques, sont à la mode Référence au papier imprimé, pour donner vie aux pixels 55 http://philipperondepierre.com http://simplygum.com/ https://design.google.com/articles/evolving-the-google-identity/
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lin ke d in .c o m /p u ls e, P h ili p p e R o n d ep ie rr e Retour de l’écrit et de la typographie traditionnelle inspirés par le print / linkedin.com/pulse La sobriété et l’élégance pour crédibiliser le discours 56 Le web design est avant tout un travail de typographie ! http://philipperondepierre.com https://www.linkedin.com/pulse
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : ny ti m es .c o m 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 http://philipperondepierre.com http://www.nytimes.com/
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lib er at io n .fr * Un air de famille avec le site d’info « pure player » buzzfeed.com ? - « Appliquer le succès de Buzzfeed à son blog » - Pure player = 100 % web Grille moderne responsive, orientée web et mobilité / liberation.fr Visuels, Burger icon, menu caché, sticky bar, swipe list*… Black is beautiful! Des titres plus impactants en très gras 58 http://philipperondepierre.com http://www.buzzfeed.com/ http://blog.neocamino.com/appliquer-le-succes-de-buzzfeed-son-blog/ http://www.liberation.fr/
  • p h ili p p er o n d ep ie rr e. co m - © L e M o n d e 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 http://philipperondepierre.com http://www.lemonde.fr/
  • p h ili p p er o n d ep ie rr e. co m - P h o to : Le M o n d e * Lunettes VR de réalité virtuelle 5/print 3.0 Sur écran ou avec des lunettes VR, vivez l’actu à 360° grâce à la réalité virtuelle / lemonde.fr 60 Immersion totale, en direct ou en différé. Réalité virtuelle, voire augmentée… Ajout de la data visualisation et interactions dynamiques http://philipperondepierre.com http://www.lemonde.fr/elections-americaines/visuel/2016/07/29/sur-la-route-de-la-maison-blanche-une-immersion-a-360_4976246_829254.html
  • p h ili p p er o n d ep ie rr e. co m - P h o to : So o o n b y Fo to lia jonathan-menet.fr : « SOOON : un guide sur le design du futur présenté entre papier et web » 5/print 3.0 Parlez et interagissez entre papier et web / Sooon by Fotolia 61 Le retour du papier, aboutissement de l’écran ? Le web cherche à s’ancrer dans le réel, en interagissant avec les supports physiques http://philipperondepierre.com http://www.jonathan-menet.fr/blog/2015/10/16/sooon-un-guide-sur-le-design-du-futur-presente-entre-papier-et-web/ http://www.frenchweb.fr/sooon-by-fotolia-un-guide-prospectif-sur-le-design/209979
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 5/print 3.0 7. FF DIN TeNDaNces web DesIgN La mode s’évapore, la tendance s’érode... Seul le style reste. 1. PROXIMA NOVA tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 6. Montserrat Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 4. Droid Serif Tendances Web Design La mode s’évapore, la tendance s’érode... Seul le style reste. 8. OPENsans Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 3. AVENIR Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 5. Helvetica Neue Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 9. LaTo Tendances Web Design La mode s’évapore, la tendance s’érode... Seul le style reste. quelques « classiques ». De forts contrastes dans les tailles et les graisses 62 ... http://philipperondepierre.com https://www.myfonts.com/fonts/fontfont/ff-din/ https://typekit.com/fonts/proxima-nova http://www.fontsquirrel.com/fonts/montserrat http://www.ffmark.com/ https://www.google.com/fonts/specimen/Droid+Serif https://fr.wikipedia.org/wiki/Open_Sans https://fr.wikipedia.org/wiki/Avenir_(police_d%27%C3%A9criture) https://fr.wikipedia.org/wiki/Helvetica https://www.google.com/fonts/specimen/Lato
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lin et o .c o m 5/print 3.0 Titres ou paragraphes, choisissez des polices signées par des typographes créatifs / lineto.com 63 Avantage des polices sans serifs, rondes, géométriques… Les serifs permettent de s’affirmer (titres… ) http://philipperondepierre.com http://lineto.com/The+Fonts
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A le x P al az zi graphicstyle.fr : « Le Hand Lettering : retour aux sources » La typographie à la main, c’est plus humain : stylet, papier, 3D, sculpture… / Alex Palazzi 64 La typo ne met plus l’image en scène. Elle devient l’image Style pop, arty et régressif. Just enjoy! http://philipperondepierre.com http://blog.graphicstyle.fr/le-hand-lettering-retour-aux-sources/ https://www.behance.net/alexpalazzi/
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en Polices sélectionnées à titre d’exemple graphique. Vérifiez la compatibilité de votre police de caractère Vectorielles ou images, quelques polices de caractères qui en ont / awwwards.com 65 http://philipperondepierre.com http://www.awwwards.com/100-greatest-free-fonts-collection-for-2015.html
  • C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to e sp ac e : p u b lic 6/explore! immersion totale préparez-vous à vivre de nouvelles expériences http://philipperondepierre.com
  • 6/explore! C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m * ergophile.com : le design émotionnel Convergence des éléments communicationnels et d’interface. L’immersion pour l’émotion ! 67 UX & UI créatifs et disruptifs Design sonore, 3D dynamique, Micro interactions, Réalité virtuelle, Motion UI… Storytelling, Branding… Design émotionnel* Monopage, Responsive, Image 100 % (photo, vidéo… ), Parallaxe… JavaScript !!! http://philipperondepierre.com http://www.ergophile.com/2012/04/21/design-emotionnel-walter-livre/
  • 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : si ri n la b s. co m Design technologique, animations 3D futuristes, micro interactions / sirinlabs.com 68 Monopage sans scroll. L’écran comme au cinéma WebGL* : la 3D dynamique * Utilise WebGL, site officiel : khronos.org/webgl - WebGL est supporté par les navigateurs modernes http://philipperondepierre.com https://www.sirinlabs.com https://fr.wikipedia.org/wiki/WebGL https://www.khronos.org/webgl/ https://fr.wikipedia.org/wiki/WebGL
  • 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : si le n za .it Choisissez votre scénario et jouez avec les acteurs du film / silenza.it 69 Site tout en vidéo + interactivité So chic! Le noir et blanc varie peu selon vos écrans http://philipperondepierre.com http://silenza.it/
  • 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : P o rs ch e 70 Animations 3D au scroll et site monopage Immersion, interactions, 3D, animations… : prenez le contrôle ! / porsche.com, Mission E. Le menu caché transformé en tableau de bord http://philipperondepierre.com http://www.porsche.com/countries/mission-e/
  • Utilise WebGL, site officiel : khronos.org/webgl - WebGL sur Wikipédia 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : ac ti va ti o n -n o d ep lu s. co m Animations 3D dynamiques, son… pour un effet « wouah » garanti / activation-nodeplus.com 71 En complément, le scroll fait apparaître une grille sobre https://www.khronos.org/webgl/ https://fr.wikipedia.org/wiki/WebGL http://philipperondepierre.com http://www.activation-nodeplus.com/
  • 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : 9 9 h o m es m ov ie .c o m Images, scénario, transitions, ambiance… Plongez à fond dans l’histoire / 99homesmovie.com Micro-animations et menu caché 99 % visuel 72 http://philipperondepierre.com http://www.99homesmovie.com/properties/#!/intro
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : re sn .c o .n z expérience utilisateur déroutante, ludique, artistique… unique ! / resn.co.nz 6/explore! 73 Bougez le diamant pour faire apparaître ses milles facettes http://philipperondepierre.com http://resn.co.nz/
  • De l’œuf ou de la poule… creativeedgeparties.com Jouez, au cœur de l’action ! fiveminutes.gs expérience sonore et sensorielle jviewz.com Architecture à 360° dock.cz Morphing tout en code ! species-in-pieces.com C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : vo ir li en s effets typographiques ffmark.com 74 6/explore! http://www.creativeedgeparties.com/ http://jviewz.com/ http://www.fiveminutes.gs/ http://www.creativeedgeparties.com/ http://www.fiveminutes.gs/ http://jviewz.com/ http://www.dock.cz/en http://www.dock.cz/en http://www.species-in-pieces.com/ http://www.species-in-pieces.com/ http://philipperondepierre.com http://www.ffmark.com/ http://www.ffmark.com/
  • 7/artiste retour vers l’inspiration pop, kitsch, glitch, typo, urbain, electro, toons, techno, clip, rock,, fluo, sexy, chic, ecolo, hype, vintage, nerd, arty… C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • 7/artiste C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : p u tp u t. d k Rétro pop minimal, un style décalé, esthétisant et sucré / putput.dk 90’sinspiration 76 http://philipperondepierre.com http://putput.dk/
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lo ve fi la .c o m Appuyez sur la barre pour plus de fun et d’effet wouah ! 7/artiste 80’sinspiration 77 Flat 2.0, interactions psychédéliques, couleurs vibrantes et micro animations / lovefila.com http://philipperondepierre.com http://www.lovefila.com/ http://www.lovefila.com/
  • 7/artiste 80’sinspiration C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lo cu s- so lu s. w ea re te st in g. it Couleurs vibrantes, design élégant, interface high-tech / locus-solus.wearetesting.it 78 Le scroll laisse la place à des transitions surprenantes http://philipperondepierre.com http://locus-solus.wearetesting.it/en/
  • 7/artiste C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : ko te le tt .in fo happening vidéo « subliminal » et hypnotique / kotelett.info 90’sinspiration Vidéo entrecoupée par une autre sous forme de flashs 79 http://philipperondepierre.com http://kotelett.info/
  • 7/artiste C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : ga rb et t. co m .a u Géométrique, coloré, impactant, graphique / garbett.com.au Les transitions soignées sont au centre du design 70’sinspiration 80 http://philipperondepierre.com http://garbett.com.au/
  • 7/artiste C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : an im ad e. tv /f ra n ke n si m Interface vintage revisitée, ludique et créative / animade.tv/frankensim 80’sinspiration 81 http://philipperondepierre.com http://animade.tv/frankensim/
  • Look arty et scroll en biais mocastepandrepeat.tumblr.com So kitsch! weareroyale.com “ Video killed the radio star ” y78.fr Let’s go obsedo! obsedo.com Juste un peu de CSS… designjobsboard.com C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : vo ir li en s 7/artiste No text, pictos only ttmm.eu 80’s 80’s 70’s 80’s 70’s 80’s 82 http://mocastepandrepeat.tumblr.com/ http://mocastepandrepeat.tumblr.com/ http://weareroyale.com/ http://obsedo.com/ http://y78.fr/ http://weareroyale.com/ http://y78.fr/ http://obsedo.com/ https://www.designjobsboard.com/ https://www.designjobsboard.com/ http://philipperondepierre.com http://ttmm.eu/ http://ttmm.eu/
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 7/artistes inspirés >>> Galeries et sites pour inspirer vos créations
  • 8/play again! gamification le jeu se prend toujours plus au sérieux C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m : P h o to : N in te n d o http://philipperondepierre.com
  • Serious game* : utiliser le jeu pour communiquer une information sérieuse / J’aime les patates 8/play again C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : V al i F u gu lin , M in o ri ty , R u b en F ar ru s Sensibiliser au développement durable avec l’application « J’aime les patates » De rares sites en Flash résistent encore. Remplacés par le HTML et les applications mobiles, bien plus efficaces et multiplateformes. Jeu sérieux ayant une intention de type pédagogique, informative, communicationnelle, marketing, idéologique ou d’entraînement. * 85 http://jaimelespatates.onf.ca/ http://philipperondepierre.com http://www.serious-game.fr/le-developpement-durable-avec-lapplication-jaime-les-patates/
  • Sérieux sans se prendre au sérieux sur le site vitrine et les apps / Le Cancer du Temps 8/play again: app first! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : D . T u rm el , K o -o p M o d e, J .-F . N ad ea u , S . b o u ch er Apprendre à ne pas se laisser dominer par le temps, avec l’application « Le Cancer du Temps » 86 Sortez du « flat plat » avec des graphismes forts et stylés http://www.cancerdutemps.com/ http://philipperondepierre.com http://www.cancerdutemps.com/
  • Jeu véritable ou simple emprunt des codes graphiques ludiques / dairygivesyougo.co.za 8/play again: data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : d ai ry gi ve sy o u go .c o .z a Les icônes et le data design sont plébiscités dans les jeux Illustration flat mais pas trop, un style très « Material » 87 Les GAFAM s’inspirent des designers et studios qui devancent les tendances http://www.dairygivesyougo.co.za/ http://philipperondepierre.com
  • 8/play again: ego C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M c M ill an * ergophile. com : « Le design émotionnel au sein de vos interfaces » Créer un personnage à son image optimise la connexion émotionnelle* / androidify.com 88 http://philipperondepierre.com http://www.ergophile.com/2012/04/21/design-emotionnel-walter-livre/ https://www.androidify.com/fr/#/
  • Ingress (Niantic*), jeu mobile en réalité augmentée. Toujours plus immersif / ingress.com 8/play again: real life C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e, N ia n ti c, T h e P o ké m o n C o m p an y *Niantic, “ex”-propriété de Google - ** Le Figaro : « Pokémon GO : Nintendo calme le jeu… » - Ingress (Wikipédia) - Pokémon GO (Wikipédia) Pokémon GO a été développé sur les bases d’Ingress** Collecte de données, push, localisation GPS… pub ! 89 https://www.ingress.com/ http://philipperondepierre.com https://fr.wikipedia.org/wiki/Niantic_(entreprise) http://www.lefigaro.fr/secteur/high-tech/2016/07/25/32001-20160725ARTFIG00090-pokemon-go-nintendo-calme-le-jeu-et-plonge-en-bourse.php https://fr.wikipedia.org/wiki/Ingress https://en.wikipedia.org/wiki/Pok%C3%A9mon_Go http://www.pokemon.com/fr/jeux-video-pokemon/pokemon-go/ https://www.ingress.com/
  • * WebVR, affichage VR sur navigateur - ** WebGL, site officiel : khronos.org/webgl - WebGL est supporté par les navigateurs modernes Animations et interactions en 3D dynamique / Spacelamb 8/play again: 3D C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : sp ac el am b .1 2 w av e. co m WebGL** permet la 3D dynamique sur les pages et applications HTML5 90 Spacelamb utilise WebVR* pour s’afficher en réalité virtuelle dans le navigateur https://en.wikipedia.org/wiki/WebVR https://www.khronos.org/webgl/ https://fr.wikipedia.org/wiki/WebGL https://spacelamb.12wave.com/ http://philipperondepierre.com https://mozvr.com/ https://fr.wikipedia.org/wiki/WebGL https://fr.wikipedia.org/wiki/WebGL
  • Le retrogaming a encore quelques adeptes / arcade.mcmillan.com 8/play again: retro C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M c M ill an Agence McMillan : jeu vidéo façon 8-bit pour former les nouveaux stagiaires - * Voir le site eboy.com, artistes pixel art Le pixel art* est à la source du web design. Un classique ? 91 80’sinspiration http://arcade.mcmillan.com/ http://philipperondepierre.com http://arcade.mcmillan.com/ http://hello.eboy.com/eboy/
  • 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 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : N in te n d o jeux-serieux.fr 92 http://philipperondepierre.com http://www.jeux-serieux.fr/tag/definition/
  • C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m @ # ;) 9/tribu tribu vs social la tribu face aux réseaux sociaux mainstream http://philipperondepierre.com
  • 9/tribu Les « réseaux de niche » moins exposés et consensuels, complémentaires de Facebook et Twitter C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - Il lu st ra ti o n : F ac eb o o k Sources : Libération - Rue89 - Wikipédia - Siècle Digital Enquête sur l’algo le plus flippant de Facebook Facebook face à la désertifi- cation de son news feed 94 500 millions par jour : Whatsapp brasserait plus de photos que Facebook, Snapchat et Instagram ! Les vidéos Facebook plus performantes que YouTube Les réseaux « institutionnels » ont perdu de leur sex-appeal ! https://hangouts.google.com http://philipperondepierre.com http://an-2000.blogs.liberation.fr/2016/04/08/facebook-lutte-contre-la-desertification-de-son-news-feed/ http://rue89.nouvelobs.com/2016/06/02/enquete-lalgo-plus-flippant-facebook-264219 https://fr.wikipedia.org/wiki/WhatsApp https://siecledigital.fr/2015/12/21/les-videos-facebook-plus-performantes-que-youtube/ http://rue89.nouvelobs.com/2016/06/02/enquete-lalgo-plus-flippant-facebook-264219 http://an-2000.blogs.liberation.fr/2016/04/08/facebook-lutte-contre-la-desertification-de-son-news-feed/ https://fr.wikipedia.org/wiki/WhatsApp https://siecledigital.fr/2015/12/21/les-videos-facebook-plus-performantes-que-youtube/
  • 9/tribu explorez le monde à travers les yeux des autres sur votre smartphone… et vice versa / Periscope C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : p er is co p e. tv * Le Parisien : « Suicide sur Periscope : Océane, la mort en direct » 95 Periscope / Facebook, la guerre du direct ! Adopté par les jeunes, Periscope se veut un espace de liberté. Vraiment ?* https://hangouts.google.com https://www.periscope.tv/ http://philipperondepierre.com https://www.periscope.tv/ http://www.leparisien.fr/essonne-91/suicide-sur-periscope-oceane-la-mort-en-direct-12-05-2016-5788331.php https://www.periscope.tv/
  • 9/tribu C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : te le gr am .o rg * Wikipédia : le chat secret Telegram atteindrait le niveau de « confidentialité persistante » - ** Le Figaro : « Telegram, une application sulfureuse… » Pour vivre heureux, vivons cachés ? Vif succès auprès des élites, des politiques, mais aussi des malfrats de tous genres…** 96 Rival de WhatsApp et de Messenger, Telegram surprotège vos messages* / Telegram https://hangouts.google.com http://philipperondepierre.com https://fr.wikipedia.org/wiki/Telegram_(application) http://www.lefigaro.fr/secteur/high-tech/2016/07/21/32001-20160721ARTFIG00216-telegram-une-application-sulfureuse-appreciee-des-politiques-francais.php https://telegram.org/
  • 9/tribu C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : tr ib e. p m * iphon.fr : « App de messagerie Tribe : les créateurs Français, désormais à San Francisco » 97 Snapchat boloss ? Tribe : Vine, Snapchat ou Periscope à la sauce Skype…* / Tribe Les jeunes zappent les apps : Vine, Layout, Bolt, Tricy… 1,8 Md de photos par jour.* En tête : Snapchat, Whatsapp, Facebook , Instagram https://hangouts.google.com http://philipperondepierre.com http://www.iphon.fr/post/tribe-app-messagerie-novatrice-dev-francais-interview-846671 http://tribe.pm/
  • 9/tribu Canary, Gossip, Impulses, Whisper, yik yak… exprimez-vous anonymement* / Yik Yak C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : yi ky ak ap p .c o m * influencia.net : « Que valent les apps anonymes ? » - ** lefigaro.fr : Yik Yak - *** lemonde.fr : « Le bluff des apps anonymes et éphémères » Les applications « anonymes », une impression de liberté où tout devient possible ? *** Yik Yak : rencontrez vos semblables autour de vous ** 98 https://hangouts.google.com http://www.yikyakapp.com/ http://philipperondepierre.com http://www.influencia.net/fr/actualites/tendance,tendances,que-valent-applications-anonymes,4950.html http://www.lefigaro.fr/secteur/high-tech/2014/11/30/32001-20141130ARTFIG00015-yik-yak-l-application-anonyme-qui-veut-concurrencer-twitter.php http://www.lemonde.fr/pixels/article/2014/10/20/applications-anonymes-ou-ephemeres-le-grand-bluff_4508264_4408996.html
  • 9/tribu Le monde « parfait » selon Instagram. espace d’expression ou de standardisation ? / Nick & Justin C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : in st ag ra m .c o m /j u st in ic k_ p gh * Source : lefigaro.fr - Instagram, acquisition de Facebook depuis avril 2012 Mettre en scène sa vie pour passer un message social Instagram dépasse les 400 millions d’utilisateurs * 99 https://hangouts.google.com https://instagram.com/justinick_pgh http://philipperondepierre.com http://www.lefigaro.fr/secteur/high-tech/2015/09/23/32001-20150923ARTFIG00147-instagram-depasse-les-400-millions-d-utilisateurs.php
  • 9/tribu Concurrencés par les réseaux sociaux, les blogs doivent monter en gamme / Medium C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : m ed iu m .c o m * Système de gestion de contenu ou de publication - ** Apprendre à utiliser Medium - Flipboard, agrégateur de réseaux sociaux Minimal design pour Medium, le CMS* haut de gamme** Pas de limite de caractères, le retour du texte ! Les tags sont très populaires sur les sites et réseaux 100 https://hangouts.google.com https://medium.com http://philipperondepierre.com https://medium.com/en-francais-in-french/medium-com-mode-demploi-9098f96d1449 https://flipboard.com/
  • 9/tribu LinkedIn, Scoop.it, SlideShare, Viadeo, Xing… Réseaux pros, tous experts ! / Jacques Lebègue, scoop.it C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : sc o o p .it , J ac q u es L eb èg u e * Curation de contenu : sélectionner, éditer et partager des contenus pertinents pour un sujet donné - MOOC : formation en ligne ouverte à tous Le savoir de leurs utilisateurs, mine d’or des réseaux pros Présentations, curation, mooc, le fond et la forme* 101 https://hangouts.google.com http://www.scoop.it/t/marketing-digital-communication-etc http://www.scoop.it/ http://philipperondepierre.com https://fr.wikipedia.org/wiki/Curation_de_contenu https://fr.wikipedia.org/wiki/Formation_en_ligne_ouverte_%C3%A0_tous
  • 10/IoT internet of things* hyper connectés et «omnipotents»… pour longtemps * and everything C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : F la sh -M at ic T u n in g http://philipperondepierre.com
  • Réalité augmentée : devenez pilote grâce à votre tablette… / parrot.com 10/IoT C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : P ar ro t Bebop Drone Skycontroller de Parrot - * FPV : pilotage en immersion (First Person View) Tablette et lunettes FPV* pour une immersion totale La réalité augmentée partout : jeux, simulation 2D et 3D, sport, transport, shopping, immobilier, marketing… 103 http://www.parrot.com/fr/produits/skycontroller/ http://philipperondepierre.com http://www.parrot.com/fr/produits/skycontroller/
  • … ou prenez soin de vos plantes / parrot.com 10/IoT C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : P ar ro t Capteur Flower Power de Parrot 104 http://www.parrot.com/fr/produits/flower-power/ http://philipperondepierre.com http://www.parrot.com/fr/produits/flower-power/
  • * WYSIWYG = What you see is what you get (Ce que vous voyez est ce que vous obtenez) - transdigital.fr : « La fabrication additive en images » C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G lo w fo rg e Plastique, métal, carton, bois, chocolat… l’impression 3D pour tous ! / glowforge.com 105 La démocratisation et la simplification de l’impression 3D passera par le cloud et les interfaces WYSIWYG* 10/IoT http://transdigital.fr/ http://philipperondepierre.com https://glowforge.com/ https://www.youtube.com/watch?v=ysCaqh38JVQ
  • La domotique pour tout, partout / confort-sauter.com 10/IoT C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : Sa u te r Malao, radiateur connecté de Sauter 106 http://www.confort-sauter.com/nos-solutions-connectees http://philipperondepierre.com http://www.confort-sauter.com/bien-choisir-son-chauffage/video-radiateur-connecte-chaleur-douce-inertie-malao
  • * Prénom d’Amazon Echo, appareil utilisant **l’intelligence artificielle, qui interagit par la voix avec l’utilisateur pour diriger les objets connectés C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A m az o n Dialoguez avec Alexa*, ou la domotique assitée par la voix et l’IA** / Amazon Echo 107 Amazon mettra à disposition Alexa Voice Service pour les développeurs tiers 10/IoT https://en.wikipedia.org/wiki/Amazon_Echo http://philipperondepierre.com http://www.amazon.com/oc/echo/
  • 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 » C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : LG , A p p le Le skeuomorphisme donne une note d’authenticité 108 http://www.i-montres.net/lg-g-watch-urbane-4glte-une-montre-qui-peut-se-passer-de-smartphone/ http://philipperondepierre.com
  • 10/IoT C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le Programmes, jeux, web, applications, voix… la TV connectée toujours plus autonome / apple.com La télécommande, gadget bientôt dispensable ? La TV connectée bientôt au cœur de la domotique ? 109 http://philipperondepierre.com
  • 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 ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A ld eb ar an , B lu e Fr o g R o b o ti cs Reconnaissance, synthèse vocale, détection et suivi d’humains, d’objets… Buddy vous assiste au quotidien… 110 Buddy, Trusty, Pepper, Nao, Romeo… bientôt chez vous ? https://www.aldebaran.com/en/a-robots/who-is-pepper https://www.aldebaran.com/fr http://www.bluefrogrobotics.com/fr/home-fr/ http://www.trust.com/en/trusty http://www.clubic.com/humour-informatique-geek/live-japon/actualite-794052-pepper-menteur.html http://philipperondepierre.com http://www.bluefrogrobotics.com/fr/buddy-votre-robot-compagnon-familial/
  • Autopilot : écran affiché sous les yeux du conducteur en mode pilotage automatique sur les Tesla C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : Te sl a 111 Tesla a présenté Autopilot pour la conduite assistée Skeuomorphisme + flat servent l’ergonomie, ici vitale Voiture connectée, laissez l’écran prendre le contrôle / teslamotors.com 10/IoT http://philipperondepierre.com https://www.teslamotors.com/blog/your-autopilot-has-arrived
  • 10/IoT Applications Oculus avec démos : share.oculus.com - 20 minutes : « Facebook rachète Oculus » - Les Numériques : casques RV C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : o cu lu s. co m Oculus Rift, vos sens à 360°. Une révolution ? Les consoles chahutées par les mobiles, bientôt dépassées par la réalité virtuelle ? / oculus.com 112 Facebook a embauché en 2014 un des fondateurs de Second Life. Play again ? https://share.oculus.com/ http://www.20minutes.fr/high-tech/1333442-20140325-20140325-facebook-rachete-startup-realite-virtuelle-oculus-2-milliards-dollars http://www.lesnumeriques.com/casque-realite-virtuelle/realite-virtuelle-point-sur-differentes-technologies-casques-a2493.html http://philipperondepierre.com https://www.oculus.com/en-us/rift/
  • 10/IoT * API expérimentale (Mozilla, Google… ). Affiche la RV dans le navigateur, compatible avec lunettes VR. Soutenue par les navigateurs dès 2016 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M o zi lla , A -F ra m e te am , M o zV R t ea m WebVR* affiche la réalité virtuelle dans votre navigateur web / mozvr.com 113 Modélisation 3D, jeux, science, exploration… https://en.wikipedia.org/wiki/WebVR http://philipperondepierre.com https://mozvr.com/ https://mozvr.com/
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m /et après ? évolution des tendances 2017, 2018, 2019, 2020… http://philipperondepierre.com
  • /et après ? * Agent conversationnel qui dialogue avec l’utilisateur - ** La fusion des OS n’est pas dans l’intérêt d’Apple, qui préfère vendre différents devices C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m Des cycles liés aux avancées technologiques La fonction première du design est d’améliorer l’expérience que l’on a d’un produit ou d’un service. Le web design n’est pas décoratif, il fait le lien entre les technologies et nous. Les nouveautés seraient plus difficiles d’accès sans l’ergonomie, le style et l’esthétique. Nous sommes animés par l’affect, même face à une machine. Apple ou Google l’ont bien compris, qui placent l’expérience utilisateur au centre de leurs problématiques. Une nouveauté technologique n’est pas garante de succès. Les industriels doivent produire… Mais, si une nouvelle technologie ne prend pas sens pour le public, elle ne sera pas adoptée. Par exemple, les TV 3D n’ont pas eu le succès escompté. Le succès tient de la conjonction entre les inventeurs, les concepteurs, les designers, le marché et les utilisateurs. Le cloud et le big data se sont imposés. Avec de nouveaux usages liés à la mobilité, aux objets connectés, à la réalité virtuelle et augmentée, à l’intelligence artificielle, au chatbot*… et qui vont évoluer. On assiste à une convergence des OS chez Microsoft, tandis que Google mise tout sur la mobilité et les appareils connectés. Apple garde quatre OS distincts, tout en multipliant les similitudes. Un rapprochement réel d’OS X et iOS pourrait prendre quelques années**… 115 https://fr.wikipedia.org/wiki/Agent_conversationnel http://philipperondepierre.com
  • /et après ? Démonstration du mode Continuum sur le Lumia 950 avec le Microsoft Display Dock C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M ic ro so ft Et si le PC du futur ne faisait qu’un avec le smartphone ? En 2015, Microsoft présente Continuum sur Windows 10, qui donne à votre mobile des airs de PC. Avec quelques limitations… pour le moment. L’OS détecte la présence du clavier et affiche l’interface Modern UI sur le moniteur. Microsoft Continuum : bientôt la fin du PC ? / microsoft.com 116 http://www.monwindowsphone.com/demonstration-du-mode-continuum-sur-le-lumia-950-avec-le-microsoft-display-dock-t109372.html http://philipperondepierre.com http://www.microsoft.com/en-us/mobile/accessory/hd-500/
  • /et après ? CSS sur Wikipédia - Les standards CSS sont publiés par le W3C - W3C : brouillon des dernières nouveautés des sélecteurs de niveau 4 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m Couleurs, interactions, typo, fonctionnalités, accessibilité, post-responsive design… CSS4 donnera encore plus de pouvoir aux designers. Pas encore supporté par les navigateurs, en développe- ment depuis 2010, il faudra encore quelques années pour en profiter. Un design encore plus précis, fonctionnel et facile à mettre en place, avec CSS4 117 4 https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade#CSS4 https://www.w3.org/ https://drafts.csswg.org/selectors-4/ http://philipperondepierre.com
  • /et après ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : LG LG enroule l’écran Oled comme une feuille de papier / usine-digitale.fr 118 Arrivée des écrans souples et protéiformes : tablettes, journaux, domotique, TV, jouets, tableaux de bords… http://philipperondepierre.com http://www.usine-digitale.fr/article/ces-2016-lg-enroule-l-ecran-oled-comme-du-papier.N372014 https://www.youtube.com/watch?v=Cxnv_QKxXf0
  • /et après ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : K ei ic h i M at su d a Rue, commerces, musées, écoles… L’hyper réalité augmentée partout ou presque ! / km.cx 119 Une vision d’artiste colorée qui montre le potentiel de la réalité augmentée. Pokemon GO, déjà le bon vieux temps ? http://philipperondepierre.com http://km.cx/projects/hyper-reality/ https://vimeo.com/166807261
  • /et après ? C o n ce p ti o n e t re to u ch e : p h ili p p er o n d ep ie rr e. co m - P h o to : Fo lk er t G o rt er (s u p er fa m o u s. co m ) 120 La conception assistée par ordinateur, intelligente et prédictive * MIT (Massachusetts Institute of Technology), source : clubic.com Photoshop, peux-tu effacer le pylône et les câbles ? Voilà Philippe. Cela vous convient-il ? Puissance matérielle, cloud, algorithmes, intelligence artificielle… Tout est prêt ! Le MIT* développe un algo- rithme capable de remplacer l’intuition humaine Exprimez-vous ! L’interface graphique devient vocale http://philipperondepierre.com http://superfamous.com/ http://www.clubic.com/mag/trendy/actualite-783292-mit-algortihme.html
  • 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 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : m ag ic le ap .c o m Le requin holographique qui « dévore » Marty Mc Fly dans le film Retour vers le Futur 2, bientôt réalité ? Google y croit et a investi dans Magic Leap, qui, via un appareil*, explore la réalité « pseudo-holographique ». Avec un champ applicatif impressionnant : éducation, science, médecine, jeux… 121 Visionnez la démo sans trucage ! http://www.magicleap.com/ http://www.journaldunet.com/web-tech/start-up/magic-leap-levee-google-1014.shtml http://philipperondepierre.com https://www.youtube.com/watch?v=kw0-JRa9n94
  • 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 » C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M in d M az e Nous sommes au début d’une nouvelle ère. Les appareils dirigés par la pensée sont déjà là. Par exemple chez MindMaze. La réalité augmentée se joint à la réalité virtuelle, avec un champ applicatif qui va du gaming à la santé. Les designers de demain devront se réinventer ! 122 http://www.mindmaze.ch/ http://www.s2pmag.ch/2015/03/06/realite-virtuelle-mindmaze-ajoute-la-lecture-de-pensees/ http://philipperondepierre.com http://www.apple.com/fr/apple-pencil/
  • /in les tendances au top ! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • * Muzli (medium.com) : « Long shadow is dead. Welcome Diffuse shadows. » Le semi flat « photoréaliste » Le flat influencé par Material. Effets de reliefs et d’ombres naturelles pour donner de la consistance / manualcreative.com C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : m an u al cr ea ti ve .c o m , N ik e /in 124 Diffuse shadows : les ombres « naturelles » sont de retour* https:[email protected]/long-shadow-is-dead-welcome-diffuse-shadows-6a1f2ee9a6fe http://manualcreative.com/ http://philipperondepierre.com https:[email protected]/long-shadow-is-dead-welcome-diffuse-shadows-6a1f2ee9a6fe
  • Applications wearables, TV et objets connectés Wearable (vêtements, chaussures, accessoires… ), domotique, transports, objets connectés… / Apple Watch C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le /in 125 http://www.apple.com/fr/watch/app-store-apps/ http://philipperondepierre.com
  • * Chatbot : agent conversationnel qui dialogue avec l’utilisateur - influencia.net : « Le chatbot ou l’obsolescence de 80% des sites web » Chatbots* et assistants personnels vocaux (Siri, Cortana, Google Now… ) Interaction vocale, intelligente et prédictive, à votre service, pour tout, partout C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m /in 126 Certains intellectuels nous alertent sur les risques potentiels en matière de sécurité et de liberté indivi- duelle. Les assistants intelligents apprennent à nous connaître… Peut être un peu trop ? https://fr.wikipedia.org/wiki/Agent_conversationnel http://www.influencia.net/fr/actualites/tendance,observatoire-influencia,chatbot-obsolescence-80-sites-web,6398.html http://www.apple.com/fr/ios/siri/ https://cortana.uservoice.com/ https://www.google.com/search/about/learn-more/now/ http://philipperondepierre.com
  • * 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* C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : q w an t. co m /in 127 Dégooglisation d’internet : Framasoft promeut le logiciel libre, éthique, solidaire, décentralisé… La volonté est de remettre le numérique entre les mains de M. et Mme tout le monde. Bon courage… https://www.qwant.com/privacy https://www.youtube.com/watch?v=z_qo20DiW1A https://duckduckgo.com/ http://philipperondepierre.com https://degooglisons-internet.org/ https:[email protected]/long-shadow-is-dead-welcome-diffuse-shadows-6a1f2ee9a6fe
  • 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 C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le /in Taille des appareils en fonction de leur résolution d’écran 2015  Watch 312 x 390 px 2007 iPhone 320 x 480 px 2014 iPhone 6 plus 1920 x 1080 px 2015 MacBook 12“ 2304 x 1440 px 2014 iMac 5K, 27“ avec écran Retina 5 120 × 2 880 px 1984 Macintosh 512 x 342 px 128 http://philipperondepierre.com
  • Écrans splittés / nightcall Double scroll horizontal, vertical, ou en biais Les panoramas / houseofborel Avec mise en scène de la typographie C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es /in Les gros plans / bookofbeards Assumez-vous avec le zoom plein écran ! Les gifographies Infographies animées en GIF Les filtres, la bichromie Le style Instagram et les effets polychromes… L’image en mouvement Vidéo, gifs et cinémagraphes* 129* Cinémagraphe : entre photo et vidéo, consiste à créer du mouvement dans un élément isolé de l’image http://nightcall.us/ http://nightcall.us/ https://houseofborel.com/ https://houseofborel.com/ http://philipperondepierre.com http://bookofbeards.com/ http://bookofbeards.com/ http://www.cbnews.fr/info-cb-news/grand-prix-du-brand-content-les-astuces-de-kantar-media-a1018750 https://www.instagram.com/ http://www.frenchweb.fr/design-limage-en-mouvement-nouvelle-forme-dengagement/244519
  • Le paiement mobile (NFC… ) Android Pay, Apple Pay, Samsung Pay… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es /in Bluetooth Smart iBeacon, Proximity, Eddystone… Les algorithmes / bl.ocks.org Des data à l’interface web, ils sont partout Le partage / NightSwapping Sites et applications entre particuliers Le cloud Attention à la sécurité des données ! 130 SVG Dessin et animation SVG Dessin vectoriel sans perte de qualité http://fr.mobiletransaction.org/le-paiement-mobile/ http://philipperondepierre.com http://www.ictjournal.ch/fr-CH/News/2015/07/15/Google-concurrence-Apple-avec-une-technologie-beacon-en-open-source.aspx http://bl.ocks.org/mbostock/1136236 http://bl.ocks.org/mbostock/1136236 https://www.nightswapping.com https://www.nightswapping.com http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html
  • /out démodé, daté, obsolète… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m http://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 foodporn Gare à l’indigestion ! Les textos La France résiste à Whatsapp. Jusqu’à quand ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es /out 132 SMS La publicité intrusive Adblock adopté massivement change la donne La tyrannie du like Le like tue le partage spontané http://siecledigital.fr/2015/07/flat-design-mort-vive-material-design/ http://imagesociale.fr/ http://www.journaldugeek.com/2015/08/27/le-foodporn-interdit-en-allemagne/ http://philipperondepierre.com http://www.europe1.fr/societe/mort-annoncee-du-sms-la-france-fait-de-la-resistance-2674942 http://www.synaptic.be/blog/ad-blocker-la-fin-de-la-pub-sur-le-web/ http://an-2000.blogs.liberation.fr/2016/08/04/instagram-stories-la-reponse-la-tyrannie-du/
  • 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é. ≠ C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le , N o ki a /out 133 http://philipperondepierre.com
  • Les interfaces chargées Trop de pages, de boutons, de polices… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es Trop de texte Penser aux images, pictos ou data design /out Le web non éthique Tel est pris qui croyait prendre Le design low cost Design agressif, kitsch ou cheap 134 Flash Préférer HTML5 + CSS3 + JavaScript Holo design Antérieur à Material. Utilisé par Android 4.4 http://www.partirpascher.com/ http://philipperondepierre.com http://fr.jimdo.com/2014/07/09/%C3%A9crire-pour-internet-6-conseils-pratiques/ http://www.lemonde.fr/pixels/article/2015/09/01/sur-le-site-de-rencontres-ashley-madison-une-armee-de-robots_4742584_4408996.html?xtmc=ashley_madison&xtcr=1 https://www.unlimitedwebhosting.co.uk/ http://www.adobe.com/fr/products/flash.html http://fr.droidcon.com/2014/agenda/detail?title=Holo+-%3E+Material+Design+Transition
  • 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 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es Les nuages de mots Ultra périmés. Pensez aux tags /out 135 http://www.doisjeutiliser.fr/unePopinIntrusive/ http://www.doisjeutiliser.fr/unCarrousel/ http://www.lattitudeweb.com/flat-design-ou-glossy http://www.alesiacom.com/blog/mort-aux-banques-dimages http://www.alesiacom.com/blog/mort-aux-banques-dimages http://philipperondepierre.com
  • * 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 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : To p ic S im p le /out 136 Compétitions, appels d’offres, concours, collaborations… Pour une rémunération digne et équitable, affichez le logo* https://rodleg.wordpress.com/2013/06/10/quest-ce-que-le-perverted-crowdsourcing/ http://www.travailgratuit.com/ https://rodleg.wordpress.com/2013/06/10/quest-ce-que-le-perverted-crowdsourcing/ http://philipperondepierre.com http://www.mariejulien.com/?post/2007/12/29/Competition-Remuneration
  • /couleurs mixez les gammes ! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : P an to n e, A p p le , G o o gl e, G re et ab l, Ta b ac In fo S er vi ce /couleurs Couleurs inspirées par la nature* Technologiques mais naturelles. Vert Greenery, couleur 2017 selon Pantone®. Pastels acidulés et/ou délavés Efficace avec flat design + blanc et gris Attention aux palettes trop fades ! 138* Tendances printemps 2017 selon Pantone®. Couleurs vibrantes Inspirées par iOS et Material + blanc et/ou gris. Franches et efficaces sur mobiles. + ombres et dégradés http://philipperondepierre.com http://store.pantone.com/fr/fr/printemps-2017-fashion-color-report http://www.tabac-info-service.fr/J-arrete-de-fumer/Je-telecharge-l-appli https://greetabl.com/ http://www.apple.com/fr/ios/whats-new/ https://www.google.com/design/spec/style/color.html#
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : gt -c in et yp e. co m , t h ef ad er .c o m , M ic ro so ft /couleurs 139 Couleurs basiques Inspirées par Windows 8 à 10, très corporate. Efficace avec un style institutionnel. Noir, gris, blanc + couleur(s)* Élégance, sobriété et professionnalisme. Met les visuels en valeur. 139 No colors Pour un effet narratif stylisé, ou une définition radicale de « Less is more ». * Ou or. http://philipperondepierre.com http://www.microsoft.com/fr-fr/windows http://www.thefader.com/ http://gt-cinetype.com/
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : V in e, p o in tl es sc o rp .c o m , i St o ck /couleurs 140 Rétro, teintes « sépia » Doublement daté. À mixer avec palettes flat et Material. Rustique : ocres, kakis… Risqué ! Les couleurs varient selon les écrans. Votre beau vert kaki peut virer caca d’oie. Tons vifs vieillis / Flat design Apporte de la consistance au flat. Renouvelé par l’influence de Material design. http://philipperondepierre.com https://vine.co/
  • Daltonisme : pattern UI, vision des couleurs et daltonisme / blog.octo.com Data : bienvenue dans l’ère du Smart Data ! / journaldunet.com Data design : 14 outils de visualisation de données / thenextweb.com Design émotionnel : exemples / emotional.design Forum d’entraide développement front-end, code et design / alsacreations.com Material design, le guide / material-design Minimal websites / siteinspire.com Responsive web design : design liquide, responsive ou adaptatif / alsacreations.com Serious game et gamification / serious-game.fr Sketch, spécialisé dans le design de sites et applications (mac) / sketchapp.com Templates : themeforest, des milliers de thèmes et templates / themeforest.net UX : Guérrilla design en milieu hostile, responsive et mobilité / Stéphanie Walter /quelques liens… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 141 http://blog.octo.com/pattern-ui-vision-des-couleurs-et-daltonisme/ http://www.journaldunet.com/solutions/expert/58084/trop-de-big-data--tue-le-big-data--bienvenue-dans-l-ere-du-smart-data.shtml http://thenextweb.com/dd/2015/04/21/the-14-best-data-visualization-tools/ http://emotional.design/ http://www.alsacreations.com/ https://www.google.com/design/spec/material-design/introduction.html http://www.siteinspire.com/websites?categories=14 http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html http://www.serious-game.fr/ http://www.sketchapp.com/ http://themeforest.net http://fr.slideshare.net/inpixelitrust/gurrilla-design-en-milieu-hostile-responsive-et-mobilit http://philipperondepierre.com
  • /article: alsacréations C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 142 + http://philipperondepierre.com http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html
  • /clic ! Apple, BrAnding STOrY Décryptage : branding, communication, marketing, design, influences, historique… philippe rOndepierre C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 143 + http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://philipperondepierre.com http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage
  • /merci ! Philippe Rondepierre 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. http://philipperondepierre.com/ https://fr.linkedin.com/pub/philippe-rondepierre/88/17/287 http://www.viadeo.com/fr/profile/philippe.rondepiere http://philipperondepierre.com/
Please download to view
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
...

Tendances Web Design 2017, et après…

by philippe-rondepierre

on

Report

Category:

Design

Download: 2

Comment: 0

283,295

views

Comments

Description

Download Tendances Web Design 2017, et après…

Transcript

  • webdesign tendance s 2o17/18… Philippe Rondepierre _ 09-16 mise à jour Tendances Web Design 2017 - 2018 © Tous droits réservés
  • ”Conception : p h ili p p er o n d ep ie rr e. co m “ 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 http://philipperondepierre.com http://fr.slideshare.net/philipperondepierre37/web-designtendances2015-38916551 http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html
  • /10 tendances web design 2017/18… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - Te n d an ce s W eb D es ig n 2 0 1 6 /2 0 1 7 /2 0 1 8 1/GAFAM design 2/360° 3/UX first 4/s-data 5/print 3.0 6/explore! 7/artiste 8/play again 9/tribu 10/IoT et après ? • in • out • couleurs • contact http://philipperondepierre.com
  • 1/GAFAM GAFAM design Google, Apple, Facebook, Amazon, Microsoft and followers… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • 1/GAFAM design C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m * GAFAM : Google (Alphabet), Apple, Facebook, Amazon, Microsoft - Followers : satellites des GAFA (souvent dans la Silicon Valley) - ** lesechos.fr GAFAM & followers* : le web leur appartient, le web design aussi 5 Les GAFA pèsent plus de 1600 milliards de dollars en bourse !** À qui le tour ? clic ! http://philipperondepierre.com http://www.lesechos.fr/finance-marches/marches-financiers/021224804509-google-apple-facebook-et-amazon-affolent-la-bourse-1139369.php https://twitter.com/ https://www.uber.com/ https://www.flickr.com/ https://www.tumblr.com/ https://www.linkedin.com/ https://snapchat.com/ https://www.netflix.com/ https://www.airbnb.com/ https://www.pinterest.com/ http://www.adobe.com/ https://www.twitch.tv/ https://www.messenger.com/ https://abc.xyz/ https://www.android.com/ http://www.apple.com/ https://www.amazon.com/ https://www.microsoft.com/ https://www.facebook.com/ https://www.youtube.com/ https://www.whatsapp.com/ https://www.oculus.com/ https://www.tesla.com/ https://www.fotolia.com https://evernote.com/ https://www.periscope.tv/ https://www.instagram.com/ https://hangouts.google.com
  • 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… C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m * 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 http://philipperondepierre.com http://www.lemonde.fr/economie/article/2014/11/30/les-gafanomics-qu-est-ce-que-c-est_4531698_3234.html
  • 1/GAFAM design ANDROID WeAR TéLéPhONe TABLeTTe ANDROID TV ANDROID AUTO Android est présent sur plus d’un milliard d’appareils dans le monde : téléphones, tablettes, montres, téléviseurs, voitures… Et ce n’est pas fini !* Il fait la part belle à Google Now son assistant vocal. Android 6.0 Marshmallow : la puissance pour les écrans de toutes tailles, sauf les PC / android.com * android.com : Android 6 Marshmallow - Material Design for Android C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e 7 Android utilise Material design depuis la version 5.0 http://www.android.com/ http://www.android.com/ http://developer.android.com/design/material/index.html http://philipperondepierre.com http://developer.android.com/design/material/index.html
  • 1/GAFAM design C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le iOS marque de son empreinte toutes les interfaces Apple : macOS, tvOS, watchOS, CarPlay. Renforcé par Siri désormais sur macOS. Côté wearables, watchOS inspire la concurrence (Tizen… ). CarpPlay - iOS 10 - macOS - tvOS - watchOS - Apple Branding Story (SlideShare) Apple : des interfaces toujours plus orientées vers la mobilité / apple.com 8 L’interaction par la voix arrive dans les applications mac http://philipperondepierre.com http://www.apple.com/fr/ios/carplay/ http://www.apple.com/fr/ios/ http://www.apple.com/fr/macos http://www.apple.com/fr/accessibility/tvos/ http://www.apple.com/fr/watchos-2/ http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://www.apple.com/fr/ http://www.apple.com/fr/macos
  • 1/GAFAM design C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M ic ro so ft Windows 10 se décline sur tous types d’appareils et via le cloud. Des objets connectés aux ordinateurs… Il utilise Cortana, son assistant vocal. L’interface flat design initiée en 2010 révèle son potentiel. Windows 10 : la cohérence fonctionnelle et graphique à 360° / microsoft.com 9 http://philipperondepierre.com https://www.microsoft.com/fr-fr/windows/features
  • 1/GAFAM: social C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : F ac eb o o k * Source : Le Monde Économie - ** parlonsgeek.com Facebook, le réseau des réseaux, avec 1,5 milliard d’utilisateurs* / facebook.com Le News Feed est imité par la concurrence. Facebook en détient le brevet UX : la rentabilité avant l’expérience utilisateur ? ** 10 http://philipperondepierre.com http://www.lemonde.fr/economie/article/2015/07/30/l-irresistible-ascension-de-facebook_4704684_3234.html http://www.parlonsgeek.com/facebook-nouveau-design-nest-pas-la/ https://www.facebook.com/
  • 1/GAFAM: dynamic grid C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A m az o n 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 http://philipperondepierre.com http://www.petitefabrique.net/qu-est-ce-qu-un-site-dynamique.html http://www.amazon.com/
  • 1/GAFAM: dynamic grid C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e * 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… http://philipperondepierre.com https://design.google.com/
  • 1/GAFAM: flat 2.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e Material Design (Google) : charte de design qui s’applique à l’interface des logiciels et applications web - Material motion : animation de l’interface Plus frais, Material design lancé en juin 2014 a pris l’ascendant sur ses rivaux / Material design Design semi flat avec effets papier, ombres, matières… Animations et typo soignées. Plus « concret » que le flat Après le skeuomorphisme et le flat, Material design, une transition vers un style plus réaliste, animé, 3D en 2018 ? 13 Material motion fait la part belle au formes géométriques et à la fluidité http://philipperondepierre.com https://material.google.com/motion/material-motion.html# https://www.google.com/design/spec/material-design/introduction.html# https://material.google.com/motion/material-motion.html# https://material.google.com/motion/material-motion.html#
  • 1/GAFAM: flat 2.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e, M ic ro so ft , A p p le 1 : iOS 10 (Music) - 2 : Android 6 (utilise Material design) - 3 : Windows Phone 10 Couleurs franches + gris et blanc, importance des icônes et du data design, grilles structurées 14 Les différents styles s’influencent mutuellement http://philipperondepierre.com http://www.apple.com/music/
  • 1/GAFAM: minimal C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le « Less is more », symbole de modernité. Tout se joue dans la composition / apple.com 15 http://philipperondepierre.com http://www.apple.com/mac/
  • 1/GAFAM: geometric C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A b is ko , G o o gl e Geométrique + minimal pour Abisko, app développée avec Material design / design.google.com 16 http://philipperondepierre.com https://design.google.com/articles/expressing-brand-in-material/
  • 1/GAFAM: monopage C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : am az o n .c o m Gamme, produit, descriptif, utilisation, avis, recommandations, achat… sur une page / amazon.fr Monopage + scroll, hérité du tactile 17 http://philipperondepierre.com http://www.amazon.fr/gp/product/B00ZDWLEEG/ref=fs_fire
  • 1/GAFAM: image + typo C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e Images et vidéos en plein écran + mise en scène de la typo / Google Maps Burger icon et menu caché issus du mobile 18 Slider plein écran, pour une navigation 100% visuelle Monopage sans scroll, comme pour une application http://philipperondepierre.com http://www.google.com/maps/about/behind-the-scenes/streetview/treks/miniatur-wunderland/?ref=magazineduwebdesign#america
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le * ergophile.com : le design émotionnel au sein de vos interfaces Navigation intuitive et transitions fluides 19 1/GAFAM: storytelling Créer une connexion émotionnelle* en racontant une histoire Monopage et storytelling, un duo efficace Ne vendez pas un produit, donnez le premier rôle à l’internaute / apple.com http://philipperondepierre.com http://www.ergophile.com/2012/04/21/design-emotionnel-walter-livre/ http://www.apple.com/fr/start-something-new/
  • 1/GAFAM: pictos C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e Voir aussi : Font Awesome (polices d’icônes), designscrazed.org (jeux d’icônes gratuites), Typekit (Adobe, polices de caractères en ligne)… Pictos et polices de caractères en ligne : efficace et rapide / Google, Material design icons Google gère vos pictos Material design et vos polices Google Fonts. L’efficacité contre la dépendance ? 20 http://philipperondepierre.com http://fontawesome.io/ http://designscrazed.org/free-glyph-icons/ https://typekit.com/ https://www.google.com/design/icons/ https://www.google.com/fonts https://www.google.com/fonts https://www.google.com/fonts
  • 1/GAFAM: icônes C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le , G o o gl e, M ic ro so ft 1. iOS - 2. Windows 10 - 3. apple.com - 4. OS X - 5. 6. Material design - * Apple et Android (Material design). Skeuomorphisme, voir p. 133 Pictos et icônes flat ou semi flat, outline, avec quelques remixes du skeuomorphisme* 1 4 3 6 21 2 5 http://philipperondepierre.com
  • 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) C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M o n d ri an , U S N P S, E m il R u d er , X er ox , P au l R an d 1/GAFAM: inspirations… – = + Minimal design Less is More (Bauhaus) * Modern UI, nouveau nom de l’interface Metro 22 https://fr.wikipedia.org/wiki/N%C3%A9oplasticisme https://fr.wikipedia.org/wiki/Style_typographique_international https://fr.wikipedia.org/wiki/Xerox_Star https://fr.wikipedia.org/wiki/Signal%C3%A9tique http://www.iconofgraphics.com/paul-rand/ http://philipperondepierre.com https://fr.wikipedia.org/wiki/Bauhaus http://www.cnetfrance.fr/news/modern-ui-le-nouveau-nom-de-l-interface-metro-de-windows-8-39775123.htm
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A n to ny Y an g 2/360° post-responsive design supports, médias, technologies et usages tous azimuts http://philipperondepierre.com
  • * Alsacreations.com : « C’est quoi le Responsive Web Design ? » 24 Responsive web design : un modèle obsolète ? / skinnyties.com Web design liquide, responsive ou adaptatif* C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : sk in ny ti es .c o m , p ap er -b ac kg ro u n d s. co m 2/360° http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html http://skinnyties.com/ http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html http://philipperondepierre.com
  • * Réalité virtuelle - ** Wearable technology : technologie portable (vêtements, accessoires, bijoux, lunettes, montres connectées… ) explosion des écrans : auto, domotique, PC, hybride, TV, smartphone, tablette, RV*, wearable**… C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m 2/360° 25 10:24 http://philipperondepierre.com
  • Une multitude d’appareils, de formats et d’interfaces 2/360° TV CONNeCTée / CONSOLe Si navigateur SMARTPhONeTABLeT PC hyBRIDe Si compatible AUTOORDINATeUR WeARABLe + RV*** TABLeTTe Windows 10 sur tablette ≥ 8” DOMOTIqUe (APPAReILS) Autres interfaces** (Android Auto/Wear/TV, Tizen, tvOS, watchOS, webOS, Windows IoT… ) Applications mobiles (Android, iOS, Windows Phone… )* Applications pour ordinateurs (mac, PC)* Responsive web design* * Lire les notes pour voir la compatibilité dans les cas spécifiques. ** Hors ordinateurs et mobiles. *** Réalité virtuelle. C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m 26 Oui Cas spécifiques* 10:24 http://philipperondepierre.com
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 27 2/360° * Partie visible par les utilisateurs ≠ back-end (côté serveur) - ** API JavaScript expérimentale - Mobizel : « WebApp, application hybride, native… » Des outils en pleine mutation ! L’évolution des usages (mobilité, wearable, objets connectés, big data, cloud… ) soumettent de nouvelles problématiques aux développeurs qui recherchent la simplicité et l’efficience. Le web design front-end* est la partie visible de l’iceberg, qui utilise JavaScript pour l’interactivité. Côté serveur, la plateforme Node.js permet, grâce aux évolutions récentes du langage JavaScript, de générer des pages web avec plus de souplesse que PHP (montée en charge… ). Aussi, NoSQL traite des bases de données plus efficacement que MySQL. Côté client*, des frameworks JavaScript comme AngularJS optimisent les développements. WebGL supporte la 3D dynamique sur navigateur et WebVR** la réalité virtuelle. Flexbox simplifie les grilles CSS… Sur mobiles, les technologies HTML5 suffisent à créer des sites responsive, des sites mobiles (URL mobile) et des webapps simples (HTML5 encapsulé). Les apps sur les stores utilisent des langages dédiés à un OS : Objective-C pour iOS, Java sur Android, C# sur Windows Phone… On parle d’applications natives. Avec des outils multi-OS comme PhoneGap (utilise Node.js), on parle d’applications hybrides. Les objets connectés utilisent des applications natives plus complexes développées en Java pour Android ou Objective-C pour iOS… Aussi, Apple propose Swift pour ses plateformes, conçu pour être plus simple et plus rapide. On assiste ainsi à une mutation nécessaire des outils de développement face à la transformation profonde du web, celui des de la mobilité et des objets. et la programmation ? L’éclairage d’hernan Menajovsky, Chef de Projet Web Hernan Menajovsky IT Digital Project Manager, grands comptes http://philipperondepierre.com http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ https://nodejs.org/ https://fr.wikipedia.org/wiki/NoSQL https://www.angularjs.org/ https://fr.wikipedia.org/wiki/WebGL https://en.wikipedia.org/wiki/WebVR http://www.alsacreations.com/livres/lire/1702-css3-flexbox-plongez-dans-les-css-modernes.html http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ http://cordova.apache.org/ http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/ https://developer.apple.com/swift/ https://www.linkedin.com/in/hernanmenajovsky https://www.linkedin.com/in/hernanmenajovsky https://www.linkedin.com/in/hernanmenajovsky
  • Après une croissance dopée par les appareils mobiles, la high-tech doit se renouveler 2/360° TV CONNeCTée SMARTPhONeTABLeT PC hyBRIDe AUTOORDINATeUR WeARABLe + RV TABLeTTe DOMOTIqUe (APPAReILS) clubic.com : « Les ventes de PC au plus bas depuis 2008 » C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m Les produits connectés, nouveaux relais de croissance ? Les ordinateurs voient leur lente érosion se confirmer, concurrencés par les tablettes dont la croissance s’essouffle déjà. Tout comme les smartphones qui frôlent la saturation. Les tablet PC se réveillent enfin, alors que les appareils connectés commencent à trouver un large public. Pas encore de quoi concurrencer les smartphones dont ils sont souvent dépendants. L’ordinateur de demain ? 28 10:24 http://pro.clubic.com/it-business/actualite-792180-ventes-pc-bas-2008.html http://philipperondepierre.com
  • * Communication sur le lieu de vente Le web design s’inscrit dans une approche globale Concept, design, communication, branding : de la cohérence dépend la crédibilité de la marque. La charte graphique se décline sur tous les supports : enseigne, print, numérique, in-store*, TV… Une approche communicationnelle à 360° 2/360° C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m 29 10:24 http://philipperondepierre.com
  • Responsive web design et applications : quelques outils AngularJS Framework* JavaScript libre et open-source développé par Google. Monte face à jQuery. Bootstrap Framework HTML, CSS, JavaScript. Sites responsive et applications web. Flexbox CSS3 Flexbox, plongez dans les CSS modernes. Foundation Framework pour sites responsive, applications, e-mails… JQuery Mobile Framework pour sites responsives et WebApp. Compatible avec PhoneGap. Knacss Micro framework CSS simple et léger. Node.js Plateforme de développement Javascript. PhoneGap Framework destiné à la création d’applications mobiles hybrides (web encapsulé). 2/360° C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A n to ny Y an g * Framework proposant des composants pour simplifier le développement d’interfaces d’applications - ** CMS : système de gestion de contenu 30 https://angularjs.org/ https://angularjs.org/ http://getbootstrap.com/ http://getbootstrap.com/ http://www.alsacreations.com/livres/lire/1702-css3-flexbox-plongez-dans-les-css-modernes.html http://www.alsacreations.com/livres/lire/1702-css3-flexbox-plongez-dans-les-css-modernes.html http://foundation.zurb.com/ http://foundation.zurb.com/ http://jquerymobile.com/ http://jquerymobile.com/ http://knacss.com/ http://knacss.com/ https://nodejs.org/en/ https://nodejs.org/en/ http://phonegap.com/ http://phonegap.com/ http://philipperondepierre.com
  • 3/UX first expérience utilisateur l’efficience d’abord C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m ANALYTIQUE EXTÉRIEUR PARTENAIRES MESURE STRATÉGIE INTÉRIEU R PRÉSENT UTILI- SATEUR COMMUNI- CATION LIENS AF FA IR ES ENSEMBLE AV EN IR ENCADREMENT ÉQUIPE COMPROMIS http://philipperondepierre.com
  • 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 C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m Stephen Demange, Aquinum : « C’est quoi l’UX ? » (SlideShare) U X 32 http://philipperondepierre.com http://fr.slideshare.net/sdemange/cest-quoi-lux
  • 3/UX first C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m journaldunet.com : « UX designer, ergonome, architecte de l’information, designer d’interaction ... Quelle différence ? » Communiquer ses valeurs directement du concepteur à l’utilisateur Valeurs du site et de l’utilisateur Authenticité, créativité, culture, équité, empathie, éthique, légitimité, liberté, originalité, partage, philosophie, respect, plaisir, transparence… UX : expérience utilisateur User eXperience : utilité, efficacité, facilité, ergonomie, accessibilité, crédibilité, architecture, référencement… UI : interface utilisateur User Interface : concept graphique, esthétique, design, typographie, style, message, branding… Tout d’abord, s’engager pour donner du sens Le design n’est pas que fonctionnel et cosmétique, il se fonde sur de vraies valeurs 33 http://philipperondepierre.com http://www.journaldunet.com/solutions/expert/53783/ux-designer--ergonome--architecte-de-l-information--designer-d-interaction------quelle-difference.shtml
  • tendances web design 3/UX first: concept C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m Wireframe : maquette fonctionnelle Le design est conçu sans logiciel graphique. Puis vient le wireframe Les outils Papier, crayons, ciseaux… Wireframe • Liste d’outils • 10 outils gratuits I D 34 http://philipperondepierre.com https://fr.wikipedia.org/wiki/Wireframe_(design) http://wireframes.linowski.ca/ http://www.responsive-mind.fr/10-outils-wireframe-gratuits/
  • 3/UX first: atomic C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m Oubliez les pages ! Construisez à partir d’atomes et de molécules, façon apps / bradfrost.com 35 TITRE TITRE TITRE TITRE TITRE TITRE accueil À PROPOS actu BLOG CONTACT ABSTRAIT CONCReT Atomes Molécule Organisme Template (wireframe) Template L’atomic design est une méthode qui consiste à penser le design d’interface par composants, et non plus par pages. Plus souple et modulaire pour concevoir des sites et applications modernes. http://philipperondepierre.com http://atomicdesign.bradfrost.com/chapter-2/
  • 3/UX first: atomic C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : 2 0 m in u te s Créez le journal qui vous correspond, via les grilles et les éléments modulables / app 20minutes.fr 36 http://philipperondepierre.com http://www.20minutes.fr/
  • 3/UX first: menu C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m : P h o to : Li b ér at io n * Navigation principale fixée en haut de l’écran Menu caché, coulissant, en perspective… du sticky menu* au tableau de bord / liberation.fr Le choix du type de menu doit rester cohérent 37 http://philipperondepierre.com http://www.liberation.fr/
  • 3/UX first: wording C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m * Concepteur rédacteur web - CCM : « Référencement naturel (SEO) - Guide pratique complet » Des mots choisis, qui ont du sens pour les utilisateurs… et le référencement 38 Texte pensé pour le web Titres et chapôs 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 Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l’imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n’a pas fait que survivre cinq siècles, mais s’est aussi adapté à la bureautique informatique, sans que son contenu n’en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker. http://philipperondepierre.com http://www.commentcamarche.net/contents/1267-referencement-naturel-seo-guide-pratique-complet
  • 3/UX first: app first! App first! Une expérience unique entre la marque et l’utilisateur / pagesjaunes.fr C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to a p p lic at io n s : P ag es J au n es Application native ou WebApp selon la pertinence** * (Fav)icône de lancement toujours accessible sur le mobile - ** mobizel.com : « WebApp, application hybride, native… quelle est la différence ? » watchOS 39 Icône*, fonctions natives, offline, géolocalisation, push, notifications… App first ! http://www.pagesjaunes.fr/ http://philipperondepierre.com http://www.mobizel.com/2015/02/webapp-application-hybride-native-quelle-est-la-difference/
  • 3/UX first: 360° Toutes les applications et supports sur arte.tv - * Extrapolation. Arte, bientôt une application wearable ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s w eb e t ap p lic at io n s : A rt e Site web, apps, TV connectée, box internet, console… La cohérence sur tous les écrans / arte.tv * 40 http://www.arte.tv/sites/services/le-replay-sur-tous-vos-ecrans/ http://philipperondepierre.com http://www.arte.tv/fr
  • p h ili p p er o n d ep ie rr e. co m * Motion UI / motion design : univers graphique en mouvement, par addition à la typo, images, vidéos, 3D, sons… - Voir aussi : micro UX CuratorElevatePeriscope Storehouse UP Coffee 3/UX first: motion UI Sur mobile, le motion UI* renforce l’affordance, la fluidité et l’impact émotionnel 41 VOIR QUELQUES ANIMATIONS Morphing http://philipperondepierre.com http://pro.xilopix.com/blog/donnez-du-peps-a-votre-site-e-commerce-avec-les-micro-ux/ http://capptivate.co/ http://tympanus.net/Tutorials/ShazamButtonEffect/
  • Accessibilité pour tous. ex. : daltonisme, l’attention portée aux couleurs et aux contrastes C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m 3/UX first: accessible Protanopie Hommes : 2% - Femmes : 0.01% Tritanopie Hommes et femmes : 0.01% Deutéranopie Hommes : 7% - Femmes : 0.04% (Daltonisme) Vision normale Testez vos couleurs PRINCIPES ET NORMES : ACCESSIBILITÉ WEB PATTERN UI : COULEURS ET DALTONISME 42 http://philipperondepierre.com http://www.etre.com/tools/colourblindsimulator/ http://www.kitpages.fr/fr/cms/129/principes-et-normes-de-l_accessibilite-web http://www.kitpages.fr/fr/cms/129/principes-et-normes-de-l_accessibilite-web http://www.kitpages.fr/fr/cms/129/principes-et-normes-de-l_accessibilite-web http://blog.octo.com/pattern-ui-vision-des-couleurs-et-daltonisme/
  • 3/UX first: footer C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m : P h o to : p o p ch ar tl ab .c o m , l ec o q sp o rt if. co m , w et ra n sf er .c o m Le footer est le socle de la page web. Soignez-le. codemyviews.com : 15 points pour créer un bon footer Attention, le footer n’est pas un fourre-tout ! 43 Une interface plus simple ? Oubliez header et footer… Des pieds de page clairs et fonctionnels / popchartlab.com, lecoqsportif.com, wetransfer.com http://philipperondepierre.com https://codemyviews.com/blog/15-tips-for-creating-a-great-website-footer https://www.popchartlab.com/ http://www.lecoqsportif.com/fr-fr/histoire https://www.wetransfer.com/
  • S’eNTRAÎNeR BOUGeR Se LeVeR 4/s-data smart data design I’m half crazy, all for the love of you…* * « Je suis à moitié fou, d’amour pour toi. » Hal 9000 dans 2001 : l’odyssée de l’espace. C o n ce p ti o n e t ill u st ra ti o n (d ’a p rè s A p p le e t St an le y K u b ri ck ) : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : Fu tu re M ag , A rt e * Datamining : extraction de connaissances à partir de données (algorithmes, statistiques, intelligence artificielle, informatique… ) Les données du big data sont parfois inexploitables… Avec les smart data, on filtre les données de façon ciblée (recherches internet, jeux, géolocalisation, applications mobiles, capteurs, réseaux sociaux… ). Aussi, on peut modéliser et anticiper avec le datamining*. Les smart data impliquent un design personnalisé, dynamique et intuitif pour l’utilisateur. La data-visualisation permet d’exprimer la pertinence de l’analyse des smart data, dans le but d’informer et d’aider à la décision. Le smart data design s’inscrit dans l’information et l’action 4/s-data Du big data au smart data, via le design LES ENJEUX DU bIG DATA FUTUREMAG - ARTE 45 http://philipperondepierre.com https://www.youtube.com/watch?t=1&v=ye-DsD_EHKk https://www.youtube.com/watch?t=1&v=ye-DsD_EHKk
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : gy m w at ch .c o m Votre coach mobile virtuel vous conseille via le data design… et en vous parlant / gymwatch.com 46 L’interaction via la synthèse vocale toujours plus présente http://philipperondepierre.com https://www.gymwatch.com
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to a p p lic at io n : A p p le Visualisez, gérez et partagez vos données personnelles / apple.com/ios/health La sécurité des données au cœur des préoccupations 47 UX : les mobiles et wearables tirent profit du data design http://philipperondepierre.com http://www.apple.com/ios/health/
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lib er at io n .fr Une profession d’avenir, le datajournaliste Data design : prenez en main les données afin de mener vos propres expériences / liberation.fr Data design high-tech, dynamique et responsive 48 http://philipperondepierre.com http://www.liberation.fr/apps/2015/09/rugby/
  • David McCandless : « Information is beautifull » - Atelier Iceberg : « Visualisation d’informations » (SlideShare) 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le , D av id M cC an d le ss , S am su n g Edward Tufte a été décrit par le New York Times comme le « Léonard de Vinci des données » (Wikipédia) 49  WATCH Design de David McCandless, d’après Edward Tufte Samsung Gear S2 Formaliser la data-visualisation la plus efficiente : les schémas types / David McCandless http://www.davidmccandless.com/#information-is-beautiful http://fr.slideshare.net/ateliericeberg/presentation-visualisation-dinformations http://philipperondepierre.com https://fr.wikipedia.org/wiki/Edward_Tufte http://www.gurvankris.com/ http://www.davidmccandless.com/#information-is-beautiful
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 1, 5. David McCandless - 2, 6. Peter Ørntoft - 3. Thomson Reuters Foundation - 4. Jake barton, NYSCI Infographies : design géométrique, dynamique, data motion (animations, typo, pictos, photos… ) 50 http://www.peterorntoft.com/ http://www.informationisbeautiful.net/visualizations/the-internet-of-things-a-primer/ http://www.fastcodesign.com/3049888/innovation-by-design/the-2015-innovation-by-design-awards-winners-data-visualization http://philipperondepierre.com http://www.informationisbeautiful.net/visualizations/the-internet-of-things-a-primer/ http://www.peterorntoft.com/ http://www.trust.org/ http://www.informationisbeautiful.net/visualizations/the-billion-pound-o-gram/ http://www.trust.org/ http://www.peterorntoft.com/
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G io rg ia L u p i e t St ef an ie P o sa ve c 51 Giorgia et Stefanie, ou le data design sur cartes postales ! Le data design, source d’inspiration et de créativité / dear-data.com http://philipperondepierre.com http://www.dear-data.com/theproject http://www.gurvankris.com/ http://www.dear-data.com/theproject
  • 4/s-data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - In fo gr ap h ie : Ji n g Z h an g Style semi figuratif, typo ou graphique pour les infographies classiques / mazakii.com 52 Cartes et plans, tout est possible ! Ex. : mapbox.com http://philipperondepierre.com http://www.gurvankris.com/ http://www.mazakii.com/ https://www.mapbox.com/ https://www.mapbox.com/
  • 5/print 3.0 de Gutenberg à Google maquette, typo, style… le print réinventé C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : W ill ia m C as lo n , W ill i H ei d el b ac h , L aC ie http://philipperondepierre.com
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : w ea re ja n u ar y. co m 54 Face au règne de l’image, la typo graphique a la cote ! / wearejanuary.com http://philipperondepierre.com http://wearejanuary.com/
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : si m p ly gu m .c o m Un site, une seule police de caractère / simplygum.com Les polices rondes, sans serif, géométriques, sont à la mode Référence au papier imprimé, pour donner vie aux pixels 55 http://philipperondepierre.com http://simplygum.com/ https://design.google.com/articles/evolving-the-google-identity/
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lin ke d in .c o m /p u ls e, P h ili p p e R o n d ep ie rr e Retour de l’écrit et de la typographie traditionnelle inspirés par le print / linkedin.com/pulse La sobriété et l’élégance pour crédibiliser le discours 56 Le web design est avant tout un travail de typographie ! http://philipperondepierre.com https://www.linkedin.com/pulse
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : ny ti m es .c o m 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 http://philipperondepierre.com http://www.nytimes.com/
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lib er at io n .fr * Un air de famille avec le site d’info « pure player » buzzfeed.com ? - « Appliquer le succès de Buzzfeed à son blog » - Pure player = 100 % web Grille moderne responsive, orientée web et mobilité / liberation.fr Visuels, Burger icon, menu caché, sticky bar, swipe list*… Black is beautiful! Des titres plus impactants en très gras 58 http://philipperondepierre.com http://www.buzzfeed.com/ http://blog.neocamino.com/appliquer-le-succes-de-buzzfeed-son-blog/ http://www.liberation.fr/
  • p h ili p p er o n d ep ie rr e. co m - © L e M o n d e 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 http://philipperondepierre.com http://www.lemonde.fr/
  • p h ili p p er o n d ep ie rr e. co m - P h o to : Le M o n d e * Lunettes VR de réalité virtuelle 5/print 3.0 Sur écran ou avec des lunettes VR, vivez l’actu à 360° grâce à la réalité virtuelle / lemonde.fr 60 Immersion totale, en direct ou en différé. Réalité virtuelle, voire augmentée… Ajout de la data visualisation et interactions dynamiques http://philipperondepierre.com http://www.lemonde.fr/elections-americaines/visuel/2016/07/29/sur-la-route-de-la-maison-blanche-une-immersion-a-360_4976246_829254.html
  • p h ili p p er o n d ep ie rr e. co m - P h o to : So o o n b y Fo to lia jonathan-menet.fr : « SOOON : un guide sur le design du futur présenté entre papier et web » 5/print 3.0 Parlez et interagissez entre papier et web / Sooon by Fotolia 61 Le retour du papier, aboutissement de l’écran ? Le web cherche à s’ancrer dans le réel, en interagissant avec les supports physiques http://philipperondepierre.com http://www.jonathan-menet.fr/blog/2015/10/16/sooon-un-guide-sur-le-design-du-futur-presente-entre-papier-et-web/ http://www.frenchweb.fr/sooon-by-fotolia-un-guide-prospectif-sur-le-design/209979
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 5/print 3.0 7. FF DIN TeNDaNces web DesIgN La mode s’évapore, la tendance s’érode... Seul le style reste. 1. PROXIMA NOVA tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 6. Montserrat Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 4. Droid Serif Tendances Web Design La mode s’évapore, la tendance s’érode... Seul le style reste. 8. OPENsans Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 3. AVENIR Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 5. Helvetica Neue Tendances web design La mode s’évapore, la tendance s’érode... Seul le style reste. 9. LaTo Tendances Web Design La mode s’évapore, la tendance s’érode... Seul le style reste. quelques « classiques ». De forts contrastes dans les tailles et les graisses 62 ... http://philipperondepierre.com https://www.myfonts.com/fonts/fontfont/ff-din/ https://typekit.com/fonts/proxima-nova http://www.fontsquirrel.com/fonts/montserrat http://www.ffmark.com/ https://www.google.com/fonts/specimen/Droid+Serif https://fr.wikipedia.org/wiki/Open_Sans https://fr.wikipedia.org/wiki/Avenir_(police_d%27%C3%A9criture) https://fr.wikipedia.org/wiki/Helvetica https://www.google.com/fonts/specimen/Lato
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lin et o .c o m 5/print 3.0 Titres ou paragraphes, choisissez des polices signées par des typographes créatifs / lineto.com 63 Avantage des polices sans serifs, rondes, géométriques… Les serifs permettent de s’affirmer (titres… ) http://philipperondepierre.com http://lineto.com/The+Fonts
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A le x P al az zi graphicstyle.fr : « Le Hand Lettering : retour aux sources » La typographie à la main, c’est plus humain : stylet, papier, 3D, sculpture… / Alex Palazzi 64 La typo ne met plus l’image en scène. Elle devient l’image Style pop, arty et régressif. Just enjoy! http://philipperondepierre.com http://blog.graphicstyle.fr/le-hand-lettering-retour-aux-sources/ https://www.behance.net/alexpalazzi/
  • 5/print 3.0 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en Polices sélectionnées à titre d’exemple graphique. Vérifiez la compatibilité de votre police de caractère Vectorielles ou images, quelques polices de caractères qui en ont / awwwards.com 65 http://philipperondepierre.com http://www.awwwards.com/100-greatest-free-fonts-collection-for-2015.html
  • C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to e sp ac e : p u b lic 6/explore! immersion totale préparez-vous à vivre de nouvelles expériences http://philipperondepierre.com
  • 6/explore! C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m * ergophile.com : le design émotionnel Convergence des éléments communicationnels et d’interface. L’immersion pour l’émotion ! 67 UX & UI créatifs et disruptifs Design sonore, 3D dynamique, Micro interactions, Réalité virtuelle, Motion UI… Storytelling, Branding… Design émotionnel* Monopage, Responsive, Image 100 % (photo, vidéo… ), Parallaxe… JavaScript !!! http://philipperondepierre.com http://www.ergophile.com/2012/04/21/design-emotionnel-walter-livre/
  • 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : si ri n la b s. co m Design technologique, animations 3D futuristes, micro interactions / sirinlabs.com 68 Monopage sans scroll. L’écran comme au cinéma WebGL* : la 3D dynamique * Utilise WebGL, site officiel : khronos.org/webgl - WebGL est supporté par les navigateurs modernes http://philipperondepierre.com https://www.sirinlabs.com https://fr.wikipedia.org/wiki/WebGL https://www.khronos.org/webgl/ https://fr.wikipedia.org/wiki/WebGL
  • 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : si le n za .it Choisissez votre scénario et jouez avec les acteurs du film / silenza.it 69 Site tout en vidéo + interactivité So chic! Le noir et blanc varie peu selon vos écrans http://philipperondepierre.com http://silenza.it/
  • 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : P o rs ch e 70 Animations 3D au scroll et site monopage Immersion, interactions, 3D, animations… : prenez le contrôle ! / porsche.com, Mission E. Le menu caché transformé en tableau de bord http://philipperondepierre.com http://www.porsche.com/countries/mission-e/
  • Utilise WebGL, site officiel : khronos.org/webgl - WebGL sur Wikipédia 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : ac ti va ti o n -n o d ep lu s. co m Animations 3D dynamiques, son… pour un effet « wouah » garanti / activation-nodeplus.com 71 En complément, le scroll fait apparaître une grille sobre https://www.khronos.org/webgl/ https://fr.wikipedia.org/wiki/WebGL http://philipperondepierre.com http://www.activation-nodeplus.com/
  • 6/explore! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : 9 9 h o m es m ov ie .c o m Images, scénario, transitions, ambiance… Plongez à fond dans l’histoire / 99homesmovie.com Micro-animations et menu caché 99 % visuel 72 http://philipperondepierre.com http://www.99homesmovie.com/properties/#!/intro
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : re sn .c o .n z expérience utilisateur déroutante, ludique, artistique… unique ! / resn.co.nz 6/explore! 73 Bougez le diamant pour faire apparaître ses milles facettes http://philipperondepierre.com http://resn.co.nz/
  • De l’œuf ou de la poule… creativeedgeparties.com Jouez, au cœur de l’action ! fiveminutes.gs expérience sonore et sensorielle jviewz.com Architecture à 360° dock.cz Morphing tout en code ! species-in-pieces.com C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : vo ir li en s effets typographiques ffmark.com 74 6/explore! http://www.creativeedgeparties.com/ http://jviewz.com/ http://www.fiveminutes.gs/ http://www.creativeedgeparties.com/ http://www.fiveminutes.gs/ http://jviewz.com/ http://www.dock.cz/en http://www.dock.cz/en http://www.species-in-pieces.com/ http://www.species-in-pieces.com/ http://philipperondepierre.com http://www.ffmark.com/ http://www.ffmark.com/
  • 7/artiste retour vers l’inspiration pop, kitsch, glitch, typo, urbain, electro, toons, techno, clip, rock,, fluo, sexy, chic, ecolo, hype, vintage, nerd, arty… C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • 7/artiste C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : p u tp u t. d k Rétro pop minimal, un style décalé, esthétisant et sucré / putput.dk 90’sinspiration 76 http://philipperondepierre.com http://putput.dk/
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lo ve fi la .c o m Appuyez sur la barre pour plus de fun et d’effet wouah ! 7/artiste 80’sinspiration 77 Flat 2.0, interactions psychédéliques, couleurs vibrantes et micro animations / lovefila.com http://philipperondepierre.com http://www.lovefila.com/ http://www.lovefila.com/
  • 7/artiste 80’sinspiration C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : lo cu s- so lu s. w ea re te st in g. it Couleurs vibrantes, design élégant, interface high-tech / locus-solus.wearetesting.it 78 Le scroll laisse la place à des transitions surprenantes http://philipperondepierre.com http://locus-solus.wearetesting.it/en/
  • 7/artiste C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : ko te le tt .in fo happening vidéo « subliminal » et hypnotique / kotelett.info 90’sinspiration Vidéo entrecoupée par une autre sous forme de flashs 79 http://philipperondepierre.com http://kotelett.info/
  • 7/artiste C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : ga rb et t. co m .a u Géométrique, coloré, impactant, graphique / garbett.com.au Les transitions soignées sont au centre du design 70’sinspiration 80 http://philipperondepierre.com http://garbett.com.au/
  • 7/artiste C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : an im ad e. tv /f ra n ke n si m Interface vintage revisitée, ludique et créative / animade.tv/frankensim 80’sinspiration 81 http://philipperondepierre.com http://animade.tv/frankensim/
  • Look arty et scroll en biais mocastepandrepeat.tumblr.com So kitsch! weareroyale.com “ Video killed the radio star ” y78.fr Let’s go obsedo! obsedo.com Juste un peu de CSS… designjobsboard.com C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : vo ir li en s 7/artiste No text, pictos only ttmm.eu 80’s 80’s 70’s 80’s 70’s 80’s 82 http://mocastepandrepeat.tumblr.com/ http://mocastepandrepeat.tumblr.com/ http://weareroyale.com/ http://obsedo.com/ http://y78.fr/ http://weareroyale.com/ http://y78.fr/ http://obsedo.com/ https://www.designjobsboard.com/ https://www.designjobsboard.com/ http://philipperondepierre.com http://ttmm.eu/ http://ttmm.eu/
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 7/artistes inspirés >>> Galeries et sites pour inspirer vos créations
  • 8/play again! gamification le jeu se prend toujours plus au sérieux C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m : P h o to : N in te n d o http://philipperondepierre.com
  • Serious game* : utiliser le jeu pour communiquer une information sérieuse / J’aime les patates 8/play again C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : V al i F u gu lin , M in o ri ty , R u b en F ar ru s Sensibiliser au développement durable avec l’application « J’aime les patates » De rares sites en Flash résistent encore. Remplacés par le HTML et les applications mobiles, bien plus efficaces et multiplateformes. Jeu sérieux ayant une intention de type pédagogique, informative, communicationnelle, marketing, idéologique ou d’entraînement. * 85 http://jaimelespatates.onf.ca/ http://philipperondepierre.com http://www.serious-game.fr/le-developpement-durable-avec-lapplication-jaime-les-patates/
  • Sérieux sans se prendre au sérieux sur le site vitrine et les apps / Le Cancer du Temps 8/play again: app first! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : D . T u rm el , K o -o p M o d e, J .-F . N ad ea u , S . b o u ch er Apprendre à ne pas se laisser dominer par le temps, avec l’application « Le Cancer du Temps » 86 Sortez du « flat plat » avec des graphismes forts et stylés http://www.cancerdutemps.com/ http://philipperondepierre.com http://www.cancerdutemps.com/
  • Jeu véritable ou simple emprunt des codes graphiques ludiques / dairygivesyougo.co.za 8/play again: data C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : d ai ry gi ve sy o u go .c o .z a Les icônes et le data design sont plébiscités dans les jeux Illustration flat mais pas trop, un style très « Material » 87 Les GAFAM s’inspirent des designers et studios qui devancent les tendances http://www.dairygivesyougo.co.za/ http://philipperondepierre.com
  • 8/play again: ego C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M c M ill an * ergophile. com : « Le design émotionnel au sein de vos interfaces » Créer un personnage à son image optimise la connexion émotionnelle* / androidify.com 88 http://philipperondepierre.com http://www.ergophile.com/2012/04/21/design-emotionnel-walter-livre/ https://www.androidify.com/fr/#/
  • Ingress (Niantic*), jeu mobile en réalité augmentée. Toujours plus immersif / ingress.com 8/play again: real life C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G o o gl e, N ia n ti c, T h e P o ké m o n C o m p an y *Niantic, “ex”-propriété de Google - ** Le Figaro : « Pokémon GO : Nintendo calme le jeu… » - Ingress (Wikipédia) - Pokémon GO (Wikipédia) Pokémon GO a été développé sur les bases d’Ingress** Collecte de données, push, localisation GPS… pub ! 89 https://www.ingress.com/ http://philipperondepierre.com https://fr.wikipedia.org/wiki/Niantic_(entreprise) http://www.lefigaro.fr/secteur/high-tech/2016/07/25/32001-20160725ARTFIG00090-pokemon-go-nintendo-calme-le-jeu-et-plonge-en-bourse.php https://fr.wikipedia.org/wiki/Ingress https://en.wikipedia.org/wiki/Pok%C3%A9mon_Go http://www.pokemon.com/fr/jeux-video-pokemon/pokemon-go/ https://www.ingress.com/
  • * WebVR, affichage VR sur navigateur - ** WebGL, site officiel : khronos.org/webgl - WebGL est supporté par les navigateurs modernes Animations et interactions en 3D dynamique / Spacelamb 8/play again: 3D C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : sp ac el am b .1 2 w av e. co m WebGL** permet la 3D dynamique sur les pages et applications HTML5 90 Spacelamb utilise WebVR* pour s’afficher en réalité virtuelle dans le navigateur https://en.wikipedia.org/wiki/WebVR https://www.khronos.org/webgl/ https://fr.wikipedia.org/wiki/WebGL https://spacelamb.12wave.com/ http://philipperondepierre.com https://mozvr.com/ https://fr.wikipedia.org/wiki/WebGL https://fr.wikipedia.org/wiki/WebGL
  • Le retrogaming a encore quelques adeptes / arcade.mcmillan.com 8/play again: retro C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M c M ill an Agence McMillan : jeu vidéo façon 8-bit pour former les nouveaux stagiaires - * Voir le site eboy.com, artistes pixel art Le pixel art* est à la source du web design. Un classique ? 91 80’sinspiration http://arcade.mcmillan.com/ http://philipperondepierre.com http://arcade.mcmillan.com/ http://hello.eboy.com/eboy/
  • 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 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : N in te n d o jeux-serieux.fr 92 http://philipperondepierre.com http://www.jeux-serieux.fr/tag/definition/
  • C o n ce p ti o n e t ill u st ra ti o n : p h ili p p er o n d ep ie rr e. co m @ # ;) 9/tribu tribu vs social la tribu face aux réseaux sociaux mainstream http://philipperondepierre.com
  • 9/tribu Les « réseaux de niche » moins exposés et consensuels, complémentaires de Facebook et Twitter C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - Il lu st ra ti o n : F ac eb o o k Sources : Libération - Rue89 - Wikipédia - Siècle Digital Enquête sur l’algo le plus flippant de Facebook Facebook face à la désertifi- cation de son news feed 94 500 millions par jour : Whatsapp brasserait plus de photos que Facebook, Snapchat et Instagram ! Les vidéos Facebook plus performantes que YouTube Les réseaux « institutionnels » ont perdu de leur sex-appeal ! https://hangouts.google.com http://philipperondepierre.com http://an-2000.blogs.liberation.fr/2016/04/08/facebook-lutte-contre-la-desertification-de-son-news-feed/ http://rue89.nouvelobs.com/2016/06/02/enquete-lalgo-plus-flippant-facebook-264219 https://fr.wikipedia.org/wiki/WhatsApp https://siecledigital.fr/2015/12/21/les-videos-facebook-plus-performantes-que-youtube/ http://rue89.nouvelobs.com/2016/06/02/enquete-lalgo-plus-flippant-facebook-264219 http://an-2000.blogs.liberation.fr/2016/04/08/facebook-lutte-contre-la-desertification-de-son-news-feed/ https://fr.wikipedia.org/wiki/WhatsApp https://siecledigital.fr/2015/12/21/les-videos-facebook-plus-performantes-que-youtube/
  • 9/tribu explorez le monde à travers les yeux des autres sur votre smartphone… et vice versa / Periscope C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : p er is co p e. tv * Le Parisien : « Suicide sur Periscope : Océane, la mort en direct » 95 Periscope / Facebook, la guerre du direct ! Adopté par les jeunes, Periscope se veut un espace de liberté. Vraiment ?* https://hangouts.google.com https://www.periscope.tv/ http://philipperondepierre.com https://www.periscope.tv/ http://www.leparisien.fr/essonne-91/suicide-sur-periscope-oceane-la-mort-en-direct-12-05-2016-5788331.php https://www.periscope.tv/
  • 9/tribu C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : te le gr am .o rg * Wikipédia : le chat secret Telegram atteindrait le niveau de « confidentialité persistante » - ** Le Figaro : « Telegram, une application sulfureuse… » Pour vivre heureux, vivons cachés ? Vif succès auprès des élites, des politiques, mais aussi des malfrats de tous genres…** 96 Rival de WhatsApp et de Messenger, Telegram surprotège vos messages* / Telegram https://hangouts.google.com http://philipperondepierre.com https://fr.wikipedia.org/wiki/Telegram_(application) http://www.lefigaro.fr/secteur/high-tech/2016/07/21/32001-20160721ARTFIG00216-telegram-une-application-sulfureuse-appreciee-des-politiques-francais.php https://telegram.org/
  • 9/tribu C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : tr ib e. p m * iphon.fr : « App de messagerie Tribe : les créateurs Français, désormais à San Francisco » 97 Snapchat boloss ? Tribe : Vine, Snapchat ou Periscope à la sauce Skype…* / Tribe Les jeunes zappent les apps : Vine, Layout, Bolt, Tricy… 1,8 Md de photos par jour.* En tête : Snapchat, Whatsapp, Facebook , Instagram https://hangouts.google.com http://philipperondepierre.com http://www.iphon.fr/post/tribe-app-messagerie-novatrice-dev-francais-interview-846671 http://tribe.pm/
  • 9/tribu Canary, Gossip, Impulses, Whisper, yik yak… exprimez-vous anonymement* / Yik Yak C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : yi ky ak ap p .c o m * influencia.net : « Que valent les apps anonymes ? » - ** lefigaro.fr : Yik Yak - *** lemonde.fr : « Le bluff des apps anonymes et éphémères » Les applications « anonymes », une impression de liberté où tout devient possible ? *** Yik Yak : rencontrez vos semblables autour de vous ** 98 https://hangouts.google.com http://www.yikyakapp.com/ http://philipperondepierre.com http://www.influencia.net/fr/actualites/tendance,tendances,que-valent-applications-anonymes,4950.html http://www.lefigaro.fr/secteur/high-tech/2014/11/30/32001-20141130ARTFIG00015-yik-yak-l-application-anonyme-qui-veut-concurrencer-twitter.php http://www.lemonde.fr/pixels/article/2014/10/20/applications-anonymes-ou-ephemeres-le-grand-bluff_4508264_4408996.html
  • 9/tribu Le monde « parfait » selon Instagram. espace d’expression ou de standardisation ? / Nick & Justin C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : in st ag ra m .c o m /j u st in ic k_ p gh * Source : lefigaro.fr - Instagram, acquisition de Facebook depuis avril 2012 Mettre en scène sa vie pour passer un message social Instagram dépasse les 400 millions d’utilisateurs * 99 https://hangouts.google.com https://instagram.com/justinick_pgh http://philipperondepierre.com http://www.lefigaro.fr/secteur/high-tech/2015/09/23/32001-20150923ARTFIG00147-instagram-depasse-les-400-millions-d-utilisateurs.php
  • 9/tribu Concurrencés par les réseaux sociaux, les blogs doivent monter en gamme / Medium C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : m ed iu m .c o m * Système de gestion de contenu ou de publication - ** Apprendre à utiliser Medium - Flipboard, agrégateur de réseaux sociaux Minimal design pour Medium, le CMS* haut de gamme** Pas de limite de caractères, le retour du texte ! Les tags sont très populaires sur les sites et réseaux 100 https://hangouts.google.com https://medium.com http://philipperondepierre.com https://medium.com/en-francais-in-french/medium-com-mode-demploi-9098f96d1449 https://flipboard.com/
  • 9/tribu LinkedIn, Scoop.it, SlideShare, Viadeo, Xing… Réseaux pros, tous experts ! / Jacques Lebègue, scoop.it C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : sc o o p .it , J ac q u es L eb èg u e * Curation de contenu : sélectionner, éditer et partager des contenus pertinents pour un sujet donné - MOOC : formation en ligne ouverte à tous Le savoir de leurs utilisateurs, mine d’or des réseaux pros Présentations, curation, mooc, le fond et la forme* 101 https://hangouts.google.com http://www.scoop.it/t/marketing-digital-communication-etc http://www.scoop.it/ http://philipperondepierre.com https://fr.wikipedia.org/wiki/Curation_de_contenu https://fr.wikipedia.org/wiki/Formation_en_ligne_ouverte_%C3%A0_tous
  • 10/IoT internet of things* hyper connectés et «omnipotents»… pour longtemps * and everything C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : F la sh -M at ic T u n in g http://philipperondepierre.com
  • Réalité augmentée : devenez pilote grâce à votre tablette… / parrot.com 10/IoT C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : P ar ro t Bebop Drone Skycontroller de Parrot - * FPV : pilotage en immersion (First Person View) Tablette et lunettes FPV* pour une immersion totale La réalité augmentée partout : jeux, simulation 2D et 3D, sport, transport, shopping, immobilier, marketing… 103 http://www.parrot.com/fr/produits/skycontroller/ http://philipperondepierre.com http://www.parrot.com/fr/produits/skycontroller/
  • … ou prenez soin de vos plantes / parrot.com 10/IoT C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : P ar ro t Capteur Flower Power de Parrot 104 http://www.parrot.com/fr/produits/flower-power/ http://philipperondepierre.com http://www.parrot.com/fr/produits/flower-power/
  • * WYSIWYG = What you see is what you get (Ce que vous voyez est ce que vous obtenez) - transdigital.fr : « La fabrication additive en images » C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : G lo w fo rg e Plastique, métal, carton, bois, chocolat… l’impression 3D pour tous ! / glowforge.com 105 La démocratisation et la simplification de l’impression 3D passera par le cloud et les interfaces WYSIWYG* 10/IoT http://transdigital.fr/ http://philipperondepierre.com https://glowforge.com/ https://www.youtube.com/watch?v=ysCaqh38JVQ
  • La domotique pour tout, partout / confort-sauter.com 10/IoT C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : Sa u te r Malao, radiateur connecté de Sauter 106 http://www.confort-sauter.com/nos-solutions-connectees http://philipperondepierre.com http://www.confort-sauter.com/bien-choisir-son-chauffage/video-radiateur-connecte-chaleur-douce-inertie-malao
  • * Prénom d’Amazon Echo, appareil utilisant **l’intelligence artificielle, qui interagit par la voix avec l’utilisateur pour diriger les objets connectés C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A m az o n Dialoguez avec Alexa*, ou la domotique assitée par la voix et l’IA** / Amazon Echo 107 Amazon mettra à disposition Alexa Voice Service pour les développeurs tiers 10/IoT https://en.wikipedia.org/wiki/Amazon_Echo http://philipperondepierre.com http://www.amazon.com/oc/echo/
  • 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 » C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : LG , A p p le Le skeuomorphisme donne une note d’authenticité 108 http://www.i-montres.net/lg-g-watch-urbane-4glte-une-montre-qui-peut-se-passer-de-smartphone/ http://philipperondepierre.com
  • 10/IoT C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le Programmes, jeux, web, applications, voix… la TV connectée toujours plus autonome / apple.com La télécommande, gadget bientôt dispensable ? La TV connectée bientôt au cœur de la domotique ? 109 http://philipperondepierre.com
  • 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 ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A ld eb ar an , B lu e Fr o g R o b o ti cs Reconnaissance, synthèse vocale, détection et suivi d’humains, d’objets… Buddy vous assiste au quotidien… 110 Buddy, Trusty, Pepper, Nao, Romeo… bientôt chez vous ? https://www.aldebaran.com/en/a-robots/who-is-pepper https://www.aldebaran.com/fr http://www.bluefrogrobotics.com/fr/home-fr/ http://www.trust.com/en/trusty http://www.clubic.com/humour-informatique-geek/live-japon/actualite-794052-pepper-menteur.html http://philipperondepierre.com http://www.bluefrogrobotics.com/fr/buddy-votre-robot-compagnon-familial/
  • Autopilot : écran affiché sous les yeux du conducteur en mode pilotage automatique sur les Tesla C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : Te sl a 111 Tesla a présenté Autopilot pour la conduite assistée Skeuomorphisme + flat servent l’ergonomie, ici vitale Voiture connectée, laissez l’écran prendre le contrôle / teslamotors.com 10/IoT http://philipperondepierre.com https://www.teslamotors.com/blog/your-autopilot-has-arrived
  • 10/IoT Applications Oculus avec démos : share.oculus.com - 20 minutes : « Facebook rachète Oculus » - Les Numériques : casques RV C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : o cu lu s. co m Oculus Rift, vos sens à 360°. Une révolution ? Les consoles chahutées par les mobiles, bientôt dépassées par la réalité virtuelle ? / oculus.com 112 Facebook a embauché en 2014 un des fondateurs de Second Life. Play again ? https://share.oculus.com/ http://www.20minutes.fr/high-tech/1333442-20140325-20140325-facebook-rachete-startup-realite-virtuelle-oculus-2-milliards-dollars http://www.lesnumeriques.com/casque-realite-virtuelle/realite-virtuelle-point-sur-differentes-technologies-casques-a2493.html http://philipperondepierre.com https://www.oculus.com/en-us/rift/
  • 10/IoT * API expérimentale (Mozilla, Google… ). Affiche la RV dans le navigateur, compatible avec lunettes VR. Soutenue par les navigateurs dès 2016 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M o zi lla , A -F ra m e te am , M o zV R t ea m WebVR* affiche la réalité virtuelle dans votre navigateur web / mozvr.com 113 Modélisation 3D, jeux, science, exploration… https://en.wikipedia.org/wiki/WebVR http://philipperondepierre.com https://mozvr.com/ https://mozvr.com/
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m /et après ? évolution des tendances 2017, 2018, 2019, 2020… http://philipperondepierre.com
  • /et après ? * Agent conversationnel qui dialogue avec l’utilisateur - ** La fusion des OS n’est pas dans l’intérêt d’Apple, qui préfère vendre différents devices C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m Des cycles liés aux avancées technologiques La fonction première du design est d’améliorer l’expérience que l’on a d’un produit ou d’un service. Le web design n’est pas décoratif, il fait le lien entre les technologies et nous. Les nouveautés seraient plus difficiles d’accès sans l’ergonomie, le style et l’esthétique. Nous sommes animés par l’affect, même face à une machine. Apple ou Google l’ont bien compris, qui placent l’expérience utilisateur au centre de leurs problématiques. Une nouveauté technologique n’est pas garante de succès. Les industriels doivent produire… Mais, si une nouvelle technologie ne prend pas sens pour le public, elle ne sera pas adoptée. Par exemple, les TV 3D n’ont pas eu le succès escompté. Le succès tient de la conjonction entre les inventeurs, les concepteurs, les designers, le marché et les utilisateurs. Le cloud et le big data se sont imposés. Avec de nouveaux usages liés à la mobilité, aux objets connectés, à la réalité virtuelle et augmentée, à l’intelligence artificielle, au chatbot*… et qui vont évoluer. On assiste à une convergence des OS chez Microsoft, tandis que Google mise tout sur la mobilité et les appareils connectés. Apple garde quatre OS distincts, tout en multipliant les similitudes. Un rapprochement réel d’OS X et iOS pourrait prendre quelques années**… 115 https://fr.wikipedia.org/wiki/Agent_conversationnel http://philipperondepierre.com
  • /et après ? Démonstration du mode Continuum sur le Lumia 950 avec le Microsoft Display Dock C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M ic ro so ft Et si le PC du futur ne faisait qu’un avec le smartphone ? En 2015, Microsoft présente Continuum sur Windows 10, qui donne à votre mobile des airs de PC. Avec quelques limitations… pour le moment. L’OS détecte la présence du clavier et affiche l’interface Modern UI sur le moniteur. Microsoft Continuum : bientôt la fin du PC ? / microsoft.com 116 http://www.monwindowsphone.com/demonstration-du-mode-continuum-sur-le-lumia-950-avec-le-microsoft-display-dock-t109372.html http://philipperondepierre.com http://www.microsoft.com/en-us/mobile/accessory/hd-500/
  • /et après ? CSS sur Wikipédia - Les standards CSS sont publiés par le W3C - W3C : brouillon des dernières nouveautés des sélecteurs de niveau 4 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m Couleurs, interactions, typo, fonctionnalités, accessibilité, post-responsive design… CSS4 donnera encore plus de pouvoir aux designers. Pas encore supporté par les navigateurs, en développe- ment depuis 2010, il faudra encore quelques années pour en profiter. Un design encore plus précis, fonctionnel et facile à mettre en place, avec CSS4 117 4 https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade#CSS4 https://www.w3.org/ https://drafts.csswg.org/selectors-4/ http://philipperondepierre.com
  • /et après ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : LG LG enroule l’écran Oled comme une feuille de papier / usine-digitale.fr 118 Arrivée des écrans souples et protéiformes : tablettes, journaux, domotique, TV, jouets, tableaux de bords… http://philipperondepierre.com http://www.usine-digitale.fr/article/ces-2016-lg-enroule-l-ecran-oled-comme-du-papier.N372014 https://www.youtube.com/watch?v=Cxnv_QKxXf0
  • /et après ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : K ei ic h i M at su d a Rue, commerces, musées, écoles… L’hyper réalité augmentée partout ou presque ! / km.cx 119 Une vision d’artiste colorée qui montre le potentiel de la réalité augmentée. Pokemon GO, déjà le bon vieux temps ? http://philipperondepierre.com http://km.cx/projects/hyper-reality/ https://vimeo.com/166807261
  • /et après ? C o n ce p ti o n e t re to u ch e : p h ili p p er o n d ep ie rr e. co m - P h o to : Fo lk er t G o rt er (s u p er fa m o u s. co m ) 120 La conception assistée par ordinateur, intelligente et prédictive * MIT (Massachusetts Institute of Technology), source : clubic.com Photoshop, peux-tu effacer le pylône et les câbles ? Voilà Philippe. Cela vous convient-il ? Puissance matérielle, cloud, algorithmes, intelligence artificielle… Tout est prêt ! Le MIT* développe un algo- rithme capable de remplacer l’intuition humaine Exprimez-vous ! L’interface graphique devient vocale http://philipperondepierre.com http://superfamous.com/ http://www.clubic.com/mag/trendy/actualite-783292-mit-algortihme.html
  • 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 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : m ag ic le ap .c o m Le requin holographique qui « dévore » Marty Mc Fly dans le film Retour vers le Futur 2, bientôt réalité ? Google y croit et a investi dans Magic Leap, qui, via un appareil*, explore la réalité « pseudo-holographique ». Avec un champ applicatif impressionnant : éducation, science, médecine, jeux… 121 Visionnez la démo sans trucage ! http://www.magicleap.com/ http://www.journaldunet.com/web-tech/start-up/magic-leap-levee-google-1014.shtml http://philipperondepierre.com https://www.youtube.com/watch?v=kw0-JRa9n94
  • 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 » C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : M in d M az e Nous sommes au début d’une nouvelle ère. Les appareils dirigés par la pensée sont déjà là. Par exemple chez MindMaze. La réalité augmentée se joint à la réalité virtuelle, avec un champ applicatif qui va du gaming à la santé. Les designers de demain devront se réinventer ! 122 http://www.mindmaze.ch/ http://www.s2pmag.ch/2015/03/06/realite-virtuelle-mindmaze-ajoute-la-lecture-de-pensees/ http://philipperondepierre.com http://www.apple.com/fr/apple-pencil/
  • /in les tendances au top ! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • * Muzli (medium.com) : « Long shadow is dead. Welcome Diffuse shadows. » Le semi flat « photoréaliste » Le flat influencé par Material. Effets de reliefs et d’ombres naturelles pour donner de la consistance / manualcreative.com C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : m an u al cr ea ti ve .c o m , N ik e /in 124 Diffuse shadows : les ombres « naturelles » sont de retour* https:[email protected]/long-shadow-is-dead-welcome-diffuse-shadows-6a1f2ee9a6fe http://manualcreative.com/ http://philipperondepierre.com https:[email protected]/long-shadow-is-dead-welcome-diffuse-shadows-6a1f2ee9a6fe
  • Applications wearables, TV et objets connectés Wearable (vêtements, chaussures, accessoires… ), domotique, transports, objets connectés… / Apple Watch C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le /in 125 http://www.apple.com/fr/watch/app-store-apps/ http://philipperondepierre.com
  • * Chatbot : agent conversationnel qui dialogue avec l’utilisateur - influencia.net : « Le chatbot ou l’obsolescence de 80% des sites web » Chatbots* et assistants personnels vocaux (Siri, Cortana, Google Now… ) Interaction vocale, intelligente et prédictive, à votre service, pour tout, partout C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m /in 126 Certains intellectuels nous alertent sur les risques potentiels en matière de sécurité et de liberté indivi- duelle. Les assistants intelligents apprennent à nous connaître… Peut être un peu trop ? https://fr.wikipedia.org/wiki/Agent_conversationnel http://www.influencia.net/fr/actualites/tendance,observatoire-influencia,chatbot-obsolescence-80-sites-web,6398.html http://www.apple.com/fr/ios/siri/ https://cortana.uservoice.com/ https://www.google.com/search/about/learn-more/now/ http://philipperondepierre.com
  • * 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* C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : q w an t. co m /in 127 Dégooglisation d’internet : Framasoft promeut le logiciel libre, éthique, solidaire, décentralisé… La volonté est de remettre le numérique entre les mains de M. et Mme tout le monde. Bon courage… https://www.qwant.com/privacy https://www.youtube.com/watch?v=z_qo20DiW1A https://duckduckgo.com/ http://philipperondepierre.com https://degooglisons-internet.org/ https:[email protected]/long-shadow-is-dead-welcome-diffuse-shadows-6a1f2ee9a6fe
  • 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 C o n ce p ti o n e t in fo gr ap h ie : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le /in Taille des appareils en fonction de leur résolution d’écran 2015  Watch 312 x 390 px 2007 iPhone 320 x 480 px 2014 iPhone 6 plus 1920 x 1080 px 2015 MacBook 12“ 2304 x 1440 px 2014 iMac 5K, 27“ avec écran Retina 5 120 × 2 880 px 1984 Macintosh 512 x 342 px 128 http://philipperondepierre.com
  • Écrans splittés / nightcall Double scroll horizontal, vertical, ou en biais Les panoramas / houseofborel Avec mise en scène de la typographie C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es /in Les gros plans / bookofbeards Assumez-vous avec le zoom plein écran ! Les gifographies Infographies animées en GIF Les filtres, la bichromie Le style Instagram et les effets polychromes… L’image en mouvement Vidéo, gifs et cinémagraphes* 129* Cinémagraphe : entre photo et vidéo, consiste à créer du mouvement dans un élément isolé de l’image http://nightcall.us/ http://nightcall.us/ https://houseofborel.com/ https://houseofborel.com/ http://philipperondepierre.com http://bookofbeards.com/ http://bookofbeards.com/ http://www.cbnews.fr/info-cb-news/grand-prix-du-brand-content-les-astuces-de-kantar-media-a1018750 https://www.instagram.com/ http://www.frenchweb.fr/design-limage-en-mouvement-nouvelle-forme-dengagement/244519
  • Le paiement mobile (NFC… ) Android Pay, Apple Pay, Samsung Pay… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es /in Bluetooth Smart iBeacon, Proximity, Eddystone… Les algorithmes / bl.ocks.org Des data à l’interface web, ils sont partout Le partage / NightSwapping Sites et applications entre particuliers Le cloud Attention à la sécurité des données ! 130 SVG Dessin et animation SVG Dessin vectoriel sans perte de qualité http://fr.mobiletransaction.org/le-paiement-mobile/ http://philipperondepierre.com http://www.ictjournal.ch/fr-CH/News/2015/07/15/Google-concurrence-Apple-avec-une-technologie-beacon-en-open-source.aspx http://bl.ocks.org/mbostock/1136236 http://bl.ocks.org/mbostock/1136236 https://www.nightswapping.com https://www.nightswapping.com http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html
  • /out démodé, daté, obsolète… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m http://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 foodporn Gare à l’indigestion ! Les textos La France résiste à Whatsapp. Jusqu’à quand ? C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es /out 132 SMS La publicité intrusive Adblock adopté massivement change la donne La tyrannie du like Le like tue le partage spontané http://siecledigital.fr/2015/07/flat-design-mort-vive-material-design/ http://imagesociale.fr/ http://www.journaldugeek.com/2015/08/27/le-foodporn-interdit-en-allemagne/ http://philipperondepierre.com http://www.europe1.fr/societe/mort-annoncee-du-sms-la-france-fait-de-la-resistance-2674942 http://www.synaptic.be/blog/ad-blocker-la-fin-de-la-pub-sur-le-web/ http://an-2000.blogs.liberation.fr/2016/08/04/instagram-stories-la-reponse-la-tyrannie-du/
  • 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é. ≠ C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : A p p le , N o ki a /out 133 http://philipperondepierre.com
  • Les interfaces chargées Trop de pages, de boutons, de polices… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es Trop de texte Penser aux images, pictos ou data design /out Le web non éthique Tel est pris qui croyait prendre Le design low cost Design agressif, kitsch ou cheap 134 Flash Préférer HTML5 + CSS3 + JavaScript Holo design Antérieur à Material. Utilisé par Android 4.4 http://www.partirpascher.com/ http://philipperondepierre.com http://fr.jimdo.com/2014/07/09/%C3%A9crire-pour-internet-6-conseils-pratiques/ http://www.lemonde.fr/pixels/article/2015/09/01/sur-le-site-de-rencontres-ashley-madison-une-armee-de-robots_4742584_4408996.html?xtmc=ashley_madison&xtcr=1 https://www.unlimitedwebhosting.co.uk/ http://www.adobe.com/fr/products/flash.html http://fr.droidcon.com/2014/agenda/detail?title=Holo+-%3E+Material+Design+Transition
  • 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 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to s : v o ir li en s im ag es Les nuages de mots Ultra périmés. Pensez aux tags /out 135 http://www.doisjeutiliser.fr/unePopinIntrusive/ http://www.doisjeutiliser.fr/unCarrousel/ http://www.lattitudeweb.com/flat-design-ou-glossy http://www.alesiacom.com/blog/mort-aux-banques-dimages http://www.alesiacom.com/blog/mort-aux-banques-dimages http://philipperondepierre.com
  • * 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 C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : To p ic S im p le /out 136 Compétitions, appels d’offres, concours, collaborations… Pour une rémunération digne et équitable, affichez le logo* https://rodleg.wordpress.com/2013/06/10/quest-ce-que-le-perverted-crowdsourcing/ http://www.travailgratuit.com/ https://rodleg.wordpress.com/2013/06/10/quest-ce-que-le-perverted-crowdsourcing/ http://philipperondepierre.com http://www.mariejulien.com/?post/2007/12/29/Competition-Remuneration
  • /couleurs mixez les gammes ! C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m http://philipperondepierre.com
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : P an to n e, A p p le , G o o gl e, G re et ab l, Ta b ac In fo S er vi ce /couleurs Couleurs inspirées par la nature* Technologiques mais naturelles. Vert Greenery, couleur 2017 selon Pantone®. Pastels acidulés et/ou délavés Efficace avec flat design + blanc et gris Attention aux palettes trop fades ! 138* Tendances printemps 2017 selon Pantone®. Couleurs vibrantes Inspirées par iOS et Material + blanc et/ou gris. Franches et efficaces sur mobiles. + ombres et dégradés http://philipperondepierre.com http://store.pantone.com/fr/fr/printemps-2017-fashion-color-report http://www.tabac-info-service.fr/J-arrete-de-fumer/Je-telecharge-l-appli https://greetabl.com/ http://www.apple.com/fr/ios/whats-new/ https://www.google.com/design/spec/style/color.html#
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : gt -c in et yp e. co m , t h ef ad er .c o m , M ic ro so ft /couleurs 139 Couleurs basiques Inspirées par Windows 8 à 10, très corporate. Efficace avec un style institutionnel. Noir, gris, blanc + couleur(s)* Élégance, sobriété et professionnalisme. Met les visuels en valeur. 139 No colors Pour un effet narratif stylisé, ou une définition radicale de « Less is more ». * Ou or. http://philipperondepierre.com http://www.microsoft.com/fr-fr/windows http://www.thefader.com/ http://gt-cinetype.com/
  • C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m - P h o to : V in e, p o in tl es sc o rp .c o m , i St o ck /couleurs 140 Rétro, teintes « sépia » Doublement daté. À mixer avec palettes flat et Material. Rustique : ocres, kakis… Risqué ! Les couleurs varient selon les écrans. Votre beau vert kaki peut virer caca d’oie. Tons vifs vieillis / Flat design Apporte de la consistance au flat. Renouvelé par l’influence de Material design. http://philipperondepierre.com https://vine.co/
  • Daltonisme : pattern UI, vision des couleurs et daltonisme / blog.octo.com Data : bienvenue dans l’ère du Smart Data ! / journaldunet.com Data design : 14 outils de visualisation de données / thenextweb.com Design émotionnel : exemples / emotional.design Forum d’entraide développement front-end, code et design / alsacreations.com Material design, le guide / material-design Minimal websites / siteinspire.com Responsive web design : design liquide, responsive ou adaptatif / alsacreations.com Serious game et gamification / serious-game.fr Sketch, spécialisé dans le design de sites et applications (mac) / sketchapp.com Templates : themeforest, des milliers de thèmes et templates / themeforest.net UX : Guérrilla design en milieu hostile, responsive et mobilité / Stéphanie Walter /quelques liens… C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 141 http://blog.octo.com/pattern-ui-vision-des-couleurs-et-daltonisme/ http://www.journaldunet.com/solutions/expert/58084/trop-de-big-data--tue-le-big-data--bienvenue-dans-l-ere-du-smart-data.shtml http://thenextweb.com/dd/2015/04/21/the-14-best-data-visualization-tools/ http://emotional.design/ http://www.alsacreations.com/ https://www.google.com/design/spec/material-design/introduction.html http://www.siteinspire.com/websites?categories=14 http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html http://www.serious-game.fr/ http://www.sketchapp.com/ http://themeforest.net http://fr.slideshare.net/inpixelitrust/gurrilla-design-en-milieu-hostile-responsive-et-mobilit http://philipperondepierre.com
  • /article: alsacréations C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 142 + http://philipperondepierre.com http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html
  • /clic ! Apple, BrAnding STOrY Décryptage : branding, communication, marketing, design, influences, historique… philippe rOndepierre C o n ce p ti o n : p h ili p p er o n d ep ie rr e. co m 143 + http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage http://philipperondepierre.com http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage
  • /merci ! Philippe Rondepierre 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. http://philipperondepierre.com/ https://fr.linkedin.com/pub/philippe-rondepierre/88/17/287 http://www.viadeo.com/fr/profile/philippe.rondepiere http://philipperondepierre.com/
Fly UP