Cette formation au Webdesign pour apportera les compétences nécessaires à la création d'une charte graphique et à son utilisation pour le développement d’un site web. La charte 
graphique devra également positionner votre site : le design n'est pas le même si l'on veut évoquer le glamour ou les bonnes affaires... De même, l'ergonomie est très importante car elle améliore l'expérience utilisateur et participe à l'augmentation du ROI (retour sur investissement). On parle aujourd'hui de design émotionnel car l'on souhaite créer un lien propre avec l'internaute, lui transmettre un ressenti. A travers la maîtrise d'Illustrator, de Photoshop WebDesign, de l'HTML/CSS et du Responsive Web Design, cette formation vous rendra autonome pour la conception d'une charte graphique.
Tarifs
| Lyon | ||
|---|---|---|
| Stages | Durée | Coût HT |
| Formation WebDesigner | 10 jour(s) / 70 heures | 3150€ |
| Stage individuel sur mesure (intra-entreprise) | sur devis | |
Pour une formation en intra-entreprise dans votre ville, merci de nous contacter.
Nos prochaines sessions
Pour vous pré-inscrire, cliquez simplement sur la date qui vous convient.
Programmes
Formation WebDesigner 
Télécharger le programme
Public visé : Toute personne concernée par la création d'une charte graphique.
Objectif : Connaître les règles et les techniques de création d'une charte graphique. Savoir utiliser une charte graphique pour le développement web.
Compétences visées :
- Etre capable de créer une charte graphique avec Illustrator et Photoshop
- Savoir découper et utiliser une charte pour le développement web
- Préparer sa charte graphique pour le Responsive Design (site multisupports)
Pré-requis : Savoir utiliser un ordinateur.
Durée : 10 jour(s) / 70 heures
Points abordés :
- NOTIONS DE BASE DE L'HTML/CSS
- Historique
- Généralités (définition, fonctionnement, écriture)
- Structure d’un document
- Balises et attributs
- HTML/CSS : MISE EN PAGE
- Balise META
- Balise DIV
- Balise BR
- Balise HR
- Fond d’écran
- Couleur du texte
- Styles
- Les Tableaux (balises Table, balise TR, balise TD, Thead, Tbody, TH, Border-collapse)
- HTML/CSS : LIENS
- Balise A
- L’attribut TITLE
- Ancres
- FTP
- Mailto
- Créer un lien sur une image
- Mise en forme du lien
- HTML/CSS : IMAGES
- Optimiser une image pour le web
- Balise IMG
- L’attribut ALT (texte alternatif)
- Alignement des images
- Images en ligne
- Images utilisées comme ancre
- Image MAP
- HTML/CSS : LES FORMULAIRES
- HTML CSS : HOMOGENEISATION DE LA PRESENTATION
- Initiation à l’ergonomie web
- Choix d’une structure
- Choix des couleurs et de la typographie
- Les sites à connaître
- HTML/CSS : RESPECT DES STANDARDS
- Présentation et rôle du W3C
- Créer un code valide
- Balises et attributs obsolètes
- HTML/CSS : FEUILLES DE STYLE CSS
- Les sélecteurs avancés
- Combiner les sélecteurs
- Grouper les sélecteurs
- Optimiser son code CSS
- Les pseudo-classes
- Manipulation des propriétés CSS
- PHOTOSHOP WEBDESIGN: INTRODUCTION AU WEB
- Les standards graphiques du web
- PHOTOSHOP WEBDESIGN : CREER UNE INTERFACE
- Mise en page d'une charte graphique
- PHOTOSHOP WEBDESIGN : DECOUPER ET EXPORTER
- Utilisation des tranches
- Exportation de la charte graphique
- Gérer les paramètres de sortie après l'exportation
- PHOTOSHOP WEBDESIGN : UTILISER DREAMWEAVER
- Retouche du code HTML Photoshop
- Mise en page CSS
- Création d'une template Dreamweaver
- RESPONSIVE DESIGN : INTRODUCTION
- L'histoire de l'HTML5
- L'HTML5 d'aujourd'hui
- L'HTML5 de demain
- Pourquoi faire le choix de l'HTML5
- Connaitre la compatibilité des navigateurs
- RESPONSIVE DESIGN : LE LANGAGE HTML5
- Le Doctype
- Les nouvelles balises
- Les nouveaux attributs
- Les balises et attributs obsolètes
- Les principales balises
- La structure d'une page
- Balises Vidéo et audio
- Balises de formulaire
- RESPONSIVE DESIGN : LES APIS DE L'HTML5
- Le dessin avec la balise Canvas
- Le drag and drop
- Le stockage de données
- La gestion des évènements
- La géo-localisation
- RESPONSIVE DESIGN : LE CSS3
- Les bordures arrondies
- La transparence
- Les ombres portées
- Mise en page
- Les animations (transitions et transformations)
- ILLUSTRATOR : RAPPEL DES NOTIONS DE BASE
- La chaine graphique
- Formats de document, plans de travail
- Tracés, outils de transformation
- Attributs de dessin, pathfinder
- Outils de texte et vectorisation
- ILLUSTRATOR : PARAMETRAGES
- Préférences, personnalisation des palettes
- Profils colorimétriques
- L'aplatissement des transparences
- ILLUSTRATOR : FILTRES, EFFETS, TRANSPARENCE FORMES, MOTIFS, STYLES ET SYMBOLES
- Utilisation, palettes
- Création et paramétrages
- La palette Aspect
- ILLUSTRATOR : TYPOGRAPHIE
- Notions sur les règles de typographie
- Habillage de texte
- Styles de caractères et de paragraphe
- Texte curviligne
- ILLUSTRATOR : LE GRAPHEUR
- Création et modification de graphiques
- Importation et saisie de données
- ILLUSTRATOR : LES IMAGES IMPORTEES
- Format de fichier et résolution, modèles, palette Liens
- Recadrage, transformations
- Modes de fusions
- Vectorisation d'images
- Masques d'écrêtage
- ILLUSTRATOR : FONCTIONS AVANCEES
- Interactivité SVG
- Exportation pour le web
- Création d'animations Flash
- ILLUSTRATOR : LIENS INTER LOGICIELS
- Importation dans QuarkXPress, InDesign
- Liens avec Photoshop , les objets dynamiques
- ILLUSTRATOR : UTILISATION DE LA 3D
- Créer des perspectives en 3D
- Définir les zones d'ombres et les sources lumineuses
- Appliquer des placages sur les objets
- MISE EN APPLICATION