Designers et developers a love story
•
0 gefällt mir•558 views
ou comment expliquer simplement les étapes d'un projet web Présentation réalisée pour B+G - http://bgcom.ch
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (15)
Ähnlich wie Designers et developers a love story
Ähnlich wie Designers et developers a love story (20)
Mehr von Julien Ferla
Designers et developers a love story
- 1. Process Web, pourquoi faire ? Les métiers du web État des lieux Design d’interface, Wireframe Le travail de chacun Design pour le Web - interface ? Technique Process Conclusion
- 4. a Love story
- 10. états des lieux
- 11. états des lieux
- 12. états des lieux
- 14. Account
- 15. Developpeur #php and friends Account Developpeur wireframe, hiérarchie de l’info, cahier des charges
- 16. Developpeur Directeur artistique #php and friends Graphistes dream team Account Developpeur Directeur artistique Graphistes Developpeur wireframe, hiérarchie de l’info, cahier des charges création, design, magic touch code
- 17. Le design d’interface est un processus de création articulant le fond, la forme et la fonction dans un rapport étroit à la réalité informatique et technique de l’objet.
- 18. il existe donc de nombreux codes qui participent à la compréhension d’une interface. leur compréhension dépendent de la culture générale et de la mémoire collective de chaque récepteur.
- 20. System 1.1. - 1984
- 21. System 1.1. - 1984
- 22. System 1.1. - 1984
- 23. System 7.0 - 1991
- 24. System 1.1. - 1984
- 25. System 10.5.7. - 2009
- 26. Photoshop 1.0.7 - 1990
- 28. Apple.com - 1997
- 29. Apple.com - 1997
- 30. Apple.com - 1997
- 31. Apple.com - 1997
- 40. La plupart des gens font l'erreur de penser que le design c'est l'apparence. Ce n'est pas comme ça que nous convenons le design. Ce n'est pas simplement l'apparence et l'impression que cela fait. Le design, c'est comment ça marche. Steve Jobs, Times, 2003
- 43. design d’un champ de recherche
- 44. ceci n’est pas un champ de recherche !!!
- 45. il est possible de naviguer simplement.
- 47. Seth Godin - Gel 2006
- 48. Technique
- 50. Langage & Architecture Développement = Code = Langage
- 51. Langage & Architecture Développement = Code = Langage PHP, HTML, CSS, SQL....
- 52. Langage & Architecture Développement = Code = Langage PHP, HTML, CSS, SQL....
- 53. Maquettes, Slice & Fonts
- 54. Maquettes, Slice & Fonts Maquettes
- 55. Maquettes, Slice & Fonts Maquettes • PSD , 72 dpi, RVB
- 56. Maquettes, Slice & Fonts Maquettes • PSD , 72 dpi, RVB • Résolutions standards > 1000px (1150px)
- 57. Maquettes, Slice & Fonts Maquettes • PSD , 72 dpi, RVB • Résolutions standards > 1000px (1150px) • Calques ET dossiers
- 58. Maquettes, Slice & Fonts Maquettes • PSD , 72 dpi, RVB • Résolutions standards > 1000px (1150px) • Calques ET dossiers Découpage
- 59. Maquettes, Slice & Fonts Maquettes • PSD , 72 dpi, RVB • Résolutions standards > 1000px (1150px) • Calques ET dossiers Découpage • Le découpage (slicing) n’est pas optionnel
- 60. Maquettes, Slice & Fonts Maquettes • PSD , 72 dpi, RVB • Résolutions standards > 1000px (1150px) • Calques ET dossiers Découpage • Le découpage (slicing) n’est pas optionnel • Export pour le web > PNG, JPG & GIF
- 61. Maquettes, Slice & Fonts Maquettes • PSD , 72 dpi, RVB • Résolutions standards > 1000px (1150px) • Calques ET dossiers Découpage • Le découpage (slicing) n’est pas optionnel • Export pour le web > PNG, JPG & GIF Fonts
- 62. Maquettes, Slice & Fonts Maquettes • PSD , 72 dpi, RVB • Résolutions standards > 1000px (1150px) • Calques ET dossiers Découpage • Le découpage (slicing) n’est pas optionnel • Export pour le web > PNG, JPG & GIF Fonts • Fonts > droits d’utilisation
- 63. Maquettes, Slice & Fonts Maquettes • PSD , 72 dpi, RVB • Résolutions standards > 1000px (1150px) • Calques ET dossiers Découpage • Le découpage (slicing) n’est pas optionnel • Export pour le web > PNG, JPG & GIF Fonts • Fonts > droits d’utilisation • Favoriser les fonts @font-face > Google Fonts
- 64. Référencement
- 65. Référencement S.E.O = Trafique = $ ( = R.O.I. )
- 66. Référencement S.E.O = Trafique = $ ( = R.O.I. )
- 67. Référencement S.E.O = Trafique = $ ( = R.O.I. ) Besoin
- 68. Référencement S.E.O = Trafique = $ ( = R.O.I. ) Besoin Analyse + Structure + Contenu + Huile de coude (taches récurantes)
- 69. PROCESS WEB
- 71. Phases projet web ๏ Phase préparatoire
- 72. Phases projet web ๏ Phase préparatoire ๏ Phase de conception
- 73. Phases projet web ๏ Phase préparatoire ๏ Phase de conception ๏ Phase de développement
- 74. Phases projet web ๏ Phase préparatoire ๏ Phase de conception ๏ Phase de développement ๏ Phase de finalisation
- 75. Préparation
- 77. Préparation Briefing client fiche briefing web_briefing.doc Lancement agence dossier web-design dossier web-développement web_dossiers.xls
- 78. Préparation Briefing client fiche briefing web_briefing.doc Lancement agence dossier web-design dossier web-développement web_dossiers.xls -> CAHIER DES CHARGES problématique client / réponse technique arborescence & wireframes / planning
- 79. Étapes d’un projet Web Collecte des besoins et des informations auprès du client. hiérarchisation des informations et réflexion usabilité. Mise en place d’un sitemap. Création des wireframes pour les pages principales. Design des interfaces. Validation client (contenu+design). Développement.
- 80. les changements en interne:
- 81. les changements en interne: plus de rapidité
- 82. les changements en interne: plus de rapidité plus de rentabilité
- 83. les changements en interne: plus de rapidité plus de rentabilité amélioration de la qualité des productions
- 84. les changements en interne: plus de rapidité plus de rentabilité amélioration de la qualité des productions l’amour retrouvé entre dev. et designer !