Designers et developers a love story

339 vues

Publié le

ou comment expliquer simplement les étapes d'un projet web

Présentation réalisée pour B+G - http://bgcom.ch

Publié dans : Business
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
339
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Designers et developers a love story

  1. 1. Process Web, pourquoi faire ?Les métiers du webÉtat des lieuxDesign d’interface, WireframeLe travail de chacunDesign pour le Web - interface ?TechniqueProcessConclusion
  2. 2. a Love story
  3. 3. états des lieux
  4. 4. états des lieux
  5. 5. états des lieux
  6. 6. états des lieux
  7. 7. états des lieux
  8. 8. Account
  9. 9. Developpeur #php and friends Account Developpeurwireframe, hiérarchie de l’info, cahier des charges
  10. 10. Developpeur Directeur artistique #php and friends Graphistes dream team Account Developpeur Directeur artistique Graphistes Developpeurwireframe, hiérarchie de l’info, cahier des charges création, design, magic touch code
  11. 11. Le design d’interface est un processus decréation articulant le fond, la forme et lafonction dans un rapport étroit à la réalitéinformatique et technique de l’objet.
  12. 12. il existe donc de nombreuxcodes qui participent à lacompréhension d’uneinterface.leur compréhension dépendentde la culture générale et de lamémoire collective de chaquerécepteur.
  13. 13. System 1.1. - 1984
  14. 14. System 1.1. - 1984
  15. 15. System 1.1. - 1984
  16. 16. System 7.0 - 1991
  17. 17. System 1.1. - 1984
  18. 18. System 10.5.7. - 2009
  19. 19. Photoshop 1.0.7 - 1990
  20. 20. Apple.com - 1997
  21. 21. Apple.com - 1997
  22. 22. Apple.com - 1997
  23. 23. Apple.com - 1997
  24. 24. microsoft.com - 1997
  25. 25. microsoft.com - 1997
  26. 26. microsoft.com - 1997
  27. 27. microsoft.com - 1997
  28. 28. microsoft.com - 1997
  29. 29. La plupart des gens font lerreur de penserque le design cest lapparence. Ce nest pascomme ça que nous convenons le design. Cenest pas simplement lapparence etlimpression que cela fait. Le design, cestcomment ça marche. Steve Jobs, Times, 2003
  30. 30. Little big details
  31. 31. design d’un champ de recherche
  32. 32. ceci n’est pas un champ de recherche !!!
  33. 33. il est possible de naviguersimplement.
  34. 34. Seth Godin - Gel 2006
  35. 35. Technique
  36. 36. Langage & Architecture
  37. 37. Langage & Architecture Développement = Code = Langage
  38. 38. Langage & Architecture Développement = Code = Langage PHP, HTML, CSS, SQL....
  39. 39. Langage & Architecture Développement = Code = Langage PHP, HTML, CSS, SQL....
  40. 40. Maquettes, Slice & Fonts
  41. 41. Maquettes, Slice & FontsMaquettes
  42. 42. Maquettes, Slice & FontsMaquettes• PSD , 72 dpi, RVB
  43. 43. Maquettes, Slice & FontsMaquettes• PSD , 72 dpi, RVB• Résolutions standards > 1000px (1150px)
  44. 44. Maquettes, Slice & FontsMaquettes• PSD , 72 dpi, RVB• Résolutions standards > 1000px (1150px)• Calques ET dossiers
  45. 45. Maquettes, Slice & FontsMaquettes• PSD , 72 dpi, RVB• Résolutions standards > 1000px (1150px)• Calques ET dossiersDécoupage
  46. 46. Maquettes, Slice & FontsMaquettes• PSD , 72 dpi, RVB• Résolutions standards > 1000px (1150px)• Calques ET dossiersDécoupage• Le découpage (slicing) n’est pas optionnel
  47. 47. Maquettes, Slice & FontsMaquettes• PSD , 72 dpi, RVB• Résolutions standards > 1000px (1150px)• Calques ET dossiersDécoupage• Le découpage (slicing) n’est pas optionnel• Export pour le web > PNG, JPG & GIF
  48. 48. Maquettes, Slice & FontsMaquettes• PSD , 72 dpi, RVB• Résolutions standards > 1000px (1150px)• Calques ET dossiersDécoupage• Le découpage (slicing) n’est pas optionnel• Export pour le web > PNG, JPG & GIFFonts
  49. 49. Maquettes, Slice & FontsMaquettes• PSD , 72 dpi, RVB• Résolutions standards > 1000px (1150px)• Calques ET dossiersDécoupage• Le découpage (slicing) n’est pas optionnel• Export pour le web > PNG, JPG & GIFFonts• Fonts > droits d’utilisation
  50. 50. Maquettes, Slice & FontsMaquettes• PSD , 72 dpi, RVB• Résolutions standards > 1000px (1150px)• Calques ET dossiersDécoupage• Le découpage (slicing) n’est pas optionnel• Export pour le web > PNG, JPG & GIFFonts• Fonts > droits d’utilisation• Favoriser les fonts @font-face > Google Fonts
  51. 51. Référencement
  52. 52. RéférencementS.E.O = Trafique = $ ( = R.O.I. )
  53. 53. RéférencementS.E.O = Trafique = $ ( = R.O.I. )
  54. 54. RéférencementS.E.O = Trafique = $ ( = R.O.I. ) Besoin
  55. 55. Référencement S.E.O = Trafique = $ ( = R.O.I. ) BesoinAnalyse + Structure + Contenu + Huile de coude (taches récurantes)
  56. 56. PROCESS WEB
  57. 57. Phases projet web
  58. 58. Phases projet web๏ Phase préparatoire
  59. 59. Phases projet web๏ Phase préparatoire๏ Phase de conception
  60. 60. Phases projet web๏ Phase préparatoire๏ Phase de conception๏ Phase de développement
  61. 61. Phases projet web๏ Phase préparatoire๏ Phase de conception๏ Phase de développement๏ Phase de finalisation
  62. 62. Préparation
  63. 63. PréparationBriefing clientfiche briefingweb_briefing.doc
  64. 64. PréparationBriefing clientfiche briefingweb_briefing.docLancement agencedossier web-designdossier web-développementweb_dossiers.xls
  65. 65. PréparationBriefing clientfiche briefingweb_briefing.docLancement agencedossier web-designdossier web-développementweb_dossiers.xls-> CAHIER DES CHARGESproblématique client / réponse techniquearborescence & wireframes / planning
  66. 66. Étapes d’un projet WebCollecte des besoins et desinformations auprès du client.hiérarchisation des informations etréflexion usabilité.Mise en place d’un sitemap.Création des wireframes pour lespages principales.Design des interfaces.Validation client (contenu+design).Développement.
  67. 67. les changements en interne:
  68. 68. les changements en interne:plus de rapidité
  69. 69. les changements en interne:plus de rapiditéplus de rentabilité
  70. 70. les changements en interne:plus de rapiditéplus de rentabilitéamélioration de la qualité des productions
  71. 71. les changements en interne:plus de rapiditéplus de rentabilitéamélioration de la qualité des productionsl’amour retrouvé entre dev. et designer !

×