...

Tendances Web Design 2015

by philippe-rondepierre

on

Report

Category:

Design

Download: 1

Comment: 0

8,409

views

Comments

Description

La mode s'évapore, la tendance s'érode… Seul le style reste.

Quelles seront les tendances web design en 2015 ? Vont-elles significativement changer ? Sur quels points ?
De nouveaux usages vont-ils percer et avoir un impact sur la forme ? L'écran va-t-il prendre le pas sur les supports imprimés ou évoluer ?

Je vous présente les évolutions graphiques et digitales. Un point sur les tendances webdesign et autour du web. Une étude pour y voir plus clair.

[MAJ : novembre 2014]

Philippe Rondepierrre - Directeur Artistique
http://philipperondepierre.com
Download Tendances Web Design 2015

Transcript

  • 1. WDT15 web design tendances 2015 PHILIPPE RONDEPIERRE >>
  • 2. TendancesWebDesign2015-philipperondepierre.com La mode s’évapore, la tendance s’érode... Seul le style reste. >>
  • 3. IMPRESSIONde Gutenberg à David Carson “THE END OF PRINT?”David Carson est un graphiste américain des années 1990. Il fut l’un des premiers à jouer avec la typographie numérique afin de l’intégrer à l’image. Il publie en 1995 “The End of Print” qui marque une rupture et augure la fin de l’impression, juste avant qu’internet devienne un média grand public. Et si au lieu d’enterrer le print, le web le rejoignait ? Hautes résolutions, retour de la typo, cloud, liseuses bientôt en couleur… Tout est prêt ou presque.
  • 4. 10 tendances web design // FLAT DESIGN // GRAPHIQUE // PHOTOGÉNIQUE // MINIMAL // GÉOMÉTRIQUE // GRILLE // DYNAMIQUE // MATERIAL // COULEUR // FLUIDE // RESPONSIVE // ADAPTATIF // MOBILE FIRST // MONOPAGE // SCROLL // ANIMÉ // PARALLAXE // STORYTELLING // L’IMAGE D’ABORD // PHOTO // VIDÉO // ILLUSTRATION // TYPOGRAPHIE // DATA DESIGN // GAMIFICATION // SERIOUS GAME // VINTAGE // EMPATHIE //AUTHENTIQUE // SOCIAL DESIGN // TOUT CONNECTÉ // 3D // RÉALITÉ AUGMENTÉE // DOMOTIQUE // INTERFACE HYBRIDE // OBJETS CONNECTÉS… >>
  • 5. 1/flat design ENCORE PLUS PLAT ET MINIMAL, LE FLAT DESIGN RESTE TENDANCE EN 2015 / Apple iOS 8 Blanc, gris mettent en relief des cou- leurs franches. Un design ultra simple et moderne. Une esthétique efficace optimisée web et Apps. TendancesWebDesign2015-philipperondepierre.com
  • 6. 1/flat design INTERFACES ORDINATEURS : LE SMARTPHONE EN GRAND / Apple OS X Yosemite fond flou transparence notifications + widgets icônes aplatis et fluos maquette aplats police iOSLe style plat et simplifié sur mobile influencera plus que jamais celui sur grands écrans. Tout comme OS X Yosemite customisé à la sauce iOS 8. Idem pour Windows dont l’interface plate en tuiles est optimisée pour les écrans tactiles. TendancesWebDesign2015-philipperondepierre.com
  • 7. 1/flatvs. skeuomorphisme INITIÉE PAR MICROSOFT EN 2010, L’INTERFACE FLAT DESIGN A “RINGARDISÉ” LE PHOTORÉALISME D’iOS 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é… ). Un style plus web, plus léger, conceptuel et épuré. Simple à décliner. Plus efficace ? ≠ RAPPEL TendancesWebDesign2015-philipperondepierre.com
  • 8. 1/flat: graphique APLATS DE PASTELS VIFS, POLICES ET ILLUSTRATIONS GRAPHIQUES / applove.se TendancesWebDesign2015-philipperondepierre.com
  • 9. 1/flat: photogénique PHOTOS ICONIQUES SUR FONDS EN APLATS : FRAIS ET GRAPHIQUE / sosh.fr TendancesWebDesign2015-philipperondepierre.com
  • 10. 1/flat: minimal MINIMAL DESIGN : UNE TENDANCE QUI VA SE RENOUVELER, MAIS DURER / alainberteau.tumblr.com Prisé des graphistes, designers et sites tendances, le style minimal est une lame de fond qui a changé la percep- tion du web design. Ici sur tumblr. TendancesWebDesign2015-philipperondepierre.com
  • 11. 1/flat: géométrique CARRÉS, RONDS, TRIANGLES, RAYURES… LE DESIGN GÉOMÉTRIQUE RESTE TENDANCE / airnauts.com TendancesWebDesign2015-philipperondepierre.com
  • 12. 1/flat: dynamic grid GRILLE DYNAMIQUE ET RESPONSIVE : À CHAQUE FOIS, UNE PAGE DIFFÉRENTE / etchapps.com TendancesWebDesign2015-philipperondepierre.com
  • 13. 1/flat: material GOOGLE A PRÉSENTÉ “MATERIAL DESIGN” POUR MOBILES ET DESKTOP / Google Aplats, interface animée et fluide, responsive, reliefs et effets 3D, grandes typos, couleurs acidulées… Le flat design optimisé pour le mobile. TendancesWebDesign2015-philipperondepierre.com
  • 14. 1/flat: material colors DES COULEURS FRAÎCHES, VIVES ET SATURÉES / Google Les pastels vifs sont progressivement remplacés par des couleurs flash. Attention à la surdose ! Blanc et gris pour éviter la “saturation”. TendancesWebDesign2015-philipperondepierre.com
  • 15. 1/flat: icônes UI ET UX*, DES ICÔNES SIMPLES ET STYLISÉES, UNE INTERFACE SOIGNÉE / uiparade.com * Interface utilisateur (UI) et expérience utilisateur (UX) . Voir lien en fin de document. TendancesWebDesign2015-philipperondepierre.com Plus efficaces et universelles que le texte, les icônes se gèrent comme les polices vectorielles. Ici avec Font Awesome.
  • 16. 1/flat: icônes SOUVENT BLANCHES OU MONOCHROMES POUR UNE MEILLEURE LISIBILITÉ / simpleicons.org TendancesWebDesign2015-philipperondepierre.com
  • 17. 1/flat: et après? CONCEPTS ET VARIANTES : UN AIR DE DÉJÀ VU ? / Alexey Masalov -Amazon Fire Phone - Thair Joudi - John Menard 1 3 4 TendancesWebDesign2015-philipperondepierre.com 2 flat design en impasse ? mix avec le skeuomorphisme ? nouvelles technologies ? illustrations ?
  • 18. 1/flat: et après? FLAT DESIGN ET SKEUOMORPHISME : VERS UN MARIAGE DE RAISON ? / skew Le skeuomosphisme a t-il-dit son dernier mot ? Pas certain. À l’image d’iOS 8 qui emprunte encore aux deux styles. Des étudiants ont poussé le skeuomor- phisme à son paroxysme (icônes réelles et animées… ), avec une touche “flat”. C’est une vue d’artiste, mais le champ créatif n’a pas fini de nous surprendre… L’idée d’un design en partie customisable est aussi envisageable à moyen terme. TendancesWebDesign2015-philipperondepierre.com
  • 19. 2/responsive UNE MULTITUDE DE NAVIGATEURS ET RÉSOLUTIONS : LE DESIGN DEVIENT LIQUIDE, RESPONSIVE OU ADAPTATIF * zdnet.fr - ** Alsacreations.com : « C’est quoi le Responsive Web Design ? » TendancesWebDesign2015-philipperondepierre.com MOBILE FIRST : consiste à concevoir un site en priorité pour la version mobile, puis de le décliner pour les écrans plus grands. LIQUIDE (ou fluide) : le site s’adapte à la fenêtre. RESPONSIVE : liquide + refonte des styles, réorganisation de la page… (CSS3 Media Queries). ADAPTATIF : site entièrement repensé, accessibilité, char- gement conditionnel de ressources, ergonomie…** Depuis 2013 il se vend plus de tablettes que de PC qui résistent cependant. 7,5 millions devraient s’écouler en 2014*. Les TabletPC devraient aussi progresser.
  • 20. INTERFACE ET EXPÉRIENCE UTILISATEUR* OPTIMISÉES POUR TOUS LES FORMATS / skinnyties.com * Interface utilisateur (UI) et expérience utilisateur (UX) . Voir lien en fin de document. TendancesWebDesign2015-philipperondepierre.com 2/responsive
  • 21. SITE WEB OU APPLICATION : MOBILE FIRST / sarenza.com TendancesWebDesign2015-philipperondepierre.com 2/responsive
  • 22. HTML5, CSS3, JAVASCRIPT… Gridset Mise en page web évoluée. https://gridsetapp.com FitText Tailles des polices ajustées. http://fittextjs.com Images Des images optimisées et ajustées. http://adaptive-images.com FlevNav Des menus optimisés pour le mobile. http://jasonweaver.name/lab/flexiblenavigation Diaporamas Des diaporamas optimisés et ajustés. http://responsiveslides.com Tableaux Des tableaux ajustés. http://zurb.com/playground/responsive-tables Bootstrap Framework front-end* responsive. http://getbootstrap.com Foundation Framework front-end* responsive. http://foundation.zurb.com Wirefy Une conception intuitive. http://getwirefy.com jQuery Bibliothèque JavaScript libre. http://jquery.com … LIQUIDE, RESPONSIVE OU ADAPTATIF : DE NOMBREUX OUTILS * Le terme back-end fait référence à des outils d’administration et front-end désigne la partie visible aux utilisateurs ou aux visiteurs. TendancesWebDesign2015-philipperondepierre.com 2/responsive
  • 23. 3/monopage NAVIGATION AU SCROLL SIMPLIFIÉE, HÉRITÉE DU TACTILE / everylastdrop.co.uk SITES ANIMÉS ET STORYTELLING* : ici, en scrollant on vit la journée du personnage qui nous raconte une histoire pleine de sens. TendancesWebDesign2015-philipperondepierre.com Si les sites multipages répondent à un besoin réel (boutiques, presse… ), les sites monopages sont adpatés au tactile et simplifient la navigation. * Communication narrative qui consiste à communiquer par l’intermédiaire d’une histoire pour capter l’attention de l’internaute et créer une connexion émotionnelle.
  • 24. SCROLL VERTICAL, HORIZONTAL OU EN BIAIS / fifteenrobin.com.sg TendancesWebDesign2015-philipperondepierre.com 3/monopage Des transitions subtiles d’un visuel à l’autre qui permettent de développer un univers autour d’un thème ou d’un produit, tout en fluidité.
  • 25. SCROLL VERTICAL, HORIZONTAL OU EN BIAIS / www.puma.com DOUBLE SCROLL TendancesWebDesign2015-philipperondepierre.com 3/monopage
  • 26. LA PARALLAXE CRÉATIVE / cyclemon.com PARALLAXE : déplacement variable de la position des éléments en fonction du scroll. En résulte un effet de mou- vement/profondeur plus immersif. TendancesWebDesign2015-philipperondepierre.com 3/monopage
  • 27. LA PARALLAXE REMIXÉE / withings.com La parallaxe sera associée à différents effets : animations, mouvements perpendiculaires, vidéo, zoom, superpositions, interactivité… TendancesWebDesign2015-philipperondepierre.com 3/monopage
  • 28. MONOPAGE, GRAPHIQUE, PARALLAXE, CLIP EN PLEINE PAGE… UN SITE TENDANCE / hollysiz.com TendancesWebDesign2015-philipperondepierre.com 3/monopage
  • 29. 4/l’image d’abord PHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme TendancesWebDesign2015-philipperondepierre.com
  • 30. PHOTO, ILLUSTRATION, VIDÉO… L’IMAGE S’AFFICHE EN GRAND PARTOUT ET POUR TOUT / Rosa theme cadres et filets TendancesWebDesign2015-philipperondepierre.com 4/l’image d’abord
  • 31. SILENCE, ON TOURNE ! LA VIDÉO EN PLEINE PAGE / dior.com FIBRE OPTIQUE, 4G… : la vitesse de connexion plus rapide va développer les usages et les possibilités du web; haute définition, 3D, interactivité… TendancesWebDesign2015-philipperondepierre.com 4/l’image d’abord
  • 32. 4/l’image d’abord DES PHOTOS AUTHENTIQUES ET DES ILLUSTRATIONS “ICONIQUES” / Google Les images, photos et illustrations se conjuguent. Elles racontent une histoire, sans filtre et avec simplicité. La métaphore plutôt que le “cliché”. TendancesWebDesign2015-philipperondepierre.com
  • 33. PHOTOS, TYPOS, ILLUSTRATIONS SONT MIXÉES. SURRÉALISTE ET CRÉATIF ! / edbangerrecords.com Si l’illustration explore tous les domaines de la création, la mise en page est souvent simple et élégante, voir minimale. TendancesWebDesign2015-philipperondepierre.com 4/l’image d’abord
  • 34. FLAT / timotheecottier.fr TYPO / mikeyburton.com BLOG / Pénélope Bagieu VINTAGE / obsedo.com PHOTO / julesjulien.com L’ILLUSTRATION, C’EST FUN, ROCK , PIXEL ART, COMICS, DATA, GÉOMÉTRIQUE, GIF, 3D… ET C’EST… GLITCH ART / 20three.com TendancesWebDesign2015-philipperondepierre.com 4/l’image d’abord
  • 35. LA TYPOGRAPHIE TOUJOURS PLUS PRÉSENTE / amazeelabs.com Grande typographie travaillée à la main. Apporte de la fraîcheur dans un contexte web parfois normatif et aseptisé (flat design… ). TendancesWebDesign2015-philipperondepierre.com 5/typographie
  • 36. 5/typographie LA TYPO SE CONJUGUE AU PLURIEL : GRAPHIQUE, GRILLE, FLAT, PICTOS, PHOTOS… / sosh.fr TendancesWebDesign2015-philipperondepierre.com
  • 37. LES POLICES DIRECTEMENT CHARGÉES PAR LE NAVIGATEUR / www.mixd.co.uk Google Fonts, @font-face… des outils qui permettent de sortir de l’Arial et de la Times… Compatibles avec tous les navigateurs modernes. TendancesWebDesign2015-philipperondepierre.com 5/typographie
  • 38. TendancesWebDesign2015-philipperondepierre.com 5/typographie POLICES WEB : OMBRES, RELIEF, MULTICOLORES, TRANSPARENCE… / Player
  • 39. GRANDE TYPO LIGHT SANS SERIF : PLUS LISIBLE SUR MOBILES / Google TendancesWebDesign2015-philipperondepierre.com 5/typographie
  • 40. LA HAUTE DÉFINITION REDONNE DU CARACTÈRE À LA POLICE TendancesWebDesign2015-philipperondepierre.com 5/typographie RETOUR VERS LE FUTUR ! La police de caractères a dû s’adapter aux basses résolutions des moniteurs inférieures à celle du papier (300 ppp). Des polices comme Lucida Grande ou Georgia avaient été créées pour leur lisibilité sur ces écrans. Les écrans haute définition de nos smartphones et tablettes ont comblé cette lacune avec une finesse parfois supérieure au papier. Les moniteurs haute définition vont se démocratiser. Les typographes vont pouvoir donner libre cours à leur créativité et les clas- siques d’avant internet vont s’afficher superbement sur tous les écrans. Comme Apple qui remplace Lucida Grande par Helvetica Neue dans son dernier OS X Yosemite. eee e eee e RRR R RRR R Lucida Grande Helvetica Neue Georgia BodoniTS POLICES ÉCRAN POLICES CLASSIQUES
  • 41. L’ART DE RENDRE VISUELLES DES DONNÉES, CHIFFRÉES OU NON / healthland.time.com TendancesWebDesign2015-philipperondepierre.com 6/data design
  • 42. MOBILE + DATA DESIGN = LE DUO GAGANT / Apple, Health Didactique et efficace, le Data Design, un ami qui vous veut du bien ! Avec Health, l’iPhone deviendra votre compagnon de santé. TendancesWebDesign2015-philipperondepierre.com 6/data design
  • 43. OUTIL DE VULGARISATION, LE DATA DESIGN EST PLÉBISCITÉ PAR LES MÉDIAS ET LES ENTREPRISES / IBM TendancesWebDesign2015-philipperondepierre.com 6/data design
  • 44. STATIQUE OU DYNAMIQUE, LE DATA DESIGN EST RESPONSIVE OU S’ANIME / Metronic - Admin dashboard TendancesWebDesign2015-philipperondepierre.com 6/data design
  • 45. SERIOUS GAMES : UTILISER LE JEU AFIN DE COMMUNIQUER UNE INFORMATION SÉRIEUSE / Apec Un jeu sérieux ayant une intention de type pédagogique, informative, com- municationnelle, marketing, idéologi- que ou d’entraînement. TendancesWebDesign2015-philipperondepierre.com 7/gamification
  • 46. JEU EN LIGNE OU APPLICATION DÉDIÉE SELON LA PERTINENCE / Beer Me TendancesWebDesign2015-philipperondepierre.com Pour mieux cibler son public, le serious game emprunte les codes graphiques du web, du jeu vidéo… Le jeu, plus efficace qu’un long discours. 7/gamification
  • 47. JEU VÉRITABLE OU EMPRUNTS DES CODES GRAPHIQUES LUDIQUES / Robby Leonardi TendancesWebDesign2015-philipperondepierre.com 7/gamification
  • 48. LE SERIOUS GAMES TRÈS TENDANCE : L’IDATE (Institut de l’Audiovisuel et des Télécommunications en Europe), a publié une étude selon laquelle le marché du Serious Game, qui représentait 1,5 milliard d’euros en 2013, pourrait peser 10 milliards d’euros en 2015 !* NEWSGAME Jeu qui véhicule un message informatif. ADVERGAME Jeu communiquant un message publicitaire, marketing, social, politique, religieux… EDUGAME Jeu ayant des fins éducatives, préventives ou utilisé en entreprise. SOCIALGAME Jeux sociaux liés aux réseaux sociaux (Facebook, Google +… ). EXERGAME Jeu d’entraînement physique ou intellectuel. EDUMARKETGAME Jeu qui passe un message marketing, sous une forme éducative, informative ou d’entraînement. TendancesWebDesign2015-philipperondepierre.com Gamification et serious game. Voir lien en fin de document. * Source : ed-tech.fr 7/gamification
  • 49. RIEN DE TEL QUE LES RÉFÉRENCES AU PASSÉ POUR PARAÎTRE PLUS AUTHENTIQUE / missmarysmix.com Si le style vintage revisite les codes graphiques du passé, il reste web et moderne : monopage, aplats, paral- laxe, design minimal, social… TendancesWebDesign2015-philipperondepierre.com 8/vintage
  • 50. LE VINTAGE RÉALISTE, VOIR SURRÉALISTE / pocopeople.com Empathie, bienveillance… Le retour de l’humain symbolisé par un vintage qui s’ancre dans le présent de façon subtile, surprenante ou créative. TendancesWebDesign2015-philipperondepierre.com 8/vintage
  • 51. FUN ET CRÉATIF, PAS DE PLACE À LA NOSTALGIE. LE VINTAGE EST HYPE ! / pacemaker.net Disco is back! Les couleurs acidulées, les codes des 70’s et 80’s sont réinterprétés sur un ton fun et ludique. TendancesWebDesign2015-philipperondepierre.com 8/vintage
  • 52. LA TYPOGRAPHIE VINTAGE PERMET D’AFFIRMER SA SINGULARITÉ / ridebarstow.com La typographie vintage donne une image authentique tout en étant à la pointe des tendances web. Ici le fond vidéo s’anime en pleine page. TendancesWebDesign2015-philipperondepierre.com 8/vintage
  • 53. LE WEB N’ÉCHAPPE PAS À LA MODE DU RETRO GAMING / pica-pic.com Quelques sites de jeux développés en Flash résistent encore. Pour combien de temps ? Le passage au HTML5 n’est pas toujours simple. TendancesWebDesign2015-philipperondepierre.com 8/vintage
  • 54. SNAPCHAT, DEVIANT ART, SKYPE, TUMBLR, PINTEREST, BADOO, TWITTER, LINE… LE SOCIAL TRÈS DESIGN Tumblr site de microblog essentielle- ment basé sur le visuel a insufflé son style minimaliste et efficace à toute la blogosphère. Les réseaux sociaux recyclent les modes. Ils peuvent aussi les lancer. Le web design 2015 ne se fera pas sans les réseaux. TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 55. VINE, DRIBBBLE, MYSPACE, SKYPE, VIADEO, BEBO, INSTAGRAM, FACEBOOK… LE SOCIAL TRÈS DESIGN Instagram à chambardé la photo avec son style très reconnaissable. Tout le web est impacté, du simple blog jusqu’aux fonctions d’iOS 8. TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 56. TWITTER, LULU, PINTEREST, LINKEDIN, INSTAGRAM, GOOGLE +, DRIBBBLE, WIX… LE SOCIAL TRÈS DESIGN Wix propose de véritables templates web modernes, accesssibles à tous. Le web design bancal bricolé par papa n’est plus de mise. TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 57. TWITTER, LINKEDIN, DRIBBBLE, MYSPACE, SKYPE, SCOOP.IT, FACEBOOK… LE SOCIAL TRÈS DESIGN Personal branding : scoop.it, plate- forme de veille et curation de contenu permet de valoriser sa marque personnelle auprès de ses réseaux. TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 58. FLICKR, BEHANCE, MYSPACE, SKYPE, FACEBOOK, BEBO, SNAPCHAT, VINE… LE SOCIAL TRÈS DESIGN Narcissisme social et fugacité. Snapchat diffuse photos et vidéos durant 10 secondes sur mobile, avant suppression. Succès chez les jeunes ! TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 59. BEBO, LULU, VINE, PINTEREST, DEVIANT ART, SNAPCHAT, BEHANCE, TWITTER… LE SOCIAL TRÈS DESIGN Twitter à lancé Vine sur mobile qui héberge de courtes vidéos qui tournent en boucle. Quel réseau social va marquer 2015 ? TendancesWebDesign2015-philipperondepierre.com 9/social design
  • 60. RÉALITÉ AUGMENTÉE : LE VIRTUEL POUR DE VRAI, DU BOUT DES DOIGTS / IKEA En scannant une page du catalogue, on peut voir des meubles en 3D prendre forme au sein d’une pièce. Un design sobre, plat et intuitif. TendancesWebDesign2015-philipperondepierre.com 10/tout connecté
  • 61. RÉALITÉ AUGMENTÉE : LE WEB PLUS PUISSANT QUE LE RÉEL / wahouu.com La réalité augmentée va encore pro- gresser, de nombreux usages et des applications immersives. Un avant goût des Google Glass ? Transports, immobilier, agencement, simulation, shopping, marketing… La réalité augmentée sera partout. Un design qui reste à inventer ? TendancesWebDesign2015-philipperondepierre.com 10/tout connecté
  • 62. RÉALITÉ AUGMENTÉE : LE SMARTPHONE DEVIENT PLV / iBeacon TendancesWebDesign2015-philipperondepierre.com 10/tout connecté
  • 63. Proximity, technologie de localisation en intérieur, destinée à équiper les lieux publics et proposer des informa- tions contextuelles précises. RÉALITÉ AUGMENTÉE : À l’instar d’Apple avec iBeacon, Samsung présente Proximity TendancesWebDesign2015-philipperondepierre.com 10/tout connecté
  • 64. À la WWDC 2014 Apple a présenté Home Kit. La domotique va révolu- tionner notre quotidien, à la maison comme au bureau. Home Kit anticipe les futurs produits Apple. L’Apple Watch récemment présentée et disponible en 2015 en tirera-t-elle parti ? Elle intégrera Siri, des usages dédiés à la santé, aux loisirs, à la communication, au “tout connecté”… Apple Watch DOMOTIQUE ET OBJETS CONNECTÉS : BIENTÔT VOTRE SMARTPHONE PILOTERA TOUT OU PRESQUE ! TendancesWebDesign2015-philipperondepierre.com 10/tout connecté
  • 65. TV CONNECTÉE : À VOUS DE JOUER ! / France Télévision TendancesWebDesign2015-philipperondepierre.com 10/tout connecté Cinéma, internet, réseaux sociaux, multimédia, jeux, sport, formation… La TV connectée a redéfini l’usage de la télévision et va croître en 2015.
  • 66. INTERFACES HYBRIDES : INTERACTIVITÉ, SCANNER, 3D, TACTILE, ÉCRITURE, VIDÉO… / Sprout TendancesWebDesign2015-philipperondepierre.com 10/tout connecté Laissez de côté clavier et souris. Avec Sprout, HP réinvente une nouvelle façon de communiquer, concevoir, créer… plus immersive et concrète.
  • 67. OBJETS CONNECTÉS : DES ÉCRANS DE TOUTES SORTES. L’OBJET ET L’ÉCRAN INTRINSÈQUEMENT LIÉS TendancesWebDesign2015-philipperondepierre.com 10/tout connecté Samsung Gear Nest : thermostat Samsung : réfrigérateur Sharp : free form display
  • 68. RE recyclage LE WEB DESIGN SOUS INFLUENCES >>
  • 69. recyclage/1 NÉOPLASTICISME / Mondrian FLAT DESIGN / Windows Phone – = + LESS IS MORE MINIMAL / jtcdesign.com RÉTRO / Coca-Cola VINTAGE / missmarysmix.com TendancesWebDesign2015-philipperondepierre.com
  • 70. recyclage/2… TYPOGRAPHIE TYPOGRAPHIE / handiemail.com INTERFACE GRAPHIQUE / Xerox DATA DESIGN / google analytics JEUX VIDÉO 70’s / Atari : Pong PIXEL ART / eboy.com TendancesWebDesign2015-philipperondepierre.com
  • 71. DOWN! obsolète >>
  • 72. obsolète!! LE SKEUOMORPHISME DATÉ ≠ FLAT DESIGN FLASH PRÉFÉRER HTML5 + CSS3 + JAVASCRIPT LES INTERFACES CHARGÉES TROP DE PAGES, BOUTONS, POLICES… LE DESIGN LOW COST DESIGN AGRESSIF, KITSCH OU CHEAP LES PHOTOS CLICHÉS/CREUSES IMAGES LIBRES DE DROIT USÉES TROP DE TEXTE PRÉFÉRER IMAGES, PICTOS OU DATA TendancesWebDesign2015-philipperondepierre.com
  • 73. LA LIGHTBOX ET LES POP-UP INTRUSIFS CRÉATIVITÉ ÉGALE À ZÉRO 0 + 0 = LA TÊTE À TOTO LE CARROUSEL FOURRE-TOUT SOUVENT DÉSUET ET INNEFICACE LE SLIDER QUI TUE TROP D’EFFETS TUE L’EFFET IFRAME (FENÊTRE INCLUSE) DÉCONSEILLÉ POUR LE RÉFÉRENCEMENT LE PLASTIQUE BRILLANT (iOS 6) TendancesWebDesign2015-philipperondepierre.com obsolète
  • 74. DATA DESIGN http://www.strategies.fr/etudes-tendances/tendances/188580W/le-data-design-nouvelle-science-de-l-information.html DESIGN LIQUIDE, RESPONSIVE OU ADAPTATIF http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html GAMIFICATION ET SERIOUS GAME http://blog.seriousgame.be GEOMETRIC DESIGN http://blog.templatemonster.com/2014/01/29/geometric-web-design-2014-most-used-shapes INTERFACE UTILISATEUR (UI) ET EXPÉRIENCE UTILISATEUR (UX) http://blog.lunaweb.fr/ux-ui-experience-utilisateur-interface MINIMAL DESIGN http://www.minimalsites.com MOBILE FIRST http://corp.beapp.fr/mobile-first PARALLAXE http://magnetstuto.com/2014/05/670/ THEMEFOREST : DES MILLIERS DE THÈMES ET TEMPLATES http://themeforest.net UI : UNE BONNE INTERFACE UTILISATEUR (anglais) http://www.goodui.org quelques liens TendancesWebDesign2015-philipperondepierre.com
  • 75. merci! PHILIPPE RONDEPIERRE Graphiste et Directeur Artistique philipperondepierre.com Utilisation non commerciale uniquement. Version juin 2014, m-à-j novembre 2014. Les images présentées en exemple le sont à titre de citation et d’analyse. © Tous droits réservés par les ayants droits. Non-commercial. June 2014, updated in November 2014. The images are presented as examples and analysis. © All rights reserved by copyright holders. <<<
Fly UP