2ème séance
Outils du Web Designer
Les outils du web designer
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...
Les objectifs du menu principal
- Orienter l’utilisateur rapidement
- Offrir les services de l’entreprise de façon claire
...
Les objectifs d’un menu de bas de page “Footer“
- Trouver l’information clé à travers tout le site
- Contenir des sections...
L’arborescence d’un site web
L’arborescence d’un site web correspond à son architecture et permet
d’organiser et de struct...
Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de
la conception d’une interface pour définir les zones ...
Un navigateur web est un logiciel conçu pour consulter et afficher le
World Wide Web.
Navigateur web
Source : Wikipedia
Statistiques des navigateurs
Navigateur, outils et plugins pour un Web Designer
Firebug (firefox) : Permet au développeur ou web designer
de visualiser...
Navigateur, outils et plugins pour un Web Designer
Webdevelopper (firefox) : Permet au développeur ou web designer
de visu...
Navigateur, outils et plugins pour un Web Designer
Webpage screenshot (chrom) : Impossible de capturer la
totalité du site...
Navigateur, outils et plugins pour un Web Designer
Colorzila (chrom) : va vous permettre d’utiliser une pipette dans ton
n...
Navigateur, outils et plugins pour un Web Designer
Whatfont (chrom) : Dans le même esprit que ColorZilla, WhatFont
te déte...
Outils de couleurs
Photoshop est idéal pour la création graphique, il offre une grande liberté
pour imaginer et innover dans le webdesign.
De...
Editeurs du code
Un éditeur du code est un outils pour rédiger des codes HTML, CSS...
pour dévlopper des interface web, ai...
File Transfer Protocol (protocole de transfert de fichiers), ou FTP, est un
protocole de communication destiné à l’échange...
Quelque tests
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016
Prochain SlideShare
Chargement dans…5
×

Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016

420 vues

Publié le

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

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

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

Aucune remarque pour cette diapositive

Atelier Web et Mobile Design partie I, introduction au web design, Outils du Web designer, Ahmed BACHIR CHERIF ESBA 2015-2016

  1. 1. 2ème séance Outils du Web Designer
  2. 2. Les outils du web designer
  3. 3. 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
  4. 4. 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
  5. 5. 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)
  6. 6. 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.
  7. 7. 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
  8. 8. Un navigateur web est un logiciel conçu pour consulter et afficher le World Wide Web. Navigateur web Source : Wikipedia
  9. 9. Statistiques des navigateurs
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. 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.
  14. 14. 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.
  15. 15. Outils de couleurs
  16. 16. Photoshop est idéal pour la création graphique, il offre une grande liberté pour imaginer et innover dans le webdesign. Design d’interface
  17. 17. 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++
  18. 18. 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.
  19. 19. Quelque tests

×