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

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
PROTOTYPE/TEST
#1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER
Les principes Design
Concept/créativité
Positionnement
produit/service
Valide
Spécifie
Ajuste

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

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 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é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é

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

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)

« 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.

Loi de la proximité
Regrouper les objets les plus proches
des uns des autres

Loi de similitude
Quand la distance ne peux regrouper les objets
il faut les distinguer par leur forme

Loi de la cloture
Notre perception remplit les vides des formes
qui ne sont pas fermés

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

identité visuelle
P A L I C O
QUADRICHROMY CMYK .50 .0 .0 .90
EXADECIMAL #16303A
EXADECIMAL #347083
EXADECIMAL #A7CDDB
EXADECIMAL #F8AF0D
EXADECIMAL #192D38
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
EXADECIMAL #16303A
EXADECIMAL #347083
EXADECIMAL #A7CDDB
DI
A
D
IJ
PQ
ab
no
0 1

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
!
!
!
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
!
!

La typographie a ses
propres règles d’usages.

Le petit manuel de composition typographique

http://www.responsiveicons.co.uk/

é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

!
• 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
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
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

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 !

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

Donner forme : fabriquer un produit.

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Donner forme : fabriquer un produit.

Similar a Donner forme : fabriquer un produit. (20)

Donner forme : fabriquer un produit.