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 !
Tuto composant ce bundle :
Designer un Portfolio - Episode 1 : la version mobile (voir la fiche produit)
- Création de la grille et choix de la palettes de couleurs 00:07:22
- Designer le header avec le logo, les réseaux sociaux et l'icône dark mode 00:08:30
- Ajouter le contenu texte de présentation 00:04:22
- Designer les filtres du portfolio avec un effet de scroll horizontal 00:06:30
- Ajouter la galerie photo et créer le footer 00:06:44
- Créer un prototype pour modifier le filtre appliqué et donc les images affichées 00:05:53
- Créer un effet de lightbox au clic sur une image 00:06:32
- Mettre en place le dark mode lors du clic sur l'icône présent dans le header 00:05:55
- Mise en situation sur un mockup des 2 versions light & dark 00:08:40
Designer un Portfolio - Episode 2 : Tablette & Bureau (voir la fiche produit)
- Intro, création de la frame tablette, grille & colonnes 00:05:32
- Créer le header sur tablette 00:03:22
- Positionner le titre et le sous titre sur tablette 00:04:54
- Filtres, galerie photos et footer sur tablette 00:07:36
- Mise en place d'une lightbox sur tablette 00:06:15
- Création de la version bureau 00:12:50
- Découverte et utilisation des composants interactifs 00:08:54
- Prototype sur le filtrage des images, dark mode et conclusion 00:11:00
Intégration d'un Portfolio responsive en Mobile First (voir la fiche produit)
- Intro, Google Fonts, Librairie icônes gratuit00:08:05
- Création du CSS de base : titres, variables, container... 00:15:15
- Mettre en place la structure HTML de base 00:16:18
- Intégrer le header en version mobile 00:10:01
- Intégrer le contenu d'intro ainsi que le footer en version mobile 00:04:39
- Intégrer la partie portfolio avec le système de filtres en version mobile 00:13:07
- Adapter le site pour les écrans plus grands grâce aux media queries 00:15:43
- Ajouter le nom du projet par dessus la photo lors du passage de la souris 00:10:45
- Le système de filtres pour filtrer les projets par catégorie 00:11:41
- Création du dark mode pour faciliter lecture du site quand il fait sombre 00:10:08
- Ajouter une fancybox pour ouvrir les photos ou vidéos par dessus le site 00:08:02
- Conclusion 00:01:54
Formateur : Adrien Gazaix
-
Bonjour, il manque les fichiers sources à ce tutoriel, cela m'aurait été d'une grande aide...
-
Super tuto ! Rapide et efficace. De plus le design du site est top 👌. Merci beaucoup !
-
Avec quelles versions de logiciels ce tuto est-il compatible ?HTML , CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés