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.

Evolution du look & feel du web 0.0 au 2.0 - Printemps.com

2,238 views

Published on

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

Evolution du look & feel du web 0.0 au 2.0 - Printemps.com

  1. 1. L’évolution du look & feel du web depuis le 0.0 au 2.0 17 avril 2007 – B.Rigaut – Printemps.com
  2. 2. Plan <ul><li>Historique de quelques sites </li></ul><ul><li>Le Web 2.0 quesaco ? (en une slide !) </li></ul><ul><li>Le persuasive design par la pratique </li></ul><ul><li>Exercices ! </li></ul>
  3. 3. Yahoo, Le Monde, Printemps nous avons tous connus les mêmes questions et trouvés les mêmes réponses <ul><li>Non structuré </li></ul><ul><li>Structuré </li></ul><ul><li>Gestion des mises en avant </li></ul><ul><li>Abondance d’informations </li></ul><ul><li>Maturité graphique </li></ul>2006 1996
  4. 4. Yahoo
  5. 10. Le Monde
  6. 17. Printemps.com
  7. 21. Plan <ul><li>Historique de quelques sites </li></ul><ul><li>Le Web 2.0 quesaco (en une slide !) </li></ul><ul><li>Le persuasive design par la pratique </li></ul><ul><li>Exercices ! </li></ul>
  8. 22. Juste une appellation fourre-tout <ul><li>« 2.0 » pour marquer la fin d’une mauvaise époque pour le web (post dotcom crash) </li></ul><ul><li>Une effervescence pour trouver de nouveaux territoires grâce à des remises en cause </li></ul><ul><ul><li>Technique </li></ul></ul><ul><ul><li>Sur la place du client </li></ul></ul><ul><ul><li>Ergonomique (marketing, marketing) </li></ul></ul><ul><ul><ul><li> « Persuasive design » </li></ul></ul></ul>
  9. 23. Plan <ul><li>Historique de quelques sites </li></ul><ul><li>Le Web 2.0 quesaco ? (en une slide !) </li></ul><ul><li>Le persuasive design par la pratique </li></ul><ul><li>Exercices ! </li></ul>
  10. 24. Les points clefs <ul><li>Hiérarchiser la navigation </li></ul><ul><li>Augmenter le contraste </li></ul><ul><li>Aider la lecture en diagonale </li></ul><ul><li>Parler visuellement </li></ul><ul><li>Call to action NOW! </li></ul><ul><li>Être différent </li></ul><ul><li>… quelques comparaisons avant de passer aux exercices </li></ul>
  11. 25. Navigation
  12. 32. Contraste
  13. 34. Lecture en diagonale
  14. 40. La tagline ou « elevator pitch » <ul><li>Freshbooks  - The fastest way to invoice your clients </li></ul><ul><li>Dropsend - Want to email large files? We've got the answer. </li></ul><ul><li>Vyew - Always-On Collaboration and Free Web Conferencing </li></ul><ul><li>Blinksale - The easiest way to send invoices online </li></ul><ul><li>Remember the Milk  - The best way to manage your tasks. </li></ul><ul><li>Backpack  - Collect, organize and get things done </li></ul><ul><li>Scrapblog  - Create a world for your pictures </li></ul><ul><li>Crazy Egg - track, evaluate and improve your site </li></ul>
  15. 41. Parler visuellement
  16. 47. VOIR LE SITE EN LIVE
  17. 48. « Call to action »
  18. 53. Être différent… parmi la masse
  19. 63. Quelques comparaisons <ul><li>Epsilon versus Campaign Monitor </li></ul><ul><li>Naymz versus Ziki </li></ul><ul><li>Estat versus Omniture </li></ul>
  20. 67. VOIR LE SITE EN LIVE
  21. 70. Plan <ul><li>Historique de quelques sites </li></ul><ul><li>Le Web 2.0 quesaco? (en une slide !) </li></ul><ul><li>Exercices ! </li></ul><ul><li>Le persuasive design par la pratique </li></ul>
  22. 71. Premiers exercices : la typographie
  23. 77. Quelques sites avant/après redesign
  24. 79. Ce qui cloche <ul><li>Trou blanc au centre </li></ul><ul><ul><li>Quel est le centre de la page ? </li></ul></ul><ul><li>La navigation en haut ressemble à une barre d’outils </li></ul><ul><li>C’est trop petit pour la cible ! </li></ul><ul><ul><li>Textes </li></ul></ul><ul><ul><li>Liens </li></ul></ul><ul><li>Aucun style, aucune mémorisation </li></ul>
  25. 80. Les onglets Les polaroids Un vrai look Des appels à naviguer Un vrai titre
  26. 83. Ce qui cloche <ul><li>La couleur ! </li></ul><ul><ul><li>Trop peu de contraste </li></ul></ul><ul><ul><li>L’œil est attiré par les mauvaises infos </li></ul></ul><ul><li>Personne ne lit un tel baratin </li></ul><ul><ul><li>« thank you for visiting » </li></ul></ul><ul><ul><li>Parler du bénéfice en premier </li></ul></ul><ul><li>Ou doit-on cliquer ? </li></ul>
  27. 84. Un look un peu plus léger Ca se lit facilement de haut en bas On ne perturbe pas la lecture grâce à des couleurs légères On met en avant l’important
  28. 86. Ce qui cloche <ul><li>Drôles de couleurs bleu & moutarde </li></ul><ul><li>Un texte pas clair & trop long </li></ul><ul><li>Des couleurs tristes </li></ul>
  29. 87. Un logo avec des couleurs mieux Une mise en avant de l’intérêt On parle du produit à part de la société Le texte important en gras Incarner le soft par une boite
  30. 89. Ce qui cloche <ul><li>C’est laid ! </li></ul><ul><li>Des éléments décoratifs & très contrastés polluent </li></ul><ul><li>Impossible de se concentrer sur le contenu </li></ul>
  31. 90. Logo plus simple Un titre clair Une nav simple 3 colonnes bien espacées Couleurs à juste escient
  32. 92. Ce qui cloche <ul><li>Navigation trop haute </li></ul><ul><li>Tout se ressemble </li></ul><ul><li>Super large </li></ul>
  33. 93. Mettre moins en avant les fonctions de login Mise en page à deux colonnes classique Des titres clairs Les contenus différents sur le côté
  34. 95. Ce qui cloche <ul><li>J’ai pas envie de lire ! </li></ul><ul><li>Les couleurs sont trop peu contrastées </li></ul>
  35. 96. Simplifier la nav Un peu d’image pour la charge émotionnelle Donner envie d’essayer et montrer la simplicité Un texte épuré
  36. 98. Ce qui cloche <ul><li>Tout ! </li></ul>
  37. 99. Un site crédible Des fonctions utiles Une mise en forme des photos Des textes clairs

×