3 suisses : "webdesign / concept"

3 344 vues

Publié le

Formation pro des équipes maquettistes 3 Suisses : libérons notre créativité pour développer de nouveaux univers sur le web !

Publié dans : Internet
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

3 suisses : "webdesign / concept"

  1. 1. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   «  Webdesign  /  Concept  »   Mai  –  Juin  2014   Forma1on  pro  /  2014  
  2. 2. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux    1  /  Objec5f  pédagogique  :      Face  à  un  projet  client,  proposer  un  concept  et      un  environnement  graphique  adapté  au  web.      2  /  Compétences  à  acquérir  :      Analyse  ar1s1que  de  l’univers,  des  couleurs      et  mise  en  place  d’un  mood-­‐board.   Mai  –  Juin  2014   Forma1on  pro  /  2014   Rappel  des  objec5fs  
  3. 3. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Pour  commencer…   Ø  Quand  /  Dans  quel  cadre  ?   Ø  De  quoi  s’agissait-­‐il  ?   Ø  Sur  quel  site  ?   Ø  Pourquoi  avez-­‐vous  trouvé  cela  créa1f  ?   Avez-­‐vous  vu  quelque  chose  de  créa5f  sur  le  web  récemment  ?  
  4. 4. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   C’est  quoi  un  concept  ?      La  créa1on  d’une  concep1on  graphique  vs.  d’une  charte  graphique,  c’est    créer  l’univers,  définir  le  design  visuel  que  l’on  donne  à  un  support,  à  une    communica1on.      Charte  graphique  =  déclinaison  pra1que  de  la  concep1on  graphique.     Mai  –  Juin  2014   Forma1on  pro  /  2014   Défini5ons  1/2  
  5. 5. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Exemple  print  
  6. 6. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Forma1on  pro  /  2014   Exemple  web  
  7. 7. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Différences  print  /  web   1.  Tout  est  mesurable  =>  Choix  graphiques  objec1fs  vs.  Subjec1fs   2.  Beaucoup  d’anglicismes   3.  (…)   4.  Et  surtout…  il  existe  pleins  de  manières  de  consulter  le  web  !   1.  Support  différents  :  desktop  /  phablet  /  mobile…   2.  Configura1ons  différentes  :  Windows,  Android,  iOS…   3.  Vitesses  de  chargement  différentes  :  ADSL  /  4G…   4.  Pleins  de  «  browsers  »  (=navigateur  web)  :  Firefox,  IE,  Chrome,  Opera…   cf.  IE6  countdown  
  8. 8. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   C’est  quoi  le  marke5ng  ?      Wikipedia  «  L'ensemble  des  ac1ons  ayant  pour  objec1f  de  prévoir  ou   de  constater,  et  le  cas  échéant,  de  s1muler,  susciter  ou  renouveler  les   besoins  du  consommateur,  en  telle  catégorie  de  produits  et  de  services,  et   de  réaliser  l'adapta1on  con1nue  de  l'appareil  produc1f  et  de  l'appareil   commercial  d'une  entreprise  aux  besoins  ainsi  déterminés.  »     Mai  –  Juin  2014   Forma1on  pro  /  2014   Défini5ons  2/2  
  9. 9. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   La  réflexion  marke5ng  /  1   Cas  :  le  site  «  corporate  »   Objec5f  n°1   développer  la   visibilité  de  l'offre  et   de  la  marque   Sous-­‐objec5fs  :   valida1on  de  la   lisibilité  de  l'iden1té   de  la  société,   améliora1on  de  la   qualité  du  trafic…    
  10. 10. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   La  réflexion  marke5ng  /  2   Cas  :  le  site  «  ecommerce  /  marketplace  »   Objec5f  n°1   transformer  les   visites  en  ventes   KPI   Taux  de  refus,   Taux  d’abandon  du   panier,   Taux  de  conversion,   Taux  de  rebond,   VU  /  mois   …      
  11. 11. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   La  réflexion  marke5ng  /  3   Cas  :  le  site  «  Landing  page  /  Advergame  »   Objec5f  n°1   alimenter  une  BDD  de   prospects  pré-­‐ qualifiés       KPI  /  ss-­‐Objec5fs   A  votre  avis  ?      
  12. 12. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   La  réflexion  marke5ng  /  4   Cas  :  le  site  «  Media  »   Objec5f  n°1   Selon  vous  ?       KPI  /  ss-­‐Objec5fs   A  votre  avis  ?      
  13. 13. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   La  réflexion  marke5ng  /  5   Cas  :  le  site  «  Réseau  social  »   Objec5f  n°1   Selon  vous  ?       KPI  /  ss-­‐Objec5fs   A  votre  avis  ?      
  14. 14. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       Les  3  méthodes  de  créa5vité   Êtes-­‐vous  cerveau  droit  /  cerveau  gauche  ?   Youtube  :  «  hbdi  +  danseuse  »   youtube.com/watch?v=BZevSglezAE     «  Êtes-­‐vous  cerveau  gauche   ou  cerveau  droit  ?  »  
  15. 15. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       1ère  méthode  de  créa5vité   «  Méthode  HDBI  ou  Herrmann  »  Cerveau  droit  /  Cerveau  gauche   Objec5f  :   permeore  de  sor1r  des  jugements  de  valeurs   sur  le  "bon"  ou  le  "mauvais"  fonc1onnement   d'une  personne  dans  un  groupe.     «  Mieux  se  connaître  »   «  Mieux  communiquer  avec  mon  équipe  »   «  Développer  votre  créa1vité  »   «  Mieux  coacher  »   «  Savoir  comment  les  autres  pensent  »   «  S1muler  le  travail  en  équipe  »   …  
  16. 16. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       Exercice  individuel   «  L’acte  créa5f  »   «  Puiser  quelques  informa1ons  provenant  de  la  mémoire  (logique  ou  irra1onnelle)  et  de   les  réorganiser  d'une  manière  nouvelle,  poussée  par  l'imagina5on,  la  sensibilité,  l'ins5nct,   la  spontanéité,  l'inspira5on,  les  émo5ons  fortes.  »   Ex  :  voiture  =>  vitesse,  sécurité,  transport,  route,  passager,  co-­‐voiturage…     =>  Brainstorming  sur  le  terme  «  site  web  »  
  17. 17. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       «  brainstorming  :  site  web  »   Etape  1  :  Phase  d’échauffement   «  Produc5on  individuelle  d’un  mood  board  /  100%  destructuré  »  
  18. 18. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       2e  méthode  de  créa5vité   «  Méthode  des  6  chapeaux  »  
  19. 19. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       Exercice  collec5f   Etape  2   «  Produc5on  collec5ve  d’une  carte  mentale  /  mindmap  sur  le  mood  board.  »  
  20. 20. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       3e  méthode  de  créa5vité   «  CPS  :  Crea5ve  Problem  Solving  »   Une  checklist  en  8  étapes  :   1.  Iden1fier  les  besoins   2.  Les  problèmes   3.  Les  objec1fs  principaux   4.  Les  idées  depuis  ces  obj.   5.  Faire  une  sélec1on   6.  Budget  /  Planning   7.  Adhésion   8.  Plan  d’ac1on   Idéal  pour  la  ges1on  de  projet  !  
  21. 21. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       Les  techniques  de  créa5vité   hop://fr.pinterest.com/pin/170362798378683040/     Toutes  les  expériences  sont  sources  d’idées   Ø  Faire  appel  à  ses  5  sens     Notre  subconscient  trie  les  idées  et  les  stocke   Ø  Les  expériences  sont  interconnectées   Ø  …   Ø  Puis,  on  imagine  de  nouvelles  connexions   Ø  Ça  y’est,  une  nouvelle  idée  est  née  !  
  22. 22. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Les  bases  de  l’ergonomie   «  2  univers,  pour  un  contenu  adapté  au  web  »   User  Interface  User  eXperience   UX   UI  
  23. 23. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Ergonomie  :  UI  /  GUI   «  Graphical  »  User  interface     1.  Lisibilité   2.  Sobriété  
  24. 24. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Ergonomie  :  Lisibilité  [UI]   •  Choix  de  la  Fonte  =  fin  de  la  limite  Arial  /  Verdana  |  Times  |  Comic    cf.  Google  Fonts   •  Taille  des  textes   •  Couleur   •  Alignement   •  Interlignage   •  Interleqrage   •  …   •  Et  un  contenu  simple  à  lire   et  sans  jargon  ;)   cf.  score  de  lisibilité  Flesch    
  25. 25. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Ergonomie  :  Sobriété  [UI]   •  Flat  design  vs.  3D/Skeuomorphisme   cf.  style  Metro  /  Windows   •  Logos  over-­‐flat  vs.  Logos  +  sophis1qués   =>  «  manque  de  souveraineté  »   cf.  CubaCouncil   •  Tendance  au  «  long  shadow  »   •  U1lisa1on  du  blanc   cf.  IFTTT  
  26. 26. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Ergonomie  :  UX   User  eXperience   1.  Accessibilité   2.  Disponibilité   3.  Rapidité   4.  Interac5vité   5.  U5lisabilité  
  27. 27. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Ergonomie  :  Accessibilité  [UX]   •  «  Interopérabilité  »   Non  limité  à  une  res1tu1on  spécifique  /  Responsive   ex  :  Fonc1on  «  Lecture  »  sous  Safari  presse-­‐citron.com   ex  :  Flash   •  Normes  WAI    RGAA  +  WCAG   •  Choix  des  couleurs    Colour  Contrast  Analyzer  CCA2   •  Légendes   Légendes  visibles  /  alterna1ves   •  Zoom   «  Ctrl  +  moleoe  »   Autre  cas  :  «  Zoom  XXL  »  Darty    cf.  richcommerce.fr  
  28. 28. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Ergonomie  :  Disponibilité  [UX]   •  Site  disponible  =  «  site  qui  ne  plante  pas  »   =>  sen1ment  désagréable  /  néga1f   =>  abandon  du  client  et  de  l’acte  d’achat   •  3  à  5  jours  de  non  disponibilité   =>  déréférencement  chez  Google     •  Best  prac5ce  des  pages  404   •  Fun  /  ton  décalé   •  Moteur  de  recherche  intégré   +  «  suggest  »  
  29. 29. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Ergonomie  :  Rapidité  [UX]   •  En  termes  techniques   •  Temps  de  chargement  /  temps  d'accès   Cf.  Compteur  Google  Web  Fontes   GTMetrix  /  Pingdom   Ø  Cas  des  Sprites   •  Cas  des  Widgets   •  En  termes  de  contenus   •  chargement  asynchrone  :   •  5-­‐7  secondes  storytelling  vs.  Longues  videos    Vine  vs  Youtube   •  Ar1cles  de  brève  vs.  Ar1cles  de  fond    cf.  Melty,  Locita…  
  30. 30. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Ergonomie  :  Interac5vité  [UX]   •  Formulaires   •  Champs  de  saisie  :  contact,  commentaire…   •  Boutons  d'ac1on   •  Eye-­‐catcher   cas  :  Fiche  produit  Webdistrib   •  Menus  /  Liens   •  URL  internes  vs  URL  sortantes   •  Clic  vs.  Survol  cf.  «  menu  3Suisses  »   •  Ges5on  d’événement   •  Scroll  =>  Scroll  parallax   •  Focus  =>  Placeholder   •  «  Flash  in  flash  »   •  Zones  fixes  cf.  Fiche  produit  Decathlon  
  31. 31. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Ergonomie  :  U5lisabilité  [UX]   •  «  Règle  des  3  clics  »   •  Sens  de  lecture  «  F-­‐paoern  »   •  La  zone  de  flooaison  /  zone  «  above  the  fold  »    cf.  Google  Browser  Size   •  Elements  de  ré-­‐assurance  /  Tiers  de  confiance   Badge  Google,  FIA-­‐NET,  eKomi…   •  Fil  d’ariane  /  Breadcrumb   •  Iconisa1on  graphique,  pour  donner  du  sens  !   Cf.  Font  awesome  :    bouton  d’ac1on,    URL  sortante    Menu  ex  :  Magento  
  32. 32. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       •  Lisibilité   •  Sobriété   •  Accessibilité   •  Disponibilité   •  Rapidité   •  Interac1vité   •  U1lisabilité     Evalua5on  de  fiches  produit   «  Matrice  d’évalua5on  /  Graphique  radar  »   vs.   .fr   .no   vs.  
  33. 33. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       Développons  notre  culture  web   Lister  des  «  best-­‐prac1ces  »   Trouver  de  l’inspira1on   Connaître  les  tendances  
  34. 34. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Le  webdesign  en  2014   «  Les  10  tendances,  par  Vanksen  »   hop://fr.slideshare.net/Vanksen/les-­‐10-­‐tendances-­‐webdesign-­‐de-­‐2014-­‐by-­‐vanksen    
  35. 35. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       Réaliser  un  Mockup   Mockup  /  Wireframe  /  Zoning   Réalisons  un  squeleoe  de  fiche  produit  sur   moqups.com     Cas  :   Ø  Paire  de  chaussures   Ø  Avec  un  prix  en  promo1on   Ø  Et  une  zone  de  croisement  de  produits   Ø  …le  reste  :  laissons  place  à  votre   créa1vité  !!  
  36. 36. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       Phase  2  :  Habillage   Créons  une  maqueoe  sous  Photoshop  en   binôme,  avec  des  ou1ls  d’aide  à  la   créa1vité,  en  sélec5onnant  1  mockup.   Adobe  Kuler  /  Color  Hunter  +  Color  Thief   Stripe  Generator   Quick  Ribbon   Jquery  UI   …   «  Le  designer  répondra   aux  demandes  du  chef   de  projet  du  binôme,   mais  s’autorise  à  être   force  de  proposi5on.  »      
  37. 37. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       …  Alors  ?   Les  leçons  à  5rer  sur  le  travail  de  groupe   ??
  38. 38. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       1.  Créer  un  climat  d’ouverture   2.  Être  curieux  =>  Avoir  une  bonne  culture  générale   3.  Être  rigoureux  =>  Déterminer  1  objec5f  précis   4.  S’arrêter  et  prendre  le  temps  d’observer   5.  Eviter  la  censure   6.  Être  à  l’écoute  des  retours  externes  :   accepter  les  remarques  et  construire  sur  ses  idées  et  celles  des  autres.   7.  Ne  pas  se  décourager,  pour  mo1ver  sa  créa1vité   8.  Adopter  une  a•tude  ludique   9.  Et  …  Changer  la  musique  dans  son  casque  !       Les  8  condi5ons  pour  concevoir   «  il  faut  contribuer  à  développer  un  sen1ment  de  sécurité  psychologique.  »  
  39. 39. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   The  END   Merci  !       david.desrousseaux@gmail.com   @desrousseaux  

×