Introduction to Webdesign

1. Web design panorama didactique
Web design?
http://www.flickr.com/photos/lecolededesign/2320668009/
Webdesign? – Gregoire Cliquet / 2008

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. 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. 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. 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. 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. 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. 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. 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. 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. Web design webdesign?
Indépendance matérielle et logicielle…
http://browsershots.org/
Webdesign? – Gregoire Cliquet / 2008

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. 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. 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. Web design Organisation de l’information / architecture
Contenus : Adaptés à l’image
http://www.opixido.com/
Webdesign? – Gregoire Cliquet / 2008

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. Web design Organisation de l’information / méthodes
Gabarits (Layout) : Architecture des pages Web
http://webwithoutwords.com/
Webdesign? – Gregoire Cliquet / 2008

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. Web design Organisation de l’information / outils
Logiciels : Adobe Dreamweaver, Filezilla…
Webdesign? – Gregoire Cliquet / 2008

20. Web design Identité / stratégie
Différenciation par l’image
http://www.chanel.com
Webdesign? – Gregoire Cliquet / 2008

21. Web design Identité / stratégie
Différenciation par le positionnement
http://www.facebook.com
Webdesign? – Gregoire Cliquet / 2008

22. Web design Identité / méthodes
Mockup (maquette de page)
Webdesign? – Gregoire Cliquet / 2008

23. Web design Identité / outils
Langage : Cascading Style Sheet (CSS.)
(CSS) http://turing.lecolededesign.com/gcliquet/
Webdesign? – Gregoire Cliquet / 2008

24. Web design Identité / outils / variations CSS (1/4)
http://www.csszengarden.com/
Webdesign? – Gregoire Cliquet / 2008

25. Web design Identité / outils / variations CSS (2/4)
http://www.csszengarden.com/
Webdesign? – Gregoire Cliquet / 2008

26. Web design Identité / outils / variations CSS (3/4)
http://www.csszengarden.com/
Webdesign? – Gregoire Cliquet / 2008

27. Web design Identité / outils / variations CSS (4/4)
http://www.csszengarden.com/
Webdesign? – Gregoire Cliquet / 2008

28. Web design Identité / outils
Logiciels : Adobe iIlustrator & Photoshop
http://datatainment.lecolededesign.com/
Webdesign? – Gregoire Cliquet / 2008

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. 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. Web design Contenus multimédia / outils
Langages : DHTML, Javascript, Action Script…
Heidi Ghernati / Application Twitter+Megaphone
Webdesign? – Gregoire Cliquet / 2008

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