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

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

Taxonomie / Catégoriser

http://www.headict.com/

http://www.headict.com/

Structuration du contenu (zoning)

Architecture de l’information

ÉNONCER CATÉGORISER STRUCTURER

contenu

��Ki`�[\�ZXik\��@em\ekXì\�Zfek\el��è]fidXk`fe&]feZk`fee\c&Zfdd\iZ`Xc ��]lkli ��EXm`^Xk`fe�~�]XZ\kk\��KXofefd`\��8iZ_`k\Zkli\�[\�cËè]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.


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

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


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


a b cd e fg h i j k l mnopqrstuvwxyz

0 1 2 3 4 5 6 7 8 9

DIN Round Medium


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/

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


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


0,5 2,75 3,75 4,75 4,65 0 €

Quizz & inscription _Quizz_Process d'inscription


1 5,5 3,5 5,5 3,1 0 €

Check Out _ Panier_ Process de commande (livraison / paiement)


0,5 5,5 3,5 5,5 3 0 €

Compte Client_ Mon compte_ Mes commandes_ Mes adresses_ Ma personnalisation


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


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


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ì\�Zfek\el��è]fidXk`fe&]feZk`fee\c&Zfdd\iZ`Xc ��]lkli ��EXm`^Xk`fe�~�]XZ\kk\��KXofefd`\��8iZ_`k\Zkli\�[\�cËè]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.