Webdesign

1,581
-1

Published on

Introduction to Webdesign

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,581
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Webdesign

  1. 1. Web design panorama didactique Web design? http://www.flickr.com/photos/lecolededesign/2320668009/ Webdesign? – Gregoire Cliquet / 2008
  2. 2. Web design webdesigner? Le Web Designer conçoit et supervise la réalisation de sites Web http://www.flickr.com/photos/lecolededesign/2847439915/ Webdesign? – Gregoire Cliquet / 2008
  3. 3. Web design designer? C’est un designer qui a choisit le Web comme terrain d’expression http://www.flickr.com/photos/lecolededesign/2847439915/ Webdesign? – Gregoire Cliquet / 2008
  4. 4. Web design design? Le designer est avant tout un concepteur créatif qui sait faire preuve de grandes capacités d’observation et d’écoute, de rigueur et de méthode http://www.flickr.com/photos/lecolededesign/2848273260/ Webdesign? – Gregoire Cliquet / 2008
  5. 5. Web design Web? Le World Wide Web n’est pas Internet Le Web est une application hypertextuelle qui s’appuie sur l’architecture d’Internet. Le Web n’est pas un outil, c’est un environnement à part entière : Qui possède son propre langage et qui est régit par des principes et des règles. Le Web est un environnement en perpétuelle évolution et mutation (Web 2.0) http://www.nicolas-guillard.com/cybergeography-fr/atlas/eick_arctran.gif Webdesign? – Gregoire Cliquet / 2008
  6. 6. Web design introduction Le Web : des perspectives vertigineuses ! 1,2 Milliard d’internautes (jdn. / 2006) 1 Trillion (1000 milliards) de pages Web (google 2008) 4 Milliards de téléphones mobiles (fin 2008) Time / « the man of the year » 2007 Webdesign? – Gregoire Cliquet / 2008
  7. 7. Web design design d’interfaces? Le Webdesign est un sous domaine du : Design d’interfaces http://www.flickr.com/photos/lecolededesign/1917052612/ Webdesign? – Gregoire Cliquet / 2008
  8. 8. Web design interface? Interface nf. (mot anglais) Limite commune à deux systèmes, deux entités permettant des échanges entre ceux-ci. Elle permet dans le cas de l’informatique de favoriser le dialogue (l’interaction) entre les machines et les humains par la stimulation des sens par des périphériques appropriés : - Le touché : par l’intermédiaire d’un dispositif de pointage : Souris, stylet, écran tactile ou clavier. - La vue : par l’affichage écran, c’est ce que l’on nomme les GUI : « Graphical User Interfaces ». - L’ouie : par commandes vocales appelés encore VUI : « Voice User Interface ». - La gestuelle : par l’analyse des mouvements du corps, du visage, d’un pointeur. Webdesign? – Gregoire Cliquet / 2008
  9. 9. Web design webdesign? Le terme Webdesign est, jusqu’à présent, communément associé à la conception d’interfaces graphiques. Le travail du Webdesigner, complexe, consiste à conjuguer la recherche d’une identité graphique forte avec des contraintes techniques (faisabilité) tout en privilégiant l’ergonomie et l’accessibilité pour les usagers. Henri Derudder http://www.digitalic.org/portfolio/ Webdesign? – Gregoire Cliquet / 2008
  10. 10. Web design webdesign? Webdesign : un équilibre délicat Le Web est indépendant de toute plateforme matérielle ou logicielle pré-définie, le Webdesigner doit concevoir des interfaces graphiques adaptables*, tout en n’ayant qu’une connaissance très relative des usagers et des contextes d’usages (matériel, physique et cognitif). * Voir adaptatives (notion de plasticité des interfaces) « Fxds reader » : Pierrick Thébault Webdesign? – Gregoire Cliquet / 2008 /
  11. 11. Web design webdesign? Indépendance matérielle et logicielle… http://browsershots.org/ Webdesign? – Gregoire Cliquet / 2008
  12. 12. Web design webdesigner? Le Web Designer est une personne qui conçoit et supervise la réalisation de sites Web. Son travail se décompose en 3 parties qu’il doit gérer en quasi-simultanéité : - Organisation de l’information - Développement de l’identité visuelle - Création de contenus multimédia http://www.flickr.com/photos/lecolededesign/2412873487/ Webdesign? – Gregoire Cliquet / 2008
  13. 13. Web design Organisation de l’information / architecture Arborescence : Organisation physique et logique des ressources Pierrick Thébault / http://www.rgrd.fr/ Webdesign? – Gregoire Cliquet / 2008
  14. 14. Web design Organisation de l’information / architecture Menus & Liens : Hiérarchisation de l’information http://www.ergolab.net/articles/ergonomie-menu-1.html Webdesign? – Gregoire Cliquet / 2008
  15. 15. Web design Organisation de l’information / architecture Contenus : Adaptés à l’image http://www.opixido.com/ Webdesign? – Gregoire Cliquet / 2008
  16. 16. Web design Organisation de l’information / méthodes Paper Prototyping : Ou l’art de « dessiner » une interface http://blogs.atlassian.com/developer/2008/07/balsamiq_mockups_brings_paper.html Webdesign? – Gregoire Cliquet / 2008
  17. 17. Web design Organisation de l’information / méthodes Gabarits (Layout) : Architecture des pages Web http://webwithoutwords.com/ Webdesign? – Gregoire Cliquet / 2008
  18. 18. Web design Organisation de l’information / outils Langages : - xHTML (extended HyperText Markup Langage) - PHP (Pre-Hypertext Markup Language) - MySQL (Structured Queries Language) (source) http://turing.lecolededesign.com/gcliquet/ Webdesign? – Gregoire Cliquet / 2008
  19. 19. Web design Organisation de l’information / outils Logiciels : Adobe Dreamweaver, Filezilla… Webdesign? – Gregoire Cliquet / 2008
  20. 20. Web design Identité / stratégie Différenciation par l’image http://www.chanel.com Webdesign? – Gregoire Cliquet / 2008
  21. 21. Web design Identité / stratégie Différenciation par le positionnement http://www.facebook.com Webdesign? – Gregoire Cliquet / 2008
  22. 22. Web design Identité / méthodes Mockup (maquette de page) Webdesign? – Gregoire Cliquet / 2008
  23. 23. Web design Identité / outils Langage : Cascading Style Sheet (CSS.) (CSS) http://turing.lecolededesign.com/gcliquet/ Webdesign? – Gregoire Cliquet / 2008
  24. 24. Web design Identité / outils / variations CSS (1/4) http://www.csszengarden.com/ Webdesign? – Gregoire Cliquet / 2008
  25. 25. Web design Identité / outils / variations CSS (2/4) http://www.csszengarden.com/ Webdesign? – Gregoire Cliquet / 2008
  26. 26. Web design Identité / outils / variations CSS (3/4) http://www.csszengarden.com/ Webdesign? – Gregoire Cliquet / 2008
  27. 27. Web design Identité / outils / variations CSS (4/4) http://www.csszengarden.com/ Webdesign? – Gregoire Cliquet / 2008
  28. 28. Web design Identité / outils Logiciels : Adobe iIlustrator & Photoshop http://datatainment.lecolededesign.com/ Webdesign? – Gregoire Cliquet / 2008
  29. 29. Web design Contenus multimédia Eléments graphiques et sonores intégrés à l’interface : Interacteurs (icons) http://www.crazyleafdesign.com/blog/sunday-design-resource-issue-3-500-icons-every-designer-needs/ Webdesign? – Gregoire Cliquet / 2008
  30. 30. Web design Contenus multimédia Eléments multimédia : 2d / 3d / animations (Nicolas Cloarec « School Of Darkness) http://blog.demodesign.fr/ Webdesign? – Gregoire Cliquet / 2008
  31. 31. Web design Contenus multimédia / outils Langages : DHTML, Javascript, Action Script… Heidi Ghernati / Application Twitter+Megaphone Webdesign? – Gregoire Cliquet / 2008
  32. 32. Web design Contenus multimédia / outils Logiciels : Adobe iIlustrator, Photoshop, Flash, After-effects, 3ds Max, Proce55ing, Virtools… Adobe Products Wheel Webdesign? – Gregoire Cliquet / 2008

×