Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances




          ...
Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances




          ...
Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances




          ...
Pour commencer...

Le design est le premier contact avec la marque,
l’entreprise, ses valeurs, ses produits/services


Dan...
en traduisant l’expression des valeurs intrinsèques de la marque,
dessinant son territoire et matérialisant ses axes de di...
vous aide à penser votre stratégie de marque, en intégrant les codes
existant et en utilisant les vertus propres du média.
en installant l’univers de votre marque, en mettant en scène un dispositif
qui fera vivre à l’utilisateur une expérience r...
donc....
Offrez à votre client une relation interactive à la
marque

Le site web est une composante spécifique de la strat...
Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances




          ...
Intégrez les spécificités du design interactif
faites correspondre le design de votre projet
web avec votre stratégie d’en...
intégrez les spécificités du design interactif
    la spécificité de l’expérience web par rapport
    aux autres supports
...
intégrez les spécificités du design interactif
pensez les contenus de manière multi-modale
pour orchestrer mouvement, vide...
intégrez les spécificités du design interactif
 Appuyez-vous sur le persuasive design
         facilitez les décisions des...
Intégrez les spécificités du design interactif
Harmonisez votre présence sur le web




Un structure graphique déclinable ...
Intégrez les spécificités du design interactif
      Harmonisez votre présence sur le web




Exemple d’harmonisation libr...
Intégrez les spécificités du design interactif




         harmonisez votre présence sur le web
         harmonisation in...
Façonnez votre design
en fonction des
différentes typologies
de site
intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site

site ...
intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site

site ...
intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site

site ...
intégrez les spécificités du design interactif
       façonnez votre design en fonction des différentes typologies de site...
intégrez les spécificités du design interactif
          façonnez votre design en fonction des différentes
          typol...
intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site

porta...
intégrez les spécificités du design interactif
           façonnez votre design en fonction des différentes typologies de ...
intégrez les spécificités du design interactif
          façonnez votre design en fonction des différentes typologies de s...
et le e-tourisme ?…
           À la croisée des chemins le “e-tourisme” doit répondre à plusieurs objectifs

           Il...
Pour parvenir à un projet réussi, il faut…




  une équipe pluridisciplinaire
  une méthodologie cohérente
  des étapes c...
Une équipe pluridisciplinaire…


   le design web est une éponge qui absorbe les cultures, les
   modes, les technologies,...
Avant la créa…

Hiérarchisez l’information de votre site
avec le story-board
- définir les grandes zones d’interactions
su...
Des étapes clés…




La recherche
créative
Pour traduire le message et les
valeurs d’une marque sur des
interface, nous tr...
1.2.3.4.5.6
Une identité graphique
validée par tous…
L’objectif de ces échanges étant
de construire un cercle vertueux
d’i...
Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances




          ...
anticipez l’évolution du design interactif
full image : l’expérience utilisateur
une approche novatrice et immersive

- un...
full image : l’expérience utilisateur
full image : l’expérience utilisateur
full image : l’expérience utilisateur
full image : l’expérience utilisateur
full image : l’expérience utilisateur
full image : l’expérience utilisateur
full video : l’expérience utilisateur
full video : l’expérience utilisateur
full video : l’expérience utilisateur
anticipez l’évolution du design interactif
Web 2.0 : l’utilisateur reprend la main
une approche esthétique centrée sur le ...
anticipez l’évolution du design interactif
Web 2.0 : l’utilisateur reprend la main

l’identité visuelle des marques (logo,...
Web 2.0 : l’utilisateur reprend la main
Web 2.0 : l’utilisateur reprend la main

médiathèque valeo : les utilisateurs internes construisent eux-mêmes le fond
icon...
Web 2.0 : l’utilisateur reprend la main
Web 2.0 : l’utilisateur reprend la main
Web 2.0 : l’utilisateur reprend la main
Web 2.0 : l’utilisateur reprend la main


                        Le Tourisme se prête parfaitement à
                    ...
Merci de votre attention.
L'intervention de Damien Melich
L'intervention de Damien Melich
L'intervention de Damien Melich
L'intervention de Damien Melich
L'intervention de Damien Melich
L'intervention de Damien Melich
L'intervention de Damien Melich
L'intervention de Damien Melich
L'intervention de Damien Melich
Prochain SlideShare
Chargement dans…5
×

L'intervention de Damien Melich

3 200 vues

Publié le

Intervention réalisée lors des 3èmes Rencontres Nationales du etourisme institutionnel à Toulouse le 20/11/2007.

Publié dans : Économie & finance
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 200
Sur SlideShare
0
Issues des intégrations
0
Intégrations
68
Actions
Partages
0
Téléchargements
69
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

L'intervention de Damien Melich

  1. 1. Réussir le design de son projet web L'ergonomie et le design : les fautes à éviter, les nouvelles tendances Damien Melich Directeur de la Création Online
  2. 2. Réussir le design de son projet web L'ergonomie et le design : les fautes à éviter, les nouvelles tendances Cernez les enjeux de communication Intégrez les spécificités du design interactif Adoptez une méthodologie cohérente 6 conseils pour réussir votre projet design Anticipez l’évolution du design interactif
  3. 3. Réussir le design de son projet web L'ergonomie et le design : les fautes à éviter, les nouvelles tendances Cernez les enjeux de communication
  4. 4. Pour commencer... Le design est le premier contact avec la marque, l’entreprise, ses valeurs, ses produits/services Dans la relation qui lie un consommateur avec une marque/une entreprise/une collectivité, internet = souvent le premier moment : recherche d’adresse d’une boutique, visualisation des produits,annonces RH, de renseignements... Cette expérience initiale s’accompagne d’un premier jugement très émotionnel qui se reporte sur la marque : qualité esthétique, ergonomie de l’interface, pertinence du contenu, ces critères associés à la marque instaurent les premiers jalons positifs ou négatifs de la relation Il faut donner du sens au design en positionnant l’utilisateur au coeur de votre stratégie de communication Comment ?
  5. 5. en traduisant l’expression des valeurs intrinsèques de la marque, dessinant son territoire et matérialisant ses axes de différenciation.
  6. 6. vous aide à penser votre stratégie de marque, en intégrant les codes existant et en utilisant les vertus propres du média.
  7. 7. en installant l’univers de votre marque, en mettant en scène un dispositif qui fera vivre à l’utilisateur une expérience relationnelle dédiée.
  8. 8. donc.... Offrez à votre client une relation interactive à la marque Le site web est une composante spécifique de la stratégie de communication (de plus en plus centrale) Le design est une couche sensible immédiate dans la relation marque/client et favorise la transformation du prospect en client Le design installe l’univers de référence du projet, il s’adresse à des utilisateurs mais potentielement à des clients Il est le vecteur de sens directement préhensible, il porte les valeurs, les codes, le positionnement de l’entité commanditaire du site : la forme parle sur le fond, elle constitue une preuve a priori du discours marketing Le design web n’est pas une déclinaison des supports traditionnels mais construit une relation différente avec les cibles
  9. 9. Réussir le design de son projet web L'ergonomie et le design : les fautes à éviter, les nouvelles tendances Intégrez les spécificités du design interactif et intégrer l’internaute dans la stratégie de marque
  10. 10. Intégrez les spécificités du design interactif faites correspondre le design de votre projet web avec votre stratégie d’entreprise Redonner de la visibilité à cet établissement haut de gamme et affirmer sa présence en ligne. Stratégie de diversification de l’offre www.royalmonceau.fr www.royalparcevian.com Construire une identité graphique qui sert vos objectifs, porte vos valeurs, amplifie vos avantages… en créant des relations systématiques entre les objectifs clefs (l’identité, l’attractivité, la cohérence, la stratégie, la qualité, la relation...) et leurs représentations graphiques
  11. 11. intégrez les spécificités du design interactif la spécificité de l’expérience web par rapport aux autres supports http://www.mtl12.com/ www.centerparcs.fr Une interface graphique vidéo Une approche vidéo sous forme de programme > engendrer une expérience immersive autour de la court découverte de la ville de Montréal. > Proposer à l’internaute des vidéos intéractives Osez adapter le mode de navigation au positionnement de votre site. L’interface vidéo permet désormais de lier le fond et la forme
  12. 12. intégrez les spécificités du design interactif pensez les contenus de manière multi-modale pour orchestrer mouvement, video, son, interactivité qui crée des expériences uniques http://www.rhonealpes.tv/voyage/ http://www.rhonealpes-tourisme.fr/ Une télévison sur le net Un déploiement transversal > De la vidéo à la demande au service d’une région Intégrez la dimension multi-modale dès la réflexion éditoriale, Utilisez le potentiel rich-media pour la mise en valeur de vos contenus
  13. 13. intégrez les spécificités du design interactif Appuyez-vous sur le persuasive design facilitez les décisions des utilisateurs en leur délivrant des messages calibrés dans une mise en page créez un appel fort à l’action dans l’interface pour convertir les visiteurs en clients les trois écrans illustrent le processus pour aboutir à un design de plus en plus efficace Faites converger l’ergonomie et le design pour générer l’action
  14. 14. Intégrez les spécificités du design interactif Harmonisez votre présence sur le web Un structure graphique déclinable sur l’ensemble des établissements du Groupe Villadelles.
  15. 15. Intégrez les spécificités du design interactif Harmonisez votre présence sur le web Exemple d’harmonisation libre fondée sur des codes couleurs fondamentaux et un principe graphique transversal (courbe)
  16. 16. Intégrez les spécificités du design interactif harmonisez votre présence sur le web harmonisation intranet : structure plus stricte, zones de personnalisation dans le design
  17. 17. Façonnez votre design en fonction des différentes typologies de site
  18. 18. intégrez les spécificités du design interactif façonnez votre design en fonction des différentes typologies de site site institutionnel : identitaire, statutaire, fonctionnel www.groupama.com www.fondation- www.seb.com groupama.com design ergonomie editorial HTML important très important
  19. 19. intégrez les spécificités du design interactif façonnez votre design en fonction des différentes typologies de site site thématique/événementiel : informatif, persuasif, impliquant, émotionnel www.renaulttrucks.com www.paris.fr www.nrjmobile (route de la soie) (nuits blanches) ( HitMusicInside) design ergonomie editorial HTML important très important
  20. 20. intégrez les spécificités du design interactif façonnez votre design en fonction des différentes typologies de site site e-commerce/transactionnel : rassurant, incitatif, relationnel www.elige.con www.relaischateaux.com http://www.vivacorsica.com/ design ergonomie editorial HTML important très important
  21. 21. intégrez les spécificités du design interactif façonnez votre design en fonction des différentes typologies de site site de marque/promotionnel : esthétique, incitatif, informatif www.valeo-motor-sports.com BMW 330 XD www.noctilien.fr design ergonomie editorial HTML important très important
  22. 22. intégrez les spécificités du design interactif façonnez votre design en fonction des différentes typologies de site site de contenu : descriptif, pratique www.seine-et-marne.fr www.centrepompidou.fr www.paris.fr design ergonomie editorial HTML important très important
  23. 23. intégrez les spécificités du design interactif façonnez votre design en fonction des différentes typologies de site portail : exhaustif, pratique, identitaire, redirection www.caisse-epargne.fr www.ag2r.com www.education.gouv.fr design ergonomie editorial HTML important très important
  24. 24. intégrez les spécificités du design interactif façonnez votre design en fonction des différentes typologies de site site intranet/extranet : informatif, communicant intranet ubisoft USA Live intranet American Hospital Intranet ag2R design ergonomie editorial HTML important très important
  25. 25. intégrez les spécificités du design interactif façonnez votre design en fonction des différentes typologies de site application métier : fonctionnel, efficace, intuitif Banque Populaire Club Med La Poste design ergonomie editorial HTML important très important
  26. 26. et le e-tourisme ?… À la croisée des chemins le “e-tourisme” doit répondre à plusieurs objectifs Il doit être séduisant, communicant, esthétique, incitatif, informatif... http://www.tourisme- www.tourisme-midi- http://www.tourisme- nordpasdecalais.fr pyrenees.com/ lorraine.fr/ design ergonomie editorial HTML important très important
  27. 27. Pour parvenir à un projet réussi, il faut… une équipe pluridisciplinaire une méthodologie cohérente des étapes clés ...
  28. 28. Une équipe pluridisciplinaire… le design web est une éponge qui absorbe les cultures, les modes, les technologies, les langages Tous les métiers cohabitent... de l’architecture : pour structurer les contenues de l’ergonomie : pour une meilleur utilisabilité de la signalétique : pictos, icônes du cinéma : cinématique, story-board, animation de l’affichisme : composition visuel + typo des magazines : mise en page édito. inversement, le design web est une source forte d’inspiration et il n’est pas rare de voir des habillage TV (M6, Arte, MTV...) reprendre les codes du web. Le design web, source et capteur de tendances
  29. 29. Avant la créa… Hiérarchisez l’information de votre site avec le story-board - définir les grandes zones d’interactions sur les gabarits à produire - hiérarchiser, organiser les contenus, donner des repères aux designers dans la construction des gabarits L’organisation spatiale de l’information dans un zoning n’est qu’indicative : les recommandations créatives prennent le pas oubliez la démarche séquentielle de conception, privilégiez une synergie design, ergonomie, marketing, éditorial
  30. 30. Des étapes clés… La recherche créative Pour traduire le message et les valeurs d’une marque sur des interface, nous travaillons par itérations du brainstorming à la déclinaison.
  31. 31. 1.2.3.4.5.6 Une identité graphique validée par tous… L’objectif de ces échanges étant de construire un cercle vertueux d’itérations pour atteindre une satisfaction mutuelle et au final servir les objectifs du projet.
  32. 32. Réussir le design de son projet web L'ergonomie et le design : les fautes à éviter, les nouvelles tendances anticipez l’évolution du design interactif
  33. 33. anticipez l’évolution du design interactif full image : l’expérience utilisateur une approche novatrice et immersive - un design immersif et intégré - des images plein écran - des vidéo plein écran (type audiovisuel) - une projection dans l’univers de la marque - des résolutions de plus en plus grande (supérieure à 1024 x 768) - une visibilité accrue pour les marques - une approche multi canal et multi support une expérience utilisateur qui initie une relation forte avec la marque
  34. 34. full image : l’expérience utilisateur
  35. 35. full image : l’expérience utilisateur
  36. 36. full image : l’expérience utilisateur
  37. 37. full image : l’expérience utilisateur
  38. 38. full image : l’expérience utilisateur
  39. 39. full image : l’expérience utilisateur
  40. 40. full video : l’expérience utilisateur
  41. 41. full video : l’expérience utilisateur
  42. 42. full video : l’expérience utilisateur
  43. 43. anticipez l’évolution du design interactif Web 2.0 : l’utilisateur reprend la main une approche esthétique centrée sur le fonctionnel et l’utilitaire : - un design d’action - des blocs modulables - des jeux de premiers et arrières plans - bouton incitatif (intuitif) - traitement moiré - des pages claires et lisibles - des contenus hiérarchisés - design interactif reposant sur l’accessibilité une démarche participative et collaborative le consommateur devient producteur
  44. 44. anticipez l’évolution du design interactif Web 2.0 : l’utilisateur reprend la main l’identité visuelle des marques (logo, typo, couleurs et formes) conserve sa place de différenciant et fédérateur autour du produit, mais s’adapte à des nouveaux codes graphiques et ergonomiques basés sur la simplicité et l’efficacité le style graphique Web 2.0 (effets moirés, pictos, navigation simplifiée, couleurs et visuels forts) devient synonyme de communauté, de partage, de clarté l’internaute devient un véritable acteur grâce à des fonctionnalités que permettent les technologies Ajax et flash si le Web 2.0 s’impose de plus en plus depuis ces deux dernières années, c’est qu’il propose une rationalisation du web design au profit de l’internaute, qui trouve plus vite et dans un univers agréable les informations qu’il recherche.
  45. 45. Web 2.0 : l’utilisateur reprend la main
  46. 46. Web 2.0 : l’utilisateur reprend la main médiathèque valeo : les utilisateurs internes construisent eux-mêmes le fond iconographique, le participatif au service de l’entreprise
  47. 47. Web 2.0 : l’utilisateur reprend la main
  48. 48. Web 2.0 : l’utilisateur reprend la main
  49. 49. Web 2.0 : l’utilisateur reprend la main
  50. 50. Web 2.0 : l’utilisateur reprend la main Le Tourisme se prête parfaitement à la vogue du marketing collaboratif boosté par le web 2.0 - les consommateurs ont besoin d’aide et de conseils avant de se décider - l’avis de personnes ayant déjà testé l’offre est particulièrement légitime - il est positionné sur des thématiques sur lesquels les internautes s’expriment volontiers et ont envie de partager avec d’autres leur point de vue et leurs expériences. Les outils Web 2.0 à mettre en place - Les blogs - Les espaces communautaires - Les RSS - La cartographie
  51. 51. Merci de votre attention.

×