Transcrições
1. Boas-vindas!: Bem-vindo a outra classe Sigma, certo, em algumas lições, você aprenderá como criar uma web profissional desesperada para fins de gerenciamento de projetos, me apresentar
rapidamente. Meu nome é Jana. Sou designer de UX
e gosto de criar um conteúdo educacional sobre
Figma e o design da bola. Durante esta aula,
vou orientá-lo por todo
o processo desde o
início até o fim, como criar um painel da Web. Isso significa que começaremos com a
configuração da grade da camada
e, posteriormente, passaremos a projetar a barra de navegação, os ícones, a imagem do perfil e outros elementos
dentro do painel. E no final,
encorajo você a me enviar seu trabalho para que eu possa
lhe dar meu feedback. E, dessa forma, você
pode aprender e também aumentar suas habilidades de design. Então, apresse-se,
inscreva-se neste curso, e espero vê-lo
no próximo vídeo. Começaremos com os
conceitos básicos de atraso na grade.
2. Configurar grades de layout: Bem-vindo à primeira parte
desta classe, onde vamos configurar uma grade
para o nosso painel. E configurar uma grade é uma
boa prática antes de começarmos a
projetar qualquer tipo de
interface do usuário, porque com a grade ou os elementos dentro do nosso
quadro podem ser consistentes. Então, para começar, vamos selecionar
rapidamente um quadro e vamos
criar um painel da Web. Então, nos quadros predefinidos, vamos selecionar
um quadro de área de trabalho. Vou renomeá-lo rapidamente. O primeiro passo será
ir para as grades de layout e criar a
primeira grade aqui. Então, vamos começar
com a grade em si. Então, por padrão, você vê que
o tamanho é de dez pixels, mas vamos
mudá-lo para oito porque vamos trabalhar conjunto com a grade de
oito pixels, que é bastante comum hoje em dia enquanto projetando diferentes UIs. Então, se isometria
aqui você pode ver quadrados diferentes
mais antigos e
se você tiver alguns elementos, por exemplo, um retângulo, você pode ver como
ele vai se mover dentro da grade
aqui com esse elemento, se segurarmos nossos teclados Shift e realmente movermos nossos elementos, ele salta imediatamente em
dez pixels para decidir. Vamos
trabalhar junto
com a oitava grade de pixels. Vamos para as preferências e na verdade, ajustar
nosso valor de entalhe. Então, por padrão, o grande
entalhe está definido como dez, mas vamos
alterá-lo para oito. Basicamente, esse valor
ajustará nossa resolução e na verdade, pontos de
bala independentes com os quais vamos
trabalhar em conjunto. Isso é ótimo. Vamos basicamente selecionar novamente a ferramenta retângulo. E vamos desenhar o lado esquerdo
da barra de menus que geralmente
vemos em nosso painel. Na verdade, vou usar
minha grade de oitavo pixel para
me guiar sobre onde ver
as margens da minha barra de menus. E digamos que a largura da nossa barra de menus seja de 192 pixels. E como você pode ver aqui, ele cai perfeitamente
em nossa grade 8. Vamos corrigir rapidamente nossa
camada aqui, e vamos
selecionar nosso quadro e a seção de grade de camadas, vamos adicionar outra grade, mas desta vez em vez de uma grade, vamos selecionar
colunas e em uma coluna, para que você veja todos esses
diferentes tipos de configurações. E, geralmente, quando
trabalhamos com UIs da web, trabalharemos em conjunto
com a grade de 12 colunas. Como você pode ver, o
número de colunas às quais estamos aderindo
muda imediatamente no tipo que vamos selecionar que nossas colunas
começarão do lado esquerdo. Então você vê imediatamente
como eles realmente se movem para a esquerda e para a direita
aqui com a calha, enquanto trabalhamos com 8 bits, logaritmo é uma
prática comum decidida para 24. E, na verdade, também
vamos trabalhar com um deslocamento, o
que significa a largura da nossa barra de menus esquerda junto com a margem que
queremos definir dentro. Vou apenas segurar Alt e realmente aumentar o
valor aqui. Vamos ampliar e
verificar. Portanto, é mais preciso. Acho que
devemos modificá-lo um pixel e a
que eu basicamente desenho outra
ferramenta retangular que posso ver na largura o que é
realmente a margem. Portanto, são 56 pixels extras. Este é um tipo de
ponto definido que vou
ter em outro lado do meu quadro basicamente
do lado direito. Vamos voltar para nossas configurações de grade de
layout. E, na verdade, vamos
querer largura phi. Então, basicamente, nossas colunas se estendem até o
final do nosso quadro. Como você pode ver, 80
pixels são
demais porque a última coluna
fica atrás da rede elétrica. Então, vamos diminuir
o valor 72 largura. E vou duplicar isso no tornozelo e
colocar aqui. Como podemos ver, é
um pouco mais. Nossa margem é de 64
pixels em vez de 56, mas é muito bom porque
geralmente em painéis você precisa ter um pouco mais de
espaço no lado direito. Tão simples assim, configuramos nossa grade. Portanto, a primeira grade é importante para alinhar todos os nossos
elementos dentro do quadro. segunda grade é com colunas
onde acabamos de alinhar verticalmente nossos elementos
em nosso painel. Então, vejo você no próximo vídeo.
3. Barra de navegação lateral de design e ícones: Bem-vindo de volta à segunda
parte desta classe. Em um vídeo anterior,
configuramos a grade que
teremos como pontos principais para
projetar os elementos
dentro do nosso painel. Vamos ocultar rapidamente
nossos pontos de colunas e ir para a barra de menus à esquerda
e vamos começar
a projetar
basicamente os itens do menu. Vou começar com
alguns ícones. E para ter alguns ícones já
instalei o plugin de
ícones de penas. Deixei o link para este blog
e onde você pode encontrá-lo e
instalá-lo facilmente em seu perfil Figma. Então, na frente de nossos ícones, é muito fácil trabalhar. Você pode procurar
por diferentes tipos de ícones ou
pesquisá-los com um texto. Então, vou usar
esse ícone para meu logotipo, basicamente o logotipo
do meu painel que também vou usar esse ícone e vários outros que
vou selecionar rapidamente. Aqui estão meus ícones. Parece um pouco confuso,
então vou
afastar isso um do outro. Certo? Então, vamos colocar
este no topo e também os outros logo
abaixo do primeiro ícone. Vou selecionar
todos esses ícones, alinhá-los no
centro e também ter o mesmo espaço
entre cada um deles. Por exemplo, vou
usar o valor de 36. Bem, então o
Eigen, acho que o derrame é bastante grosso. Então, vou selecionar
cada ícone e, na verdade modificar o valor do traçado
para o inferior. Por exemplo, é igual a
selecionar este quadro. Posso selecionar camadas
vetoriais mais antigas e na verdade, ir para Stroke e
modificar o valor para um. O mesmo vale para outros ícones
que acabei de selecionar. Tudo bem, vamos adicionar
algum texto a este ícone. Então, o primeiro será
o nome de nossos painéis. Então, por exemplo, o
problema gerencia. Também vou alterar
as fontes de texto aparecerão e aumentarão o tamanho
e o peso da minha fonte. Boas práticas para ter realmente a distância de
incrementos de oito. Então, por exemplo, 16
células fixas ou até mais. Então, vou copiar
essa camada e, na verdade colocá-la para baixo e modificá-la
para os diferentes testes. Bem aqui vai ficar entediado. Vamos também selecionar todas
essas camadas de texto e
alinhá-las ao lado esquerdo. E também vamos
enviá-los para cada um dos ícones. Quando terminarmos, vamos selecionar todas essas
camadas e movê-las realmente para decidir sobre nosso quadro
de menu, vamos posicioná-lo exatamente com nosso crédito que
acabamos de criar. Na verdade, vou aumentar essa camada um pouco para o
valor de 224 porque
sinto que preciso de mais espaço
para nossos ícones e para
nossos textos dentro de notas de
música perfeitas diminuirão um pouco
o valor de logout para
o lado inferior porque é uma
espécie de
avaliação menos irrelevante para nós. E também esses quatro itens de menu, vou baixar
um pouco mais para que tenhamos nosso
logotipo mole distinguir. Vamos também selecionar nossa camada e alterar o preenchimento para
que ele fique branco. E uma maneira de aplicar efeitos também. Então solte sombras e
podemos realmente distinguir essa camada de outras
partes do nosso painel. Algo assim. Então, vamos também esconder nossa
taxa para ver como ela se parece. E acho que podemos modificá-lo
lentamente, tê-lo menos visível. Além disso, a última coisa que
temos é que vamos destacar exatamente
o item
de menu que
estaremos localizados. E isso vai estar no
item chamado board. Então eu vou ter o valor, vou ter como
pintar no preto com outros valores, vou basicamente
mudá-lo para o cinza mais claro. Aqui. Vou aumentar
o peso da fonte. E também modificarei ligeiramente as cores de
ambas as camadas vetoriais. Mais colorido e
parece mais com um logotipo. E a última coisa que ainda
quero destacar, estou localizado dentro do tabuleiro. Aqui temos nosso
retângulo com um preenchimento que vamos alinhar
no centro também. E eu também vou
colorir em azul claro. Então vou
diminuir a opacidade para o valor de dez. Portanto, é um pouco visível que
estavam dentro de nossas placas. Simplesmente criamos nossa primeira barra
de menus do lado esquerdo. E no próximo vídeo,
vamos criar nossa Heather e seguir em frente com outros elementos para criar um painel simples.
4. Cabeçalho e colunas: Nesta parte,
vamos trabalhar
no cabeçalho e também
nos primeiros elementos
do nosso painel. De novo, vou adicionar
mais ícones para mostrar basicamente que a pessoa pode pesquisar e ver notificações e a
central de ajuda dentro do painel. Vou
voltar ao plugin de
ícones de penas e
procurar mais ícones. Perfeito, três de nossos
ícones estão aqui. Vou movê-los
novamente um do outro. Meu ícone de pesquisa também terá essa cor cinza,
então fica menos visível. E outra ferramenta vou ser colorida em preto e também
vou diminuir
ligeiramente o peso da ferramenta de traçado em um pixel. Aperfeiçoe menos sozinho
ambos os quadros e, na verdade, mova-os
um pouco mais para o topo. Nesse caso, vou ativar minhas grades de layout
contra
para que eu possa simplesmente
alinhar basicamente meus elementos. E como você se lembra, já
mudamos nossa largura
da barra de menus. Portanto, é importante também
alterar o deslocamento de nossas colunas para ter mais espaço entre
os elementos e
nossa barra de menus à esquerda. Então, vamos ter um deslocamento um
pouco maior e também diminuir um pouco
a largura. Se também precisamos
garantir que nossa largura perfeitamente dentro da
nossa grade de oitavo pixel. Isso perfeitamente para que
a largura da ferramenta 70 e o deslocamento de 256 se encaixa perfeitamente na nossa grade de oitavo
pixel aqui. Deixe-me mover rapidamente
essa barra de pesquisa. Também vou
alinhá-lo ao centro com nossa camada gerenciada profissional. E também essas células
de duas camadas serão
centralizadas no meio. Vamos movê-los um
pouco para este lado. Também aqui,
vou desenhar um círculo que mostrará o perfil do usuário que está atualmente
neste painel. Então, vou definir a
largura e a altura dos pixels
fatais e encontrar uma
imagem da pessoa. Vou para
outro plugin chamado Unsplash e procurar
a imagem da pessoa. Por exemplo, essa imagem
se encaixa perfeitamente. É bastante casual e
também profissional. Então, se você quiser modificar
as configurações desta imagem, basta ir para o preenchimento, clicar na imagem e ir
para a vinheta de corte. E, na verdade, você vai
aumentar, por exemplo, esse retrato e
centralizá-lo mais no centro da forma. Assim. Parece
bem perfeito. Vou movê-lo
também para decidir sobre o crédito e
alinhá-lo no centro, equilíbrio
perfeito, alinhá-lo
novamente com nossa camada de pesquisa. O próximo para este ícone de pesquisa, também
vou
escrever pesquisa de texto. Então, é mais óbvio
o que esse ícone significa. Vamos também mudar a cor
das especificações e ver basicamente que ela tem deslocamento de
16 pixels do ícone. Quando eu desligo a grade de layout, vamos ver como nossos itens ficam dentro
do painel, por isso parece muito bom. Vamos também colocar nossa grade de camadas volta e vou
falar sobre a base do título. Isso significa que você está
dentro da seção do quadro. Também aumentarei
o valor
do estilo dos
muitos nove pixels. E também vamos nos contentar com o peso
médio deste texto. Vamos também garantir
que ele esteja centralizado com o primeiro item na
nossa barra de menus à esquerda. Tudo bem, parece ótimo. Então, vou colocar novamente minha grade de layout e
vou criar as três colunas em
que vamos colar nossas tarefas que
temos que fazer neste projeto. Então, por exemplo, fazer
em andamento e feito. Então, para isso, vou
novamente para a ferramenta retângulo. E como você pode ver
aqui em nossa grade, temos 12 colunas
e
teremos três elementos
do mesmo tamanho. Portanto, isso significa que cada
elemento terá a largura de quatro colunas nesta interface do usuário. A menos que seja copiado
e coloque-o aqui. Na verdade, está centrado
e se encaixa perfeitamente. E vou
para o raio do canto e mudarei o valor para tenso. Nossos legistas são suaves e,
na verdade, a menos
que tão nítidos , que os tinha agora, para o meu projeto de premissa, eu realmente copiei a paleta de
cores
aqui que eu quero
usar no meu painel. Você pode aplicar sua própria paleta de
cores ou você pode realmente usar
a que estou usando. Também deixei na
descrição dessa classe os códigos de cores de cada cor que usei
para este painel. Então, vou selecionar
todas essas três camadas e mudar sua cor
para o cinza mais claro. E isso também escreve os títulos
para cada uma desta seção. E, claro, eu queria
ser perfeito com o crédito. Então, vamos nos certificar de
que está perfeitamente alinhado. E também
adicionarei outros ícones que são plus e ética Morris, para procurar o ícone de mais
e também por mais configurações. Exatamente assim. É
claro que irei novamente e modificarei o valor do
acidente vascular cerebral, aquele que a saúde. E também farei o mesmo
com o segundo ícone. Mas também é adorar
esse retângulo , então ele não se move em nosso caminho. E vamos
selecionar
essas duas camadas e
colocá-las no mesmo nível
com nosso subtítulo. Se eu selecionar todas essas
três camadas e as alinhar exatamente no centro
e aqui, também me
certificarei de que temos um bom alinhamento
de todas essas três camadas. E a distância entre
eles
também será relevante para nossas
oito grandes grades de lesma. Como alguém nasceu para selecionar essas três camadas e
agrupá-las e também tapeçá-las duas vezes para basicamente
colocá-las exatamente na mesma posição para
as outras duas seções. Os pensamentos finais
serão realmente mudar o texto para em
andamento e feito. Acho que nossas mesas começaram a ficar cada vez melhores e mais preenchidas com os tipos de elementos de um
amigo. No próximo vídeo,
vamos adicionar mais elementos em
cada uma dessas seções.
5. Elementos de cartão e avatares - etapas finais: Bem-vindo à última
parte desta classe. E agora vamos terminar nosso design
com
a criação dos carros simples que vamos
colocar nossa prancha. Antes de começarmos a
projetar nossos cartões, vamos selecionar rapidamente nosso quadro. Vou ativar de volta
a grade de oito pixels para mim apenas para ver como vou
colocar minha guarda com as tarefas
a serem feitas. Vamos ampliar rapidamente. E vou começar
com uma seção To Do. E vou selecionar
a Ferramenta Rectangle e vou desenhar um
retângulo branco aqui. Então, vou me certificar de que as margens se encaixam basicamente no lado esquerdo e direito dos meus elementos que criei
anteriormente. E
vou imediatamente para o raio do canto e
alterarei o valor para 20. Então, vou ter os cantos
arredondados para o meu cartão. E, claro, a
cor será branca. Também vou
aumentar um pouco a altura desse elemento
e garantir que o espaço entre
o título de tarefas e meu elemento seja de 24 grandes células. Então, o próximo passo será
criar o rótulo
para a tarefa Martha. E neste caso vou
digitar um sistema de design. Então, vamos selecionar essa camada. E também mudarei
o preenchimento para
cinza claro e também o meio de peso da
fonte. E vou tornar
esse rótulo um pouco menor, então não é tão óbvio quanto os outros elementos da
manhã para criar um pouco mais tarde. E também quero
marcá-lo com um código de cores. Então, vou criar rapidamente
LPS segurando turnos. Então meus valores de Q são
basicamente os mesmos. E já preparei antes da paleta de cores
que vou
usar a ferramenta de pipeta aqui. Então, quando você ativa,
eles são destacados com uma cor azul claro e
eu vou selecionar, por exemplo, uma
cor verde para esse caso. No final,
também selecionarei ambas, ambas as camadas e
as alinharei exatamente no centro. Então, vamos, por exemplo,
agrupar
rapidamente essa parte e vou me certificar de que meu espaçamento entre a margem superior e a esquerda seja de 24 pixels. O próximo passo será
criar um título. E neste caso, vou
ler uma seção de heróis. Então, essa será a tarefa. Por exemplo, alguma
equipe precisa projetar. O cabeçalho terá o peso da
fonte de 18 pixels. E também vamos nos certificar de
que está alinhado com o meu rótulo. Então, aqui,
vou movê-lo um pouco mais perto do rótulo. E o próximo
passo será apenas uma cópia. Isso aqui, carinho. E, basicamente, esses
serão nossos textos primários em
que vamos descrever
do que se trata a tarefa. E vou
diminuir o valor da minha fonte e também
nos manter regularmente exatamente qual minha descrição será
espalhada por todos os cartões. E apenas para garantir que
o espaçamento seja de 24 pixels do lado
esquerdo para o direito
e aqui novo digite rapidamente
alguma descrição. Isso é tão simples
guache de texto e esquema. E também vou me
certificar de que o espaçamento entre os textos primários
e o título também seja de
oito pixels. Quero que meu carro
também tenha as configurações. Então, vou selecionar
os ícones de
configurações criados anteriormente e vou copiá-lo e
colocá-lo ao lado do meu rótulo. Claro, também será
centrado para o lado direito,
o mesmo que meu texto primário. O último passo é realmente
criar pequenos rótulos iniciais de pessoas que serão
responsáveis por essa tarefa. E para isso vou
selecionar novamente uma ferramenta de elipse. E segurando Shift,
vou desenhar um círculo simples. E imediatamente vou
para o traçado e adicionarei um traço simples com cor branca que estará
dentro do Alex. E, claro,
selecionando falhar, selecionarei o jogo I 5-bit e vou para minha paleta de cores e selecionarei uma das cores que
preparei anteriormente nesta classe. Também. Vou criar algumas
iniciais de uma pessoa que será responsável
por esse GSK. Ao selecionar ambas
as camadas, vou enviar a direita Exatamente na posição horizontal
e vertical. E nisso, vamos
agrupar rapidamente esses dois elementos. Então, também vou baixar
a posição desse
elemento em 16 células fixas. E, por exemplo,
também copiarei esse elemento. E como eu quero, por exemplo, que as pessoas sejam
atribuídas a esse problema, vamos rapidamente voltar para minha paleta de
cores e mudar, por exemplo, para essa
cor. Bem aqui. Vou mudar as
iniciais assim. À direita aqui também
quero que minha elipse tenha 24 pixels de distância até
a margem deste cartão. Então, vou simplesmente
aumentar a altura
desse retângulo branco. Este é apenas um exemplo simples
de como criamos nosso cartão. Vou desabilitar a grade só para ver como ela
ficará. Então eu acho que parece
bem simples, mas também muito bom. E vou selecionar todas essas camadas que
acabei de criar. E vou
agrupá-los aqui. Só para terminar nosso design. Vou copiar este cartão
e alterar o conteúdo nele para que,
no final, possamos ter um
bom painel com as tarefas. Aqui vamos nós. Parece um
painel incrível que
simplesmente criamos por
tão pouco tempo. Vamos finalmente selecionar nosso quadro e vê-lo no modo de
apresentação. Foi assim que criamos nosso painel simples e muito
profissional para gerenciamento de tarefas, para a equipe do projeto. Então pessoal, estou realmente
curioso para ver o seu trabalho. Se você criou um
painel semelhante é um pouco diferente, um que você queria criar
para seu portfólio ou apenas
por diversão para si mesmo. Deixe-me saber e
ficarei feliz em lhe dar um feedback e muito
obrigado por seguir esta aula e
espero vê-lo na próxima aula que
vou preparar em breve.
Tetiana G, UX Designer
