Donner forme : fabriquer un produit.
-
Upload
thomas-nicot -
Category
Design
-
view
233 -
download
3
description
Transcript of Donner forme : fabriquer un produit.
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
PROTOTYPE/TEST AMELIORATION/OPTIMISATION
accompagnement
événementévolution
#1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER #3 IMPLEMENTER/OPTIMISER
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
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
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
#2 Imaginer Réaliser
contenu
interaction
interface
aspects
visuels
PROTOTYPE/TEST
Structuration du contenu (zoning)
Architecture de l’information
ÉNONCER CATÉGORISER STRUCTURER
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 !
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é
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
É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
Contenu fonctionnel
interactioninterface
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 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)
aspectsvisuels
« 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
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.
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 forme
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 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.
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é 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
typographie
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.
!!!
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
��=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^
é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
évolution��<mfclk`fe�]feZk`fee\cc\��Fgk`d`jXk`fe��K\jk�Zfek`el\�8&9#�DMK��<mfclk`fe�k\Z_efcf^`hl\
é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é !• 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
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 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”
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.
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 : 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
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 !
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.tumblr.com
merci.