Cette formation web design s’adresse aux graphistes qui souhaitent se perfectionner dans l’ergonomie web et l’intégration de leur maquette web en HTML/CSS. La maîtrise de Photoshop est ici exigée : vous devrez réaliser la maquette web pendant la période inter-stage… afin de l’intégrer lors de la 2e session.
La formation se déroule en effet sur 2 périodes :
– 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.
Les Objectifs
de la formation web design
les principes ergonomiques spécifiques au web ;
des principes graphiques efficaces et pertinents ;
du point de vue de l’intégration ;
du langage CSS ;
le positionnement en CSS ;
une intégration HTML/ CSS ;
La Formation web design
en détails : contenus, dates et prix
Dernière actualisation le 16 septembre 2022
Graphiste souhaitant acquérir les compétences en web design et évoluer vers l’intégration HTML/CSS
Cette formation n’est ni certifiante, ni éligible au CPF, mais peut être prise en charge au titre du plan de formation entreprise (renseignements auprès de votre OPCO ou de votre conseil comptable)
- Maîtrise du logiciel Photoshop, sens de l’esthétique ainsi que quelques bases en HTML (logiciel type NotePad ou sur Dreamweaver)
- De 2 à 4 en inter-entreprises
- De 1 à 6 en intra
Les apports professionnels de la formation Webdesign
La formation webdesign se déroule en 2 périodes : une première journée pour comprendre l’ergonomie web et les principes du webdesign, puis 2 jours consécutifs pour mettre en pratique l’intégration html/css d’une maquette web.
1er jour : qu’est-ce que l’ergonomie web ?
Cette première journée de formation commence par les bases du webdesign : définition et principes d’ergonomie web, exemples concrets de sites bien réalisés, audit graphique et ergonomique.
Les stagiaires apprendront ensuite à concevoir leurs documents projet. Le formateur les guidera dans une réflexion globale, afin d’anticiper les futures questions lors de la création de la maquette. Ainsi, ils aborderont ensemble les notions de zoning, wireframe ou encore les règles d’utilisation d’une charte graphique pour le web. La maquette graphique commencée pendant ce 1er jour de formation sera à terminer pour le jour 2.
2e & 3e jour : intégration html/css et webdesign
De retour en formation, le groupe participe à un débrief commun sur le travail inter-session : chaque participant présente son travail et évoque ses interrogations. Ce temps d’échange entre les participants et le formateur permet d’améliorer son graphisme et d’aboutir au webdesign final.
Le formateur rappelle ensuite quelques bases du langage HTML5, avant d’aborder en détails le CSS. L’intégration web commence alors pour les participants : ils appliquent les notions au fur et à mesure via des exercices dédiés.
Les notions avancées de CSS sont abordées lors du 3e jour, permettant ainsi aux stagiaires d’acquérir les compétences suffisantes pour intégrer leur webdesign. La structure en boîte et les positionnements sont vus le matin, la méthodologie et les études de cas plus poussés sont au programme de l’après-midi.
Admission à la formation web design :
- Entretien préalable avec le formateur
- Test d’entrée afin de vérifier le niveau sur Photoshop et les bases en HTML
- Variante possible avec le logiciel Dreamweaver CC : nous contacter pour une réadaptation du programme
Utilisez notre questionnaire pour faire le tour de vos acquis actuels et anticiper vos besoins de formation
- 3 jours, soit 21h00.
- 50% de théorie, 50% de pratique.
Pas de date programmée pour le moment
Horaires : 9h-12h30 / 14h-17h30
Formation inter déjà programmée :
- 10 jours ouvrés avec un auto-financement ;
- 4 semaines minimum avec un financement externe, selon délais d’instruction des dossiers de financement chez votre OPCO.
Formation intra :
- 4 semaines minimum avec un auto-financement ;
- 5 à 10 semaines en cas de financement avec votre OPCO.
- Formation inter-entreprise : 3 jours 1890€HT
4 places restantes - Formation intra-entreprise : 3 jours 3255€HT
Votre graphisme
personnalisé
Une fois les notions d’ergonomie web acquises, créez votre propre maquette, et testez-là en live auprès du formateur et des autres participants.
Intégrez
votre design
La formation vous permet d’intégrer votre maquette de façon progressive, et de débusquer sous l’œil avisé du formateur toutes les difficultés en programmation front-end.
Et Après ?
Toujours là !
Temps de support de 45min offert dans le mois qui suit la formation (intra) ; à utiliser pour des conseils personnalisés ou des corrections, tant au niveau du webdesign que des intégrations.
Le programme de formation
web design
Actualisé le 11 décembre 2020
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
Évaluation objectif 01 : analyser des sites sur des critères graphiques et ergonomiques
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
Évaluation objectif 01 : appliquer les principes ergonomiques sur les sites des concurrents
Les documents de projet préalables à la maquette web
- Le zoning afin d’organiser l’espace
- Le wireframe : chaque zone est détaillée
- Quels logiciels pour réaliser zonings et maquettes ?
Évaluation objectif 02 : projeter les principes ergonomiques dans le wireframe (à finaliser chez soi)
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
Évaluation objectif 02 : projeter les principes graphiques dans un draft ou une note d'intention graphique
Travail à réaliser pour le 2e jour de formation : créer la maquette Photoshop
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 web Photoshop
- Conceptualiser le passage de Photoshop à CSS
- Découper les arrière-plans
- Gérer les transparences
- Comprendre le découpage en boîtes
Évaluation objectif 03 : créer son projet d'intégration web
Rappels sur HTML
- Syntaxe de HTML 5 : balisage, attributs et valeurs
- Structure de base d’une page HTML
- Modèle de boîte avec les DIV
Comprendre puis utiliser les CSS
- Comprendre la syntaxe CSS
- Créer puis utiliser les feuilles de style externes
Évaluation objectif 04 : créer sa première feuille de style CSS
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
Évaluation objectif 04 : coder les propriétés CSS sans erreurs
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
Évaluation objectif 05 : créer une intégration en recourant aux positionnements CSS
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
Évaluation objectif 06 : Intégrer sa maquette Photoshop en HTML/CSS
- L’intervenante alternera découverte des concepts, explications pédagogiques et travaux pratiques pour monter les pages web
- 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
- Le support de cours projeté lors de la formation est livré après chaque journée, puis complété à la fin des 3 jours par un cours rédigé sur les parties ergonomie web et intégration CSS
- Feuille d’émargement : les stagiaires émargeront par demi-journée de formation.
- 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.
- Exercices en continu permettant de valider les acquis en fin de formation.
- Chez le client ou le centre de formation partenaire
- ou dans les locaux de Web Créatif : salle de formation de 33m² (6 stagiaires maximum) équipée de tableau blanc, internet en connexion Wifi et grand écran TV
- Notre salle de formation est accessible PMR et dispose d'une place de parking attenante, réservée PSH. Au besoin, nous pourrons délocaliser la formation dans une salle disposant de sanitaires accessibles PMR.
- N’hésitez pas à nous signaler tout besoin particulier en amont de la formation. Nous adapterons au mieux le programme et les exercices pour faciliter votre apprentissage.
- Une formation sur-mesure est fortement recommandée pour les professionnels malvoyants ou malentendants. N’hésitez pas à contacter notre centre de formation, nous réaliserons ensemble une session adaptée à votre situation.
- Le registre d'accessibilité est disponible sur simple demande.
La formatrice
dédiée à « web design »
Sabrina Échappé
Sabrina a appris HTML et CSS en 2004, dans le cadre d’une formation sur 6 mois. Depuis, elle n’a jamais cessé de créer des maquettes pour le web et s’est actualisée en permanence sur l’évolution des langages.
Suite aux créations de webdesigns sur Photoshop, le recours à HTML et CSS constitue la suite logique. Il est très valorisant pour les stagiaires de créer leur propre maquette, et de lui donner vie ensuite via les langages de développement et les navigateurs internet. Cette formation est une aventure à chaque fois renouvelée !
Mémo et outils
pour créer et intégrer un webdesign
- Préparer la réflexion de votre webdesign en compilant des informations sur votre projet et en menant un benchmark sur vos sites préférés ;
- Papier / crayon (voir feutres de couleur !) pour les phases de réflexion au brouillon et l’établissement des zonings et wireframes ;
- Des textes et photos au mieux avant le 1er jour, sinon intégrés dans le webdesign Photoshop pour le Jour 2 ;
- Ordinateur équipé de Photoshop (c’est évident) et de Notepad ++ (ou Dreamweaver -> programme à rédapter)
Formation
présentielle
Sur Mesure
Possible
Mise à jour
j-7 à J-1
Distanciel
non réalisable
