SlideShare une entreprise Scribd logo
David	
  Desrousseaux	
  
david.desrousseaux@gmail.com	
  
@desrousseaux	
  
«	
  Webdesign	
  /	
  Concept	
  »	
  
Mai	
  –	
  Juin	
  2014	
  
Forma1on	
  pro	
  /	
  2014	
  
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	
  
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	
  ?	
  
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	
  
David	
  Desrousseaux	
  
david.desrousseaux@gmail.com	
  
@desrousseaux	
  
Mai	
  –	
  Juin	
  2014	
  
Forma1on	
  pro	
  /	
  2014	
  
Exemple	
  print	
  
David	
  Desrousseaux	
  
david.desrousseaux@gmail.com	
  
@desrousseaux	
  
Forma1on	
  pro	
  /	
  2014	
  
Exemple	
  web	
  
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	
  
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	
  
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…	
  
	
  
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	
  
…	
  
	
  
	
  
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	
  ?	
  
	
  
	
  
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	
  ?	
  
	
  
	
  
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	
  ?	
  
	
  
	
  
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	
  ?	
  »	
  
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	
  »	
  
…	
  
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	
  »	
  
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é	
  »	
  
David	
  Desrousseaux	
  
david.desrousseaux@gmail.com	
  
@desrousseaux	
  
Mai	
  –	
  Juin	
  2014	
  
Forma1on	
  pro	
  /	
  2014	
  
	
  
	
  
2e	
  méthode	
  de	
  créa5vité	
  
«	
  Méthode	
  des	
  6	
  chapeaux	
  »	
  
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.	
  »	
  
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	
  !	
  
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	
  !	
  
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	
  
David	
  Desrousseaux	
  
david.desrousseaux@gmail.com	
  
@desrousseaux	
  
Mai	
  –	
  Juin	
  2014	
  
Forma1on	
  pro	
  /	
  2014	
  
Ergonomie	
  :	
  UI	
  /	
  GUI	
  
«	
  Graphical	
  »	
  User	
  interface	
  
	
  
1.  Lisibilité	
  
2.  Sobriété	
  
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	
  
	
  
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	
  
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é	
  
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	
  
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	
  »	
  
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…	
  
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	
  
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	
  
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.	
  
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	
  
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	
  
	
  
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é	
  !!	
  
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.	
  »	
  
	
  
	
  
David	
  Desrousseaux	
  
david.desrousseaux@gmail.com	
  
@desrousseaux	
  
Mai	
  –	
  Juin	
  2014	
  
Forma1on	
  pro	
  /	
  2014	
  
	
  
	
  
…	
  Alors	
  ?	
  
Les	
  leçons	
  à	
  5rer	
  sur	
  le	
  travail	
  de	
  groupe	
  
??
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.	
  »	
  
David	
  Desrousseaux	
  
david.desrousseaux@gmail.com	
  
@desrousseaux	
  
Mai	
  –	
  Juin	
  2014	
  
Forma1on	
  pro	
  /	
  2014	
  
The	
  END	
  
Merci	
  !	
  
	
  
	
  
david.desrousseaux@gmail.com	
  
@desrousseaux	
  

Contenu connexe

En vedette

3Desserts Graphiques Conférence Innorobo impression 3D alimentaire
3Desserts Graphiques Conférence Innorobo impression 3D alimentaire3Desserts Graphiques Conférence Innorobo impression 3D alimentaire
3Desserts Graphiques Conférence Innorobo impression 3D alimentaire
Nadine BRIALLON
 
Du concept board aux pistes graphiques
Du concept board aux pistes graphiquesDu concept board aux pistes graphiques
Du concept board aux pistes graphiques
laureno
 
Mise en place d’un réseau social d’entreprise : conseils et exemples
Mise en place d’un réseau social d’entreprise : conseils et exemplesMise en place d’un réseau social d’entreprise : conseils et exemples
Mise en place d’un réseau social d’entreprise : conseils et exemples
Clémence Bertrand-Jaume
 
E-réputation et marques : état de l'art et enjeux - by Vanksen
E-réputation et marques : état de l'art et enjeux - by VanksenE-réputation et marques : état de l'art et enjeux - by Vanksen
E-réputation et marques : état de l'art et enjeux - by Vanksen
Vanksen
 
L’impression 3D, un nouvel outil pour Digital Humanists ?
L’impression 3D, un nouvel outil pour Digital Humanists ?L’impression 3D, un nouvel outil pour Digital Humanists ?
L’impression 3D, un nouvel outil pour Digital Humanists ?
Phonothèque MMSH
 
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Saâd Zerhouni
 

En vedette (6)

3Desserts Graphiques Conférence Innorobo impression 3D alimentaire
3Desserts Graphiques Conférence Innorobo impression 3D alimentaire3Desserts Graphiques Conférence Innorobo impression 3D alimentaire
3Desserts Graphiques Conférence Innorobo impression 3D alimentaire
 
Du concept board aux pistes graphiques
Du concept board aux pistes graphiquesDu concept board aux pistes graphiques
Du concept board aux pistes graphiques
 
Mise en place d’un réseau social d’entreprise : conseils et exemples
Mise en place d’un réseau social d’entreprise : conseils et exemplesMise en place d’un réseau social d’entreprise : conseils et exemples
Mise en place d’un réseau social d’entreprise : conseils et exemples
 
E-réputation et marques : état de l'art et enjeux - by Vanksen
E-réputation et marques : état de l'art et enjeux - by VanksenE-réputation et marques : état de l'art et enjeux - by Vanksen
E-réputation et marques : état de l'art et enjeux - by Vanksen
 
L’impression 3D, un nouvel outil pour Digital Humanists ?
L’impression 3D, un nouvel outil pour Digital Humanists ?L’impression 3D, un nouvel outil pour Digital Humanists ?
L’impression 3D, un nouvel outil pour Digital Humanists ?
 
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
 

Similaire à 3 suisses : "webdesign / concept"

Atelier IE7 Stratégie multi canal : être efficace avec ses moyens en respecta...
Atelier IE7 Stratégie multi canal : être efficace avec ses moyens en respecta...Atelier IE7 Stratégie multi canal : être efficace avec ses moyens en respecta...
Atelier IE7 Stratégie multi canal : être efficace avec ses moyens en respecta...
Salon e-tourisme #VeM
 
Document d'accompagnement - Challenge Étudiants 2019/2020
Document d'accompagnement - Challenge Étudiants 2019/2020Document d'accompagnement - Challenge Étudiants 2019/2020
Document d'accompagnement - Challenge Étudiants 2019/2020
AssociationLimousineChallenges
 
Minke training sessions
Minke training sessionsMinke training sessions
Minke training sessions
Minke
 
Savvy Thinking by Rémy Agitateur d'idées
Savvy Thinking by Rémy Agitateur d'idéesSavvy Thinking by Rémy Agitateur d'idées
Savvy Thinking by Rémy Agitateur d'idées
MaxMa.io
 
Atelier : comment mettre en place un plan de communication sur les réseaux so...
Atelier : comment mettre en place un plan de communication sur les réseaux so...Atelier : comment mettre en place un plan de communication sur les réseaux so...
Atelier : comment mettre en place un plan de communication sur les réseaux so...
Editoile
 
L'Impact de la E-reputation dans la recherche de l'emploi au Cameroun Par Jos...
L'Impact de la E-reputation dans la recherche de l'emploi au Cameroun Par Jos...L'Impact de la E-reputation dans la recherche de l'emploi au Cameroun Par Jos...
L'Impact de la E-reputation dans la recherche de l'emploi au Cameroun Par Jos...
KmerDDays
 
Le design UX
Le design UXLe design UX
Le design UX
Rizomer
 
Adw #14 : Design thinking
Adw #14 : Design thinkingAdw #14 : Design thinking
Adw #14 : Design thinking
Atlantic 2.0
 
Agence Athomedia - Social Media Strategy
Agence Athomedia - Social Media StrategyAgence Athomedia - Social Media Strategy
Agence Athomedia - Social Media Strategy
Athomedia
 
Atelier IE13 Le changement et la compétence c'est maintenant et tout le temps!
Atelier IE13 Le changement et la compétence c'est maintenant et tout le temps!Atelier IE13 Le changement et la compétence c'est maintenant et tout le temps!
Atelier IE13 Le changement et la compétence c'est maintenant et tout le temps!
Salon e-tourisme #VeM
 
RAPPORT DE STAGE - THURB
RAPPORT DE STAGE - THURBRAPPORT DE STAGE - THURB
RAPPORT DE STAGE - THURB
thurb2
 
2017 09-le-codeveloppement-pour-accompagner-le-changement
2017 09-le-codeveloppement-pour-accompagner-le-changement2017 09-le-codeveloppement-pour-accompagner-le-changement
2017 09-le-codeveloppement-pour-accompagner-le-changement
Sandrine Ribourg
 
Gestion de projet professionnel - Session 1
Gestion de projet professionnel - Session 1Gestion de projet professionnel - Session 1
Gestion de projet professionnel - Session 1
Kevin Coppens
 
Deck webinar klap (re)bootcamp j1
Deck webinar klap (re)bootcamp j1Deck webinar klap (re)bootcamp j1
Deck webinar klap (re)bootcamp j1
Vincent Dromer
 
Comment préparer et bien communiquer un atelier à destination des adolescents...
Comment préparer et bien communiquer un atelier à destination des adolescents...Comment préparer et bien communiquer un atelier à destination des adolescents...
Comment préparer et bien communiquer un atelier à destination des adolescents...
Médiathèque de Roubaix - La Grand-Plage
 
Coaching web 2.0
Coaching web 2.0Coaching web 2.0
Coaching web 2.0
Sylvie Roth
 
Atelier formation Nexa
Atelier formation Nexa Atelier formation Nexa
Atelier formation Nexa
Nicolas Lalande
 
Maison du Design - Présentation des services
Maison du Design - Présentation des servicesMaison du Design - Présentation des services
Maison du Design - Présentation des services
Barbara Sylvester
 
Deck webinar klap formation en-ligne padt
Deck webinar klap formation en-ligne padtDeck webinar klap formation en-ligne padt
Deck webinar klap formation en-ligne padt
Klap
 

Similaire à 3 suisses : "webdesign / concept" (20)

Atelier IE7 Stratégie multi canal : être efficace avec ses moyens en respecta...
Atelier IE7 Stratégie multi canal : être efficace avec ses moyens en respecta...Atelier IE7 Stratégie multi canal : être efficace avec ses moyens en respecta...
Atelier IE7 Stratégie multi canal : être efficace avec ses moyens en respecta...
 
Document d'accompagnement - Challenge Étudiants 2019/2020
Document d'accompagnement - Challenge Étudiants 2019/2020Document d'accompagnement - Challenge Étudiants 2019/2020
Document d'accompagnement - Challenge Étudiants 2019/2020
 
Minke training sessions
Minke training sessionsMinke training sessions
Minke training sessions
 
Savvy Thinking by Rémy Agitateur d'idées
Savvy Thinking by Rémy Agitateur d'idéesSavvy Thinking by Rémy Agitateur d'idées
Savvy Thinking by Rémy Agitateur d'idées
 
Atelier : comment mettre en place un plan de communication sur les réseaux so...
Atelier : comment mettre en place un plan de communication sur les réseaux so...Atelier : comment mettre en place un plan de communication sur les réseaux so...
Atelier : comment mettre en place un plan de communication sur les réseaux so...
 
L'Impact de la E-reputation dans la recherche de l'emploi au Cameroun Par Jos...
L'Impact de la E-reputation dans la recherche de l'emploi au Cameroun Par Jos...L'Impact de la E-reputation dans la recherche de l'emploi au Cameroun Par Jos...
L'Impact de la E-reputation dans la recherche de l'emploi au Cameroun Par Jos...
 
Le design UX
Le design UXLe design UX
Le design UX
 
Adw #14 : Design thinking
Adw #14 : Design thinkingAdw #14 : Design thinking
Adw #14 : Design thinking
 
Agence Athomedia - Social Media Strategy
Agence Athomedia - Social Media StrategyAgence Athomedia - Social Media Strategy
Agence Athomedia - Social Media Strategy
 
Atelier IE13 Le changement et la compétence c'est maintenant et tout le temps!
Atelier IE13 Le changement et la compétence c'est maintenant et tout le temps!Atelier IE13 Le changement et la compétence c'est maintenant et tout le temps!
Atelier IE13 Le changement et la compétence c'est maintenant et tout le temps!
 
RAPPORT DE STAGE - THURB
RAPPORT DE STAGE - THURBRAPPORT DE STAGE - THURB
RAPPORT DE STAGE - THURB
 
Formation créativité
Formation créativitéFormation créativité
Formation créativité
 
2017 09-le-codeveloppement-pour-accompagner-le-changement
2017 09-le-codeveloppement-pour-accompagner-le-changement2017 09-le-codeveloppement-pour-accompagner-le-changement
2017 09-le-codeveloppement-pour-accompagner-le-changement
 
Gestion de projet professionnel - Session 1
Gestion de projet professionnel - Session 1Gestion de projet professionnel - Session 1
Gestion de projet professionnel - Session 1
 
Deck webinar klap (re)bootcamp j1
Deck webinar klap (re)bootcamp j1Deck webinar klap (re)bootcamp j1
Deck webinar klap (re)bootcamp j1
 
Comment préparer et bien communiquer un atelier à destination des adolescents...
Comment préparer et bien communiquer un atelier à destination des adolescents...Comment préparer et bien communiquer un atelier à destination des adolescents...
Comment préparer et bien communiquer un atelier à destination des adolescents...
 
Coaching web 2.0
Coaching web 2.0Coaching web 2.0
Coaching web 2.0
 
Atelier formation Nexa
Atelier formation Nexa Atelier formation Nexa
Atelier formation Nexa
 
Maison du Design - Présentation des services
Maison du Design - Présentation des servicesMaison du Design - Présentation des services
Maison du Design - Présentation des services
 
Deck webinar klap formation en-ligne padt
Deck webinar klap formation en-ligne padtDeck webinar klap formation en-ligne padt
Deck webinar klap formation en-ligne padt
 

3 suisses : "webdesign / concept"

  • 1. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   «  Webdesign  /  Concept  »   Mai  –  Juin  2014   Forma1on  pro  /  2014  
  • 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. 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. 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. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   Exemple  print  
  • 6. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Forma1on  pro  /  2014   Exemple  web  
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014       …  Alors  ?   Les  leçons  à  5rer  sur  le  travail  de  groupe   ??
  • 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. David  Desrousseaux   david.desrousseaux@gmail.com   @desrousseaux   Mai  –  Juin  2014   Forma1on  pro  /  2014   The  END   Merci  !       david.desrousseaux@gmail.com   @desrousseaux