Donner forme : fabriquer un produit.

697 views

Published on

Démarche et outils.
Intervention Design et méthodologie @hetic

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
697
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Donner forme : fabriquer un produit.

  1. 1. Design. De l’idée au produit. Donner forme. HETIC #4 - Mars 2014
  2. 2. Concevoir : utiliser une démarche.
  3. 3. Chercher Comprendre Imaginer Réaliser Implémenter Optimiser
  4. 4. une démarche organique…
  5. 5. utilisateurs/ usagers CONCEPT/CREATIVITE environnement marque entreprise contenu interaction interface aspects visuels PROTOTYPE/TEST AMELIORATION/OPTIMISATION accompagnement événementévolution #1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER #3 IMPLEMENTER/OPTIMISER
  6. 6. utilisateurs/ usagers CONCEPT/CREATIVITE environnement marque entreprise contenu interaction interface aspects visuels PROTOTYPE/TEST AMELIORATION/OPTIMISATION accompagnement événementévolution #1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER #3 IMPLEMENTER/OPTIMISER
  7. 7. Ecosystème utilisateur CONCEPT/CREATIVITE Ecosystème marché Ecosystème client Contenu Interaction Interface Identité Visuelle PROTOTYPE/TEST #1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER Les principes Design Concept/créativité Positionnement produit/service Valide Spécifie Ajuste
  8. 8. Contenu Interaction Interface Identité Visuelle PROTOTYPE/TEST Accompagnement CommunicationEvolution #2 IMAGINER/REALISER #3 PLANIFIER/IMPLEMENTER esign vité ent ce Valider le produit Spécifier le produit Ajuster le produit
  9. 9. #2 Imaginer Réaliser
  10. 10. contenu interaction interface aspects visuels PROTOTYPE/TEST
  11. 11. Taxonomie / Catégoriser http://www.headict.com/
  12. 12. Structuration du contenu (zoning)
  13. 13. Architecture de l’information ÉNONCER CATÉGORISER STRUCTURER
  14. 14. contenu Vous travaillez sur un site de contenu spécialisé à destination du public et des collectivités locales. Comment structurez-vous cette information ? playground !
  15. 15. S’INFORMER ÉCHANGER TROUVER UN EMPLOI L'actualité Droit des collectivités Emploi Carrière Accueil Emploi Réseaux professionnels Espace candidat Forums L'essentiel des 7 derniers jours Europe Régions France Dossiers d'actu Documents utiles Opinions Visualisation de donnéesConcours Rémunération Statut Dossiers emploi Guide des avantages sociaux Veille juridique Textes officiels Jurisprudence Réponses ministérielles Dossiers juridiques Fiches de droit pratique Actu juridique Espace candidat Inscription Inscription Mon CV Mes alertes e-mail & RSS Mes candidatures Mes offres mémorisées Les derniers messages Concours Statut Entraide Rechercher une offre Toutes les offres Accès candidat Accès recruteur Les recruteurs Ressources humaines Finances Technique Informatique Informatique Prévention-sécurité
  16. 16. S’INFORMER L'actualité L'essentiel des 7 derniers jours France Régions Europe Dossiers d'actu Documents utiles Opinions Visualisation de données Droit des collectivités Veille juridique Textes officiels Jurisprudence Réponses ministérielles Dossiers juridiques Fiches de droit pratique Actu juridique Emploi Carrière Concours Rémunération Statut Dossiers emploi Guide des avantages sociaux
  17. 17. ÉCHANGER Forums Les derniers messages Concours Statut Entraide Réseaux professionnels Ressources humaines Finances Technique Informatique Prévention-sécurité TROUVER UN EMPLOI Accueil Emploi Rechercher une offre Toutes les offres Accès candidat Accès recruteur Les recruteurs Espace candidat Inscription Mon CV Mes alertes e-mail & RSS Mes candidatures Mes offres mémorisées
  18. 18. Contenu fonctionnel
  19. 19. interaction interface
  20. 20. Prototype papier
  21. 21. Workflow/site map
  22. 22. Flow Chart
  23. 23. Tests 3 phases de test peuvent être définie pendant la phase de conception. #1 - un prototype “basse définition” (à l’état de croquis ou gabarits fonctionnels, pour illustrer les enchaînement d’écran) ! #2 - un prototype “haute définition” (avec des contenus réaliste, visuels, textuels...) ! #3 - une version Beta avant le lancement officiel (futur produit, qui permet de crééer une communauté autour du lancement)
  24. 24. aspects visuels
  25. 25. « La qualité esthétique signifie parler de nuances, quelquefois de fractions d’à peine un millimètre, de graduations très subtiles, ou de l’harmonie et de l’équilibre de plusieurs éléments visuels fonctionnant ensembles. » ! Dieter Rams
  26. 26. La théorie du Gestalt La psychologie de la forme ou gestaltisme (de l'allemand, Gestaltpsychologie) est une théorie psychologique, philosophique et biologique, selon laquelle les processus de la perception et de la représentation mentale traitent spontanément les phénomènes comme des ensembles structurés (les formes) et non comme une simple addition ou juxtaposition d'éléments.
  27. 27. La théorie du Gestalt Loi de la proximité Regrouper les objets les plus proches des uns des autres
  28. 28. La théorie du Gestalt Loi de similitude Quand la distance ne peux regrouper les objets il faut les distinguer par leur forme
  29. 29. La théorie du Gestalt Loi de la cloture Notre perception remplit les vides des formes qui ne sont pas fermés
  30. 30. La théorie du Gestalt Loi de la symétrie Notre esprit perçoit les objets comme étant symétriques et se construisant autour d’un point central. C’est à la fois plus facile et plus rassurant de pouvoir séparer visuellement plusieurs objets en un nombre égal d’éléments symétriques. Lorsque nous voyons deux éléments symétriques qui n’ont pas de lien entre eux, nous allons naturellement les associer pour composer une forme cohérente.
  31. 31. Le nombre d’or a b a+b / a = a/b = 1,618…= Phi
  32. 32. Le restangle d’or
  33. 33. 593 px 367 px
  34. 34. La règle du 1/3, 2/3
  35. 35. Harmonie des couleurs
  36. 36. Les grids systems
  37. 37. 16 colonnes
  38. 38. identité visuelle P A L I C O QUADRICHROMY CMYK .50 .0 .0 .90 EXADECIMAL #16303A QUADRICHROMY CMYK .79 .40 .34 .18 EXADECIMAL #347083 QUADRICHROMY CMYK .39 .8 .13 .0 EXADECIMAL #A7CDDB QUADRICHROMY CMYK .0 .36 .94 .0 EXADECIMAL #F8AF0D QUADRICHROMY CMYK .31 .20 .20 .2 EXADECIMAL #192D38 QUADRICHROMY CMYK .11 .6 .7 .0 EXADECIMAL #E8EAEB DIN Round Regular ABC DEFGH IJKLMNO PQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0 1 2 3 4 5 6 7 8 9 DIN Round Medium ABC DEFGH IJKLMNO PQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0 1 2 3 4 5 6 7 8 9 QUADRICHROMY CMYK .50 .0 .0 .90 EXADECIMAL #16303A QUADRICHROMY CMYK .79 .40 .34 .18 EXADECIMAL #347083 QUADRICHROMY CMYK .39 .8 .13 .0 EXADECIMAL #A7CDDB DI A D IJ PQ ab no 0 1
  39. 39. typographie
  40. 40. TITRA ROSA ROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! TITRA ROSA ROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! ! ! TITRA ROSA ROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! TITRAROSAROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. ! Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! !
  41. 41. La typographie a ses propres règles d’usages.
  42. 42. Le petit manuel de composition typographique
  43. 43. iconographie
  44. 44. http://www.responsiveicons.co.uk/
  45. 45. maquettes graphiques
  46. 46. mise en scène de contenu
  47. 47. Implémenter / Optimiser
  48. 48. accompagnement
  49. 49. événements
  50. 50. évolution
  51. 51. évolution technologique rajouter plein de devices
  52. 52. Official Vancouver 2010 Olympic par Get Elastic (Elastic Path) • Trop de bannières qui crée un désordre pour la lisibilité ! • La navigation n’est pas visible en dessous du fold et ne ressort pas assez ! • La taille des photos produit est trop petite et ne donne aucune indication sur les coloris optimisation
  53. 53. Test A Test B
  54. 54. ! • Réduire le nombre de zones commerciales pour accroître leur lisibilité ! • Présenter de façon plus visible et claire la navigation de second niveau ! • Donner des indications sur les alternatives de couleurs des produits ! • Augmenter la taille des photos dans la zone “Nouveautés”, “Les plus populaires”
  55. 55. Sur 2053 transactions réalisées pendant 21 jours le test n’est pas significatif mais nous pouvons en sortir les points suivants qui permettent de dire que la version A est la meilleure : ! ! • La version A convertit à 3,14% de plus que la version originale ! • Réduction de 12,24% du taux de rebond ! • Une augmentation du taux de transformation global de 0,59% ! • La valeur moyenne des commandes est de 5,16% plus importante.
  56. 56. Une méthodologie design, c’est un coût...
  57. 57. Directeur Design Designer UX Développer Front End Concepteur / Rédacteur Consultant Marketing Chef de projet TOTAL STEP 1 : Immersion & expérience shopping Objectifs ? Où ? Kick Off _Exprimer le pitch et les objectifs du projet _Rencontrer l’ensemble des personnes impliquées et préciser les rôles de chacun _ Apporter de la visibilité sur le déroulement du projet Edition atlas 0,5 0,5 0,5 0,5 0 € Interview des personnes impliqués dans le projet (produit, marketing, e-commerce…) _ Découvrir l’entreprise et comprendre ses spécificités _ Collection l'information stratégique (stratégie, positionnement, offre, organisation...) _ Collecter des informations métiers (ex produits, logistique, IT relation client, acquisition...) Edition atlas 1 3 1 2 0 € Benchmark Web / Mobile _commandes tests _pige web & mobile 0,5 4 1 0 € Définition de l'expérience shopping _définition de l’expérience shopping et des leviers de différenciation _Design principes _User research Edition atlas 4 10 2 3 0 € Architecture de l'information & merchandising _Définition précise du référentielle et des spécificités produits _Organisation des produits / contenus / fonctionnalités / services _Concept e-merchandising _Parcours de navigation Edition atlas 3 3 7 3 0 € Scope _Cadrer la v1 du projet _Apporter de la visibilité sur l’évolution du site et assurer son évolutivité _Anticiper les besoins de contenu et de développements techniques Edition atlas 0,5 2 2 0 € TOTAL Cadrage 0,00 € Directeur Design Designer UX Développer Front End Concepteur / Rédacteur Consultant Marketing Chef de projet TOTAL 1 100 € 750 € 750 € 650 € 700 € 750 € 750 € STEP 2 : Design / Intégration / Spec Quoi ? Où ? Identité _Workshop Plateforme de marque _Vocabulaire de forme illustrant les valeurs de marque _ Logo (3 propositions / 2 A/R) & Nom _ Charte identitaire / Brand book _ Papeterie non incluse Edition Atlas / Altima 4 15 10 2 0 € Descente produit & principe de navigation _ HomePage _ Page catégorie _ Fiche produit Edition Atlas / Altima 0,5 2,75 3,75 4,75 4,65 0 € Quizz & inscription _Quizz _Process d'inscription Edition Atlas / Altima 1 5,5 3,5 5,5 3,1 0 € Check Out _ Panier _ Process de commande (livraison / paiement) Edition Atlas / Altima 0,5 5,5 3,5 5,5 3 0 € Compte Client _ Mon compte _ Mes commandes _ Mes adresses _ Ma personnalisation Edition Atlas / Altima 0 4 3 4 2,2 0 € Formulaire de contat _Page Contact Edition Atlas / Altima 0 0,75 0,25 0,75 0,35 0 € Template style _templace reco style Edition Atlas / Altima 0,5 2 1,5 2 1,2 0 € Template Mail _Template mail confirmation de commande _Template Welcome pack (inscription à la newsletter / création de compte) _ Template mail Newsletter nouveau set Edition Atlas / Altima 0 2,25 0,75 2,25 1,05 0 € Le concept _ Template présentation du concept Edition Atlas / Altima 0,5 2,75 1,75 2,75 1,55 0 € Press _ Template vu dans la presse Edition Atlas / Altima 0 1 0,75 1 0,55 0 € Egérie _ Présentation des égéries Edition Atlas / Altima 0 1 0,75 1 0,55 0 € Testimoniaux _Testimoniaux clients Edition Atlas / Altima 0 1 0,75 1 0,55 0 € Templates pages institutionnelles _ FAQ _Mentions légales _Job _CGV _Services _A propos Edition Atlas / Altima 0 4,5 1,5 4,5 2,1 0 € Page Facebook _Custom e la page facebook Edition Atlas / Altima 0 1,75 1 1,75 0,9 0 € Charte graphique on-line _ Charte graphique Web Intéractive Edition Atlas / Altima 2 8 4 2 0 € TOTAL Cadrage 0,00 € TOTAL REFONTE 0,00 € Budget hors taxe & hors achats d'artsBudget hors taxe & hors achats d'arts Le rôle du chef de projet coordination globale Participation, suivi et encadrement des différentes phases Rédaction des spécifications fonctionnelles Recettage des livrables html
  58. 58. contenu Réinventer Le Temps. Au travers d’un nouvel usage simple, d’une nouvelle lecture du temps, ou simplement une idée qui permet de gagner du temps, illustrer un concept de manière structurée et argumentée. playground !
  59. 59. Application Par Ici la sortie
  60. 60. Séquençage du film Matrix, chaque image est associé à une couleur du film pour au final en créer un barcode - moviebarcode.tumblr.com
  61. 61. merci.

×