Responsive design, flat design, grid, Parallax... autant de mots anglo-saxons qui nous révèlent les tendances à venir en matière de graphisme et d'ergonomie pour les sites web d'aujourd'hui et de demain.
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.
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
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
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/
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/
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.
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
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
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