Transcription
1. Bienvenue !: Bienvenue dans un autre cours Sigma, en quelques leçons, vous apprendrez à créer un web professionnel désespéré des fins de gestion de projet, à me présenter
rapidement. Je m'appelle Jana. Je suis concepteur UX
et j'aime créer un contenu éducatif sur
Figma et le design de la balle. Pendant ce cours, je
vais vous guider tout
au long du processus, du
début à la fin, comment créer un tableau de bord Web. Cela signifie que nous commencerons par
configurer la grille de calques
et, plus tard, nous passerons à la conception de la barre de navigation, icônes, de l'image de profil et d'autres éléments
du tableau de bord. En fin de compte, je vous
encourage à m'envoyer votre travail afin que je puisse vous
faire part de mes commentaires. De cette façon, vous
pouvez apprendre et développer vos compétences en conception. Alors dépêchez-vous, inscrivez-vous
à ce cours, et j'espère vous voir
dans la prochaine vidéo. Nous commencerons par les
bases du retard sur la grille.
2. Configuration des grilles de mise en page: Bienvenue dans la première partie de
cette classe où nous allons mettre en place une grille
pour notre tableau de bord. Et la configuration d'une grille est une
bonne pratique avant de commencer à
concevoir n'importe quel type d' interface utilisateur, car avec la grille ou les éléments de notre
cadre peuvent être cohérents. Pour commencer, sélectionnons
rapidement un cadre et nous allons
créer un tableau de bord Web. Dans les cadres prédéfinis,
nous allons donc sélectionner
un cadre de bureau. Je vais rapidement le renommer. La première étape consistera à
accéder aux grilles de mise en page et à créer la
première grille ici. Nous allons donc commencer
par la grille elle-même. Par défaut, vous voyez que
la taille est de dix pixels, mais nous allons la
changer à huit car nous allons travailler ensemble avec la grille de
huit pixels, ce qui est assez courant de nos jours alors que conception de différentes interfaces utilisateur. Donc, si l'isométrie
ici, vous pouvez voir les carrés différents les
plus anciens et
si vous avez des éléments, par
exemple un rectangle, vous pouvez voir comment
elle va se déplacer dans la grille
ici même avec cet élément, si nous maintenons nos claviers Shift et que nous déplacons réellement nos éléments, il saute immédiatement de
dix pixels pour décider. Nous allons
travailler
avec la grille du huitième pixel. Passons aux préférences et réglons
réellement
notre montant d'encoche. Par défaut, le grand
cran est réglé sur dix, mais nous allons
le changer à huit. Fondamentalement, cette valeur va
ajuster notre
résolution et les points de
puces indépendants avec
lesquels nous allons
travailler ensemble. C'est génial. Nous allons essentiellement sélectionner à nouveau l'outil rectangle. Et nous allons dessiner le côté gauche de
la barre de menus que nous
voyons généralement dans notre tableau de bord. Je vais utiliser
ma grille de huitième pixels pour
me guider sur les
marges de ma barre de menus. Et disons que la largeur de notre barre de menus sera de 192 pixels. Et comme vous pouvez le voir ici, il s'inscrit parfaitement
dans notre grille 8. Corrigeons rapidement notre
couche ici, et nous allons
sélectionner notre cadre et la section grille de calque, nous allons ajouter une autre grille, mais cette fois, au lieu d'une grille, nous allons sélectionner
et dans une colonne, vous pouvez
ainsi voir tous ces
différents types de paramètres. Et généralement, lorsque nous
travaillons avec des interfaces utilisateur Web, nous travaillons ensemble
avec une grille à 12 colonnes. Comme vous pouvez le constater, le
nombre de colonnes
auxquelles nous adhérons
change immédiatement dans le type nous allons sélectionner pour que nos colonnes
commencent par le côté gauche. Vous voyez donc immédiatement
comment ils se déplacent vers la gauche et la droite
ici avec la gouttière, comme nous travaillons avec 8 bits, logarithme est une
pratique courante décidée à 24. Et en fait, nous
allons également travailler avec un décalage, ce qui signifie la largeur de notre barre de menu gauche ainsi que
la marge dans laquelle nous
voulons définir. Je vais juste tenir Alt
et augmenter la
valeur ici. Effectuons un zoom avant et
vérifions. C'est donc plus précis. Je pense que nous
devrions le modifier d' un pixel et
celui que je
dessine essentiellement un autre
outil rectangulaire que je peux voir dans la largeur quelle est
réellement la marge. C'est donc 56 pixels supplémentaires. C'est un
point de consigne que je vais
avoir d'un autre côté de mon cadre essentiellement
du côté droit. Revenons aux paramètres de notre grille de
mise en page. Et en fait, nous allons
vouloir la largeur de phi. Donc, fondamentalement, nos colonnes s'étendent jusqu'au bout de notre cadre. Comme vous pouvez le constater, 80
pixels, c'est assez
trop car la dernière colonne
se trouve derrière le réseau électrique. Diminuons donc
la valeur 72 largeur. Et je vais dupliquer ça avec la cheville et la
placer ici. Comme nous pouvons le constater, c'est
un peu plus. Notre marge est de 64
pixels au lieu de 56, mais c'est très bien car
généralement, dans les tableaux de bord, vous devez disposer d'un peu plus d'
espace sur le côté droit. Aussi simple que cela, nous avons mis en place notre réseau. La première grille est donc importante pour aligner tous nos
éléments dans le cadre. La deuxième grille est composée de colonnes
où nous venons d'aligner verticalement nos éléments
sur notre tableau de bord. se voit donc dans la vidéo suivante.
3. Barre de navigation et icônes de conception côté: Bienvenue dans la deuxième
partie de ce cours. Dans une vidéo précédente, nous avons
configuré la grille que nous allons
avoir comme points principaux pour concevoir les éléments
de notre tableau de bord. Masquons rapidement
nos colonnes pointent et passons à notre barre de menu de gauche
et nous allons commencer
à concevoir
essentiellement les éléments de menu. Je vais commencer
par quelques icônes. Et pour avoir quelques icônes, j'ai déjà installé le plugin d'
icônes de plumes. J'ai laissé le lien vers ce blog
et où vous pouvez réellement le
trouver et l'installer
facilement sur votre profil Figma. Donc, devant nos icônes, c'est assez facile à travailler. Vous pouvez simplement
rechercher différents types d' icônes ou
les rechercher avec un texte. Je vais donc utiliser
cette icône pour mon logo, essentiellement le logo
de mon tableau de bord que je vais également utiliser cette icône et un tas d' autres que je
vais sélectionner rapidement. Voici mes icônes. Ça a l'air un peu désordonné,
donc je vais éloigner ça l'un de l'autre. C'est vrai ? Placons donc
celui-ci en haut et les autres juste en
dessous de la première icône. Je vais sélectionner
toutes ces icônes, les
aligner au
centre et avoir le même espace
entre chacune d'elles. Par exemple, je vais
utiliser la valeur de 36. Eh bien, l'
Eigen, je pense que le coup est assez épais. Je vais donc sélectionner
chaque icône et
modifier la valeur du trait
sur la valeur inférieure. Par exemple, les valeurs égales
sélectionnent cette image. Je peux sélectionner des couches
vectorielles plus anciennes
et aller dans Contour et
modifier la valeur en une seule. en va de même pour les autres icônes
que je viens de les sélectionner. Très bien, ajoutons du
texte à cette icône. Le premier sera donc le nom de nos tableaux de bord. Par exemple, le
problème est géré. Je vais également modifier
les polices de texte qui vont apparaître
et augmenter la taille
et le poids de ma police. bonnes pratiques doivent avoir en réalité la distance des
incréments de huit. Ainsi, par exemple, 16
cellules fixes, voire plus. Je vais donc copier
ce calque, le
poser et le modifier
aux différents tests. Ici, ça va s'ennuyer. Nous allons également sélectionner tous
ces calques de texte et
les aligner sur le côté gauche. Et nous allons également
les envoyer à chacune des icônes. Lorsque nous aurons terminé, nous allons
sélectionner toutes ces
couches et les déplacer réellement pour décider
de notre cadre de menu, nous allons le positionner
exactement avec notre crédit que nous venons de créer. Je vais en fait augmenter un peu
ce calque à la
valeur de 224 car j'ai impression d'avoir besoin de plus d'espace
pour nos icônes et nos textes dans des notes de
chansons parfaites baisseront un peu
la valeur de déconnexion à
le bas parce que c'est un peu l'
évaluation la moins inpertinente à avoir pour nous. Et aussi ces quatre éléments de menu, je vais baisser
un peu plus bas que notre
logo se distingue. Sélectionnons également notre calque et modifions le remplissage pour
qu'il soit blanc. Et un moyen d'appliquer également des effets. Déposez donc des ombres et nous
pouvons réellement distinguer cette couche des autres
parties de notre tableau de bord. chose comme ça. Alors, cachons également notre
tarif pour voir à quoi il ressemble. Et je pense que nous pouvons le modifier
lentement, le rendre moins visible. En outre, la dernière chose que nous
avons, c'est que nous allons mettre en évidence exactement
l'élément de menu où nous allons nous
trouver. Et cela va être dans l'
article qui s'appelle le tableau. Donc je vais avoir la valeur, je vais avoir comme
peinture dans le noir avec d'autres valeurs, je vais
le changer en gris plus clair. Ici. Je vais augmenter
le poids de la police. Et je vais également modifier légèrement les couleurs de
ces deux couches vectorielles. Plus coloré et
ressemble plus à un logo. Et la dernière chose que je
veux encore souligner, que je suis situé à l'intérieur du tableau. Ici, nous avons notre
rectangle avec un remplissage que nous allons également aligner
au centre. Et je vais aussi le
colorer en bleu clair. Ensuite, je vais
réduire l'opacité à la valeur de dix. Il est donc légèrement visible à l'intérieur de nos planches. Nous venons de créer notre première barre
de menus depuis le côté gauche. Et dans la vidéo suivante, nous
allons créer notre Heather et passer à d'autres éléments pour créer un tableau de bord simple.
4. En-tête et colonnes: Dans cette partie, nous
allons travailler sur l'en-tête ainsi que sur les premiers éléments
de notre tableau de bord. Encore une fois, je vais ajouter d'autres icônes pour
montrer que la personne peut rechercher et voir les
notifications et le
centre d'aide dans le tableau de bord. Je vais
revenir au plugin d'
icônes de plumes et
rechercher d'autres icônes. Parfait, trois de nos
icônes sont ici. Je vais les déplacer à
nouveau l'un de l'autre. Mon icône de recherche
aura également
cette couleur grise pour qu'
elle soit moins visible. Et un autre outil je vais être coloré en noir et
je vais également réduire légèrement le poids de
l'outil de contour d'un pixel. Perfectionnez moins seuls ces
deux cadres et déplacez-les
un peu plus vers le haut. Dans ce cas, je vais
activer mes grilles
de mise en page pour pouvoir simplement
aligner mes éléments. Et comme vous vous en souvenez, nous avons déjà modifié la largeur
de la barre de menus. Il est donc important de
modifier le décalage de nos colonnes pour avoir plus d'espace entre
les éléments et
notre barre de menu de gauche. Nous allons donc avoir un décalage
légèrement plus grand et diminuons un peu
la largeur. Si nous devons également nous
assurer que notre largeur
se situe parfaitement à l'intérieur de
notre grille de huitième pixels. C'est parfaitement pour que
la largeur de 70 outils et le décalage de 256 s'
intègrent parfaitement dans notre grille de huitième
pixels ici. Permettez-moi de déplacer rapidement
cette barre de recherche. Je vais également l'
aligner sur le centre avec notre couche gérée pro. Et ces cellules à deux couches
vont également être
centrées au milieu. Mettons-les un
peu de ce côté. Ici aussi,
je vais dessiner un cercle qui présentera le profil de l'utilisateur qui se trouve actuellement
dans ce tableau de bord. Je vais donc définir la
largeur et la hauteur des pixels
fatals et trouver une
photo de la personne. Je vais aller sur
un autre plugin appelé Unsplash et rechercher
l'image de la personne. Par exemple, cette image
s'adapte parfaitement. C'est assez décontracté et
aussi professionnel. Donc, si vous souhaitez modifier
les paramètres de cette image, vous pouvez simplement aller au remplissage, cliquer sur l'image et accéder
au vignettage de recadrage. Et en fait, vous allez
augmenter, par exemple, ce portrait et le centrer davantage au centre de la forme. Comme ça. C'est
tout à fait parfait. Je vais
aussi le déplacer pour décider du crédit et
l'
aligner au centre, l'équilibre
parfait, l'aligner à
nouveau sur notre couche de recherche. La prochaine icône de recherche, je vais également
écrire une recherche de texte. Il est donc plus évident
que cette icône signifie. Changeons également la couleur des spécifications et voyons essentiellement qu'elle a un déplacement de
16 pixels par rapport à l'icône. Lorsque je désactive la grille de mise en page, voyons à quoi ressemblent réellement nos éléments dans
le tableau de bord, donc cela a l'air assez joli. Remettons également notre grille de
calques et je vais
parler de base du titre. Cela signifie que vous êtes
dans la section du conseil d'administration. J'augmenterai également
la valeur du style
des neuf pixels. Et nous nous contenterons également du poids
moyen de ce texte. Veillons également à
ce qu'il soit centré sur le premier élément de
notre barre de menu de gauche. Très bien, ça a l'air très bien. Je vais donc remettre ma grille de mise en page et
je vais créer les trois colonnes
où nous allons
coller les tâches que nous
devons effectuer dans ce projet. Donc, par exemple, faire
en cours et faire. Pour cela, je vais
revenir à l'outil Rectangle. Et comme vous pouvez
le voir ici, dans notre grille, nous avons 12 colonnes
et nous allons
avoir trois éléments
de même taille. Cela signifie donc que chaque
élément prendra la largeur de quatre colonnes dans cette interface utilisateur. Sauf si elle a été copiée
et placée ici. En fait, il est centré
et il s'adapte parfaitement. Et je vais
aller dans le rayon du coin et changer la valeur en tendu. Nos coroners sont lisses et,
en fait, à moins qu'ils ne soient si nets ,
qui viennent de les avoir en ce moment ,
pour mon projet de prémisse, j'ai copié la palette de
couleurs ici que je veux
utiliser pour mon tableau de bord. Vous pouvez appliquer votre propre palette de
couleurs ou utiliser
celle que j'utilise. J'ai également laissé dans la
description de cette classe les codes couleur de chaque couleur que j'ai utilisé
pour ce tableau de bord. Je vais donc sélectionner
tous ces trois calques et changer leur couleur
en gris clair. Et cela écrit également les titres
de chacune de ces sections. Et bien sûr, je voulais
être parfait avec le mérite. Veillons donc à ce qu'
il soit parfaitement aligné. Et j'
ajouterai également une autre icône qui est plus et Morris éthique, pour rechercher l'icône plus
et aussi pour plus de paramètres. Exactement comme ça. Bien
sûr, je vais encore modifier la valeur de l'
AVC, celle de la santé. Et je ferai de même
avec la deuxième icône. Mais il aime aussi
ce rectangle pour qu'il ne bouge pas sur notre chemin. Et nous allons
sélectionner
ces deux couches et
les placer au même niveau
que notre sous-titre. Si je sélectionne tous ces
trois calques et que je les aligne exactement au centre
et ici, je m'
assurerai également
d'avoir un bon alignement
de ces trois couches. Et la distance entre
les deux sera également pertinente pour nos
huit grosses grilles de limaces. En tant que personne née pour sélectionner ces trois couches et
les regrouper et les tapis deux fois pour les
placer exactement dans la même position que les
deux autres sections. La dernière pensée
sera de modifier réellement le texte en
cours et fait. Je pense que nos bureaux
commençaient à devenir de mieux en mieux et plus en plus remplis d'éléments d'un
ami. Dans la vidéo suivante,
nous allons ajouter d'autres éléments dans
chacune de ces sections.
5. Éléments de carte & avatars - étapes finales: Bienvenue dans la dernière
partie de ce cours. Et
à l'heure actuelle, nous allons terminer notre conception en créant les voitures simples que nous allons
placer notre planche. Avant de commencer à
concevoir nos cartes, sélectionnons rapidement notre cadre. Je vais activer
la grille de huit pixels pour voir comment
je vais placer ma garde avec
les tâches à accomplir. Zoomons rapidement. Et je vais commencer par
une section À faire. Et je vais sélectionner
l'outil Rectangle et je vais dessiner un
rectangle blanc ici. Je vais donc m'assurer que les marges correspondent essentiellement à gauche et à droite de mes éléments que j'ai créés
précédemment. Et je vais
aller immédiatement dans rayon
du coin et
changer la valeur à 20. Je vais donc avoir les coins
arrondis pour ma carte. Et bien sûr, la
couleur sera blanche. Je vais également
augmenter un peu la hauteur de cet élément
et m'assurer que l'espace entre
le titre de tâche et mon élément est de 24 grosses cellules. La prochaine étape consiste donc à créer l'étiquette
pour la tâche Martha. Et dans ce cas, je vais
taper un système de conception. Nous allons donc sélectionner cette couche. Et je vais également changer
le remplissage en
gris clair et aussi en poids moyen de
police. Et je vais rendre
cette étiquette un peu plus petite, donc ce n'est pas aussi évident que les autres éléments du
matin de créer un peu plus tard. Et je veux également le
marquer avec un code couleur. Je vais donc créer rapidement des
LPS en maintenant des quarts de travail. Mes valeurs Q sont donc
fondamentalement les mêmes. Et j'ai déjà préparé avant la palette de couleurs
que je vais
utiliser l'outil pipette ici. Ainsi, lorsque vous les activez, ils
sont mis en surbrillance avec une couleur bleu clair et
je vais sélectionner, par
exemple, une
couleur verte pour ce cas. En fin de compte, je vais
également sélectionner les
deux, ces deux couches et
les aligner exactement au centre. Par exemple, regroupons
rapidement cette partie et je vais m'
assurer que mon espacement entre la marge supérieure et la marge gauche est de 24 pixels. La prochaine étape consiste
à créer un titre. Et dans ce cas, je vais
lire une section de héros. Ce sera donc la tâche. Par exemple, certaines
équipes doivent concevoir. L'en-tête aura un poids de
police de 18 pixels. Et veillons également à ce qu'
il soit aligné sur mon étiquette. Donc, ici, je
vais le rapprocher un peu plus de l'étiquette. Et la prochaine étape
ne sera qu'une copie. C'est ici, de l'affection. En gros,
il s'agira nos principaux textes
dans lesquels nous allons décrire en quoi consiste
la tâche. Et je vais
diminuer la valeur de ma police et aussi
nous garder au courant exactement de ce que ma description va être répartie dans toutes les cartes. Et juste pour vous assurer que
l'espacement est de 24 pixels de gauche à droite
et juste ici tapez rapidement
une description. C'est tout aussi simple que la
gouache de texte et le schéma. Et je vais également m'
assurer que l'espacement entre
les textes primaires
et le titre est également de
huit pixels. Je veux que ma voiture ait
également les réglages. Je vais donc simplement sélectionner les icônes de
paramètres créées précédemment et je vais les copier et les
placer à côté de mon étiquette. Bien sûr, il sera également centré sur le côté droit, comme mon texte principal. La dernière étape consiste
à créer de
petites étiquettes qui seraient des initiales de personnes qui seront
responsables de cette tâche. Et pour cela, je vais
sélectionner à nouveau un outil ellipse. Et en maintenant Shift, je
vais dessiner un cercle simple. Et immédiatement, je vais
passer au trait et ajouter un simple trait de couleur blanche qui sera à
l'intérieur de l'Alex. Et bien sûr,
en sélectionnant échouer, je sélectionnerai le jeu que j'ai 5 bits et je vais aller dans ma palette de couleurs et sélectionner l'une des couleurs que j'ai préparées plus tôt dans cette classe. De plus. Je vais créer des
initiales d'une personne qui
va être
responsable de cette GSK. En sélectionnant
ces deux couches, je vais envoyer la droite exactement en position horizontale
et verticale. Et en cela,
regroupons rapidement ces deux éléments. Je vais donc aussi abaisser la position de cet
élément de 16 cellules fixes. Par exemple, je vais
également copier cet élément. Et comme je veux, par
exemple, que des personnes soient
affectées à ce problème, revenons rapidement à ma palette de
couleurs et passons, par
exemple, à cette
couleur. Juste ici. Je vais changer les
initiales comme ça. Ici, je
veux aussi que mon ellipse ait 24 pixels de distance par rapport à
la marge de cette carte. Je vais donc simplement
augmenter la hauteur de
ce rectangle blanc. Ce n'est qu'un exemple simple
de la façon dont nous avons créé notre carte. Je vais désactiver la grille juste pour voir à quoi elle
ressemblera. Je pense donc que c'est
assez simple, mais aussi assez joli. Et je vais simplement sélectionner tous
ces calques que
je viens de créer. Et je vais
les regrouper ici. Juste pour finir notre design. Je copierai cette carte
et je modifierai le contenu afin qu'
au final nous puissions avoir un tableau de bord
assez agréable avec les tâches. On y va. Cela ressemble à un
tableau de bord génial que nous
venons de créer pour
si peu de temps. Nous allons enfin sélectionner notre cadre et le voir en mode
présentation. C'est ainsi que nous avons créé notre tableau de bord simple et très
professionnel pour la gestion des tâches, pour l'équipe de projet. Donc, les gars, je suis vraiment
curieux de voir votre travail. Que vous ayez créé un
tableau de bord similaire est un peu différent, celui que vous
vouliez créer pour votre portfolio ou simplement
pour vous amuser. Faites-le moi savoir et je
serai heureux de vous donner un commentaire et je
vous remercie beaucoup suivi ce cours et
j'espère vous voir dans le prochain cours que je
vais préparer très bientôt.
Tetiana G, UX Designer
