CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design - en HTML5 et CSS3

Formation Responsive Web Design par Thierry Audou

Retour à la formation
Chapitre 1 Leçon 1
Précédent
Suivant

Apprenez à réaliser des maquettes fluides sous Photoshop et à les intégrer en HTML en utilisant les médias query et les pourcentages.

Détails de la leçon

Description de la leçon

Dans cette formation complète sur le Responsive Web Design, Thierry Audou, formateur à Gobelin l'école de l'image, vous commence par l'apprentissage de la réalisation de maquettes sous Photoshop. Vous apprendrez à concevoir des maquettes en utilisant des grilles fluides, puis vous passerez à leur intégration en HTML. Vous utiliserez les médias query pour adapter le design aux différentes tailles d'écran et vous apprendrez à manipuler les pourcentages pour créer des pages web adaptatives.

La formation ne s'arrête pas là. Nous aborderons également des notions plus avancées comme la réalisation d'images en SVG, la création de vidéos en plein écran, et l'optimisation des images notamment avec la conception et la réalisation de sprites. Cette formation est conçue pour vous fournir toutes les compétences nécessaires pour créer des sites web modernes et responsives.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Apprendre à réaliser des maquettes fluides sous Photoshop.
  • Intégrer ces maquettes en HTML en utilisant les médias query et les pourcentages.
  • Découvrir des techniques avancées comme la création d'images en SVG et de sprites.
  • Optimiser les images et vidéos pour une meilleure performance web.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML et CSS, ainsi qu'une familiarité avec Photoshop.

Métiers concernés

Cette formation est particulièrement utile pour les métiers suivants :

  • Développeur Web
  • Designer UX/UI
  • Intégrateur HTML/CSS
  • Graphiste Web

Alternatives et ressources

En alternative à Photoshop, vous pouvez utiliser d'autres logiciels de design comme Sketch ou Figma. Pour l'intégration HTML, des outils comme Webflow ou Bootstrap Studio peuvent également être utilisés.

Questions & Réponses

Les techniques utilisées pour créer des pages web adaptatives incluent l'utilisation de grilles fluides, des médias query et l'utilisation de pourcentages.
Les avantages de l'utilisation des images en SVG incluent leur évolutivité sans perte de qualité, leur légèreté en termes de taille de fichier, et leur facilité d'animation.
Il est important d'optimiser les images pour le web afin de réduire le temps de chargement des pages, améliorer les performances du site et offrir une meilleure expérience utilisateur.