Nos
formations
Modalités
d'organisation
Critères qualité
- Formation présentielle
- Programme sur-mesure étudié à la demande
- Chaque session fait l'objet d'une mise à jour systématique des contenus de formation
- Numéro de déclaration d’activité : 52 85 01374 85 - Cet enregistrement ne vaut pas agrément de l’État.
Organisme de formation validé
Nombre de stagiaires par session
- De 2 à 8 en inter-entreprises
- De 1 à 8 en intra
Admission
- Entretien préalable avec le formateur
- Test d’entrée afin de vérifier le niveau sur Photoshop et les bases en HTML
Lieu de la formation
- Chez le client
- ou dans les locaux de Web Créatif : salle de formation de 30m2 (8 places maximum) équipée de tableau blanc, internet en filaire et vidéo-projecteur
Formation web design avec Photoshop et CSS
“Ce stage se déroule en 2 périodes :Cette formation web design s’adresse aux graphistes qui souhaitent se perfectionner dans l’ergonomie web et l’intégration HTML/CSS.
- une session d’1 journée, suivie d’un temps de pratique de 15 à 30 jours.
- puis une session de 2 jours pour intégrer le webdesign en CSS.
La maîtrise de Photoshop est ici exigée : vous devrez réaliser la maquette graphique pendant la période inter-stage… afin de l’intégrer lors de la 2e session.
Durée
3 jours,
soit 21 heures
Tarifs
Prix inter
1300 € H.T. / pers.
Prochaines sessions
Proposez vos dates
sur le formulaire d'inscription
Public concerné et pré-requis
- Graphiste souhaitant acquérir les compétences en web design et ergonomie web
- Pré-requis : Maîtrise du logiciel Photoshop, sens de l’esthétique ainsi que bases en HTML
Objectifs pédagogiques
À l'issue de la formation, le stagiaire sera capable de :
- Comprendre les principes ergonomiques
- Savoir appliquer une charte tout en proposant une création pertinente et esthétique
- Découper sa maquette PSD pour l’intégration future
- Savoir réaliser une intégration HTML/ CSS , sans éditeur WYSIWYG ni tableaux de mise en page.
Programme général de la formation
Jour 1 matin (9h00-12h30)
L’ergonomie d’un site web
- Qu’est-ce que l’ergonomie ?
- 10 préjugés à démonter
- Découvrir puis appliquer la Gestalt, la loi de Fitts et de Hick
- Comprendre l’affordance
- Accessibilité visuelle et lisibilité
- Empathie et personas
Appliquer l’ergonomie dans un web design
- Le site ainsi que ses pages sont bien organisés
- Le graphisme aide et dirige l’internaute
- L’internaute ne perd pas son temps
- L’internaute est satisfait et séduit
- Conduire un audit graphique et ergonomique
Jour 1 après-midi (14h00-17h30)
Les documents de projet
- Le zoning afin d’organiser l’espace
- Le wireframe : chaque zone est détaillée
- Quels logiciels pour réaliser zonings et maquettes ?
L’apparence d’un site Web
- La charte graphique et le logo
- Règles d’utilisation de la charte
- Couleurs et typographies web safe
- Dimension des pages et grilles modulaires
- Les animations et les liens
Jour 2 matin (9h00-12h30)
Analyses de design : symboliques et ambiances
- Par secteurs d’activité
- Par styles graphiques
- Les templates : formatés ou non ?
Séance de debriefing : analyse ergonomique et esthétique de votre maquette PSD
À partir de votre maquette Photoshop
- Conceptualiser le passage de Photoshop à CSS
- Découper les arrière-plans
- Gérer les transparences
- Comprendre le découpage en boîtes
Rappels sur HTML
- Syntaxe de HTML 5 : balisage, attributs et valeurs
- Structure de base d’une page HTML
- Validation W3C
- Modèle de boîte avec les DIV
Jour 2 après-midi (14h00-17h30)
Comprendre puis utiliser les CSS
- Comprendre la syntaxe CSS
- Créer puis utiliser les feuilles de style externes
CSS en action
- Un peu de généalogie
- Sélecteurs CSS classiques
- Propriétés de mise en forme : caractères, paragraphes et arrière-plan
- Les «nouveaux» sélecteurs CSS2.1 (enfant, adjacent, attribut)
- Pseudo-éléments (dont :after, :before et :first-child)
- Priorité des sélecteurs
Jour 3 matin (9h00-12h30)
Le positionnement en CSS
- Le rendu par défaut des éléments (bloc, en-ligne)
- Utiliser les DIV
- Paramétrer la taille et le flottement des boîtes
- Comprendre le positionnement (dans le flux, absolu, fixé, relatif, flottant)
- Comprendre la propriété « clear »
- Introduction au positionnement avancé et au z-index
- Méthodologie pratique d’intégration
Jour 3 après-midi (14h00-17h30)
Atelier pratique : intégration de votre PSD en page internet
- Méthodologie
- Structure HTML 5
- Mise en page CSS (entête, menu, contenu, formulaire, pied de page)
- Spécificités : page fluide et centrée sur l’écran, boutons graphiques avec effets de survol
Méthodes pédagogiques
- L’intervenante alternera découverte des concepts, explications pédagogiques et exercices d’application.
- Chaque participant concevra après le jour 1 une maquette sur Photoshop, qu’il intégrera ensuite en HTML / CSS lors des 2 autres journées de formation
- La formation web design sera ponctuée de conseils et d’astuces d’intégration
Modalités d’encadrement et d’évaluation
- Feuille d’émargement : les stagiaires émargeront par demi-journée.
- Attestation de formation remise aux stagiaires ayant suivi la formation avec assiduité.
- Une évaluation écrite portant sur l'atteinte des objectifs sera réalisée par les participants en fin de formation.
- Quizz/QCM et commentaire libre validant les acquis en fin de formation.