WebDesign

Transcript

1. Webmarketing 2012 michel.vermeulen@laposte.net © Michel Vermeulen 1
2. © Michel Vermeulen WEBDESIGN 2
3. © Michel Vermeulen WEBDESIGN Quelles différences avec le design print ? 3
4. © Michel Vermeulen CONTRAINTES Taille des écrans (+ Devices) Résolution (+ Retina) Poids Interactivité 4
5. © Michel Vermeulen 1 PAGE, 1 OBJECTIF, 1 MESSAGE, 1 ACTION 5
6. © Michel Vermeulen COPIEZ INTELLIGEMMENT ! 6
7. © Michel Vermeulen QUESTION Quelle est le point commun entre un coquillage et le web-design ? 7
8. © Michel Vermeulen PHI (=1,618) ! 8
9. © Michel Vermeulen 9 Golden rule
10. © Michel Vermeulen 10 Rule of thirds
11. © Michel Vermeulen Rule of third 11
12. © Michel Vermeulen 12 Eye tracking
13. © Michel Vermeulen GRID LAYOUT 13
14. © Michel Vermeulen 14
15. © Michel Vermeulen 15 Ligne de flottaison
16. © Michel Vermeulen LIGNE DE FLOTTAISON Page efficace = Call to Action > Ligne de flottaison 16
17. © Michel Vermeulen LANDING PAGE 17
18. © Michel Vermeulen 18
19. © Michel Vermeulen 19
20. © Michel Vermeulen 20
21. © Michel Vermeulen http://www.formstack.com/the-anatomy-of-a-perfect-landing-page 21
22. © Michel Vermeulen CALL TO ACTION Un bon CTA : • Dirige l’utilisateur (indices visuels) • Incite à l’action • Est explicite 22
23. © Michel Vermeulen CALL TO ACTION 23
24. © Michel Vermeulen IMAGES / VIDÉOS Faites les moutons, et utilisez les mêmes images que tout le monde ! ... 24
25. © Michel Vermeulen 25
26. © Michel Vermeulen 26
27. © Michel Vermeulen COULEURS Aident à hiérarchiser le contenu A utiliser de manière subtile Attention aux différences culturelles 27
28. © Michel Vermeulen TYPOGRAPHIE Justification Taille (em, %, px) Empattement Attributs Typos Variété 28
29. © Michel Vermeulen Nulla aliquet, quam quis hendrerit elementum, mauris mi posuere purus, feugiat gravida leo risus sit amet elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum blandit pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing 29
30. © Michel Vermeulen Nulla aliquet, quam quis hendrerit elementum, mauris mi posuere purus, feugiat gravida leo risus sit amet elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum blandit pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing → 30
31. © Michel Vermeulen Checklist d’un site qui convertit Menu principal Logo Breadcrumb Fil d’Ariane Visibilité des liens, des CTA Lisibilité du site Hiérarchisation du contenu Footer 31
32. © Michel Vermeulen Outils / Environnement Soft. Adobe Photoshop Adobe Kulr 32
33. © Michel Vermeulen LE DESIGN EST IMPORTANT... mais ne fait pas tout ! 33
34. © Michel Vermeulen 34
35. © Michel Vermeulen ON RÉSUME ? 35