Design.
De l’idée au produit.
Donner forme.
HETIC #4 - Mars 2014
Concevoir :
utiliser une
démarche.
Chercher
Comprendre
Imaginer
Réaliser
Implémenter
Optimiser
une démarche
organique…
utilisateurs/
usagers
CONCEPT/CREATIVITE
environnement
marque
entreprise
contenu
interaction
interface
aspects
visuels
PRO...
utilisateurs/
usagers
CONCEPT/CREATIVITE
environnement
marque
entreprise
contenu
interaction
interface
aspects
visuels
PRO...
Ecosystème
utilisateur
CONCEPT/CREATIVITE
Ecosystème
marché
Ecosystème
client
Contenu
Interaction
Interface
Identité
Visue...
Contenu
Interaction
Interface
Identité
Visuelle
PROTOTYPE/TEST
Accompagnement
CommunicationEvolution
#2 IMAGINER/REALISER ...
#2
Imaginer
Réaliser
contenu
interaction
interface
aspects
visuels
PROTOTYPE/TEST
Taxonomie / Catégoriser
http://www.headict.com/
Structuration du contenu
(zoning)
Architecture de l’information
ÉNONCER CATÉGORISER STRUCTURER
contenu
Vous travaillez sur un site de contenu
spécialisé à destination du public et des
collectivités locales.
Comment st...
S’INFORMER ÉCHANGER TROUVER UN EMPLOI
L'actualité Droit des collectivités
Emploi Carrière
Accueil Emploi
Réseaux professio...
S’INFORMER
L'actualité
L'essentiel des 7 derniers jours
France
Régions
Europe
Dossiers d'actu
Documents utiles
Opinions
Vi...
ÉCHANGER
Forums
Les derniers messages
Concours
Statut
Entraide
Réseaux professionnels
Ressources humaines
Finances
Techniq...
Contenu fonctionnel
interaction
interface
Prototype papier
Workflow/site map
Flow Chart
Tests
3 phases de test peuvent être définie pendant la phase de conception.
#1 - un prototype “basse définition”
(à l’état...
aspects
visuels
« La qualité esthétique
signifie parler de nuances,
quelquefois de fractions d’à
peine un millimètre,
de graduations très ...
La théorie du Gestalt
La psychologie de la forme ou gestaltisme (de
l'allemand, Gestaltpsychologie) est une théorie
psycho...
La théorie du Gestalt
Loi de la proximité
Regrouper les objets les plus proches
des uns des autres
La théorie du Gestalt
Loi de similitude
Quand la distance ne peux regrouper les objets
il faut les distinguer par leur for...
La théorie du Gestalt
Loi de la cloture
Notre perception remplit les vides des formes
qui ne sont pas fermés
La théorie du Gestalt
Loi de la symétrie
Notre esprit perçoit les objets comme étant symétriques et se
construisant autour...
Le nombre d’or
a b
a+b / a = a/b = 1,618…= Phi
Le restangle d’or
593 px 367 px
La règle du 1/3, 2/3
Harmonie des couleurs
Les grids systems
16 colonnes
identité visuelle
P A L I C O
QUADRICHROMY CMYK .50 .0 .0 .90
EXADECIMAL #16303A
QUADRICHROMY CMYK .79 .40 .34 .18
EXADECI...
typographie
TITRA ROSA ROSÆ
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem
Ipsum has been the indust...
La typographie a ses
propres règles d’usages.
Le petit manuel de composition typographique
iconographie
http://www.responsiveicons.co.uk/
maquettes
graphiques
mise en scène de contenu
Implémenter / Optimiser
accompagnement
événements
évolution
évolution technologique rajouter plein de devices
Official Vancouver 2010 Olympic
par Get Elastic (Elastic Path)
• Trop de bannières qui crée un désordre
pour la lisibilité...
Test A Test B
!
• Réduire le nombre de zones commerciales
pour accroître leur lisibilité
!
• Présenter de façon plus visible et claire l...
Sur 2053 transactions réalisées pendant 21 jours le test n’est pas significatif mais
nous pouvons en sortir les points sui...
Une méthodologie
design,
c’est un coût...
Directeur Design Designer UX Développer Front End Concepteur / Rédacteur Consultant Marketing Chef de projet TOTAL
STEP 1 ...
contenu
Réinventer Le Temps.
Au travers d’un nouvel usage simple, d’une
nouvelle lecture du temps, ou simplement une
idée ...
Application Par Ici la sortie
Séquençage du film Matrix, chaque image est associé à une couleur du film pour au final en créer un barcode -
moviebarcode.tu...
merci.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
Prochain SlideShare
Chargement dans…5
×

Donner forme : fabriquer un produit.

674 vues

Publié le

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

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
674
Sur SlideShare
0
Issues des intégrations
0
Intégrations
15
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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.

×