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.
L’évolution du look & feel du web depuis le 0.0 au 2.0  17 avril 2007 – B.Rigaut – Printemps.com
Plan <ul><li>Historique de quelques sites </li></ul><ul><li>Le Web 2.0 quesaco ? (en une slide !) </li></ul><ul><li>Le per...
Yahoo, Le Monde, Printemps nous avons tous connus les mêmes questions et trouvés les mêmes réponses <ul><li>Non structuré ...
Yahoo
 
 
 
 
 
Le Monde
 
 
 
 
 
 
Printemps.com
 
 
 
Plan <ul><li>Historique de quelques sites </li></ul><ul><li>Le Web 2.0 quesaco (en une slide !) </li></ul><ul><li>Le persu...
Juste une appellation fourre-tout <ul><li>« 2.0 » pour marquer la fin d’une mauvaise époque pour le web (post dotcom crash...
Plan <ul><li>Historique de quelques sites </li></ul><ul><li>Le Web 2.0 quesaco ? (en une slide !) </li></ul><ul><li>Le per...
Les points clefs <ul><li>Hiérarchiser la navigation </li></ul><ul><li>Augmenter le contraste </li></ul><ul><li>Aider la le...
Navigation
 
 
 
 
 
 
Contraste
 
Lecture en diagonale
 
 
 
 
 
La tagline ou « elevator pitch » <ul><li>Freshbooks  - The fastest way to invoice your clients  </li></ul><ul><li>Dropsend...
Parler visuellement
 
 
 
 
 
VOIR LE SITE EN LIVE
« Call to action »
 
 
 
 
Être différent… parmi la masse
 
 
 
 
 
 
 
 
 
Quelques comparaisons <ul><li>Epsilon versus Campaign Monitor </li></ul><ul><li>Naymz versus Ziki </li></ul><ul><li>Estat ...
 
 
 
VOIR LE SITE EN LIVE
 
 
Plan <ul><li>Historique de quelques sites </li></ul><ul><li>Le Web 2.0 quesaco? (en une slide !) </li></ul><ul><li>Exercic...
Premiers exercices : la typographie
 
 
 
 
 
Quelques sites avant/après redesign
 
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...
Les onglets Les polaroids Un vrai look Des appels à naviguer Un vrai titre
 
 
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é...
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 O...
 
Ce qui cloche <ul><li>Drôles de couleurs bleu & moutarde </li></ul><ul><li>Un texte pas clair & trop long </li></ul><ul><l...
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...
 
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>...
Logo plus simple Un titre clair Une nav simple 3 colonnes bien espacées Couleurs à juste escient
 
Ce qui cloche <ul><li>Navigation trop haute </li></ul><ul><li>Tout se ressemble </li></ul><ul><li>Super large </li></ul>
Mettre moins en avant les fonctions de login Mise en page à deux colonnes classique Des titres clairs Les contenus différe...
 
Ce qui cloche <ul><li>J’ai pas envie de lire ! </li></ul><ul><li>Les couleurs sont trop peu contrastées </li></ul>
Simplifier la nav Un peu d’image pour la charge émotionnelle Donner envie d’essayer et montrer la simplicité Un texte épuré
 
Ce qui cloche <ul><li>Tout ! </li></ul>
Un site crédible Des fonctions utiles Une mise en forme des photos Des textes clairs
Upcoming SlideShare
Loading in …5
×

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

  • 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

×