atelier web et mobile design partie i, introduction au web design, outils du web designer, ahmed...

2ème séanceOutils 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.

l’entête

le menu

Bas de page ou pied de page

Contenu de la page

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

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)

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.

Source : WIKIPEDIA

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

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 le code HTML, CSS et java faire des testes meme des modification.

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.

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.

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.

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.

Outils de couleurs

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

Design d’interface

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++

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.

Quelque tests