10,00

Tuto Designer un Portfolio - Episode 1 : la version mobile avec Figma

10,00

  • Une formation vidéo de 1h28s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Designer un Portfolio - Episode 1 : la version mobile

ajouter ce cours aux favoris retirer ce cours des favoris

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 !

Table des matières de cette formation Figma (durée : 1h28s)

    • 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



Formateur : Adrien Gazaix

Adrien Gazaix a publié 189 tutoriels et obtenu une note moyenne de 4,8/5 sur 56 282 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

6
avis laissés
5 étoiles
6
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0

  • 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.
accédez à plus de 1436 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données