Transcrições
1. Apresentação: Olá a todos e bem-vindos
à nossa sessão de hoje. Hoje, vamos
mergulhar fascinante mundo
da estrutura
de arame O que exatamente é uma estrutura de arame? É um guia visual
que representa a estrutura básica de nosso
aplicativo ou site Por que os wireframes
são muito importantes? Sim, é muito
importante
porque ajuda a entender
a clareza e a funcionalidade
das telas ou páginas que
serão desenvolvidas. Agora, quem nos beneficiaremos com esse curso? Deixa eu te contar. O primeiro são os aspirantes a designers, aqueles que desejam iniciar
uma carreira em design de interface do usuário O segundo são os empreendedores. Pessoas que
planejam lançar suas próprias startups e
desejam criar sua
própria interface de usuário. O próximo é o artista gráfico. Se você gosta de arte, este
curso adicionará uma nova habilidade às suas ferramentas e
permitirá que você
explore o novo design do aplicativo. O último é o entusiasta do design. Se você adora design, essa é a maneira divertida de
aprender algo novo. É basicamente um curso super
versátil, que pode beneficiar, como qualquer pessoa interessada
em design. Existem dois tipos
de wireframes, wireframes de baixa fidelidade e wireframes de alta
fidelidade E neste curso, aprenderemos
os wireframes e também tudo será um projeto
prático
2. Projeto com vídeo: Se o projeto continuar trabalhando, você criará um total de
quatro estruturas de arame. Isso permitirá que você
pratique técnicas de
wireframing de alta fidelidade e baixa fertilidade
para o wireframe de baixa densidade Primeiro passo, escolha um conceito de aplicativo que você gostaria de criar. Etapa 2, comece com as estruturas de arame de
baixa fidelidade. Esses são os
planos iniciais do design do seu aplicativo. Etapa três, esboce
o layout básico. Lembre-se de focar
na funcionalidade
e não nos detalhes. Etapa quatro, projete pelo menos
duas estruturas de arame de baixa fidelidade. Agora, o segundo são as estruturas de arame High
Fili. Para essa primeira etapa, você deve escolher uma estrutura de arame de
baixa finidade,
que será
convertida em uma estrutura de arame de alta fidelidade. Segundo passo, comece adicionando
as cores ou texturas. Isso fará com que seus designs
cheguem à etapa três. Crie pelo menos dois
wireframes de alta finidade. Por fim, depois de fazer
uma captura de tela das estruturas de arame de baixa e
alta fidelidade, basta compartilhar na
3. Aprenda a projetar um wireframe de baixa fidelidade com atividades práticas.: Olá a todos. Então,
sem perder nosso tempo, vamos começar com o
wireframe Para isso, vamos selecionar
a placa móvel. Agora, aqui podemos encontrar o telefone. Podemos usá-lo, iPhone 12, Pro Max. Agora temos isso. Ok. Eu quero te mostrar esta página de assinatura de
arame. Nós vamos chegar
exatamente aqui. Para isso, primeiro
fazemos os retângulos, eu pressiono R. Esse será
o primeiro retângulo Podemos duplicar isso
pressionando o comando D. Sim, isso também é feito Precisaremos de um terceiro
retângulo novamente. Novamente, pressione o comando D. Aqui está. Você pode ver isso? Se estou subindo, não
está me mostrando
o alinhamento adequado Assim que mudei de cor, vejo a cor
marcada aqui, o que significa que ela já está devidamente centralizada como
aquela cor Agora podemos adicionar as bordas. Podemos definir o tamanho
da borda por dentro ou
centralizá-lo também ou por fora. Mas acho que lá fora parece legal. Ok. Nós vamos para o próximo. Novamente fora de um para 34, novamente, o terceiro
que é um nome de registro, novamente, fora e 134 Ok. Então eu acho que essas caixas
são bem grandes. Vamos torná-lo um pouco
menor, esse 35065. Ok. 31565. UM 65. Agora podemos escrever aqui o joelho de
lembrança e
deixar que eles escolham a caixa. Então, vamos fazer isso. Ok, então essa fonte
está bem boa. Nós podemos fazer uma coisa. Acabei de copiar e colar aqui, ok? Ok, e a
caixa quadrada aqui, é para mim, do tamanho 25, 25. Podemos preencher essa cor azul. Essa é uma cor bem escura. Recebemos um pouco de luz. Sem modelos. Ok, acho que 30 é o suficiente. Ok, este está pronto. E agora vamos encobrir o restante
na próxima palestra.
4. Aprenda como inserir campos de texto e entrada em um design de wireframe de baixa fidelidade com a atividade prática.: Olá a todos. Agora
vamos colocar os campos de entrada. Precisaremos de campos de entrada
para e-mail, senha e login, pois
criamos esses retângulos Agora vamos inserir o texto. Veja, você pode fazer como enviar mensagens de texto, pois estou colocando o
e-mail primeiro no telefone. Faça com que seja um pouco sujo e o fundo, ok. Esse fundo vai bem e, claro, o tamanho. Então, isso vai muito bem. Podemos copiá-lo novamente. Nós podemos copiar isso, ok. Então, isso vai bem.
Agora podemos copiar isso e colar aqui. OK. Agora faça uma senha e mude para o lado, ok? Como você pode ver, já
temos as linhas de alinhamento. Ok, é apropriado. Em seguida, faremos o login novamente. Você pode simplesmente duplicar esse comando que está sendo
colocado no centro e esse será o seu login Acho que deveria
ser menos colorido. Ok, então eu sugiro
que você o torne mais leve. Ok, isso é bom, e esse login novamente
tornará tudo um pouco leve. OK. Acho que
deveria estar escuro. Sim, isso parece muito legal. O e-mail está pronto,
login com senha, lembra de mim? E agora vem o carrapato. Para fazer o tique-taque,
temos que pegar os dois retângulos em
que estamos aqui Um vai ser assim. Eu ganhei outro. OK. Isso é F 25. OK. Vamos girá-lo. Remova as águas e também podemos girar novamente Isso parece legal, certo? Ok, se você quiser,
podemos estender isso. 27 olharão. Kay, está bem. Vamos selecionar isso
e comandar o grupo G, torná-lo branco. Entendi. Isso está feito? Claro, temos que
torná-lo menor. Não, eu acho que esse bastão
não parece tão prateado, então isso parece legal Er, então essa será a cor branca T. Então, agora o
login da senha por e-mail, lembre-se de que está pronto. Vamos fazer o login novamente. Então eu fiz o comando
D. Esse será o login, do tamanho que eu estou criando. Acho que deveria ser mais grande. Isso está feito. OK. Vamos fazer o lado das três linhas 75 vezes 12. Vamos duplicar
as duas vezes 1,2, remover as Coloque as cores, vamos
buscar mais luz, a sombra. Eu acho que isso é bem maior. Vamos fazer 60 por 50. Veja, na próxima
palestra,
concluiremos as coisas restantes. Obrigada.
5. Aprenda como adicionar mais detalhes no Wireframe de alta fidelidade com a atividade prática: Então, como todos sabemos,
chegamos até aqui. Da mesma forma, podemos simplesmente
copiar e colar tudo. Ok, eu esqueci de
agrupá-los primeiro. Está bem? Você pode ver no lado
esquerdo o retângulo, copiar quatro, copiar três
e o retângulo, podemos apenas agrupar comando G e então podemos
nomeá-lo como barra lateral. Está bem? Ao fazermos isso, será muito fácil simplesmente
copiá-lo e colá-lo aqui. E podemos simplesmente dar uma cor
bonita que combine com o fundo. Claro, vamos
selecionar a cor. mesmo acontece com o segundo, mesmo acontece com o terceiro Da mesma forma, podemos usar um ícone de pesquisa. Basta copiá-lo aqui. E cole. Ok, então tem pasta aqui, então podemos simplesmente movê-la, podemos deixá-la mais branca, é
claro, fica mais bonita. E também aumente
as fronteiras novamente. Vá com isso mais branco. E as fronteiras, aqui vamos nós. Opa, eu não
sabia que
temos uma barra lateral aqui Eles simplesmente o excluíram. Acontece quando copiamos alguma coisa. Como se não percebêssemos que podemos
entrar em qualquer parte
dessa tela de esboço Então, tudo bem. Você só precisa ter muito
cuidado depois disso. Então, vamos lá. Acho que isso está
feito agora, então eu posso, e deixe-me verificar
se está alinhado corretamente Ok, então eu acho que
isso deveria ser mais maior e eu acho que o tamanho deveria ser mais ou menos parecido e fazer com que fosse o tamanho seis. Ok. Isso parece legal. Acho que remova
isso, será mais
compreensível o que pudermos fazer Ok, e também pesquise. Ok, isso está feito. Agora vamos escrever o
login no texto. Podemos fazer uma coisa, podemos aumentar o
tamanho ou algo assim. Sim, isso vai bem. Até 45 vai bem, certo? Sim. Também podemos
mudar a fonte. Ok, isso parece mais bonito. Então, vamos com os preenchimentos. E também podemos colocar
a cor bonita. Podemos aumentar o tamanho. Eu acho que isso parece muito bom. Nós podemos fazer uma coisa. Podemos
agrupar esse retângulo, bem como esse comando de entrada de e-mail Também podemos chamá-lo de e-mail. Podemos agrupar isso,
agrupá-lo e podemos
nomeá-lo como senha. Era um botão de e-mail, certo? Este e-mail de senha. E isso é entrar novamente, podemos agrupar esse botão de
login de dois nomes . Tudo bem, então esses
três estão prontos. Agora podemos ir para a próxima coisa que é lembrar de mim,
esqueci sua senha Não tenho uma conta cadastrada. Então, para isso, vamos
para a próxima palestra. Cubra o restante
na próxima palestra.
6. Hora de finalizar nosso primeiro design de quadro de arame de alta fidelidade: OK. Como podemos ver,
esta página está pronta. Eu diria que a página de login
está completamente pronta. Ok, uma coisa
ainda permanece na fronteira. Vamos fazer a borda, vamos fazer a cor do gradiente Isso ficará mais bonito. Eu preferiria
verde claro de um lado. O que você acha?
Vamos fazer o mesmo então? Senha. OK. Acho que devemos escolher
essa cor diferente. Deste lado será verde e o outro
lado será vermelho. Ok, verde e vermelho. Experimente outra, sim, acho que devemos tentar
outra cor em vez de tentar algo amarelo
brilhante. OK. Acho que isso é
amarelo e está se tornando, e não podemos ver a fronteira. Vamos para a outra cor. Ok, eu acho que isso
parece azul celeste. Tudo bem, vamos lá. Do botão Sang. Agora
acho que estamos quase terminando. Tudo só
tem uma verificação cruzada, ok, e-mail de registro, senha,
tudo está pronto. Como você pode ver, existem
algumas diferenças
entre as quais eu fiz
isso anteriormente e esta. E isso é absolutamente bom. Se você quiser que eu faça
novamente a mesma coisa, vou apenas copiar este texto e vou
colocá-lo sobre o pano de fundo Agora que estamos com o tempo, vimos que esse
fundo é largo, esse texto fica preto. Mas como temos fundo
preto, mantive essas cores brancas e
brilhantes como texto. Então, o que parece bom. Sim, tudo se resumia
à alta fidelidade. E vamos para
a próxima palestra na qual vou
te ensinar a página de inscrição Ok, nos vemos
na próxima palestra.
7. Aprenda como fazer mais um design de quadro de fio de alta fidelidade com atividade prática: Olá e bem-vindo à minha palestra. Nesta palestra, começaremos com
a próxima página Deixe-me te mostrar uma coisa agora. Vamos começar com a segunda página, que
é o registro. Agora você deve ter
entendido que essa também
é uma
tarefa muito fácil, que você pode fazer. Tudo bem, vamos começar a criar
a mesma página de registro. Vá para a prancheta novamente. Selecione iphone 12, Pro Max. Aqui vamos nós. Basta tornar o fundo
preto agora mesmo. Primeiro vamos começar com
os retângulos, ok? Basta duplicá-los. O 123, então faça 300 e faça isso 16. Está bem? Podemos duplicar esse preço 1.3 Então vamos lá Ok, então não somos
obrigados a verificar todo esse espaçamento quando
fazemos assim, quando nos
aproximamos, descobrimos
o espaçamento adequado Da mesma forma, vou mostrar que 1
minuto é o segundo, assim, então ele
virá e parará em 58. Ok, agora estamos recebendo o 58. O tamanho dos
retângulos é de 300 por 16. Agora vamos inserir o texto. Ok, vamos completar
essa parte também. Vamos em D,
vamos fazer com que seja 2060. Agora isso vem no centro. Podemos colorir isso
com a cor brilhante. Novamente, eu
gostaria de escolher vermelho escuro e o resto seria branco. Ok, também se você quiser, você pode fazer as fronteiras. Da mesma forma, primeiro você
precisa aumentar a palavra. Em seguida, selecionei
qual é o gradiente linear, o que eu mais prefiro A cor que estou selecionando
é, novamente, azulada. Deve ser claro porque o fundo é
preto. As cores dos retângulos ou gradientes
que estamos usando devem
ser brilhantes Vamos para o lado laranja. Sim, isso fornecerá
os lados mais brilhantes e brilhantes para
o próximo verde novamente Sim, isso faz com que seja adequado. Sim, eu adorei. Agora, insira o texto,
que é, novamente, uma parte muito simples para T, e então você pode escrever apenas tre. Tudo bem
Coloque-o no centro. Faça o tamanho 50. Ok, mantenha 40, eu acho. Sim, isso parece bom. Você pode até mesmo alterar as fontes. Eu preferiria um preto. Sim, isso dá a versão
escura e grossa. Agora vamos
inserir informações como nome, senha de e-mail
e
confirmar a senha, além de nos inscrever novamente, eu diria que
copie e cole aqui Ok. Não, eu não tenho. Tudo bem Ok. Então, eu diria que você precisa duplicar e você
precisa duplicar isso e podemos colocar isso
e simplesmente anotá-lo Cadastre-se. Ok. Eu acho que isso parece
muito grosso e escuro, legal. Isso parece bom. Agora, novamente, podemos inserir o texto
do nome correto dela. Mas, novamente,
vou escolher este e o tamanho
também deve ser bom. 30 ou eu acho que 25. Sim, acho que está tudo bem. Porque o nome dele,
isso será e-mail. Essa será a senha. Essa mudança está alinhada
corretamente. Ok. E, novamente, comande, desculpe, comande a senha de
confirmação duplicada Agora isso está feito. Acho que tudo
foi configurado corretamente, como nome de registro, e-mail, senha
confirmada, de
e-mail, senha
confirmada,
todos eles são usados corretamente. Agora, a próxima coisa é flecha. Está bem? Então,
vamos pegar a flecha. Para isso, precisamos preencher
um retângulo novamente. O outro pode simplesmente
duplicar isso. Ok, vamos lá. Antes de tudo, remova essa
cor, torne-a branca. Eu acho que isso é rosa, certo? Ok, isso parece legal. E, novamente, as fronteiras.
Remova as bordas. Ok. Agora, basta selecionar
isso também. Desculpe. Agora selecione isso e apenas gire. Parece mais bonito. Basta fazer os cantos arredondados e também essa diversão. Ok, agora eu acho que é muito
bom. Selecione todos os três. Basta fazer o comando G group
e apenas a seta para a direita. Ok, agora essa
flecha também está pronta. Se você quiser, você pode
fazer isso maior. Além disso, você pode simplesmente estender
as linhas ou algo assim
até 21 graus
, para que pareça igual. Você pode anotar novamente 20 graus. E você também pode
fazer mais cantos, cantos
arredondados e
apenas configurá-los corretamente. Tudo bem, vou fazer
isso também um pouco mais redondo. Sim, agora vai.
Bem, vamos lá. Ok, agora que
terminamos , essa seta está
pronta, ela está alinhada corretamente Eu acho que essa cor é boa. Você pode colocar a cor
de sua escolha, mas acho que não é necessário. Parece muito legal. Sim, esta página está pronta.
8. Conclusão: Parabéns e complemente
este curso de estrutura de arame. Agora você tem habilidades
muito legais em
wireframes de baixa e
alta fidelidade. Além disso, você praticou
tanto
no wireframe de potranca baixa quanto na de
alta potranca. Mais importante ainda,
você ganhou confiança para enfrentar
os novos desafios de design Mas espere, ainda não acabou. Basta começar a explorar e
praticar seus designs de interface do usuário. Esse curso pode ter acabado, mas sua jornada de design
está apenas começando.
Saba Faisal
