Designer un Portfolio - Episode 1 : la version mobile
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Designer un Portfolio - Episode 1 : la version mobile

Adrien Gazaix
10,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto Figma en vidéo, nous allons apprendre ensemble les différentes étapes de création pour designer un Portfolio.
Cet épisode numéro 1 sera consacré à la version mobile avec la création d'un prototype fonctionnel.

Nous prendrons pour exemple le portfolio d'une photographe qui voudrait présenter son travail classé dans différentes catégories.
Il y aura donc un système en scroll horizontal pour filtrer les images de la galerie.

Je vous montrerai aussi comment on peut simuler très facilement un effet de lightbox dans Figma sans dupliquer la maquette inutilement.

Enfin, un dark mode (version foncée du site) sera créé pour faciliter la lecture du site lorsque la lumière ambiante commence à baisser.

Pour avoir une idée de ce que l'on va réaliser ensemble, vous pouvez visionner l'extrait vidéo sur la fiche du tuto.
Les polices de caractères utilisées dans le tuto, ainsi que le fichier Figma obtenu à la fin de la formation sont inclus avec la vidéo.
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 vidéo.

Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Création de la grille et choix de la palettes de couleurs
Leçon 2
Designer le header avec le logo, les réseaux sociaux et l'icône dark mode
Leçon 3
Ajouter le contenu texte de présentation
Leçon 4
Designer les filtres du portfolio avec un effet de scroll horizontal
Leçon 5
Ajouter la galerie photo et créer le footer
Leçon 6
Créer un prototype pour modifier le filtre appliqué et donc les images affichées
Leçon 7
Créer un effet de lightbox au clic sur une image

Plan détaillé du cours

Leçon 1Création de la grille et choix de la palettes de couleurs
07m22s
Leçon 2Designer le header avec le logo, les réseaux sociaux et l'icône dark mode
08m30s
Leçon 3Ajouter le contenu texte de présentation
04m22s
Leçon 4Designer les filtres du portfolio avec un effet de scroll horizontal
06m30s
Leçon 5Ajouter la galerie photo et créer le footer
06m44s
Leçon 6Créer un prototype pour modifier le filtre appliqué et donc les images affichées
05m53s
Leçon 7Créer un effet de lightbox au clic sur une image
06m32s
Leçon 8Mettre en place le dark mode lors du clic sur l'icône présent dans le header
05m55s
Leçon 9Mise en situation sur un mockup des 2 versions light & dark
08m40s

Aperçus

Avis des apprenants

Détail des avis
23
Apprenants
9
Commentaires
5/5
Note moyenne
5/5
9
4/5
0
3/5
0
2/5
0
1/5
0
Marc Molon
Marc Molon
Publié le 02/04/2024
Idéal pour les débutants, tuto simple et clair avec les petites astuces en prime. parfait !
Besselbach
Besselbach
Publié le 21/01/2024
est ce que la version de base donc gratuite de Figma suffit pour réaliser le tuto.
Jean-Pierre Annen
Jean-Pierre Annen
Publié le 15/09/2022
Très bonne introduction à Figma
Adrien Gazaix
Adrien Gazaix
Merci a toi !!!

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Figma

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Les polices utilisées, ainsi que la maquette Figma obtenue à la fin de la formation.

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données