Durée: 5 jours
Public: Graphistes
Pré-requis: Aisance avec l'outil informatique. Connaître un logiciel de traitement d'images, d'illustration vectorielle serait un plus
Objectifs: Comprendre et maîtriser les spécificités de la publication sur le Web (formats, interactivité, etc.). Concevoir et réaliser l'interface des pages d'un site Web. Élaboration de la charte graphique, appropriation des fondamentaux de la présentation sur écran, ergonomie des sites et principes de navigation.
Référence: PAO377-F
Fondamentaux de la publication sur le Web et de l'interactivité.
Introduction
- Historique
- Présentation du Web
Les formats
- Les tailles d'écran
- Les espaces colorimétriques : RVB et hexadécimal
- Les différents formats de fichiers images
- L'optimisation
L'interactivité
- Les spécificités (non-linéarité de la publication Web)
- Les liens hypertexte
- Les différentes formes de sites Web : site statiques et site dynamiques
Présentation des logiciels de la suite Adobe.
Photoshop : présentation
- L'interface et l'espace de travail
- Création de nouveaux documents : le paramétrage
- Les outils et les méthodes de sélection
- L'organisation des calques
- Le photomontage
Illustrator : présentation
- L'interface et l''espace de travail
- Création de nouveaux documents : le paramétrage
- Le vectoriel
- Les calques et les sous-calques
- Les masques d'écrêtage
Dreamweaver
- L'interface et l''espace de travail
- Création de nouveaux documents : le paramétrage
- le HTML : structure du dodument
- Les liens hypertextes
- La mise en forme
Présentation de Bridge
Présentation d'outils en ligne
- Conception
- Production
- Analyse
- Ressources
Conception fonctionnelle d'un site Web.
La préparation du projet
- Rédaction du projet sous forme d’une note d'intention
- Rédaction du cahier des charges
- Définition
Les différents types de sites Web
- Les sites vitrines
- Le Portfolio
- Les sites de e-commerce
- Les sites communautaires
- Les blogs
- Les sites événementiels
Les différentes formes de sites Web
- Les sites statiques
- Les sites dynamiques
- Les CMS
- Les niveaux de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)
L'arborescence du site
- Organisation des rubriques.
- Cinématique des pages
- Ergonomie
- Les principes de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)
La conception graphique.
La charte graphique : l'identité visuelle
- Ce qui est autorisé, ce qui est défendu
- Dimension, « zoning »
- Définir les couleurs : titres, sous-titres, texte de lecture, liens hypertexte, boutons des menus, encadrés, etc.
- Les styles des polices de caractères
Organiser son interface
- Définition du fond d'écran et du fond de page
- Définir les espaces (contenu, menus, bandeaux publicitaires, etc.)
- Définir les différents niveaux de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)
Organiser son travail
- Créer des bibliothèques de styles
- Créer des bibliothèques d'objets
- Exporter ses nuanciers
- Exporter ses styles
Réalisation : la page d'accueil.
La présentation
- Définition du fond d'écran et du fond de page
- Définir les espaces (contenu, menus, bandeaux publicitaires, etc.)
- Définir les différents niveaux de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)
Création d'une page d'accueil
- Définir une grille de positionnement des différents éléments
- Définir les emplacements et la mise en forme du contenu (texte, images, vidéos, etc.)
- Prise en compte de l'ergonomie
Atelier pratique : création de l'interface d'une page d'accueil
Réalisation : les rubriques.
Création des pages de rubriques
- Déclinaison de la charte graphique dans les pages intérieures
- Organisation du contenu texte-images
- Positionnement des barres et boutons des menus
Atelier pratique : création de l'interface de pages intérieures
Enrichissement graphiques
- Les fonds
- Les dégradés des bords
- En-tête, pieds de pages
- Les vignettes
Atelier pratique : création de l'interface de pages intérieures
Exportation des documents graphiques.
Exportation en html
- Les outils tranche de Photoshop et de Illustrator
- Les zones actives d'une image
- Exportation d'un document au format html
Exportation de l'interface pour l'intégration html
- Création des repères de zones
- Découpage de l'interface
Optimisation des images
- Les formats d'image : JPG, GIF, PNG
- L'animation : GIF, Flash, CSS 3
Atelier pratique : création de l'interface d'une page Web dans un document html
Finalisation de l'interface : l'intégration HTML.
L'éditeur Web
- Insertion des éléments dans une page html
- Gestion des liens hypertexte
- Insertion et gestion des menus et barres des menus (boutons, onglets, etc.)
L'optimisation des pages
- Optimisation des images
- Les transparences
- Les dégradés
Atelier pratique : création d'un petit site Web comportant plusieurs rubriques
Conclusion.
De l'idée initiale à la réalisation finale
- Bilan de la réalisation : contraintes, potentiel et spécificités
- La promotion
- Le référencement
- Faire vivre son site