15,00

Tuto Atelier WEB DESIGN : Designer un Blog minimaliste de A à Z sur Figma avec Figma

15,00

  • Une formation vidéo de 2h22m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Atelier WEB DESIGN : Designer un Blog minimaliste de A à Z sur Figma

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 Blog minimaliste de A à Z sur le logiciel Figma.
A la fin de cet atelier pratique, vous obtiendrez un prototype fonctionnel de notre Blog qui pourra être partager pour validation par exemple auprès d'un client, ainsi que toutes les maquettes nécessaires à l'intégration en HTML/CSS.

Au programme de cet Atelier WEB DESIGN création d'un blog dans Figma :

Voici les notions que nous allons aborder dans ce cours en ligne :

  • Utiliser une palette de couleurs
  • Créer une grille adaptée au blog minimaliste
  • Créer un logo à partir d'une typographie choisie
  • Designer un menu de navigation
  • Apprendre à bien aérer le contenu pour que le résultat soit agréable à l'oeil
  • Utiliser des images avec différents types d'affichage : fill, crop...
  • Créer un composant avec le footer pour qu'il soit réutilisable/modifiable facilement sur toutes les maquettes
  • Utiliser les variants pour créer un effet de Hover sur article
  • Découvrir l'auto layout pour créer un bouton ou une catégorie qui va s'allonger automatiquement en fonction du texte
  • Faire la connaissance de certains plugins Figma pour être plus rapide
  • Ajouter un pattern sur un bandeau pour donner du volume au design
  • Utiliser des modes de fusion pour colorer une image
  • Utiliser le HSL pour jouer avec la luminance d'une couleur choisie sur la palette de départ et ainsi créer des déclinaisons
  • Des conseils pour garder une homogénéité sur toutes les maquettes, par exemple sur l'utilisation des tailles de titres
  • Et plein d'autres choses encore...

Pour avoir une idée de tout ce que l'on va réaliser ensemble pendant ces 2h20 de vidéo, vous pouvez visionner l'extrait vidéo sur la fiche du tuto.

INCLUS avec ce Tuto : Tous les fichiers nécessaires à la création des maquettes : Images, Icônes SVG, Polices de caractères, le fichier Figma de départ avec la palette de couleurs, et bien sur le fichier Figma final avec toutes les maquettes obtenues à la fin de la formation.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrer des difficultés pendant ou après le visionnage de la vidéo.
Bon atelier !

Table des matières de cette formation Figma (durée : 2h22m)

    • Introduction, fichiers sources, palette de couleurs et grille gratuit 00:08:51
    • Création du Logo à partir d'une police de caractère 00:09:12
    • Création du menu de navigation 00:05:35
    • Designer le Footer du site et apprendre à créer un composant réutilisable 00:16:21
    • Designer un Bloc d'article et en faire un composant 00:14:59
    • Dupliquer les articles sur la page d'accueil et remplir avec du contenu 00:10:27
    • Designer le single d'un article 00:21:04
    • Designer la page : à propos, avec un texte sur l'auteur 00:07:57
    • Designer la page de contact avec un formulaire 00:17:16
    • Designer la page d'une catégorie listant des articles 00:12:26
    • Créer un prototype animé pour naviguer simplement entre les maquettes 00:11:11
    • Conclusion, partage du prototype et proposition d'une suite à cet atelier 00:07:25



Formateur : Adrien Gazaix

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

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de izigrafik laissé le 17/09/2021
    Bonjour Adrien, je suis enchanté par cette formation, comme toutes celles que vous faîtes !! J'aimerais beaucoup voir une suite : à savoir l'intégration en HTML / CSS / Wordpress car c'est un domaine qui me passionne et je suis en reconversion professionnelle pour devenir Webdesigner ;) J'espère vous retrouver bien vite ! Merci encore pour tout ce que vous faîtes, c'est vraiment génial !!! Eric REYNAUD
    "Ah c'est super de devenir web designer ! Je te souhaite de réussir en tout cas et tant mieux si mes tuto peuvent t'aider à t'améliorer 😉 la suite est en préparation, ça arrive bientôt !"

  • 5
    avis de grassel laissé le 15/09/2021
    Je découvre Figma au travers de ce tuto très concret : super ! Bien sûr aller jusqu'à l'intégration dans WP serait un plus ;=)
    "Super merci pour ton retour très positif ! Je commence la préparation pour intégrer les maquettes HTML CSS ça devrait pas tarder à sortir sur tuto.com 😉 a très vite !"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Figma
  • Que contient le fichier source ?
    Tous les fichiers nécessaires à la création des maquettes : Images, Icônes SVG, Polices de caractères, le fichier Figma de départ avec la palette de couleurs, et bien sur le fichier Figma final avec toutes les maquettes obtenues à la fin de la formation.
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1357 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données