Nos
formations

PAO, photo et vidéo Création de site web

Webmarketing & Référencement

Community Management & Stratégies sociales

Tourisme et Médiation

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.

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

Les
formateurs

flèche

Formation web design avec Photoshop et CSS

“

Cette formation web design s’adresse aux graphistes qui souhaitent se perfectionner dans l’ergonomie web et l’intégration HTML/CSS.

Ce stage se déroule en 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.

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

S'inscrire

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

S'inscrire

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.