donner forme : fabriquer un produit
DESCRIPTION
Démarche et outils. Intervention Design et méthodologie @heticTRANSCRIPT
![Page 1: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/1.jpg)
Design. De l’idée au produit.
Donner forme. HETIC #4 - Mars 2014
![Page 2: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/2.jpg)
Concevoir : utiliser une démarche.
![Page 3: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/3.jpg)
Chercher Comprendre
Imaginer Réaliser
Implémenter Optimiser
![Page 4: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/4.jpg)
une démarche organique…
![Page 5: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/5.jpg)
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
![Page 6: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/6.jpg)
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
![Page 7: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/7.jpg)
Ecosystème
utilisateur
CONCEPT/CREATIVITE
Ecosystème
marché
Ecosystème
client
Contenu
Interaction
Interface
Identité
Visuelle
;`^`kXc\À
PROTOTYPE/TEST
Accompagnement
CommunicationEvolution
#1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER #3 PLANIFIER/IMPLEMENTER
Les principes Design
Concept/créativité
Positionnement
produit/serviceValider le produit
Spécifier le produit
Ajuster le produit
![Page 8: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/8.jpg)
Ecosystème
utilisateur
CONCEPT/CREATIVITE
Ecosystème
marché
Ecosystème
client
Contenu
Interaction
Interface
Identité
Visuelle
;`^`kXc\À
PROTOTYPE/TEST
Accompagnement
CommunicationEvolution
#1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER #3 PLANIFIER/IMPLEMENTER
Les principes Design
Concept/créativité
Positionnement
produit/serviceValider le produit
Spécifier le produit
Ajuster le produit
![Page 9: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/9.jpg)
#2 Imaginer Réaliser
![Page 10: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/10.jpg)
contenu
interaction
interface
aspects
visuels
PROTOTYPE/TEST
![Page 11: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/11.jpg)
![Page 12: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/12.jpg)
![Page 13: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/13.jpg)
![Page 15: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/15.jpg)
Structuration du contenu (zoning)
![Page 16: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/16.jpg)
Architecture de l’information
ÉNONCER CATÉGORISER STRUCTURER
![Page 17: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/17.jpg)
contenu
��Ki`�[\�ZXik\��@em\ekX`i\�Zfek\el��`e]fidXk`fe&]feZk`fee\c&Zfdd\iZ`Xc ��]lkli ��EXm`^Xk`fe�~�]XZ\kk\��KXofefd`\��8iZ_`k\Zkli\�[\�cË`e]fidXk`fe��Df[\c�d\ekXc��JZ�eXi`f�[Ëlk`c`jXk`fe��]lkli Vous travaillez sur un site de contenu
spécialisé à destination du public et des collectivités locales. Comment structurez-vous cette information ?
playground !
![Page 18: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/18.jpg)
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éesLes 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é
![Page 19: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/19.jpg)
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
![Page 20: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/20.jpg)
É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
![Page 21: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/21.jpg)
Contenu fonctionnel
![Page 22: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/22.jpg)
![Page 23: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/23.jpg)
interactioninterface
![Page 24: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/24.jpg)
Prototype papier
![Page 25: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/25.jpg)
Workflow/site map
![Page 26: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/26.jpg)
Flow Chart
![Page 27: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/27.jpg)
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)
![Page 28: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/28.jpg)
aspectsvisuels
![Page 29: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/29.jpg)
« 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
![Page 30: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/30.jpg)
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.
![Page 31: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/31.jpg)
![Page 32: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/32.jpg)
![Page 33: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/33.jpg)
![Page 34: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/34.jpg)
La théorie du Gestalt
Loi de la proximité Regrouper les objets les plus proches des uns des autres
![Page 35: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/35.jpg)
![Page 36: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/36.jpg)
![Page 37: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/37.jpg)
![Page 38: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/38.jpg)
![Page 39: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/39.jpg)
La théorie du Gestalt
Loi de similitude Quand la distance ne peux regrouper les objets il faut les distinguer par leur forme
![Page 40: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/40.jpg)
![Page 41: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/41.jpg)
La théorie du Gestalt
Loi de la cloture Notre perception remplit les vides des formes qui ne sont pas fermés
![Page 42: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/42.jpg)
![Page 43: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/43.jpg)
![Page 44: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/44.jpg)
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.
![Page 45: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/45.jpg)
![Page 46: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/46.jpg)
![Page 47: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/47.jpg)
![Page 48: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/48.jpg)
Le nombre d’or
a b
a+b / a = a/b = 1,618…= Phi
![Page 49: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/49.jpg)
Le restangle d’or
![Page 50: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/50.jpg)
593 px 367 px
![Page 51: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/51.jpg)
La règle du 1/3, 2/3
![Page 52: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/52.jpg)
![Page 53: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/53.jpg)
![Page 54: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/54.jpg)
![Page 55: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/55.jpg)
![Page 56: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/56.jpg)
Harmonie des couleurs
![Page 57: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/57.jpg)
![Page 58: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/58.jpg)
![Page 59: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/59.jpg)
![Page 60: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/60.jpg)
![Page 61: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/61.jpg)
Les grids systems
![Page 62: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/62.jpg)
16 colonnes
![Page 63: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/63.jpg)
![Page 64: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/64.jpg)
identité visuelleP A L I C O
QUADRICHROMY CMYK .50 .0 .0 .90EXADECIMAL #16303A
QUADRICHROMY CMYK .79 .40 .34 .18EXADECIMAL #347083
QUADRICHROMY CMYK .39 .8 .13 .0EXADECIMAL #A7CDDB
QUADRICHROMY CMYK .0 .36 .94 .0EXADECIMAL #F8AF0D
QUADRICHROMY CMYK .31 .20 .20 .2EXADECIMAL #192D38
QUADRICHROMY CMYK .11 .6 .7 .0EXADECIMAL #E8EAEB
DIN Round Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
a b cd e fg h i j k l mnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9
DIN Round Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
a b cd e fg h i j k l mn o p q rst u v w x y z
0 1 2 3 4 5 6 7 8 9
P A L I C O
QUADRICHROMY CMYK .50 .0 .0 .90EXADECIMAL #16303A
QUADRICHROMY CMYK .79 .40 .34 .18EXADECIMAL #347083
QUADRICHROMY CMYK .39 .8 .13 .0EXADECIMAL #A7CDDB
QUADRICHROMY CMYK .0 .36 .94 .0EXADECIMAL #F8AF0D
QUADRICHROMY CMYK .31 .20 .20 .2EXADECIMAL #192D38
QUADRICHROMY CMYK .11 .6 .7 .0EXADECIMAL #E8EAEB
DIN Round Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
a b cd e fg h i j k l mnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9
DIN Round Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
a b cd e fg h i j k l mn o p q rst u v w x y z
0 1 2 3 4 5 6 7 8 9
![Page 65: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/65.jpg)
typographie
![Page 66: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/66.jpg)
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. !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.
!!!
![Page 67: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/67.jpg)
La typographie a ses propres règles d’usages.
![Page 68: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/68.jpg)
Le petit manuel de composition typographique
![Page 69: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/69.jpg)
iconographie
![Page 71: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/71.jpg)
maquettes graphiques
![Page 72: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/72.jpg)
mise en scène de contenu
![Page 73: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/73.jpg)
Implémenter / Optimiser
![Page 74: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/74.jpg)
accompagnement
��=fidXk`fe��:_Xik\�`ek\iXZk`m\�\k�m`jl\cc\��Jg�Z`]`ZXk`fej�=ifek$\e[��:_Xik\�Zfek\el�&kfe�[\�Zfddle`ZXk`fe��:_Xik\�d\iZ_Xe[`j`e^
![Page 75: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/75.jpg)
![Page 76: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/76.jpg)
![Page 77: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/77.jpg)
![Page 78: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/78.jpg)
événements
��:i�Xk`fe�[\�YXee`�i\��<m�e\d\ekj�jfZ`Xlo��<dX`c��:ID&8e`dXk`fe ��=i�hl\eZ\�[\�Zi�Xk`fe�[\�Zfek\el��I�j\Xlo�jfZ`Xlo
![Page 79: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/79.jpg)
![Page 80: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/80.jpg)
![Page 81: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/81.jpg)
évolution��<mfclk`fe�]feZk`fee\cc\��Fgk`d`jXk`fe��K\jk�Zfek`el\�8&9#�DMK��<mfclk`fe�k\Z_efcf^`hl\
![Page 82: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/82.jpg)
évolution technologique rajouter plein de devices
![Page 83: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/83.jpg)
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
![Page 84: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/84.jpg)
Test A Test B
![Page 85: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/85.jpg)
!• 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”
![Page 86: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/86.jpg)
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.
![Page 87: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/87.jpg)
Une méthodologie design,
c’est un coût...
![Page 88: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/88.jpg)
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éractiveEdition 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'artsLe rôle du chef de projet coordination globale
Participation, suivi et encadrement des différentes phasesRédaction des spécifications fonctionnellesRecettage des livrables html
les livrables du projet Cadrage stratégiqueIdentité & Brand BookWireframe des écrans listésSpécifications fonctionnellesMaquettes des écrans listés et comportements au format PSDTemplates des écrans listés développés en xhtml / CSS / JSCharte graphique on-line
![Page 89: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/89.jpg)
contenu
��Ki`�[\�ZXik\��@em\ekX`i\�Zfek\el��`e]fidXk`fe&]feZk`fee\c&Zfdd\iZ`Xc ��]lkli ��EXm`^Xk`fe�~�]XZ\kk\��KXofefd`\��8iZ_`k\Zkli\�[\�cË`e]fidXk`fe��Df[\c�d\ekXc��JZ�eXi`f�[Ëlk`c`jXk`fe��]lkli
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 !
![Page 90: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/90.jpg)
![Page 91: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/91.jpg)
![Page 92: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/92.jpg)
Application Par Ici la sortie
![Page 93: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/93.jpg)
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
![Page 94: Donner forme : fabriquer un produit](https://reader033.vdocuments.pub/reader033/viewer/2022052901/55652b17d8b42a767f8b4d48/html5/thumbnails/94.jpg)
merci.