Première partie du cours web et mobile design, atelier d'infographie, l'Ecole Supérieure des Beaux

1. 2ème séance
Outils du Web Designer

3. Les outils du web designer

4. L’anatomie d’une page web
Pour comprendre le fonctionnement d’un site web il faut s’intérésser a
l’anatomie d’une page web.
l’entête
le menu
Bas de page ou pied
de page
Contenu de la
page

5. Les objectifs du menu principal
- Orienter l’utilisateur rapidement
- Offrir les services de l’entreprise de façon claire
- Regrouper stratégiquement le contenu sous les bonnes sections

6. Les objectifs d’un menu de bas de page “Footer“
- Trouver l’information clé à travers tout le site
- Contenir des sections cachées (les mettre de l’avant)
- Créer des liens vers les sites partenaires (ou des sites externes)

7. L’arborescence d’un site web
L’arborescence d’un site web correspond à son architecture et permet
d’organiser et de structurer le contenu du site. afin de présenter aux
visiteurs une navigation logique et facile sous forme de menus et de
sous menus.

9. Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de
la conception d’une interface pour définir les zones et composants
qu’elle doit contenir. À partir d’un wireframe peut être réalisée
l’interface proprement dite par un graphiste. La démarche de recourir
à des wireframes s’inscrit dans une recherche d’ergonomie.
Maquettage et schématisation (wireframing)
Source : WIKIPEDIA

14. Un navigateur web est un logiciel conçu pour consulter et afficher le
World Wide Web.
Navigateur web
Source : Wikipedia

15. Statistiques des navigateurs

16. Navigateur, outils et plugins pour un Web Designer
Firebug (firefox) : Permet au développeur ou web designer
de visualiser le code HTML, CSS et java faire des testes meme des
modification.

17. Navigateur, outils et plugins pour un Web Designer
Webdevelopper (firefox) : Permet au développeur ou web designer
de visualiser le code HTML, CSS et java faire des testes meme des
modification.

18. Navigateur, outils et plugins pour un Web Designer
Webpage screenshot (chrom) : Impossible de capturer la
totalité du site web ? La solution s’appelle Webpages Screenshot.

19. Navigateur, outils et plugins pour un Web Designer
Colorzila (chrom) : va vous permettre d’utiliser une pipette dans ton
navigateur pour identifier la couleur et obtenir son code hexadécimal.

20. Navigateur, outils et plugins pour un Web Designer
Whatfont (chrom) : Dans le même esprit que ColorZilla, WhatFont
te détectera directement quelle typo est utilisée sur l’élément du site
que tu vises.

21. Outils de couleurs

25. Photoshop est idéal pour la création graphique, il offre une grande liberté
pour imaginer et innover dans le webdesign.
Design d’interface

26. Editeurs du code
Un éditeur du code est un outils pour rédiger des codes HTML, CSS...
pour dévlopper des interface web, ainsi des codes de programmation
comme java,c, c++...ect.
DreamweaverSublimTextCodaBracketsNotepad++

28. File Transfer Protocol (protocole de transfert de fichiers), ou FTP, est un
protocole de communication destiné à l’échange informatique de fichiers
sur un réseau TCP/IP. Il permet, depuis un ordinateur, de copier des
fichiers vers un autre ordinateur du réseau, un serveur web, ou encore de
supprimer ou de modifier des fichiers sur ces derniers. Ce mécanisme de
copie est souvent utilisé pour alimenter un site web chez un hébergeur.
Logiciel FTP (File Transfer Protocol)
TCP/IP est l’ensemble des protocoles utilisés pour le transfert des données sur Internet, intranet ou bien via un reseau local.

30. Quelque tests