Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ÉVOLUTION DU WEB-DESIGNConférence CCI Avril 2012
Qui suis-je ?Olivier SOROSDirecteur artistiqueWeb-designerGérant de la société SoHappyIntervenant - formateur à la formati...
0/ web design ?!KEZAKO ?
1/ DESIGN VISUEL :Éléments graphiques,couleurs,typographies,et mise en page.2/ DESIGN FONCTIONNEL(L’ergonomie) :système de...
Le WEB + DESIGNER+Ergonomie (IHM)Connaissancedes contraintesde développementAccessibilitéStandard W3CL’émergencedes nouvel...
C’EST AUSSI, SUIVRE LES ÉVOLUTIONS...0/ WEB DESIGN ?1990 2010Résolutions et tailles des écrans (images + grandes)Connexion...
Des technologies du Web et des LogicielsHTML, XHTML, HTML5 • FLASH, FLEX, SILVERLIGHT • 3D• Photoshop • Fireworks • Dreamw...
Styles, couleurs, mise en page, formes, etc.Tout en sachant se différencier !C’EST AUSSI, SUIVRE LES ÉVOLUTIONS...0/ WEB DE...
UNE GROSSE INFLUENCE SUR LE WEB DESIGN0/ WEB DESIGN ?1990 2010Des nos jours > Sobriété / simplicité (Design & ergonomie)• ...
1/ Les dates clésDU WEB DESIGN DE 1995A NOS JOURS !
Avant 1994LA PRÉHISTOIRE
AVANT 19941/ ÉVOLUTIONS DU WEB DESIGN• HTML • Pas de Web design • Code au Bloc-notes• Navigateur unique : Mosaic
AVANT 19901/ ÉVOLUTIONS DU WEB DESIGN
Dès 1995LES ANNÉES BRICOLAGE
LA PROBLÉMATIQUE1/ ÉVOLUTIONS DU WEB DESIGN> Poids des pageslimité (<80ko),> graphisme limité,nécessitéd’optimisationdes i...
• JPEG ou GIF animés> Compteurs visibles et animés• Editeurs HTML Wysiwyg (visuel) :> Dreamweaver & Frontpage• Naissance d...
Dès 1998L’ESPOIR DELA TECHNOLOGIE FLASH ?
1996, L’ESPOIR DU FLASH ET DU RICH MEDIA ?1/ ÉVOLUTIONS DU WEB DESIGN1993 1998 2005> Animation d’objets vectoriels,> Possi...
http://www.matinee.co.uk/site2/nmd.htm
Début 2000UN PAS VERS LA STANDARDISATIONDe 2000 à nos jours
LES STANDARDS DU WEB1/ ÉVOLUTIONS DU WEB DESIGN> Mise en page par «CSS, feuilles de styles» :séparation des contenus de la...
POINT CONNAISSANCES :HTML+CSS : LE FOND ET LA FORME
2/ Flash ou HTML ?L’ÉTERNEL DÉBAT
Pas de contraintesde structure et demise en page+ Interactif & animé+ Immersif (AS3)Interface logiciellesimple et conçuepo...
http://www.cilantro-cafe.com/
Contenu mieuxréférencéFichiers moins lourds> Chargement plusrapideMeilleures gestionsdes contenusConforme auxstandards W3C...
http://www.wearecupcup.com/
3/ La nouvelle donneWEB MOBILE
11 JUILLET 2008
2007 - LA RÉVOLUTION DU WEB... MOBILE2/ UNE NOUVELLE DONNEInternet MailGéolocalisationApplicationsTéléphone
BLOCAGE DU FLASH SUR APPLE2/ UNE NOUVELLE DONNE
ÉMERGENCE DE L’HTML5 ET DU CSS3 SUR LE WEB2/ UNE NOUVELLE DONNESolutions Rich Média Solutions HTML
NON LE FLASH N’EST PAS ENCORE MORT !2/ UNE NOUVELLE DONNENouvelle orientation du Flash vers :ÉVÈNEMENTIEL VISUALISATION 3D...
4/ Influence desrésolutions d’écransSUR LE WEB DESIGN
640x480 px 1024x768 px 2560x1440 px et +4/ LES RÉSOLUTIONS D’ÉCRANSIMPACT DES RÉSOLUTIONS SUR LE DESIGN
Le site internet ne s’adapte pas à votre résolution d’écran :> Taille fixe en pixels définie en fonction d’un choix de résol...
Est-on obligé à s’adapter à toutes ces résolutions ?4/ LES RÉSOLUTIONS D’ÉCRANSGRANDERESOLUTIONPETITERESOLUTIONSITE IPAD E...
5/ Le Responsive DesignUn design qui s’adapte ?
5/ RESPONSIVE DESIGNDESIGN ADAPTABLE1280 px 800 px 340 px
http://www.foodsense.is/
5/ RESPONSIVE DESIGNDESIGN ADAPTABLEEn résumé, il permet de créer à partir d’un mêmegabarit plusieurs mises en pages qui s...
6/ CONCLUSIONLE CONSTAT : TOUT S’ACCÉLÈRE...RESTEZ AU CONTACT !> Accélération des technologies> Développement fulgurant de...
Merci !OLIVIER SOROSStudio SO’HAPPY - communication globaleconseil I publicité I édition I internet I mobileswww.sohappy-s...
L'évolution du web-design
Upcoming SlideShare
Loading in …5
×

L'évolution du web-design

2,116 views

Published on

L'évolution du Web-design de 1997 à nos jours.

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Get Paid To Write Articles? YES! View 1000s of companies hiring online writers now! ■■■ http://t.cn/AieXSfKU
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

L'évolution du web-design

  1. 1. ÉVOLUTION DU WEB-DESIGNConférence CCI Avril 2012
  2. 2. Qui suis-je ?Olivier SOROSDirecteur artistiqueWeb-designerGérant de la société SoHappyIntervenant - formateur à la formationD.U. Multimédia à Pau
  3. 3. 0/ web design ?!KEZAKO ?
  4. 4. 1/ DESIGN VISUEL :Éléments graphiques,couleurs,typographies,et mise en page.2/ DESIGN FONCTIONNEL(L’ergonomie) :système de navigation,menus, boutons, liens.C’EST LE LANGAGE DE VOTRE PAGE !0/ WEB DESIGN ?Graphisme Ergonomie+
  5. 5. Le WEB + DESIGNER+Ergonomie (IHM)Connaissancedes contraintesde développementAccessibilitéStandard W3CL’émergencedes nouvellestechnologies (veille)Créativité (idées)Sens artistiqueCulture visuelleCommunicationMaitrise deslogicielsQUALITÉSQUALITÉS
  6. 6. C’EST AUSSI, SUIVRE LES ÉVOLUTIONS...0/ WEB DESIGN ?1990 2010Résolutions et tailles des écrans (images + grandes)Connexion Internet (fichiers + lourdes) (Modem, ADSL, Haut Débit...)
  7. 7. Des technologies du Web et des LogicielsHTML, XHTML, HTML5 • FLASH, FLEX, SILVERLIGHT • 3D• Photoshop • Fireworks • Dreamweaver • FlashC’EST AUSSI, SUIVRE LES ÉVOLUTIONS...0/ WEB DESIGN ?Technologies Logiciels
  8. 8. Styles, couleurs, mise en page, formes, etc.Tout en sachant se différencier !C’EST AUSSI, SUIVRE LES ÉVOLUTIONS...0/ WEB DESIGN ?Des tendances graphiques
  9. 9. UNE GROSSE INFLUENCE SUR LE WEB DESIGN0/ WEB DESIGN ?1990 2010Des nos jours > Sobriété / simplicité (Design & ergonomie)• Plus d’espace (blancs) • Travail sur la mise en page
  10. 10. 1/ Les dates clésDU WEB DESIGN DE 1995A NOS JOURS !
  11. 11. Avant 1994LA PRÉHISTOIRE
  12. 12. AVANT 19941/ ÉVOLUTIONS DU WEB DESIGN• HTML • Pas de Web design • Code au Bloc-notes• Navigateur unique : Mosaic
  13. 13. AVANT 19901/ ÉVOLUTIONS DU WEB DESIGN
  14. 14. Dès 1995LES ANNÉES BRICOLAGE
  15. 15. LA PROBLÉMATIQUE1/ ÉVOLUTIONS DU WEB DESIGN> Poids des pageslimité (<80ko),> graphisme limité,nécessitéd’optimisationdes images.Choix despolices HTMLlimitéMise en page àl’aide de tableaux> Contraintesstructurelles(TABLES)56Kbits > 6Ko/sModemtextetexte
  16. 16. • JPEG ou GIF animés> Compteurs visibles et animés• Editeurs HTML Wysiwyg (visuel) :> Dreamweaver & Frontpage• Naissance dePhotoshop 3 sur PC et MacLES TENDANCES DE L’ÉPOQUE1/ ÉVOLUTIONS DU WEB DESIGN
  17. 17. Dès 1998L’ESPOIR DELA TECHNOLOGIE FLASH ?
  18. 18. 1996, L’ESPOIR DU FLASH ET DU RICH MEDIA ?1/ ÉVOLUTIONS DU WEB DESIGN1993 1998 2005> Animation d’objets vectoriels,> Possibilités d’interactions (script Actionscript),> Totale liberté pour le graphisme et la mise en page,> Choix de polices illimité,> Pré-chargement des animations,> La technologie idéale pour le graphiste.
  19. 19. http://www.matinee.co.uk/site2/nmd.htm
  20. 20. Début 2000UN PAS VERS LA STANDARDISATIONDe 2000 à nos jours
  21. 21. LES STANDARDS DU WEB1/ ÉVOLUTIONS DU WEB DESIGN> Mise en page par «CSS, feuilles de styles» :séparation des contenus de la mise en forme.> Dreamweaver / Photoshop / Fireworks :+ performants + plus simples à utiliser + respectueux desstandards W3C= +
  22. 22. POINT CONNAISSANCES :HTML+CSS : LE FOND ET LA FORME
  23. 23. 2/ Flash ou HTML ?L’ÉTERNEL DÉBAT
  24. 24. Pas de contraintesde structure et demise en page+ Interactif & animé+ Immersif (AS3)Interface logiciellesimple et conçuepour le graphisteDes possibilités degestion du multimédiainégalées(visioconférences,streaming, 3D…)Les moteurs derecherche ne lisent pasles contenus flash :mauvaisréférencementFichiers + lourds >Chargement plus longMise à jourdu lecteur flashIgnoré surIphone & IpadAVANTAGES / INCONVÉNIENTS > LE DESIGNER2/ FLASH
  25. 25. http://www.cilantro-cafe.com/
  26. 26. Contenu mieuxréférencéFichiers moins lourds> Chargement plusrapideMeilleures gestionsdes contenusConforme auxstandards W3CCompatibleIphone & IpadContraintesgraphiques liées à lastructure <DIV>Nécessité de connaîtreHTML et CSS (code)Choix despolices limitéPour compenser ceslimites > JQUERY(javascript)AVANTAGES / INCONVÉNIENTS > DESIGNER2/ HTML
  27. 27. http://www.wearecupcup.com/
  28. 28. 3/ La nouvelle donneWEB MOBILE
  29. 29. 11 JUILLET 2008
  30. 30. 2007 - LA RÉVOLUTION DU WEB... MOBILE2/ UNE NOUVELLE DONNEInternet MailGéolocalisationApplicationsTéléphone
  31. 31. BLOCAGE DU FLASH SUR APPLE2/ UNE NOUVELLE DONNE
  32. 32. ÉMERGENCE DE L’HTML5 ET DU CSS3 SUR LE WEB2/ UNE NOUVELLE DONNESolutions Rich Média Solutions HTML
  33. 33. NON LE FLASH N’EST PAS ENCORE MORT !2/ UNE NOUVELLE DONNENouvelle orientation du Flash vers :ÉVÈNEMENTIEL VISUALISATION 3D JEUX EN LIGNESITES WEB PLUS CLASSIQUESTABLETTES & SMARTPHONES
  34. 34. 4/ Influence desrésolutions d’écransSUR LE WEB DESIGN
  35. 35. 640x480 px 1024x768 px 2560x1440 px et +4/ LES RÉSOLUTIONS D’ÉCRANSIMPACT DES RÉSOLUTIONS SUR LE DESIGN
  36. 36. Le site internet ne s’adapte pas à votre résolution d’écran :> Taille fixe en pixels définie en fonction d’un choix de résolution(actuellement majoritairement du 1024 x 768 px)> La page est alors soit centrée, soit calée à gauche de l’écran4/ LES RÉSOLUTIONS D’ÉCRANS
  37. 37. Est-on obligé à s’adapter à toutes ces résolutions ?4/ LES RÉSOLUTIONS D’ÉCRANSGRANDERESOLUTIONPETITERESOLUTIONSITE IPAD ET/OUANDROID+ +AUXORIENTATIONS
  38. 38. 5/ Le Responsive DesignUn design qui s’adapte ?
  39. 39. 5/ RESPONSIVE DESIGNDESIGN ADAPTABLE1280 px 800 px 340 px
  40. 40. http://www.foodsense.is/
  41. 41. 5/ RESPONSIVE DESIGNDESIGN ADAPTABLEEn résumé, il permet de créer à partir d’un mêmegabarit plusieurs mises en pages qui s’adapterontaux différentes résolution d’écran.> adaptation de le mise en page en fonction du support,> adaptation des images et vidéos (flexibles),> adaptation de la taille des typographies.La solution technique :utilisation des Medi@ Queries
  42. 42. 6/ CONCLUSIONLE CONSTAT : TOUT S’ACCÉLÈRE...RESTEZ AU CONTACT !> Accélération des technologies> Développement fulgurant de nouveaux terminauxet de nouveaux usages (navigation sur mobile)Tout ce qui est vrai aujourd’huine sera peut-être plus vrai demain !Rendez-vous dans un an !
  43. 43. Merci !OLIVIER SOROSStudio SO’HAPPY - communication globaleconseil I publicité I édition I internet I mobileswww.sohappy-studio.com

×