Responsive design, flat design, grid, parallax, HTML 5, CSS3, ... toutes les tendances en matière de site web en 2014. Conférence du 30 janvier 2014, à la CCI de Bordeaux, animée par Vincent Pereira, consultant webmarketing de l'agence Inaativ.

2. Inaativ, une agence
de
communication
avec des spécificités

3. Objectifs de l’intervention
Donner une idée des évolutions à prendre en
compte dans son projet de site Internet
Enrichir son cahier des charges
Faciliter les échanges avec son prestataire

4. Points de vigilance
Les tendances peuvent changer rapidement
Certaines tendances ne sont pas adaptées à
votre projet
Une utilisation non adaptée d’une tendance
peut nuire à votre site

5. Avant de vous lancer dans votre projet,
posez-vous les bonnes questions …

6. Qui sont mes cibles : leurs attentes, leurs questions, …
Qu’est-ce j’attends de mon site : image recherchée, niveau
de visibilité (mots clés) et types de comportements souhaités
Quel sera le rôle de mon site dans ma communication
globale ?

7. Vos réponses auront un impact sur
votre projet : choix du design,
fonctionnalités, référencement, …
… et donc sur votre budget.

8. Mais ce n’est pas tout …

9. Sans contenu (de qualité),
votre site
est une coquille
vide!

10. Du texte
Article (blog ou site)
Fiche conseil
Guide / e-book / livre blanc

11. De la vidéo
Motion design
Vidéo produit
Vidéo corporate
Conseil, formation, …

12. Des images
Photos, infographies, schémas,…
Facilité de partage pour les
internautes
Fort levier d’engagement :
commentaires, « j’aime », …
Création d’un univers visuel
autour de la marque

13. Du son
Podcast
Playlist
Web radio

14. Les tendances tiennent compte …

15. Des comportements de l’internaute
Un utilisateur a plusieurs modes de consultation et d’utilisation

16. De la
multiplication
des écrans !

17. Ergonomie
Transformation

18. Sites Internet : les tendances 2014

19. Le responsive design
Adapter les contenus du site aux différents formats d’écrans.
Proposer une expérience utilisateur prenant en compte les forces
de chaque support.

20. Le responsive design
Un cas concret http://peaceandwool.com/
Tests avec http://www.pikock.com/fr/piresponsive-app

21. Flat design
Approche qui encourage la simplicité, la clarté et l’utilisabilité.
Design épuré et minimaliste qui se concentre sur l’essentiel et l’utilisateur.
http://www.fitbit.com/fr

22. Flat design
Une tendance initiée par Microsoft (Windows 8), Apple (IOS7), Nokia, ...

23. Flat design
Un travail important sur les couleurs.
Une réflexion sur le choix des typographies.
http://conference.awwwards.com/

24. Typoweb
Une liberté (infinie) dans le choix des typographies.
http://www.google.com/fonts , http://www.fontsquirrel.com/ …
Visuels : http://www.webdesignertrends.com/2013/11/22-typographies-inspirees-et-gratuites-pour-vos-creations/

25. Le grid
Présentation sous forme de grille.
http://lesmenuires.com/

26. Parallax
Site one page, visuels plein écran, incitation au scrolling, nouvelle manière
de présenter les contenus (story telling).
http://www.savoie-mont-blanc.com/

27. One page
Avoir une histoire à raconter (image, texte, animation, vidéo, …).
Scénarisation du site Internet.
http://www.jarritos.com/

28. One page
Faire preuve de pédagogie, expliquer la navigation (pop-up, flèches, …)
http://www.stmichel.fr/

29. Des animations
http://www.savoura.com/

30. Merci HTML 5 et CSS 3
Interfaces dynamiques permettant une grande expérience utilisateur,
des possibilités d’interactivité et une compatibilité avec les mobiles.

31. Des fonctionnalités utiles

32. Fonction recherche
Plusieurs approches possibles.
http://www.alpes-ski-resa.com/
Voir les autres approches :
http://www.formateurconsultant.com/article-les-bonnes-pratiques-e-commerce-la-fonction-recherche-sur-un-site-112815048.html

33. Les menus riches
Accompagner l’internaute.
http://www.spartoo.com/
Voir les autres approches :
http://www.formateurconsultant.com/article-les-bonnes-pratiques-e-commerce-le-menu-riche-111815056.html

34. Boutons de partage
Donner une dimension sociale à son site.

35. Google Maps
Guider ses clients vers son entreprise.
Voir d’autres types de cartes :
http://www.inaativ.com/Actualites/plans-et-cartes-3-outils-efficaces-pour-guider-vos-partenaires.html

36. Formulaire de contact
Simple et efficace.
Adapté au design du site.

37. Le lancement d’un site n’est que
le début de l’histoire …

38. Inbound marketing
Attirer naturellement des visiteurs qualifiés plutôt que d’aller les chercher.
# Référencement naturel
# Médias sociaux
# RP digitales
…

39. Outbound marketing
Aller chercher des prospects sur leur propre territoire.
# Adwords # E-mailing # Publicité en ligne …

40. Google Analytics
J’analyse fréquemment le trafic sur mon site.
Je réajuste mes actions.

41. 5 liens pour
aller plus loin …
http://www.formateurconsultant.com/
http://www.inaativ.com/E-books/
http://www.scoop.it/t/strategie-editoriale-sur-internet-et-marketing-de-contenu/
http://www.scoop.it/t/facebook-pour-les-entreprises
http://www.scoop.it/t/l-observatoire-des-tendances

42. www.inaativ.com
INAATIV
Contact : Vincent Pereira - 06 47 08 09 69
vincent@inaativ.com