Designer un Portfolio - Episode 1 : la version mobile
Designer un Portfolio - Episode 1 : la version mobile
Dans cette formation complète de plus de 4h de vidéo, je vous propose de découvrir ensemble comment designer un Portfolio sur Figma en version mobile/tablette/bureau et ensuite comment l’intégrer en utilisant du HTML, CSS et jQuery.
Nous prendrons pour exemple le portfolio d'une photographe qui voudrait présenter son travail classé dans différentes catégories.
On mettra en place un système de scroll horizontal pour les filtres, un dark mode pour améliorer le confort de lecture dans une pièce sombre, une lightbox pour visionner les photos en grand format…
Au programme de ce bundle Design & Intégration d’un Portfolio :
- Episode 1 : Designer la version mobile du portfolio avec la mise en place d’une grille, d’une palette de couleurs, créer un header avec des icônes de réseaux sociaux, simuler une lightbox sur le prototype animé, et mise en situation des 2 versions sur un mockup.
- Episode 2 : Décliner le design créé précédemment sur tablette/bureau avec une adaptation de la grille des projets du portfolio, découverte des composants interactifs et tests sur prototypes animés.
- Episode 3 : Intégration responsive de la maquette en partant de la version mobile et l'adapter petit à petit pour les écrans plus grands (tablette & bureau) grâce aux media queries.
Je vous invite à regarder l’extrait vidéo pour vous rendre compte du résultat final obtenu à la fin de la formation.
Toutes les sources sont fournies avec la formation.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrez des difficultés pendant ou après le visionnage de la formation.
Bonne formation !
Cours dans ce bundle
Designer un Portfolio - Episode 2 : Tablette & Bureau
Designer un Portfolio - Episode 2 : Tablette & Bureau
Intégration d'un Portfolio responsive en Mobile First
Intégration d'un Portfolio responsive en Mobile First
Plan détaillé des cours
Leçon 1Création de la grille et choix de la palettes de couleurs
07m22
Leçon 2Designer le header avec le logo, les réseaux sociaux et l'icône dark mode
08m30
Leçon 3Ajouter le contenu texte de présentation
04m22
Leçon 4Designer les filtres du portfolio avec un effet de scroll horizontal
06m30
Leçon 5Ajouter la galerie photo et créer le footer
06m44
Leçon 6Créer un prototype pour modifier le filtre appliqué et donc les images affichées
05m53
Leçon 7Créer un effet de lightbox au clic sur une image
06m32
Leçon 8Mettre en place le dark mode lors du clic sur l'icône présent dans le header
05m55
Leçon 9Mise en situation sur un mockup des 2 versions light & dark
08m40
Leçon 1Intro, création de la frame tablette, grille & colonnes
05m32
Leçon 2Créer le header sur tablette
03m22
Leçon 3Positionner le titre et le sous titre sur tablette
04m54
Leçon 4Filtres, galerie photos et footer sur tablette
07m36
Leçon 5Mise en place d'une lightbox sur tablette
06m15
Leçon 6Création de la version bureau
12m50
Leçon 7Découverte et utilisation des composants interactifs
08m54
Leçon 8Prototype sur le filtrage des images, dark mode et conclusion
11m
Leçon 1Intro, Google Fonts, Librairie icônes
08m05
Leçon 2Création du CSS de base : titres, variables, container...
15m15
Leçon 3Mettre en place la structure HTML de base
16m18
Leçon 4Intégrer le header en version mobile
10m01
Leçon 5Intégrer le contenu d'intro ainsi que le footer en version mobile
04m39
Leçon 6Intégrer la partie portfolio avec le système de filtres en version mobile
13m07
Leçon 7Adapter le site pour les écrans plus grands grâce aux media queries
15m43
Leçon 8Ajouter le nom du projet par dessus la photo lors du passage de la souris
10m45
Leçon 9Le système de filtres pour filtrer les projets par catégorie
11m41
Leçon 10Création du dark mode pour faciliter lecture du site quand il fait sombre
10m08
Leçon 11Ajouter une fancybox pour ouvrir les photos ou vidéos par dessus le site
08m02
Leçon 12Conclusion
01m54
Avis des apprenants