...

Tendances du web design 2012

by jean-philippe-cabaroc

on

Report

Category:

Design

Download: 0

Comment: 0

9,934

views

Comments

Description

Internet est un lieu en perpétuel mouvement. La technique et les comportements évoluent très vite, ils influencent par conséquent le web design qui est très lié à ces deux facteurs. Par le biais d'exemples et d'études cas, l'atelier propose un tour d'horizon global et transversal des différentes tendances et évolutions actuelles dans web design.

Ce
Download Tendances du web design 2012

Transcript

  • 1. LESTENDANCESDUWEB DESIGN2012Modes, évolutions et exemplesissues de l’internet d’aujourd’hui.Jean-Philippe Cabaroc Mail : cabaroc@gmail.comTwitter : @cabarocDirecteur artistiquewww.cabaroc.com
  • 2. QU’EST CEINTRODUCTIONQUE LEWEB DESIGN ?
  • 3. QU’EST CE QUE LE WEB DESIGN ?C’EST AVANT TOUTUN DESIGNER
  • 4. QU’EST CE QUE LE WEB DESIGN ?LE TRAVAIL D’UN DESIGNER> Améliorer l’accès a un besoin> Allier aspect esthétique etfonctionnel> Connaître les contraintestechniques
  • 5. QU’EST CE QUE LE WEB DESIGN ?MAIS INTERNETÉVOLUE SANS ARRÊT
  • 6. QU’EST CE QUE LE WEB DESIGN ?MAIS INTERNETÉVOLUE SANS ARRÊT> Il faut se tenir sans cesseau courant
  • 7. LA COULEUR1.
  • 8. LA COULEURCouleur pantone 2012TANGO MANDARINE(TANGERINE TANGO)Sources : http://www.pantone-france.com/
  • 9. LA COULEUR 2010 20112012 TurquoiseChèvrefeuille Tango Mandarine «Calme «Courage«Énergie ApaisemmentConfiance Chaleur Protection.» Vitalité.»Vivacité.»
  • 10. SIMPLICITÉ2.
  • 11. SIMPLICITÉ L’EXEMPLE DE GOOGLE 3 OBJECTIFS CLÉS : > Focus (ciblé) > Elasticity (elastique) > Effortlessness (aisance)
  • 12. SIMPLICITÉÉvolution de la page d’accueil de google depuis 19971997 19981999 2001Sources : http://www.lookback.fr/
  • 13. SIMPLICITÉÉvolution de la page d’accueil de google depuis 19972002 20042011 2012Sources : http://www.lookback.fr/
  • 14. SIMPLICITÉÉvolution du design de google mapSources : http://googledata.org/
  • 15. LES POLICES3.PERSONNALISÉES
  • 16. LES POLICES PERSONNALISÉES AVANT > Choix limité de polices > Contraint par le catalogue de polices présent dans l’ordinateur de l’internaute
  • 17. LES POLICES PERSONNALISÉES AUJOURD’HUI > On peut intégrer le fichier de police directement dans le site > Contraint uniquement par les droits d’utilisations de la police
  • 18. LES POLICES PERSONNALISÉES AVANTAGES > Des designs améliorés sans être obligé de transformer un texte en image
  • 19. LES POLICES PERSONNALISÉESwww.silverlng.comwww.made-in-you.comwww.nykevanwyk.com www.messagefirst.com
  • 20. LES POLICES PERSONNALISÉESCatalogues de polices web libre de droit :www.fontsquirrel.com www.google.com/webfonts
  • 21. LE DESIGN4.TYPOGRAPHIQUE
  • 22. LE DESIGN TYPOGRAPHIQUEPRINCIPE> Utiliser le texte commeélément principal du design
  • 23. LE DESIGN TYPOGRAPHIQUEwww.oliverkavanagh.com www.kidd81.comwww.simpleasmilk.co.uk www.amazeelabs.com
  • 24. 5. LE RÉTRO
  • 25. LE RÉTRO OBJECTIF > Apporter chaleur et convivialité > Donner une ambiance ludique ou décalée
  • 26. LE RÉTRO www.level2d.comwww.tricycleterror.com www.lesfillesalaviolette.comwww.allstarlanes.co.uk
  • 27. LE6.MINIMALISME
  • 28. LE MINIMALISME PRINCIPE > Économie maximale des moyens > Se débarraser du superflue pour aller à l’essentiel
  • 29. LE MINIMALISMEwww.brettarthurphoto.com www.archiduchesse.comwww.10yearsintype.comwww.madebysofa.com
  • 30. ONE SINGLE7.PAGE
  • 31. ONE SINGLE PAGEPRINCIPE> Créer un blog facile d’accès> Mettre un maximumd’information dans unminimum d’espace
  • 32. ONE SINGLE PAGE www.wingcheng.com www.soupagency.it www.jcsuzanne.com www.launchfactory.org www.marlene-portfolio.com
  • 33. LE8.RESPONSIVEWEBDESIGN
  • 34. LE RESPONSIVE WEBDESIGNPRINCIPE> S’adapter àtoutes les tailles d’écran
  • 35. LE RESPONSIVE WEBDESIGNSources : www.mediaqueri.es
  • 36. LE RESPONSIVE WEBDESIGNwww.smashingmagazine.com www.mikeyanderson.comwww.gravitatedesign.comwww.gingerwhale.com
  • 37. 9. LE PARALLAXE
  • 38. PARALLAXEPARALLAXE ??> Animer séparémentdifférents plans d’un site web
  • 39. PARALLAXE www.nikebetterworld.com www.nintendo.com.au/gamesites/mariokartwii www.soul-reaper.com www.slaveryfootprint.org
  • 40. LE GIF ANIMÉ9.CONTEMPORAIN
  • 41. LE GIF ANIMÉ CONTEMPORAINVRAIMENT ?> Oui, le GIF peut être tendance
  • 42. LE GIF ANIMÉ CONTEMPORAINCe GIF là, on oublie(sauf en l’utilisant au second degré)
  • 43. LE GIF ANIMÉ CONTEMPORAINwww.fromme-toyou.tumblr.com/tagged/gifhttp://dvdp.tumblr.com/tagged/dvdp%20donehttp://graphism.fr/regardez-star-wars-en-gif-anim www.iamnotanartist.org
  • 44. POUR ALLER PLUS LOINRESPONSIVE WEBDESIGNTYPOGRAPHIE PERSONNALISÉERESSOURCESRESSOURCES• http://bit.ly/qmnL3F• http://www.fontsquirrel.com• http://www.blogoergosum.com/29433-responsive-web-design-• http://www.google.com/webfonts une-introduction-et-quelques-frameworks• https://typekit.comTUTORIELS POUR POUR LES INTÉGRATEURS/DÉVELOPPEURS TUTORIELS• http://www.alsacreations.com/article/lire/930-css3-media-que- • http://www.alsacreations.com/astuce/lire/630-fonte-personna- ries.html lisee-site-web.html• http://www.grafikart.fr/tutoriels/html-css/media-queries-res- • http://www.html5-css3.fr/css3/police-personnalisee-css3-font- ponsive-178 face-google-fontPARALLAXE HTML5TUTORIELS (EN ANGLAIS)• http://www.franckmaurin.com/the-parallax-effects-with-jquery• http://www.alsacreations.com/article/lire/750-HTML5-nou-• http://css-tricks.com/auto-moving-parallax-backgroundveautes.html• http://www.webdesignshock.com/one-page-website• http://www.alsacreations.com/search/tag/html5• http://html5demos.com
  • 45. MERCI !Jean-Philippe CabarocDirecteur artistiqueMail : cabaroc@gmail.comTwitter : @cabarocwww.cabaroc.com
  • Fly UP