Transcription
1. Intro: Bonjour. Ce cours
portera sur la conception d'une page de destination
simple et page de destination
simple et Sigma ainsi que sur les animations
Lawdy. Vous avez peut-être entendu parler
du chargement d'animations, mais ce ne sont que des fichiers
animés qui rendent vos designs
beaucoup plus attrayants. Assurez-vous donc que votre inscription à
ce cours est très courte. C'est
environ dix à 15 minutes. Et vous allez juste
apprendre beaucoup de choses à utiliser les grilles, à comment ces diagrammes dipolaires, certaines sortes de dégradés, également en page automatiquement le
lit et appliquer des animations
de chargement à votre projet Figma. J'espère vous voir
en classe et vous retrouver dans la prochaine vidéo.
2. Quelles sont les animations Lottie ?: Ils vous montrent rapidement ce qu'est exactement
Lawdy Animation. Vous n'en avez peut-être jamais entendu parler, mais vous l'avez probablement
déjà vu lors de vos interactions avec des
sites Web ou des applications mobiles. So I love to go to travel.com ne contient
qu'un tas d'études de cas et de cas de
portfolio
différents que les
designers mettent en ligne. Je dois donc saisir ici
de nombreuses animations pour
vous donner quelques exemples. Cliquons donc par exemple
sur celui-ci en premier. Et sur cette image, vous pouvez voir qu'elle est
animée, qu'elle bouge. C'est donc essentiellement ce qu'est le
chargement d'une animation, juste une
illustration interactive contenant une sorte d'animation. Voici un autre exemple
de cette illustration. Ainsi, par exemple, au lieu d'avoir
deux images statiques simples, vous pouvez l'animer. Les avantages des animations de chargement sont qu'
elles sont plus attrayantes, qu'elles sont plus curieuses et qu'elles retiennent l'attention de votre
utilisateur plus longtemps. C'est pourquoi,
dans cette classe, nous allons l'appliquer à une
simple page de destination. Vous n'avez pas besoin d'utiliser des animations
louées. Si tu ne veux pas.
C'est juste un ajout intéressant. Cela ne
donne pas vraiment beaucoup de
visibilité du point de vue de l'
expérience utilisateur, mais cela concerne simplement
l'esthétique visuelle
et l' engagement de vos utilisateurs. Dans la
vidéo suivante, je vais donc vous montrer exactement où télécharger des animations lumineuses
gratuites pour
vos projets de design Figma.
3. Bibliothèque avec des animations Lottie: Tout d'abord, d'accord,
pouvez-vous réellement obtenir de nombreuses animations
pour votre design Figma ? J'ai donc une très bonne
suggestion à vous faire. Vous êtes libre de l'utiliser, ou vous êtes également libre de rechercher sur Google une autre animation de chargement dans
laquelle vous pouvez trouver une ligne. La créatine est donc un site Web
très simple, avec creative.com. Vous pouvez aller
ici et vous pouvez essentiellement télécharger différentes animations
de chargement, ainsi que des illustrations, des icônes
animées et des icônes. Cliquons donc rapidement
sur de nombreuses animations. Et ici, nous
avons un tas de choix
différents que nous pouvons
appliquer à nos projets. Donc, ici, vous pouvez filtrer soit vous voulez voir
de nombreuses animations gratuitement , soit peut-être que si
vous avez un forfait premium, vous pouvez également filtrer par celui-ci. Revenons donc
aux anciennes animations et je
vous montrerai rapidement comment cela fonctionne. Vous pouvez également le rechercher
ici et en voir d'autres. C'est une belle animation. Donc, par exemple, nous avons cette animation de
découverte. Si vous cliquez dessus, vous pouvez également modifier en
gros les couleurs
de cette animation de chargement. Donc, par exemple, vous voulez le rendre plus bleu et au lieu de le mettre en banque, vous voulez le rendre vert. À titre d'exemple, j'aime vraiment créer, c'est ma
suggestion personnelle, car vous pouvez obtenir de nombreuses
animations très personnalisées pour vos projets. J'adore le lien dans la description du
cours où vous pouvez créer votre
compte gratuitement. Donc, spécifiquement pour celui-ci, nous n'utiliserons qu'une seule
animation de loterie, mais si vous
avez de l'inspiration, par exemple ,
vous êtes libre de télécharger plus de choses et d'
expérimenter la conception de votre interface utilisateur.
4. Conception de page d'atterrissage: Passons maintenant à notre fichier Figma. Et tout d'abord, nous allons
créer un cadre de bureau, comme nous le faisons toujours
dans nos tutoriels. Configurera également rapidement la grille de
mise en page. Et il y aura des colonnes
avec un compte de 12e. Et je vais juste
définir les marges des
deux côtés pour une
valeur de 56 pixels, Gadara entre les colonnes, qui sera de 24 pixels. Cela nous permet de sélectionner
l'outil Texte et de saisir notre titre
ou les paramètres de police. Nous allons changer la police. Et la police sera
également en gras avec les paramètres d'une
taille de 60 pixels. Donc, ici, il est
un peu trop grand, nous allons
donc réduire
la largeur de ce conteneur. Et je vais également le
positionner ici même où commence réellement la première
colonne. Dupliquons maintenant
cette couche de texte avec le raccourci clavier Ctrl-D. Et nous changerons immédiatement
les propriétés en propriétés régulières. Et notre taille de police sera également de 24 pixels. Cela changera également la couleur de
remplissage des piles. Et je vais juste aussi
taper quelques informations que je viens de
trouver au hasard en ligne. Et assurons-nous qu'il est
également correctement aligné sur la première colonne de
notre grille de mise en page. Ensuite, nous allons créer
nos boutons d'appel à l'action
qui seront composés de deux boutons, le principal et le
secondaire. Le premier aura
donc
un texte qui commencera à être créé gratuitement. Je vais également
tout sélectionner ici dans cette couche de texte et
cliquer sur tout le haut. Nous allons donc l'avoir comme ça. Ensuite, je vais travailler avec
la mise en page automatique, pour la rendre plus réactive, car je vais réutiliser
ce bouton encore quelques fois. Cliquons sur Shift
plus un raccourci. Et comme vous pouvez le voir
dans une section ultérieure, nous avons immédiatement créé
une mise en page automatique. Nous allons donc nous
assurer que tout est aligné au centre. Ensuite, nous aurons nos marges
horizontales, rembourrage
horizontal d'
une valeur de 32 pixels et le rembourrage vertical
d'une valeur de 16. Je souhaite également créer le rayon d'angle avec
une valeur de huit. Et puis n'
oublions pas d'ajouter notre échec car pour l'instant,
tout est transparent. Alors, quel est le bouton plus, qui a créé un
remplissage solide et qui
est automatiquement blanc, vous
ne pouvez donc pas vraiment voir
de différence. Mais nous allons
travailler avec des dégradés. Nous allons donc sélectionner un dégradé linéaire. Notre premier marqueur
aura ce type de couleur bleue, et le second
aura quelque chose de plus avec les nuances violettes de la couleur. Faisons également en
sorte d'augmenter l'opacité de notre
deuxième marqueur à 100 %. Et je vais également
modifier rapidement la position des marqueurs et
peut-être juste pour mieux voir
à quoi
cela ressemblera visuellement. Je vais masquer notre grille de mise en page afin que nous puissions la voir plus
en détail. Bien sûr, un
gris foncé avec une couleur bleue et
violette présente un
très mauvais contraste. Alors
changeons-le en blanc. Et je vais à nouveau légèrement modifier leur marqueur ici. Nous allons
réactiver notre grille de mise en page. Assurez-vous également que tout
est correctement aligné. Ensuite, nous aurons également
notre bouteille secondaire, qui n'est en fait que des piles. Alors demandez une démo. Et en fait, pour réduire un peu la taille de nos
boutons,
je vais à nouveau modifier
la taille de la police
pour qu'elle soit je vais à nouveau modifier 18. Vous pouvez voir comment
la mise en page automatique
réagira de la même manière et créera également une bande passante
avec un support. Je vais répéter la même chose
pour ce bouton secondaire. Je vais également passer
rapidement aux plugins. J'ai installé ce plugin
et une communauté de pigments, et ici, je vais
simplement rechercher l'icône. Dépêchons-nous et
déplaçons-le ici, dans notre zone. Et je vais
fermer rapidement ce plug-in
pour le moment. Ensuite, je vais également obtenir la hauteur de la ligne jusqu'à la
vallée de 24 pixels aligner ces
deux éléments et m'assurer que
la distance est de
huit pixels entre les
deux. Ressemblons à un groupe. Nous allons le positionner
un peu plus près de notre bouton. Ensuite, je vais
revenir au
slugging des icônes parce que je voudrais
avoir quelques icônes supplémentaires que je
vais utiliser pour
notre logo et aussi d'autres informations lorsqu'un affichage
apparaît sur notre page de destination. Cherchons donc rapidement une icône qu'ils ont utilisée plus tôt dans certains de
mes projets précédents. Ensuite, je
placerai rapidement quelques
icônes supplémentaires sur cette toile. Très bien,
gardons cette icône ici pour le moment. Et celui-ci, je vais
également changer de couleur, le violet que
j'utilise dans notre bouton. Et saisissons rapidement une
sorte de
logo, de nom, de nom de société. Je vais également modifier la taille, la valeur de 24, ainsi que les couches vectorielles
à l'intérieur de mon cadre, j'augmenterai
la largeur du trait, mais la valeur de deux. Alignons simplement
tout comme ça. Et nous allons également les garder un
peu plus proches les uns des autres. Et finalement, je vais
également le regrouper. Ensuite, saisissons simplement quelques éléments de menu. Je vais le dupliquer quelques
fois parce que je vais
avoir d'autres objets que je
vais simplement renommer rapidement, sélectionner toutes ces couches, puis cliquer sur Ranger et m'
assurer qu'ils sont distants entre eux
se trouvent 64 pixels. Et avec control plus g, je vais aussi
trouver rapidement. Alignons le tout
sur une seule ligne. Et je veillerai également à
ce que notre logo soit aligné avec les
autres éléments situés
sur le côté gauche. Mettons simplement
nos cas d'utilisation de manière à ce
qu' ils soient également alignés sur notre
colonne. Très bien, maintenant je peux rapidement dupliquer ce bouton
pour contrôler plus D et le placer ici et le placer ici
parce que j'aimerais avoir
un autre appel à l'action
, le troisième gratuit. Ensuite, je vais m'assurer que le contenant des
piles a une
largeur fixe car nous dupliquerons à nouveau
le fond et nous
aurons un autre bouton secondaire. Et le texte ici est
peut-être un peu plus court et je ne veux pas le
réduire de manière responsable. Arrêtons-nous donc ici, sinus n, et nous allons aligner
le centre sur le milieu. Et vous pouvez voir
que la largeur
du conteneur reste
la même car nous avons réparée. Avec notre ceinture. Nous allons avoir un
simple remplissage uni
de couleur blanche et nous allons ajouter
un trait d'une valeur d'un pixel. Et notre texte
sera également de couleur foncée. Donc ECS que nous venons de créer un autre bouton que nous allons
simplement placer ici, 24 pixels de l'autre. Regroupons également
ces couches et
veillons à ce qu'elles soient
alignées sur la dernière colonne. Et nous allons également
tout aligner sur le centre. Très bien, parfait. Maintenant, nous avons aussi ce truc que nous allons simplement aller ici. Et je vais juste réduire leur valeur à 16 x 16 pixels. Et pour chacun des vecteurs, je veux réduire son
poids de trait à une valeur de un. Et saisissons simplement quelques
fonctionnalités pour ce projet, changeons-les en fonctionnalités habituelles. Et notre hauteur de ligne
sera également de 16 pixels parce que les
deux, c'est un peu trop. Ensuite,
maintenons une distance de quatre pixels entre chacun d'eux sélectionnons ces deux
couches
et appuyons sur Shift
plus a pour créer une
autre mise en page automatique. Très bien, parfait. Nous allons le
dupliquer deux fois avec control plus C. Et instant, qu'est-ce qui est cool
avec la mise en page automatique ? Parce que je vais faire
glisser une autre icône ici et vous pourrez la
voir immédiatement. Il suffit d'adapter la
déposition et faire de
même
avec un troisième puits, d'
ajouter une troisième étiquette et de supprimer également
notre icône en forme de pinceau. Il ne nous reste plus qu'à modifier
le texte dans ces deux couches. Très bien, maintenant passons à
tout l'un pour l'autre. Cliquez sur Tidy Up, et je vais juste avoir
la distance entre
ces trois étiquettes,
la vallée augmentant de 32 pixels. Nous pouvons également récupérer
ces deux couches, les
regrouper également. Ensuite, nous allons
sélectionner notre titre,
notre corps de texte et nos boutons
, puis les teinter également. Et en gros, ils ont une valeur de 60 pixels entre eux tous. Ensuite, il les
regroupera à nouveau. Et en gros, nous pouvons simplement
légèrement modifier sa position. Ce groupe, ces couches aussi. Donc, à l'heure actuelle, nous avons essentiellement les bases de cette page de destination. Donc, ce que je dois faire,
c'est retourner ma plateforme créative et
rechercher des illustrations animées que nous allons télécharger. Passons en fait à la barre de recherche et je
vais taper le projet. Vous pouvez voir ici une
série de résultats. Mais ce que j'ai déjà
utilisé et que j'ai montré dans la démo, ce
sera ce projet Ai. Cliquons par clic dessus. Et ce qui est cool,
c'est que vous pouvez essentiellement modifier les couleurs de ces animations de loterie Si vous souhaitez les
télécharger sous forme d'image statique, vous pouvez également cliquer
sur cette option qu'il le
téléchargera simplement comme illustration, mais je veux le garder sous forme
d'animation, bien sûr. Il suffit donc de cliquer sur
l'une de ces couleurs. Et je vais vraiment
y retourner et appuyer sur mon bouton. Je vais juste aller chercher rapidement ce code couleur violet et le
coller ici dans
cette animation délirante. Vous pouvez voir que le changement est le léger changement de cette couleur. Ensuite, nous passerons également
au marqueur de couleur bleue, copierons ce code hexadécimal et le collerons à la place
de la couleur rose. Vous pouvez également constater immédiatement ce grand changement et il en va
de même avec notre obscurité. Je vais le rendre un peu plus foncé, gros quelque chose comme une couleur
plus noire. Vous pouvez donc également modifier une couleur de
fond si vous le souhaitez. instant, il est blanc, mais je ne vais pas le changer du tout. Cliquons donc sur Télécharger. Et ici, j'ai la
possibilité de télécharger gratuitement le GIF
MP4 ou MP4 adjacent. Ce dont Glenn a besoin
pour Figma, bien que compatible, c'est un fichier GIF. Vous pouvez également augmenter la taille de
l'ensemble jusqu'à son maximum. Il va faire 512 pixels. Je ne sais pas quelles sont
les valeurs mortes, mais c'est votre Pmax.
Nous allons l'utiliser. Passons au téléchargement. Parfait, comme je
travaille dans le navigateur, je peux immédiatement récupérer ce téléchargement et
le placer ici même dans mon projet. Nous pouvons également l'aligner sur
le côté droit de notre bouton d'
appel à l'action. Et je vais également sélectionner cela
et tout aligner au centre. Donc, pour l'instant, vous ne
verrez
peut-être pas vraiment ce type d'
animation parce que nous avons juste cette animation de
loterie et elle ne semble pas bouger du tout. Mais le test est passé,
passons simplement au mode présentation. Et ici, vous pouvez
réellement voir que nous avons cette
belle animation. C'est ainsi que nous
téléchargeons simplement le fichier GIF depuis Crazy, le collons ici
et créons votre page de destination. Ce que je veux également faire dans ce projet, c'est
ajouter une sorte d' arrière-plan
flou pour
créer un peu plus de contraste entre cette
animation de chargement et mon arrière-plan. Je vais donc simplement passer à un autre plugin appelé blobs, puis nous allons générer
un blob aléatoire. Il suffit de l'insérer. Et nous pouvons en gros aller
ici et changer sa position
jusqu'en bas de notre page de destination Je vais également changer sa couleur
pour quelque chose comme ça. Nous allons passer aux
effets et appliquer un flou de couche pour obtenir une valeur
de 200 pixels, peut-être un peu plus. Vous pouvez donc voir que nous avons immédiatement ce fond
flou. Permettez-moi donc de modifier
rapidement la position
de ces deux couches. Et je vais simplement le
dupliquer rapidement à nouveau avec
un contrôle plus D. Je vais supprimer cet effet et modifier également le
remplissage en blanc. Et quel raccourci clavier Shift
plus X. Nous pouvons voir que nous venons
d'avoir un contour de trait qui
va diminuer sa largeur. Nous allons donc avoir un
effet positif que nous
allons appliquer à notre projet. Je vais également l'augmenter rapidement et
l'augmenter à nouveau. Nous allons donc sélectionner
ces deux blocs avec le contour et
les aligner au centre. Je vais également contrôler G avec les raccourcis afin que nous
puissions réellement le regrouper. Et nous pouvons aussi jouer
avec sa possession, peut-être légèrement alternée et
créer une sorte de contraste. Dupliquons également rapidement
notre bloc flou. Je vais également le diminuer
lors d'une exposition et modifier son angle de rotation. Et nous allons également choisir cette
couleur violette, que je vais rendre un peu plus claire pour qu'elle
ne soit pas trop perceptible. Et nous allons simplement le
placer complètement derrière dans notre panneau Calques
sur ce canevas. C'est quelque chose que vous pouvez
faire
approximativement facilement en tant que page de destination. Revenons en fait ici et voyons les modifications que nous appliquons
à cette page de destination. C'est donc ainsi que vous pouvez appliquer de simples animations d'audit à votre page de destination ou à
tout autre design et rendre beaucoup plus intéressante
pour vos utilisateurs finaux. Alors les gars, assurez-vous utiliser le lien sous cette vidéo pour obtenir
un code de réduction de
10 % sur la création. Et j'espère que vous avez apprécié ce tutoriel et j'espère vous
revoir la prochaine fois.
Tetiana G, UX Designer
