Process Web, pourquoi faire ?Les métiers du webÉtat des lieuxDesign d’interface, WireframeLe travail de chacunDesign pour ...
a Love story
états des lieux
états des lieux
états des lieux
états des lieux
états des lieux
Account
Developpeur                 #php and friends                                                      Account                 ...
Developpeur                                       Directeur artistique                 #php and friends                   ...
Le design d’interface est un processus decréation articulant le fond, la forme et lafonction dans un rapport étroit à la r...
il existe donc de nombreuxcodes qui participent à lacompréhension d’uneinterface.leur compréhension dépendentde la culture...
System 1.1. - 1984
System 1.1. - 1984
System 1.1. - 1984
System 7.0 - 1991
System 1.1. - 1984
System 10.5.7. - 2009
Photoshop 1.0.7 - 1990
Apple.com - 1997
Apple.com - 1997
Apple.com - 1997
Apple.com - 1997
microsoft.com - 1997
microsoft.com - 1997
microsoft.com - 1997
microsoft.com - 1997
microsoft.com - 1997
La plupart des gens font lerreur de penserque le design cest lapparence. Ce nest pascomme ça que nous convenons le design....
Little big details
design d’un champ de recherche
ceci n’est pas un champ de recherche !!!
il est possible de naviguersimplement.
Seth Godin - Gel 2006
Technique
Langage & Architecture
Langage & Architecture Développement = Code = Langage
Langage & Architecture Développement = Code = Langage       PHP, HTML, CSS, SQL....
Langage & Architecture Développement = Code = Langage       PHP, HTML, CSS, SQL....
Maquettes, Slice & Fonts
Maquettes, Slice & FontsMaquettes
Maquettes, Slice & FontsMaquettes•           PSD , 72 dpi, RVB
Maquettes, Slice & FontsMaquettes•               PSD , 72 dpi, RVB•     Résolutions standards > 1000px (1150px)
Maquettes, Slice & FontsMaquettes•               PSD , 72 dpi, RVB•     Résolutions standards > 1000px (1150px)•          ...
Maquettes, Slice & FontsMaquettes•               PSD , 72 dpi, RVB•     Résolutions standards > 1000px (1150px)•          ...
Maquettes, Slice & FontsMaquettes•                PSD , 72 dpi, RVB•     Résolutions standards > 1000px (1150px)•         ...
Maquettes, Slice & FontsMaquettes•                PSD , 72 dpi, RVB•     Résolutions standards > 1000px (1150px)•         ...
Maquettes, Slice & FontsMaquettes•                  PSD , 72 dpi, RVB•       Résolutions standards > 1000px (1150px)•     ...
Maquettes, Slice & FontsMaquettes•                   PSD , 72 dpi, RVB•       Résolutions standards > 1000px (1150px)•    ...
Maquettes, Slice & FontsMaquettes•                    PSD , 72 dpi, RVB•         Résolutions standards > 1000px (1150px)• ...
Référencement
RéférencementS.E.O = Trafique = $ ( = R.O.I. )
RéférencementS.E.O = Trafique = $ ( = R.O.I. )
RéférencementS.E.O = Trafique = $ ( = R.O.I. )            Besoin
Référencement        S.E.O = Trafique = $ ( = R.O.I. )                    BesoinAnalyse + Structure + Contenu + Huile de co...
PROCESS WEB
Phases projet web
Phases projet web๏ Phase préparatoire
Phases projet web๏ Phase préparatoire๏ Phase de conception
Phases projet web๏ Phase préparatoire๏ Phase de conception๏ Phase de développement
Phases projet web๏ Phase préparatoire๏ Phase de conception๏ Phase de développement๏ Phase de finalisation
Préparation
PréparationBriefing clientfiche briefingweb_briefing.doc
PréparationBriefing clientfiche briefingweb_briefing.docLancement agencedossier web-designdossier web-développementweb_dos...
PréparationBriefing clientfiche briefingweb_briefing.docLancement agencedossier web-designdossier web-développementweb_dos...
Étapes d’un projet WebCollecte des besoins et desinformations auprès du client.hiérarchisation des informations etréflexion...
les changements en interne:
les changements en interne:plus de rapidité
les changements en interne:plus de rapiditéplus de rentabilité
les changements en interne:plus de rapiditéplus de rentabilitéamélioration de la qualité des productions
les changements en interne:plus de rapiditéplus de rentabilitéamélioration de la qualité des productionsl’amour retrouvé e...
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Designers et developers a love story
Prochain SlideShare
Chargement dans…5
×

Designers et developers a love story

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

×