Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
LESTENDANCES
DUWEB DESIGN
2012
Modes, évolutions et exemples
issues de l’internet d’aujourd’hui.

Jean-Philippe Cabaroc   ...
QU’EST CE
INTRODUCTION




QUE LE
WEB DESIGN ?
QU’EST CE QUE LE WEB DESIGN ?




                                C’EST AVANT TOUT
                                UN DESI...
QU’EST CE QUE LE WEB DESIGN ?




                                LE TRAVAIL D’UN DESIGNER
                               ...
QU’EST CE QUE LE WEB DESIGN ?




                                MAIS INTERNET
                                ÉVOLUE SAN...
QU’EST CE QUE LE WEB DESIGN ?




                                MAIS INTERNET
                                ÉVOLUE SAN...
LA COULEUR
1.
LA COULEUR




                  Couleur pantone 2012
                  TANGO MANDARINE
                  (TANGERINE TANGO...
LA COULEUR




             2010           2011            2012




             Turquoise      Chèvrefeuille   Tango Mand...
SIMPLICITÉ
2.
SIMPLICITÉ




             L’EXEMPLE DE GOOGLE
             3 OBJECTIFS CLÉS :

             > Focus (ciblé)
            ...
SIMPLICITÉ


Évolution de la page d’accueil de google depuis 1997
1997                                       1998




1999...
SIMPLICITÉ


Évolution de la page d’accueil de google depuis 1997
2002                                         2004




20...
SIMPLICITÉ



Évolution du design de google map




Sources : http://googledata.org/
LES POLICES
3.
PERSONNALISÉES
LES POLICES PERSONNALISÉES




                             AVANT
                             > Choix limité de polices
 ...
LES POLICES PERSONNALISÉES




                             AUJOURD’HUI
                             > On peut intégrer le...
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                      ...
LE DESIGN
4.
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 ambian...
LE RÉTRO

           www.level2d.com                www.tricycleterror.com




           www.lesfillesalaviolette.com



...
LE
6.
MINIMALISME
LE MINIMALISME




                 PRINCIPE
                 > Économie maximale
                   des moyens
          ...
LE MINIMALISME

          www.brettarthurphoto.com   www.archiduchesse.com




          www.10yearsintype.com      www.ma...
ONE SINGLE
7.
PAGE
ONE SINGLE PAGE




                  PRINCIPE
                  > Créer un blog facile d’accès
                  > Mettre...
ONE SINGLE PAGE




   www.wingcheng.com   www.soupagency.it   www.jcsuzanne.com   www.launchfactory.org   www.marlene-por...
LE
8.
RESPONSIVE
WEBDESIGN
LE RESPONSIVE WEBDESIGN




                          PRINCIPE
                          > S’adapter à
                   ...
LE RESPONSIVE WEBDESIGN




Sources : www.mediaqueri.es
LE RESPONSIVE WEBDESIGN




        www.smashingmagazine.com   www.mikeyanderson.com




        www.gravitatedesign.com  ...
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  ...
LE GIF ANIMÉ
9.
CONTEMPORAIN
LE GIF ANIMÉ CONTEMPORAIN




                            VRAIMENT ?
                            > Oui, le GIF peut être t...
LE GIF ANIMÉ CONTEMPORAIN




                              Ce GIF là, on oublie
                            (sauf en l’ut...
LE GIF ANIMÉ CONTEMPORAIN




        www.fromme-toyou.tumblr.com/tagged/gif              http://dvdp.tumblr.com/tagged/dv...
POUR ALLER PLUS LOIN
RESPONSIVE WEBDESIGN                                              TYPOGRAPHIE PERSONNALISÉE
RESSOURCE...
MERCI !
Jean-Philippe Cabaroc
Directeur artistique
Mail : cabaroc@gmail.com
Twitter : @cabaroc

www.cabaroc.com
Prochain SlideShare
Chargement dans…5
×

sur

Tendances du web design 2012 Slide 1 Tendances du web design 2012 Slide 2 Tendances du web design 2012 Slide 3 Tendances du web design 2012 Slide 4 Tendances du web design 2012 Slide 5 Tendances du web design 2012 Slide 6 Tendances du web design 2012 Slide 7 Tendances du web design 2012 Slide 8 Tendances du web design 2012 Slide 9 Tendances du web design 2012 Slide 10 Tendances du web design 2012 Slide 11 Tendances du web design 2012 Slide 12 Tendances du web design 2012 Slide 13 Tendances du web design 2012 Slide 14 Tendances du web design 2012 Slide 15 Tendances du web design 2012 Slide 16 Tendances du web design 2012 Slide 17 Tendances du web design 2012 Slide 18 Tendances du web design 2012 Slide 19 Tendances du web design 2012 Slide 20 Tendances du web design 2012 Slide 21 Tendances du web design 2012 Slide 22 Tendances du web design 2012 Slide 23 Tendances du web design 2012 Slide 24 Tendances du web design 2012 Slide 25 Tendances du web design 2012 Slide 26 Tendances du web design 2012 Slide 27 Tendances du web design 2012 Slide 28 Tendances du web design 2012 Slide 29 Tendances du web design 2012 Slide 30 Tendances du web design 2012 Slide 31 Tendances du web design 2012 Slide 32 Tendances du web design 2012 Slide 33 Tendances du web design 2012 Slide 34 Tendances du web design 2012 Slide 35 Tendances du web design 2012 Slide 36 Tendances du web design 2012 Slide 37 Tendances du web design 2012 Slide 38 Tendances du web design 2012 Slide 39 Tendances du web design 2012 Slide 40 Tendances du web design 2012 Slide 41 Tendances du web design 2012 Slide 42 Tendances du web design 2012 Slide 43 Tendances du web design 2012 Slide 44 Tendances du web design 2012 Slide 45
Prochain SlideShare
Webdesign sites web et mobiles-tendances 2015
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

10 j’aime

Partager

Télécharger pour lire hors ligne

Tendances du web design 2012

Télécharger pour lire hors ligne

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

Tendances du web design 2012

  1. 1. LESTENDANCES DUWEB DESIGN 2012 Modes, évolutions et exemples issues de l’internet d’aujourd’hui. Jean-Philippe Cabaroc Mail : cabaroc@gmail.com Twitter : @cabaroc Directeur artistique www.cabaroc.com
  2. 2. QU’EST CE INTRODUCTION QUE LE WEB 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 COULEUR 1.
  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 1997 1997 1998 1999 2001 Sources : http://www.lookback.fr/
  13. 13. SIMPLICITÉ Évolution de la page d’accueil de google depuis 1997 2002 2004 2011 2012 Sources : http://www.lookback.fr/
  14. 14. SIMPLICITÉ Évolution du design de google map Sources : http://googledata.org/
  15. 15. LES POLICES 3. 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 DESIGN 4. 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. LE 6. 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 SINGLE 7. 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. LE 8. RESPONSIVE WEBDESIGN
  34. 34. LE RESPONSIVE WEBDESIGN PRINCIPE > S’adapter à toutes les tailles d’écran
  35. 35. LE RESPONSIVE WEBDESIGN Sources : 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 LOIN RESPONSIVE WEBDESIGN TYPOGRAPHIE PERSONNALISÉE RESSOURCES 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.com TUTORIELS 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-font PARALLAXE HTML5 TUTORIELS (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 Cabaroc Directeur artistique Mail : cabaroc@gmail.com Twitter : @cabaroc www.cabaroc.com
  • KevinAuvinet

    Dec. 5, 2013
  • youssefdhaoui

    Jun. 12, 2013
  • mediamaispasque

    Dec. 6, 2012
  • firewalkwizme

    Nov. 3, 2012
  • Tifou

    Sep. 19, 2012
  • mirmilla

    Aug. 23, 2012
  • bathieba

    Apr. 5, 2012
  • ericdelcroix

    Mar. 27, 2012
  • elemaignen

    Mar. 26, 2012
  • Rouffi

    Mar. 26, 2012

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

Vues

Nombre de vues

12 372

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

2 777

Actions

Téléchargements

191

Partages

0

Commentaires

0

Mentions J'aime

10

×