L'évolution du web-design

1 558 vues

Publié le

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

Publié dans : Design
0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 558
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×