Télécharger en tant que PDF, PPTX
Téléchargé parツ Thomas Nicot
Donner forme : fabriquer un produit.
Le document traite du processus de design, depuis l'idée jusqu'au produit final, en insistant sur l'importance de l'analyse, de l'imagination, de la réalisation et de l'optimisation. Il aborde également les aspects visuels, l'interaction et l'identité visuelle à travers des méthodes et des outils tels que des prototypes et des tests à différentes étapes. Des principes de la théorie du gestalt et des éléments de typographie et de charte graphique sont également explorés pour améliorer l'expérience utilisateur.
Donner forme : fabriquer un produit.
- 1. Design. De l’idée auproduit. Donner forme. HETIC #4 - Mars 2014
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. Ecosystème utilisateur CONCEPT/CREATIVITE Ecosystème marché Ecosystème client Contenu Interaction Interface Identité Visuelle PROTOTYPE/TEST #1 ANALYSER/COMPRENDRE #2IMAGINER/REALISER Les principes Design Concept/créativité Positionnement produit/service Valide Spécifie Ajuste
- 8. Contenu Interaction Interface Identité Visuelle PROTOTYPE/TEST Accompagnement CommunicationEvolution #2 IMAGINER/REALISER #3PLANIFIER/IMPLEMENTER esign vité ent ce Valider le produit Spécifier le produit Ajuster le produit
- 9.
- 10.
- 14.
- 15.
- 16. Architecture de l’information ÉNONCERCATÉGORISER STRUCTURER
- 17. contenu Vous travaillez surun site de contenu spécialisé à destination du public et des collectivités locales. Comment structurez-vous cette information ? playground !
- 18. S’INFORMER ÉCHANGER TROUVERUN 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é
- 19. S’INFORMER L'actualité L'essentiel des 7derniers 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
- 20. ÉCHANGER Forums Les derniers messages Concours Statut Entraide Réseauxprofessionnels 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
- 21.
- 23.
- 24.
- 25.
- 26.
- 27. Tests 3 phases detest 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)
- 28.
- 29. « 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
- 30. La théorie duGestalt 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.
- 34. La théorie duGestalt Loi de la proximité Regrouper les objets les plus proches des uns des autres
- 39. La théorie duGestalt Loi de similitude Quand la distance ne peux regrouper les objets il faut les distinguer par leur forme
- 41. La théorie duGestalt Loi de la cloture Notre perception remplit les vides des formes qui ne sont pas fermés
- 44. La théorie duGestalt 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.
- 48. Le nombre d’or ab a+b / a = a/b = 1,618…= Phi
- 49.
- 50.
- 51. La règle du1/3, 2/3
- 56.
- 61.
- 62.
- 64. identité visuelle P AL 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
- 65.
- 66. TITRA ROSA ROSÆ LoremIpsum 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. ! !
- 67. La typographie ases propres règles d’usages.
- 68. Le petit manuelde composition typographique
- 69.
- 70.
- 71.
- 72. mise en scènede contenu
- 73.
- 74.
- 78.
- 81.
- 82. évolution technologique rajouterplein de devices
- 83. Official Vancouver 2010Olympic 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
- 84.
- 85. ! • Réduire lenombre 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”
- 86. Sur 2053 transactionsré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.
- 87.
- 88. Directeur Design DesignerUX 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
- 89. contenu Réinventer Le Temps. Autravers 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 !
- 92. Application Par Icila sortie
- 93. Séquençage du filmMatrix, chaque image est associé à une couleur du film pour au final en créer un barcode - moviebarcode.tumblr.com
- 94.