LESTENDANCESDUWEB DESIGN2012Modes, évolutions et exemplesissues de l’internet d’aujourd’hui.Jean-Philippe Cabaroc   Mail :...
QU’EST CEINTRODUCTIONQUE LEWEB DESIGN ?
QU’EST CE QUE LE WEB DESIGN ?                                C’EST AVANT TOUT                                UN DESIGNER
QU’EST CE QUE LE WEB DESIGN ?                                LE TRAVAIL D’UN DESIGNER                                > Amé...
QU’EST CE QUE LE WEB DESIGN ?                                MAIS INTERNET                                ÉVOLUE SANS ARRÊT
QU’EST CE QUE LE WEB DESIGN ?                                MAIS INTERNET                                ÉVOLUE SANS ARRÊ...
LA COULEUR1.
LA COULEUR                  Couleur pantone 2012                  TANGO MANDARINE                  (TANGERINE TANGO)Source...
LA COULEUR             2010           2011            2012             Turquoise      Chèvrefeuille   Tango Mandarine     ...
SIMPLICITÉ2.
SIMPLICITÉ             L’EXEMPLE DE GOOGLE             3 OBJECTIFS CLÉS :             > Focus (ciblé)             > Elasti...
SIMPLICITÉÉvolution de la page d’accueil de google depuis 19971997                                       19981999         ...
SIMPLICITÉÉvolution de la page d’accueil de google depuis 19972002                                         20042011       ...
SIMPLICITÉÉvolution du design de google mapSources : http://googledata.org/
LES POLICES3.PERSONNALISÉES
LES POLICES PERSONNALISÉES                             AVANT                             > Choix limité de polices        ...
LES POLICES PERSONNALISÉES                             AUJOURD’HUI                             > On peut intégrer le fichi...
LES POLICES PERSONNALISÉES                             AVANTAGES                             > Des designs améliorés      ...
LES POLICES PERSONNALISÉES          www.silverlng.com    www.made-in-you.com          www.nykevanwyk.com                  ...
LES POLICES PERSONNALISÉES  Catalogues de polices web libre de droit :  www.fontsquirrel.com                         www.g...
LE DESIGN4.TYPOGRAPHIQUE
LE DESIGN TYPOGRAPHIQUE                          PRINCIPE                          > Utiliser le texte comme              ...
LE DESIGN TYPOGRAPHIQUE          www.oliverkavanagh.com   www.kidd81.com          www.simpleasmilk.co.uk                  ...
5.   LE RÉTRO
LE RÉTRO           OBJECTIF           > Apporter chaleur             et convivialité           > Donner une ambiance      ...
LE RÉTRO           www.level2d.com                www.tricycleterror.com           www.lesfillesalaviolette.com           ...
LE6.MINIMALISME
LE MINIMALISME                 PRINCIPE                 > Économie maximale                   des moyens                 >...
LE MINIMALISME          www.brettarthurphoto.com   www.archiduchesse.com          www.10yearsintype.com      www.madebysof...
ONE SINGLE7.PAGE
ONE SINGLE PAGE                  PRINCIPE                  > Créer un blog facile d’accès                  > Mettre un max...
ONE SINGLE PAGE   www.wingcheng.com   www.soupagency.it   www.jcsuzanne.com   www.launchfactory.org   www.marlene-portfoli...
LE8.RESPONSIVEWEBDESIGN
LE RESPONSIVE WEBDESIGN                          PRINCIPE                          > S’adapter à                          ...
LE RESPONSIVE WEBDESIGNSources : www.mediaqueri.es
LE RESPONSIVE WEBDESIGN        www.smashingmagazine.com   www.mikeyanderson.com        www.gravitatedesign.com    www.ging...
9.   LE PARALLAXE
PARALLAXE            PARALLAXE ??            > Animer séparément              différents plans d’un site web
PARALLAXE       www.nikebetterworld.com   www.nintendo.com.au/gamesites/mariokartwii       www.soul-reaper.com       www.s...
LE GIF ANIMÉ9.CONTEMPORAIN
LE GIF ANIMÉ CONTEMPORAIN                            VRAIMENT ?                            > Oui, le GIF peut être tendance
LE GIF ANIMÉ CONTEMPORAIN                              Ce GIF là, on oublie                            (sauf en l’utilisan...
LE GIF ANIMÉ CONTEMPORAIN        www.fromme-toyou.tumblr.com/tagged/gif              http://dvdp.tumblr.com/tagged/dvdp%20...
POUR ALLER PLUS LOINRESPONSIVE WEBDESIGN                                              TYPOGRAPHIE PERSONNALISÉERESSOURCES ...
MERCI !Jean-Philippe CabarocDirecteur artistiqueMail : cabaroc@gmail.comTwitter : @cabarocwww.cabaroc.com
Upcoming SlideShare
Loading in...5
×

Tendances du web design 2012

10,074

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,074
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
181
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "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.

×