Formation WebDesign Lyon
En participant à notre Formation WebDesign, 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’HTML5/CSS3 et du Responsive Web Design, cette formation vous rendra autonome pour la conception d’une charte graphique.
✔ Stage en présentiel (Lyon & Paris) ou distanciel
✔ Formation certifiante
✔ Formateurs experts
✔ 5 participants maximum
✔ Organisme situé Part-Dieu sud
Référence : PCWEB662
Nombre de stagiaires max : 5
Public visé : Toute personne concernée par la création d'une charte graphique.
Objectifs :
Connaître les règles et les techniques de création d’une charte graphique.
Savoir exploiter 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 ou un Mac.
Validation : Certification
Durée : 9 jour(s) / 63 heures
Points abordés :
DEFINIR SON IDENTITE VISUELLE & PHOTOSHOP WEBDESIGN (1 jour / 7 heures)
- Eléments de base et objectifs
- Le sens des formes et des couleurs
- Le choix en fonction de votre activité
- La typographie
- Adapter son travail au support web
PHOTOSHOP WEBDESIGN : INTRODUCTION AU WEB
- Les standards graphiques du web
- Créer 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
INTRODUCTION A l’HTML5/CSS3 (3 jours / 21 heures)
- 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
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
Le W3C et WHATWG
- Les standards du web
- Les normes W3C
- Contraintes des supports mobiles
LES APIS 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
LE CSS3
- Les bordures arrondies
- La transparence
- Les ombres portées
- Mise en page
- Les animations (transitions et transformations)
INTRODUCTION AU RESPONSIVE (2 jours / 14 heures)
- Les principes du responsive web design
- Le concept du « Mobile First »
- Les différentes résolutions
- Contenant/Contenu
- Comptabilité avec les navigateurs
- Solutions techniques pour les navigateurs non compatibles
LE DESIGN FLUIDE
- % OU em
- min-width et max-width
- Les bonnes pratiques
- Portrait ou paysage
LES MEDIAS QUERIES
- Screen
- Média queries CSS2
- Média queries CSS3
- Les opérateurs logiques
GRILLE FLUIDE
- Le principe de base
- Grille et design fluide
- Images fluides et police fluide
- Web font
LES OUTILS
- Les frameworks (Bootstrap, Foundation, …)
- La suite d’outils Adobe Edge
- Utilisation de Modernizr
- HTML shiv
- Respond.js
- Outils de test
- Utilisation de Dreamweaver
OPTIMISATION
- Sprite CSS
- Polices d’icônes (icomoon, glyphicons, awesome font, …)
- « Minifier » le code
- Concept de l’Adaptative Design
ILLUSTRATOR (3 jours)
- 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
MISE EN APPLICATION
dans nos locaux
à distance
dans toute la France
Nos formations ne sont pas soumises à la TVA
(1) Les dates sont succeptibles d'être modifiées selon les places disponibles et les contraintes pédagogiques.
Nos formations ne sont pas soumises à la TVA
(1) Les dates sont succeptibles d'être modifiées selon les places disponibles et les contraintes pédagogiques.
