0
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

1,891

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,891
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×