Tendances du web design 2012

10,608
-1

Published on

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

Published in: Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,608
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
184
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Tendances du web design 2012

  1. 1. LESTENDANCESDUWEB DESIGN2012Modes, évolutions et exemplesissues de l’internet d’aujourd’hui.Jean-Philippe Cabaroc Mail : cabaroc@gmail.com Twitter : @cabarocDirecteur artistique www.cabaroc.com
  2. 2. QU’EST CEINTRODUCTIONQUE LEWEB DESIGN ?
  3. 3. QU’EST CE QUE LE WEB DESIGN ? C’EST AVANT TOUT UN DESIGNER
  4. 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 et fonctionnel > Connaître les contraintes techniques
  5. 5. QU’EST CE QUE LE WEB DESIGN ? MAIS INTERNET ÉVOLUE SANS ARRÊT
  6. 6. QU’EST CE QUE LE WEB DESIGN ? MAIS INTERNET ÉVOLUE SANS ARRÊT > Il faut se tenir sans cesse au courant
  7. 7. LA COULEUR1.
  8. 8. LA COULEUR Couleur pantone 2012 TANGO MANDARINE (TANGERINE TANGO)Sources : http://www.pantone-france.com/
  9. 9. LA COULEUR 2010 2011 2012 Turquoise Chèvrefeuille Tango Mandarine «Calme «Courage «Énergie Apaisemment Confiance Chaleur Protection.» Vitalité.» Vivacité.»
  10. 10. SIMPLICITÉ2.
  11. 11. SIMPLICITÉ L’EXEMPLE DE GOOGLE 3 OBJECTIFS CLÉS : > Focus (ciblé) > Elasticity (elastique) > Effortlessness (aisance)
  12. 12. SIMPLICITÉÉvolution de la page d’accueil de google depuis 19971997 19981999 2001Sources : http://www.lookback.fr/
  13. 13. SIMPLICITÉÉvolution de la page d’accueil de google depuis 19972002 20042011 2012Sources : http://www.lookback.fr/
  14. 14. SIMPLICITÉÉvolution du design de google mapSources : http://googledata.org/
  15. 15. LES POLICES3.PERSONNALISÉES
  16. 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. 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. 18. LES POLICES PERSONNALISÉES AVANTAGES > Des designs améliorés sans être obligé de transformer un texte en image
  19. 19. LES POLICES PERSONNALISÉES www.silverlng.com www.made-in-you.com www.nykevanwyk.com www.messagefirst.com
  20. 20. LES POLICES PERSONNALISÉES Catalogues de polices web libre de droit : www.fontsquirrel.com www.google.com/webfonts
  21. 21. LE DESIGN4.TYPOGRAPHIQUE
  22. 22. LE DESIGN TYPOGRAPHIQUE PRINCIPE > Utiliser le texte comme élément principal du design
  23. 23. LE DESIGN TYPOGRAPHIQUE www.oliverkavanagh.com www.kidd81.com www.simpleasmilk.co.uk www.amazeelabs.com
  24. 24. 5. LE RÉTRO
  25. 25. LE RÉTRO OBJECTIF > Apporter chaleur et convivialité > Donner une ambiance ludique ou décalée
  26. 26. LE RÉTRO www.level2d.com www.tricycleterror.com www.lesfillesalaviolette.com www.allstarlanes.co.uk
  27. 27. LE6.MINIMALISME
  28. 28. LE MINIMALISME PRINCIPE > Économie maximale des moyens > Se débarraser du superflue pour aller à l’essentiel
  29. 29. LE MINIMALISME www.brettarthurphoto.com www.archiduchesse.com www.10yearsintype.com www.madebysofa.com
  30. 30. ONE SINGLE7.PAGE
  31. 31. ONE SINGLE PAGE PRINCIPE > Créer un blog facile d’accès > Mettre un maximum d’information dans un minimum d’espace
  32. 32. ONE SINGLE PAGE www.wingcheng.com www.soupagency.it www.jcsuzanne.com www.launchfactory.org www.marlene-portfolio.com
  33. 33. LE8.RESPONSIVEWEBDESIGN
  34. 34. LE RESPONSIVE WEBDESIGN PRINCIPE > S’adapter à toutes les tailles d’écran
  35. 35. LE RESPONSIVE WEBDESIGNSources : www.mediaqueri.es
  36. 36. LE RESPONSIVE WEBDESIGN www.smashingmagazine.com www.mikeyanderson.com www.gravitatedesign.com www.gingerwhale.com
  37. 37. 9. LE PARALLAXE
  38. 38. PARALLAXE PARALLAXE ?? > Animer séparément différents plans d’un site web
  39. 39. PARALLAXE www.nikebetterworld.com www.nintendo.com.au/gamesites/mariokartwii www.soul-reaper.com www.slaveryfootprint.org
  40. 40. LE GIF ANIMÉ9.CONTEMPORAIN
  41. 41. LE GIF ANIMÉ CONTEMPORAIN VRAIMENT ? > Oui, le GIF peut être tendance
  42. 42. LE GIF ANIMÉ CONTEMPORAIN Ce GIF là, on oublie (sauf en l’utilisant au second degré)
  43. 43. LE GIF ANIMÉ CONTEMPORAIN www.fromme-toyou.tumblr.com/tagged/gif http://dvdp.tumblr.com/tagged/dvdp%20done http://graphism.fr/regardez-star-wars-en-gif-anim www.iamnotanartist.org
  44. 44. POUR ALLER PLUS LOINRESPONSIVE WEBDESIGN TYPOGRAPHIE PERSONNALISÉERESSOURCES RESSOURCES• 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-background veautes.html• http://www.webdesignshock.com/one-page-website • http://www.alsacreations.com/search/tag/html5 • http://html5demos.com
  45. 45. MERCI !Jean-Philippe CabarocDirecteur artistiqueMail : cabaroc@gmail.comTwitter : @cabarocwww.cabaroc.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×