SlideShare ist ein Scribd-Unternehmen logo
1 von 45
Downloaden Sie, um offline zu lesen
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
QU’EST CE
INTRODUCTION




QUE LE
WEB 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éliorer l’accès a un besoin
                                > Allier aspect esthétique et
                                  fonctionnel
                                > Connaître les contraintes
                                  techniques
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ÊT
                                > Il faut se tenir sans cesse
                                  au courant
LA COULEUR
1.
LA COULEUR




                  Couleur pantone 2012
                  TANGO MANDARINE
                  (TANGERINE TANGO)




Sources : http://www.pantone-france.com/
LA COULEUR




             2010           2011            2012




             Turquoise      Chèvrefeuille   Tango Mandarine

             «Calme         «Courage        «Énergie
             Apaisemment    Confiance       Chaleur
             Protection.»   Vitalité.»      Vivacité.»
SIMPLICITÉ
2.
SIMPLICITÉ




             L’EXEMPLE DE GOOGLE
             3 OBJECTIFS CLÉS :

             > Focus (ciblé)
             > Elasticity (elastique)
             > Effortlessness (aisance)
SIMPLICITÉ


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




1999                                       2001




Sources : http://www.lookback.fr/
SIMPLICITÉ


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




2011                                         2012




Sources : http://www.lookback.fr/
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
                             > Contraint par le catalogue de
                               polices présent dans
                               l’ordinateur de l’internaute
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
LES POLICES PERSONNALISÉES




                             AVANTAGES
                             > Des designs améliorés
                             sans être obligé de transformer
                             un texte en image
LES POLICES PERSONNALISÉES

          www.silverlng.com    www.made-in-you.com




          www.nykevanwyk.com




                               www.messagefirst.com
LES POLICES PERSONNALISÉES




  Catalogues de polices web libre de droit :


  www.fontsquirrel.com                         www.google.com/webfonts
LE DESIGN
4.
TYPOGRAPHIQUE
LE DESIGN TYPOGRAPHIQUE




                          PRINCIPE
                          > Utiliser le texte comme
                            élément principal du design
LE DESIGN TYPOGRAPHIQUE

          www.oliverkavanagh.com   www.kidd81.com




          www.simpleasmilk.co.uk


                                   www.amazeelabs.com
5.   LE RÉTRO
LE RÉTRO




           OBJECTIF
           > Apporter chaleur
             et convivialité
           > Donner une ambiance
             ludique ou décalée
LE RÉTRO

           www.level2d.com                www.tricycleterror.com




           www.lesfillesalaviolette.com




                                          www.allstarlanes.co.uk
LE
6.
MINIMALISME
LE MINIMALISME




                 PRINCIPE
                 > Économie maximale
                   des moyens
                 > Se débarraser du superflue
                   pour aller à l’essentiel
LE MINIMALISME

          www.brettarthurphoto.com   www.archiduchesse.com




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




                  PRINCIPE
                  > Créer un blog facile d’accès
                  > Mettre un maximum
                    d’information dans un
                    minimum d’espace
ONE SINGLE PAGE




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




                          PRINCIPE
                          > S’adapter à
                            toutes les tailles d’écran
LE RESPONSIVE WEBDESIGN




Sources : www.mediaqueri.es
LE RESPONSIVE WEBDESIGN




        www.smashingmagazine.com   www.mikeyanderson.com




        www.gravitatedesign.com    www.gingerwhale.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       www.slaveryfootprint.org
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’utilisant au second degré)
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
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
MERCI !
Jean-Philippe Cabaroc
Directeur artistique
Mail : cabaroc@gmail.com
Twitter : @cabaroc

www.cabaroc.com

Más contenido relacionado

Ähnlich wie Tendances du web design 2012

Présentation "Créer son site soi-même"
Présentation "Créer son site soi-même" Présentation "Créer son site soi-même"
Présentation "Créer son site soi-même" Aline INIZAN PAYEN
 
BLACKHAT-PBN Alan Cladx – CEO Investoweb
BLACKHAT-PBN   Alan Cladx – CEO InvestowebBLACKHAT-PBN   Alan Cladx – CEO Investoweb
BLACKHAT-PBN Alan Cladx – CEO InvestowebTuni' SEO
 
Tutoriel : Rédaction web & Blog Jimdo - Les excursions numériques saison 2
Tutoriel : Rédaction web & Blog Jimdo - Les excursions numériques saison 2Tutoriel : Rédaction web & Blog Jimdo - Les excursions numériques saison 2
Tutoriel : Rédaction web & Blog Jimdo - Les excursions numériques saison 2Rochefort-en-Terre Tourisme
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
Synodiance > SEO et Contenu - 5 points clés qui changent - Ecommerce-Live - 2...
Synodiance > SEO et Contenu - 5 points clés qui changent - Ecommerce-Live - 2...Synodiance > SEO et Contenu - 5 points clés qui changent - Ecommerce-Live - 2...
Synodiance > SEO et Contenu - 5 points clés qui changent - Ecommerce-Live - 2...Search Foresight
 
Synodiance > SEO - Réussir votre refonte avec GEMO - E-Commerce Paris 2014 - ...
Synodiance > SEO - Réussir votre refonte avec GEMO - E-Commerce Paris 2014 - ...Synodiance > SEO - Réussir votre refonte avec GEMO - E-Commerce Paris 2014 - ...
Synodiance > SEO - Réussir votre refonte avec GEMO - E-Commerce Paris 2014 - ...Search Foresight
 
Optimiser sa présence sur le social et son e reputation - cci rennes
Optimiser sa présence sur le social et son e reputation - cci rennesOptimiser sa présence sur le social et son e reputation - cci rennes
Optimiser sa présence sur le social et son e reputation - cci rennesMedia-Marque
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Kate De Gourdon
 
Atelier numérique : Créer son site web avec Wix
Atelier numérique : Créer son site web avec WixAtelier numérique : Créer son site web avec Wix
Atelier numérique : Créer son site web avec WixSud Vendée Tourisme
 
L'ère industrielle vient de sonner pour le web
L'ère industrielle vient de sonner pour le webL'ère industrielle vient de sonner pour le web
L'ère industrielle vient de sonner pour le webIgniteStrasbourg
 
Seo, branding et ecologie numerique - Alexandre Marotel - SEO Camp'us Paris 2020
Seo, branding et ecologie numerique - Alexandre Marotel - SEO Camp'us Paris 2020Seo, branding et ecologie numerique - Alexandre Marotel - SEO Camp'us Paris 2020
Seo, branding et ecologie numerique - Alexandre Marotel - SEO Camp'us Paris 2020SEO CAMP
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Brigitte Marandon
 
Le marketing mobile en 3 étapes par Universem
Le marketing mobile en 3 étapes par UniversemLe marketing mobile en 3 étapes par Universem
Le marketing mobile en 3 étapes par UniversemUniversem
 
[Fr] Stratégie de communication digitale - v4 - nov 2012
[Fr] Stratégie de communication digitale - v4 - nov 2012[Fr] Stratégie de communication digitale - v4 - nov 2012
[Fr] Stratégie de communication digitale - v4 - nov 2012Orange
 
Smx paris 2013 v2 (cl 04062013)
Smx paris 2013 v2 (cl 04062013)Smx paris 2013 v2 (cl 04062013)
Smx paris 2013 v2 (cl 04062013)LELEU Corinne
 

Ähnlich wie Tendances du web design 2012 (20)

Présentation "Créer son site soi-même"
Présentation "Créer son site soi-même" Présentation "Créer son site soi-même"
Présentation "Créer son site soi-même"
 
BLACKHAT-PBN Alan Cladx – CEO Investoweb
BLACKHAT-PBN   Alan Cladx – CEO InvestowebBLACKHAT-PBN   Alan Cladx – CEO Investoweb
BLACKHAT-PBN Alan Cladx – CEO Investoweb
 
Tutoriel : Rédaction web & Blog Jimdo - Les excursions numériques saison 2
Tutoriel : Rédaction web & Blog Jimdo - Les excursions numériques saison 2Tutoriel : Rédaction web & Blog Jimdo - Les excursions numériques saison 2
Tutoriel : Rédaction web & Blog Jimdo - Les excursions numériques saison 2
 
Jimdo Tutoriel
Jimdo TutorielJimdo Tutoriel
Jimdo Tutoriel
 
Ardesi Réunion Toulouse
Ardesi Réunion ToulouseArdesi Réunion Toulouse
Ardesi Réunion Toulouse
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
Synodiance > SEO et Contenu - 5 points clés qui changent - Ecommerce-Live - 2...
Synodiance > SEO et Contenu - 5 points clés qui changent - Ecommerce-Live - 2...Synodiance > SEO et Contenu - 5 points clés qui changent - Ecommerce-Live - 2...
Synodiance > SEO et Contenu - 5 points clés qui changent - Ecommerce-Live - 2...
 
2014 12 11 Jimdo Tutoriel 2015
2014 12 11 Jimdo Tutoriel 20152014 12 11 Jimdo Tutoriel 2015
2014 12 11 Jimdo Tutoriel 2015
 
Tendances SEO et Joomla!
Tendances SEO et Joomla!Tendances SEO et Joomla!
Tendances SEO et Joomla!
 
Synodiance > SEO - Réussir votre refonte avec GEMO - E-Commerce Paris 2014 - ...
Synodiance > SEO - Réussir votre refonte avec GEMO - E-Commerce Paris 2014 - ...Synodiance > SEO - Réussir votre refonte avec GEMO - E-Commerce Paris 2014 - ...
Synodiance > SEO - Réussir votre refonte avec GEMO - E-Commerce Paris 2014 - ...
 
Optimiser sa présence sur le social et son e reputation - cci rennes
Optimiser sa présence sur le social et son e reputation - cci rennesOptimiser sa présence sur le social et son e reputation - cci rennes
Optimiser sa présence sur le social et son e reputation - cci rennes
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
 
Atelier numérique : Créer son site web avec Wix
Atelier numérique : Créer son site web avec WixAtelier numérique : Créer son site web avec Wix
Atelier numérique : Créer son site web avec Wix
 
L'ère industrielle vient de sonner pour le web
L'ère industrielle vient de sonner pour le webL'ère industrielle vient de sonner pour le web
L'ère industrielle vient de sonner pour le web
 
Seo, branding et ecologie numerique - Alexandre Marotel - SEO Camp'us Paris 2020
Seo, branding et ecologie numerique - Alexandre Marotel - SEO Camp'us Paris 2020Seo, branding et ecologie numerique - Alexandre Marotel - SEO Camp'us Paris 2020
Seo, branding et ecologie numerique - Alexandre Marotel - SEO Camp'us Paris 2020
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Le marketing mobile en 3 étapes par Universem
Le marketing mobile en 3 étapes par UniversemLe marketing mobile en 3 étapes par Universem
Le marketing mobile en 3 étapes par Universem
 
[Fr] Stratégie de communication digitale - v4 - nov 2012
[Fr] Stratégie de communication digitale - v4 - nov 2012[Fr] Stratégie de communication digitale - v4 - nov 2012
[Fr] Stratégie de communication digitale - v4 - nov 2012
 
Smx paris 2013 v2 (cl 04062013)
Smx paris 2013 v2 (cl 04062013)Smx paris 2013 v2 (cl 04062013)
Smx paris 2013 v2 (cl 04062013)
 

Tendances du web design 2012

  • 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
  • 3. QU’EST CE QUE LE WEB DESIGN ? C’EST AVANT TOUT UN 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 et fonctionnel > Connaître les contraintes techniques
  • 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 cesse au courant
  • 8. LA COULEUR Couleur pantone 2012 TANGO MANDARINE (TANGERINE TANGO) Sources : http://www.pantone-france.com/
  • 9. LA COULEUR 2010 2011 2012 Turquoise Chèvrefeuille Tango Mandarine «Calme «Courage «Énergie Apaisemment Confiance Chaleur Protection.» Vitalité.» Vivacité.»
  • 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 1997 1997 1998 1999 2001 Sources : http://www.lookback.fr/
  • 13. SIMPLICITÉ Évolution de la page d’accueil de google depuis 1997 2002 2004 2011 2012 Sources : http://www.lookback.fr/
  • 14. SIMPLICITÉ Évolution du design de google map Sources : http://googledata.org/
  • 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ÉES www.silverlng.com www.made-in-you.com www.nykevanwyk.com www.messagefirst.com
  • 20. LES POLICES PERSONNALISÉES Catalogues de polices web libre de droit : www.fontsquirrel.com www.google.com/webfonts
  • 22. LE DESIGN TYPOGRAPHIQUE PRINCIPE > Utiliser le texte comme élément principal du design
  • 23. LE DESIGN TYPOGRAPHIQUE www.oliverkavanagh.com www.kidd81.com www.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.com www.tricycleterror.com www.lesfillesalaviolette.com www.allstarlanes.co.uk
  • 28. LE MINIMALISME PRINCIPE > Économie maximale des moyens > Se débarraser du superflue pour aller à l’essentiel
  • 29. LE MINIMALISME www.brettarthurphoto.com www.archiduchesse.com www.10yearsintype.com www.madebysofa.com
  • 31. ONE SINGLE PAGE PRINCIPE > Créer un blog facile d’accès > Mettre un maximum d’information dans un minimum d’espace
  • 32. ONE SINGLE PAGE www.wingcheng.com www.soupagency.it www.jcsuzanne.com www.launchfactory.org www.marlene-portfolio.com
  • 34. LE RESPONSIVE WEBDESIGN PRINCIPE > S’adapter à toutes les tailles d’écran
  • 35. LE RESPONSIVE WEBDESIGN Sources : www.mediaqueri.es
  • 36. LE RESPONSIVE WEBDESIGN www.smashingmagazine.com www.mikeyanderson.com www.gravitatedesign.com www.gingerwhale.com
  • 37. 9. LE PARALLAXE
  • 38. PARALLAXE PARALLAXE ?? > Animer séparément différents plans d’un site web
  • 39. PARALLAXE www.nikebetterworld.com www.nintendo.com.au/gamesites/mariokartwii www.soul-reaper.com www.slaveryfootprint.org
  • 41. LE GIF ANIMÉ CONTEMPORAIN VRAIMENT ? > Oui, le GIF peut être tendance
  • 42. LE GIF ANIMÉ CONTEMPORAIN Ce GIF là, on oublie (sauf en l’utilisant au second degré)
  • 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. 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. MERCI ! Jean-Philippe Cabaroc Directeur artistique Mail : cabaroc@gmail.com Twitter : @cabaroc www.cabaroc.com