En participant à notre Formation WebDesigner (sur Lyon), vous saurez mener votre réflexion en amont, afin d'imaginer et de créer la charte graphique idéale. Facteur émotionnel par excellence, le webdesign doit non seulement fait partie intégrante de l'identité visuelle de l'entreprise mais également répondre aux attentes des internautes en terme d'émotion. En effet, la charte graphique détermine en grande partie la première impression en provoquant chez l'internaute des réactions affectives (préférence) et cognitives (crédibilité), plus encore que l'architecture du site.
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 WebDesign | 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 WebDesign 
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