Téléchargé parJulien Ferla
Designers et developers a love story
Le document traite du processus de création et de conception d'interfaces web, en mettant l'accent sur la collaboration entre différents métiers du web tels que les développeurs, les graphistes et les designers. Il souligne l'importance d'une approche intégrée et technique dans la conception, incluant la hiérarchisation des informations et l'utilisation de wireframes. Le texte conclut sur les améliorations apportées par une collaboration efficace entre développeurs et designers.
Designers et developers a love story
- 1. Process Web, pourquoifaire ? 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.
- 8.
- 9.
- 10.
- 11.
- 12.
- 14.
- 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’interfaceest 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 doncde 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.
- 28.
- 29.
- 30.
- 31.
- 33.
- 34.
- 35.
- 36.
- 37.
- 40. La plupart desgens 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
- 41.
- 43. design d’un champde recherche
- 44. ceci n’est pasun champ de recherche !!!
- 45. il est possiblede naviguer simplement.
- 47. Seth Godin -Gel 2006
- 48.
- 49.
- 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.
- 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.
- 70.
- 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.
- 76.
- 77. Préparation Briefing client fiche briefing web_briefing.doc Lancementagence dossier web-design dossier web-développement web_dossiers.xls
- 78. Préparation Briefing client fiche briefing web_briefing.doc Lancementagence 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 projetWeb 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 eninterne:
- 81. les changements eninterne: plus de rapidité
- 82. les changements eninterne: plus de rapidité plus de rentabilité
- 83. les changements eninterne: plus de rapidité plus de rentabilité amélioration de la qualité des productions
- 84. les changements eninterne: plus de rapidité plus de rentabilité amélioration de la qualité des productions l’amour retrouvé entre dev. et designer !