Web design panorama didactique
                                                           Web design?




                ...
Web design webdesigner?
Le Web Designer conçoit et supervise la réalisation de sites Web




                             ...
Web design designer?
     C’est un designer qui a choisit le Web comme terrain d’expression




                          ...
Web design design?
Le designer est avant tout un concepteur créatif qui sait faire preuve
de grandes capacités d’observati...
Web design Web?
  Le World Wide Web n’est pas Internet
  Le Web est une application hypertextuelle qui s’appuie sur
  l’ar...
Web design introduction
   Le Web : des perspectives vertigineuses !

   1,2 Milliard d’internautes (jdn. / 2006)
   1 Tri...
Web design design d’interfaces?
Le Webdesign est un sous domaine du :
Design d’interfaces




                            ...
Web design interface?
    Interface
    nf. (mot anglais) Limite commune à deux systèmes, deux entités
       permettant d...
Web design webdesign?




    Le terme Webdesign est, jusqu’à présent, communément associé à la
                          ...
Web design webdesign?
Webdesign : un équilibre délicat

Le Web est indépendant de toute plateforme matérielle ou logiciell...
Web design webdesign?
                        Indépendance matérielle et logicielle…




                                 ...
Web design webdesigner?



Le Web Designer est une personne qui conçoit et supervise la
réalisation de sites Web.
Son trav...
Web design Organisation de l’information / architecture
Arborescence : Organisation physique et logique des ressources



...
Web design Organisation de l’information / architecture




                       Menus & Liens : Hiérarchisation de l’in...
Web design Organisation de l’information / architecture
Contenus : Adaptés à l’image




                                 ...
Web design Organisation de l’information / méthodes
Paper Prototyping : Ou l’art de « dessiner » une interface




       ...
Web design Organisation de l’information / méthodes
                     Gabarits (Layout) : Architecture des pages Web


...
Web design Organisation de l’information / outils
    Langages :
    - xHTML (extended HyperText Markup Langage)
    - PHP...
Web design Organisation de l’information / outils
Logiciels : Adobe Dreamweaver, Filezilla…




                          ...
Web design Identité / stratégie
                                  Différenciation par l’image




                        ...
Web design Identité / stratégie
Différenciation par le positionnement




                                                ...
Web design Identité / méthodes
 Mockup (maquette de page)




                                 Webdesign? – Gregoire Cliqu...
Web design Identité / outils
Langage : Cascading Style Sheet (CSS.)




                                         (CSS) htt...
Web design Identité / outils / variations CSS (1/4)




                                                       http://www....
Web design Identité / outils / variations CSS (2/4)




                                                       http://www....
Web design Identité / outils / variations CSS (3/4)




                                                       http://www....
Web design Identité / outils / variations CSS (4/4)




                                                       http://www....
Web design Identité / outils
                         Logiciels : Adobe iIlustrator & Photoshop




                      ...
Web design Contenus multimédia
Eléments graphiques et sonores intégrés à l’interface :
Interacteurs (icons)




          ...
Web design Contenus multimédia
Eléments multimédia :
2d / 3d / animations




                             (Nicolas Cloare...
Web design Contenus multimédia / outils
Langages : DHTML, Javascript, Action Script…




                                 ...
Web design Contenus multimédia / outils
Logiciels : Adobe iIlustrator, Photoshop, Flash, After-effects,
3ds Max, Proce55in...
Prochain SlideShare
Chargement dans…5
×

Webdesign

1 902 vues

Publié le

Introduction to Webdesign

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

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

Aucune remarque pour cette diapositive

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

×