Formation WebDesign Lyon

Partager :

Maîtrisez la création de chartes graphiques multi-supports

Découvrez la Formation WebDesign à Lyon, apprenez à créer des designs impressionnants

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.

Infos pratiques Formation Webdesign

  • Stage en présentiel (Lyon & Paris) ou distanciel
  • Formation certifiante
  • Formateurs experts
  • 5 participants maximum
  • Organisme situé Part-Dieu sud

Nos formations Webdesign

Formation Webdesign sur mesure

Notre programme de formation :

Référence de la formation : 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.

Pré-requis :

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)

Durée :

9 jours / 63 heures

Points abordés :

Définir son identité visuelle & Photoshop webdesign (1 jour / 7 heures)

  • Élé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 : découper 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 à 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 : paramétrages

  • 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 importées

  • Format de fichier et résolution, modèles, palette Liens
  • Recadrage, transformations
  • Modes de fusions
  • Vectorisation d’images
  • Masques d’écrêtage

Illustrator : fonctions avancées

  • 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 pratique

Formation WebDesign : Maîtrisez les Fondamentaux avec Adobe Illustrator

Dans les locaux Devictio à Lyon

3 290,00 € 365,56 € / jour
9 jours / 63 heures

Formation WebDesign : Maîtrisez les Fondamentaux avec Adobe Illustrator

Formation à distance

3 290,00 € 365,56 € / jour
9 jours / 63 heures

Formation WebDesign : Maîtrisez les Fondamentaux avec Adobe Illustrator

Formation sur mesure

Formations complémentaires

Je m'inscris à cette formation Devictio Formations à Lyon

Envoi en cours...
* : Les champs marqués d'un astérisque sont obligatoires.
Envoi en cours...
* : Les champs marqués d'un astérisque sont obligatoires.
Envoi en cours...
* : Les champs marqués d'un astérisque sont obligatoires.